New: Frameless window (Full only in Windows and macOS)

Author: ollm

package.json

@@ -23,7 +23,7 @@
 		"url": "git+https://github.com/ollm/OpenComic.git"
 	},
 	"scripts": {
-		"start": "npm run prebuild && electron --trace-warnings --enable-logging scripts/main.js",
+		"start": "npm run prebuild && electron scripts/main.js",
 		"rebuild": "electron-rebuild -f -w sharp",
 		"rebuild2": "electron-builder node-gyp-rebuild",
 		"prebuild": "node scripts/build.js && node themes/material-design/colors/generate-colors.js && node languages/fill-languages.js",
@@ -87,7 +87,7 @@
 	},
 	"devDependencies": {
 		"@electron/rebuild": "^3.2.13",
-		"electron": "^27.0.0",
+		"electron": "^25.9.1",
 		"electron-builder": "^24.6.3",
 		"node-abi": "^3.46.0",
 		"node-yaml": "^4.0.1",

scripts/dom.js

@@ -1257,6 +1257,8 @@ function nightMode()
 		handlebarsContext.nightMode = true;
 		storage.updateVar('config', 'nightMode', true);
 	}
+
+	titleBar.setColors();
 }
 
 // Show the comic context menu

scripts/dom/search.js

@@ -354,8 +354,8 @@ function setResults(results)
 
 	let height = (len * 56);
 
-	if(height > window.innerHeight - 136)
-		height = window.innerHeight - 136;
+	if(height > window.innerHeight - 136 - titleBar.height())
+		height = window.innerHeight - 136 - titleBar.height();
 
 	searchBarResults.style.height = height+'px';
 	searchBarResults.innerHTML = template.load('search.results.html');

scripts/gamepad.js

@@ -786,12 +786,7 @@ setButtonEvent('fullscreen', 11, function(key) {
 
 	if(!onReading)
 	{
-		let win = electronRemote.getCurrentWindow();
-		let isFullScreen = win.isFullScreen();
-
-		reading.hideContent(!isFullScreen);
-		win.setFullScreen(!isFullScreen);
-		win.setMenuBarVisibility(isFullScreen);
+		fullScreen();
 	}
 
 });

scripts/main.js

@@ -40,6 +40,13 @@ function createWindow() {
 			backgroundThrottling: false,
 			nativeWindowOpen: false,
 		},
+		titleBarStyle: 'hidden',
+		titleBarOverlay: {
+			color: '#242a3000',
+			symbolColor: '#c2c7cf',
+			height: 29,
+		},
+		backgroundColor: '#242a30',
 		//icon: __dirname + '/icon.svg',
 	});
 
@@ -59,8 +66,6 @@ function createWindow() {
 	var menu = Menu.buildFromTemplate(menuTemplate);
 	win.setMenu(menu);
 
-	// win.webContents.openDevTools();
-
 	win.removeMenu();
 
 	// and load the index.html of the app.

scripts/opencomic.js

@@ -9,6 +9,21 @@ window.onerror = function(msg, url, linenumber) {
 
 }*/
 
+function fullScreen(force = null)
+{
+	if(force === null)
+	{
+		win = electronRemote.getCurrentWindow();
+		force = !win.isFullScreen();
+	}
+
+	titleBar.setFullScreen(force);
+
+	reading.hideContent(force);
+	win.setFullScreen(force);
+	// win.setMenuBarVisibility(!force);
+}
+
 document.addEventListener("keydown", event => {
 
 	if(event.key == 'Escape')
@@ -18,9 +33,7 @@ document.addEventListener("keydown", event => {
 
 		if(isFullScreen)
 		{
-			reading.hideContent(false);
-			win.setFullScreen(false);
-			win.setMenuBarVisibility(true);
+			fullScreen(false);
 		}
 		else
 		{
@@ -223,6 +236,7 @@ const app = require(p.join(appDir, 'scripts/app.js')),
 	queue = require(p.join(appDir, 'scripts/queue.js')),
 	templates = require(p.join(appDir, 'scripts/builded/templates.js')),
 	template = require(p.join(appDir, 'scripts/template.js')),
+	titleBar = require(p.join(appDir, 'scripts/title-bar.js')),
 	gamepad = require(p.join(appDir, 'scripts/gamepad.js')),
 	dom = require(p.join(appDir, 'scripts/dom.js')),
 	events = require(p.join(appDir, 'scripts/events.js')),
@@ -261,6 +275,9 @@ window.onload = function() {
 
 		template.loadInQuery('body', 'body.html');
 
+		titleBar.start();
+		titleBar.setColors();
+
 		startApp();
 
 	});
@@ -364,11 +381,7 @@ async function startApp()
 			let isFullScreen = win.isFullScreen();
 
 			if(!isFullScreen)
-			{
-				reading.hideContent(true);
-				win.setFullScreen(true);
-				win.setMenuBarVisibility(false);
-			}
+				fullScreen(true);
 		}
 
 		$('body .app').css('display', 'block');
@@ -611,7 +624,7 @@ function generateAppMenu(force = false)
 					{label: language.menu.file.addFile, click: function(){addComic()}},
 					{label: language.menu.file.addFolder, click: function(){addComic(true)}},
 					{type: 'separator'},
-					{role: 'quit', label: language.menu.file.quit},
+					{role: 'quit', label: language.menu.file.quit, click: function(){electronRemote.getCurrentWindow().close();}},
 				]
 			},
 			{
@@ -622,7 +635,7 @@ function generateAppMenu(force = false)
 					{label: language.menu.view.zoomIn, click: function(){zoomIn(); generateAppMenu();}, accelerator: 'CmdOrCtrl+=', visible: false, acceleratorWorksWhenHidden: true},
 					{label: language.menu.view.zoomOut, click: function(){zoomOut(); generateAppMenu();}, accelerator: 'CmdOrCtrl+-'},
 					{type: 'separator'},
-					{label: language.menu.view.toggleFullScreen, click: function(){var win = electronRemote.getCurrentWindow(); reading.hideContent(!win.isFullScreen()); win.setFullScreen(!win.isFullScreen()); win.setMenuBarVisibility(!win.isFullScreen());}, accelerator: 'F11'},
+					{label: language.menu.view.toggleFullScreen, click: function(){fullScreen();}, accelerator: 'F11'},
 				]
 			},
 			{
@@ -638,9 +651,9 @@ function generateAppMenu(force = false)
 			{
 				label: language.menu.debug.main,
 				submenu: [
-					{role: 'reload', label: language.menu.debug.reload},
-					{role: 'forceReload', label: language.menu.debug.forceReload},
-					{role: 'toggleDevTools', label: language.menu.debug.toggleDevTools},
+					{label: language.menu.debug.reload, click: function(){electronRemote.getCurrentWindow().webContents.reload();}, accelerator: 'CmdOrCtrl+R'},
+					{label: language.menu.debug.forceReload, click: function(){electronRemote.getCurrentWindow().webContents.reloadIgnoringCache();}, accelerator: 'CmdOrCtrl+Shift+R'},
+					{label: language.menu.debug.toggleDevTools, click: function(){electronRemote.getCurrentWindow().webContents.toggleDevTools();}, accelerator: 'CmdOrCtrl+Shift+I'},
 				]
 			},
 			{
@@ -656,7 +669,8 @@ function generateAppMenu(force = false)
 
 		var menu = electronRemote.Menu.buildFromTemplate(menuTemplate);
 		currentWindow.setMenu(menu);
-		// currentWindow.setMenuBarVisibility(false);
+		currentWindow.setMenuBarVisibility(false);
+		titleBar.setMenu(menuTemplate);
 	}
 }
 

scripts/reading.js

@@ -1903,7 +1903,7 @@ function notCrossZoomLimits(x, y, scale = false)
 	else if(y < minY)
 		y = minY;
 
-	return {x: x, y: y, maxX: maxX, maxY: maxY};
+	return {x: x, y: y, maxX: maxX, maxY: maxY, height: indexSize.height, width: indexSize.width};
 }
 
 // Drag zoom
@@ -1962,12 +1962,13 @@ function startScrollWithMouse()
 	if(config.readingScrollWithMouse)
 	{
 		let content = template._contentRight().firstElementChild;
+		let rect = template._barHeader().getBoundingClientRect();
 
 		scrollWithMouseStatus = {
 			active: true,
 			content: content,
 			scrollTop: content.scrollTop,
-			headerHeight: template._barHeader().getBoundingClientRect().height,
+			headerHeight: rect.height + rect.top,
 		};
 
 		scrollWithMouse();
@@ -3264,6 +3265,7 @@ function pointermove(event)
 				let widthM = contentRightRect.width / 2;
 				let heightM = contentRightRect.height / 2;
 
+				// Calculate multipler (1.5) from withLimits.height and withLimits.width
 				let x = -(pageX - zoomMoveData.x) * (withLimits.maxX / widthM * 1.5);
 				let y = -(pageY - zoomMoveData.y) * (withLimits.maxY / heightM * 1.5);
 
@@ -3451,7 +3453,7 @@ function pointermove(event)
 			contentLeftRect = template._contentLeft().getBoundingClientRect();
 		}
 
-		if(shownBarHeader && pageY > barHeaderRect.height + 48)
+		if(shownBarHeader && pageY > barHeaderRect.height + titleBar.height() + 48 && !document.querySelector('.menu-simple.a'))
 		{
 			clearTimeout(hideContentST);
 

scripts/shortcuts.js

@@ -226,16 +226,8 @@ function loadShortcuts()
 				fullscreen: {
 					name: language.menu.view.toggleFullScreen,
 					function: function(){
-
 						if(inputIsFocused()) return false;
-
-						let win = electronRemote.getCurrentWindow();
-						let isFullScreen = win.isFullScreen();
-
-						reading.hideContent(!isFullScreen);
-						win.setFullScreen(!isFullScreen);
-						win.setMenuBarVisibility(isFullScreen);
-
+						fullScreen();
 						return true;
 					},
 				},

scripts/theme.js

@@ -27,6 +27,8 @@ function setColor(color)
 	app.classList.add(color);
 
 	storage.updateVar('config', 'themeColor', color);
+
+	titleBar.setColors();
 }
 
 function start()