New: Custom keyboard and gamepad shortcuts

CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Reload button in file list [`31675a5`](https://github.com/ollm/OpenComic/commit/31675a5a8334abedc056a09a5107f718dc5304e0)
 - Check if there is a new version when starting OpenComic [`82f1abd`](https://github.com/ollm/OpenComic/commit/82f1abdac5c1ae6f26e88f5f2374c54edcfcaae7)
+- Custom keyboard and gamepad shortcuts
 
 ### 🐛 Bug Fixes
 

languages/ca.json

@@ -98,6 +98,7 @@
 		"currentReading": "Lectura actual"
 	},
 	"settings": {
+		"general": "General",
 		"reading": {
 			"main": "Preferències de lectura",
 			"maxMargin": "Marge horitzontal i vertical màxim",
@@ -116,6 +117,22 @@
 			"main": "Comprovar noves versions",
 			"checkReleases": "Comprovar si hi ha una nova versió en iniciar OpenComic",
 			"checkPreReleases": "Mostrar versions preliminars (versions beta/alfa)"
+		},
+		"shortcuts": {
+			"main": "Dreceres",
+			"keyboard": "Teclat",
+			"whenReading": "A l'hora de llegir",
+			"gamepadMenu": "Menú del comandament",
+			"useGamepad": "Fes servir un comandament per canviar l'acció",
+			"restoreDefaults": "Restaurar valors per defecte",
+			"action": "Acció",
+			"key1": "Tecla 1",
+			"key2": "Tecla 2",
+			"key3": "Tecla 3",
+			"key4": "Tecla 4",
+			"key5": "Tecla 5",
+			"gamepad1": "Botó 1",
+			"gamepad2": "Botó 2"
 		}
 	},
 	"menu": {

languages/en.json

@@ -98,6 +98,7 @@
 		"currentReading": "Current reading"
 	},
 	"settings": {
+		"general": "General",
 		"reading": {
 			"main": "Reading preferences",
 			"maxMargin": "Maximum horizontal and vertical margin",
@@ -116,6 +117,22 @@
 			"main": "Check for new versions",
 			"checkReleases": "Check if there is a new version when starting OpenComic",
 			"checkPreReleases": "Show pre-release versions (beta/alpha versions)"
+		},
+		"shortcuts": {
+			"main": "Shortcuts",
+			"keyboard": "Keyboard",
+			"whenReading": "When reading",
+			"gamepadMenu": "Gamepad menu",
+			"useGamepad": "Use a gamepad to change the action",
+			"restoreDefaults": "Restore default values",
+			"action": "Action",
+			"key1": "Key 1",
+			"key2": "Key 2",
+			"key3": "Key 3",
+			"key4": "Key 4",
+			"key5": "Key 5",
+			"gamepad1": "Button 1",
+			"gamepad2": "Button 2"
 		}
 	},
 	"menu": {

languages/es.json

@@ -98,6 +98,7 @@
 		"currentReading": "Lectura actual"
 	},
 	"settings": {
+		"general": "General",
 		"reading": {
 			"main": "Preferencias de lectura",
 			"maxMargin": "Margen horizontal y vertical máximo",
@@ -109,13 +110,29 @@
 			"showFullPathOpened": "Mostrar la ruta completa al abrir un archivo o carpeta"
 		},
 		"others": {
-			"main": "Otras ajustes",
+			"main": "Otros ajustes",
 			"startInFullScreen": "Inicial OpenComic en pantalla completa"
 		},
 		"releases": {
 			"main": "Comprobar nuevas versiones",
 			"checkReleases": "Comprobar si existe una nueva versión al iniciar OpenComic",
 			"checkPreReleases": "Mostrar versiones preliminares (versiones beta/alfa)"
+		},
+		"shortcuts": {
+			"main": "Atajos",
+			"keyboard": "Teclado",
+			"whenReading": "Al leer",
+			"gamepadMenu": "Menú del mando",
+			"useGamepad": "Utiliza un mando para cambiar la acción",
+			"restoreDefaults": "Restaurar valores por defecto",
+			"action": "Acción",
+			"key1": "Tecla 1",
+			"key2": "Tecla 2",
+			"key3": "Tecla 3",
+			"key4": "Tecla 4",
+			"key5": "Tecla 5",
+			"gamepad1": "Botón 1",
+			"gamepad2": "Botón 2"
 		}
 	},
 	"menu": {

package.json

@@ -3,6 +3,7 @@
 	"productName": "OpenComic",
 	"version": "1.0.0-beta.2",
 	"main": "scripts/main.js",
+	"type": "commonjs",
 	"keywords": [
 		"comics",
 		"manga",
@@ -22,7 +23,7 @@
 		"url": "git+https://github.com/ollm/OpenComic.git"
 	},
 	"scripts": {
-		"start": "npm run prebuild && electron --trace-warnings scripts/main.js",
+		"start": "npm run prebuild && electron --trace-warnings --enable-logging 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",
@@ -71,13 +72,14 @@
 		"pdfjs-dist": "^3.8.162",
 		"sha1": "^1.1.1",
 		"sharp": "^0.32.4",
+		"shosho": "^1.4.2",
 		"tar-fs": "^3.0.4",
 		"unrar": "^0.2.0",
 		"unzipper": "^0.10.14"
 	},
 	"devDependencies": {
 		"@electron/rebuild": "^3.2.13",
-		"electron": "^25.5.0",
+		"electron": "^27.0.0-alpha.2",
 		"electron-builder": "^24.6.3",
 		"node-abi": "^3.46.0",
 		"nodemon": "^3.0.1"

scripts/dom.js

@@ -735,6 +735,7 @@ async function loadIndexPage(animation = true, path = false, content = false, ke
 
 	justifyViewModule();
 
+	shortcuts.register('browse');
 	gamepad.updateBrowsableItems(path ? sha1(path) : 'library');
 
 	$(window).off('resize').on('resize', function(){
@@ -1061,6 +1062,7 @@ function loadLanguagesPage(animation = true)
 	floatingActionButton(false);
 
 	events.events();
+	gamepad.updateBrowsableItems('languagesPage');
 
 	if(readingActive)
 		readingActive = false;
@@ -1524,13 +1526,14 @@ async function openComic(animation = true, path = true, mainPath = true, end = f
 
 	generateAppMenu();
 
+	shortcuts.register('reading');
 	gamepad.updateBrowsableItems('reading-'+sha1(path));
 }
 
 // Gamepad events
 gamepad.setButtonEvent('reading', 1, function(key, button) {
 
-	if(key == 1)
+	if(key == 1 && !onReading)
 		gamepad.goBack();
 
 });

scripts/drag-and-drop.js

@@ -9,6 +9,8 @@ function showDropZone(event)
 	clearTimeout(hideDropZoneST);
 	clearTimeout(showDropZoneST);
 
+	allowDrag(event);
+
 	let dropZone = document.querySelector('.drop-zone');
 
 	if(!dragAndDropStarted)
@@ -61,10 +63,10 @@ function hideDropZone(event, force = false)
 
 }
 
-function checkDragPosition()
+function allowDrag(event)
 {
-	event.dataTransfer.dropEffect = 'link';
 	event.preventDefault();
+	event.dataTransfer.dropEffect = 'link';
 }
 
 function handleDrop(event)
@@ -106,7 +108,7 @@ function start()
 {
 	app.event(window, 'dragenter', showDropZone);
 	app.event(window, 'dragleave', hideDropZone);
-	app.event(window, 'dragover', checkDragPosition);
+	app.event(window, 'dragover', allowDrag);
 	app.event(window, 'drop', handleDrop);
 
 	app.event(document, 'mouseenter', function(event){

scripts/events.js

@@ -1,5 +1,66 @@
 var buttonCancel, buttonPulsed;
 
+function eventsTab()
+{
+	app.event('.big-tabs > div > div', 'click', _eventsTab, {capture: false});
+
+	let tabs = document.querySelectorAll('.big-tabs > div > div');
+
+	for(let i = 0, len = tabs.length; i < len; i++)
+	{
+		tabs[i].dataset.index = i;
+	}
+}
+
+var eventsTabST = false;
+
+function _eventsTab(event)
+{
+	if(!this.classList.contains('active') && !eventsTabST)
+	{
+		let current = this.parentElement.querySelector('.active');
+		let currentIndex = +current.dataset.index;
+		let currentName = current.dataset.name;
+
+		let index = +this.dataset.index;
+		let name = this.dataset.name;
+		let onEndAnimation = this.dataset.onEndAnimation;
+
+		current.classList.remove('active');
+		this.classList.add('active');
+
+
+		let contentRight = template._contentRight();
+
+		let currentContent = contentRight.querySelector('.big-tabs-content .big-tabs-'+currentName);
+		let content = contentRight.querySelector('.big-tabs-content .big-tabs-'+name);
+
+		let classShow = currentIndex > index ? 'show-from-left' : 'show-from-right';
+		let classRemove = currentIndex > index ? 'hide-to-right' : 'hide-to-left';
+
+		currentContent.classList.add(classRemove, 'show');
+		currentContent.classList.remove('active');
+
+		eventsTabST = setTimeout(function(){
+
+			content.classList.add(classShow, 'active');
+
+			eventsTabST = setTimeout(function(){
+
+				content.classList.remove(classShow);
+				currentContent.classList.remove(classRemove, 'show');
+
+				if(onEndAnimation)
+					eval(onEndAnimation);
+
+				eventsTabST = false;
+
+			}, 250);
+
+		}, 250);
+	}
+}
+
 function eventButton()
 {
 
@@ -179,16 +240,32 @@ function rangePosition(input, range)
 
 	if(step && (max - min) / step < 60) // Only show steps if has less 60
 	{
+		let rangeSteps = range.querySelectorAll('.range-steps > div');
+		let len = rangeSteps.length;
+
 		let total = Math.round((max - min) / step);
-		let steps = '';
 
-		for(let i = 0; i <= total; i++)
+		if(len > 0)
 		{
-			let stepValue = i * step;
-			steps += '<div'+(stepValue > (value - min) ? '' : ' class="active"')+' style="left: '+(i / total * 100)+'%"></div>';
+			for(let i = 0; i < len; i++)
+			{
+				if(i * step > (value - min))
+					rangeSteps[i].classList.remove('active');
+				else
+					rangeSteps[i].classList.add('active');
+			}
 		}
+		else
+		{
+			let steps = '';
 
-		range.querySelector('.range-steps').innerHTML = steps;
+			for(let i = 0; i <= total; i++)
+			{
+				steps += '<div'+(i * step > (value - min) ? '' : ' class="active"')+' style="left: '+(i / total * 100)+'%"></div>';
+			}
+
+			range.querySelector('.range-steps').innerHTML = steps;
+		}
 	}
 }
 
@@ -254,6 +331,7 @@ function events()
 	eventButton();
 	eventSwitch();
 	eventRange();
+	eventsTab();
 }
 
 function showHoverText()