New: Custom mouse wheel shortcuts

Author: ollm

CHANGELOG.md

@@ -21,6 +21,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - OPDS support [`b72f32f`](https://github.com/ollm/OpenComic/commit/b72f32f2445b90f13f5e2cc45865c2c17a72af82)
 - Button to enable/disable full screen from the more options menu [`5d2ac36`](https://github.com/ollm/OpenComic/commit/5d2ac367c61da97d04cd67526470fb7885c1b3bf)
 - Show package versions in About OpenComic [`888d9ba`](https://github.com/ollm/OpenComic/commit/888d9ba2e23241b1868b6a360e7bca1a0bef9586)
+- Custom mouse wheel shortcuts
 
 ##### 🐛 Bug Fixes
 

scripts/app.js

@@ -263,6 +263,62 @@ function _encodeSrcURI(path)
 	return /^blob/.test(path) ? path : encodeSrcURI(path);
 }
 
+var transitionPrev = {};
+
+// This need to be improved to smooth transitions
+function transition(key, transition = 0) 
+{
+	const seconds = transition < 50 ? true : false;
+
+	transition = seconds ? transition * 1000 : transition;
+	let _function = 'ease';
+
+	const now = performance.now();
+	const prev = transitionPrev[key] || 0;
+	transitionPrev[key] = now;
+
+	if(prev && now - prev < transition)
+	{
+		transition = now - prev;
+		_function = 'linear';
+	}
+
+	return {
+		speed: seconds ? transition / 1000 : transition,
+		function: _function,
+	};
+}
+
+function scrollTransition(key, transition = 0)
+{
+	const seconds = transition < 50 ? true : false;
+	transition = transition ? 200 : 0;
+
+	let _function = 'cubic-bezier(0.42, 0, 0.58, 1)';
+
+	const now = performance.now();
+	const prev = transitionPrev[key] || 0;
+	transitionPrev[key] = now;
+
+	if(prev && now - prev < transition)
+	{
+		transition = now - prev;
+		if(transition < 80) transition = 80;
+
+		_function = 'linear';
+	}
+
+	return {
+		speed: seconds ? transition / 1000 : transition,
+		function: _function,
+	};
+}
+
+function scrollAnimation()
+{
+
+}
+
 var throttles = {};
 var debounces = {};
 
@@ -338,6 +394,9 @@ module.exports = {
 	sleep: sleep,
 	setImmediate: setImmediate,
 	setThrottle: setThrottle,
+	transition: transition,
+	scrollTransition: scrollTransition,
+	scrollAnimation: scrollAnimation,
 	shortWindowsPath: _shortWindowsPath,
 	encodeSrcURI: _encodeSrcURI,
 };

scripts/dom/header.js

@@ -24,6 +24,12 @@ function wheel(event)
 	}, 160);
 
 	$(this).stop(true).animate({scrollLeft: scrollLeft+'px'}, 160, 'linear');
+
+	/*this.scrollTo({
+		top: 0,
+		left: scrollLeft,
+		behavior: 'smooth',
+	});*/
 }
 
 async function event()

scripts/migration.js

@@ -90,6 +90,27 @@ function migrateControllerDeadZone(data)
 	return data;
 }
 
+function migrateMouseWheelEvents(data)
+{
+	if(data.shortcuts.reading.actionsConfigured.length) // Has custom shortcuts
+	{
+		const shortcuts = data.shortcuts.reading.shortcuts;
+
+		shortcuts['MouseUp'] = data.config.readingTurnPagesWithMouseWheel ? 'prev' : 'zoomIn';
+		shortcuts['MouseDown'] = data.config.readingTurnPagesWithMouseWheel ? 'next' : 'zoomOut';
+		shortcuts['Ctrl+MouseUp'] = 'zoomIn';
+		shortcuts['Ctrl+MouseDown'] = 'zoomOut';
+		shortcuts['Shift+MouseUp'] = 'zoomUp';
+		shortcuts['Shift+MouseDown'] = 'zoomDown';
+		shortcuts['Shift+MouseLeft'] = 'zoomLeft';
+		shortcuts['Shift+MouseRight'] = 'zoomRight';
+		shortcuts['Alt+MouseUp'] = 'prev';
+		shortcuts['Alt+MouseDown'] = 'next';
+	}
+
+	return data;
+}
+
 function start(data)
 {
 	let changes = data.config.changes;
@@ -108,6 +129,9 @@ function start(data)
 	if(changes < 99) // Change controllerDeadZone to gamepadDeadZone
 		data = migrateControllerDeadZone(data);
 
+	if(changes < 103) // Add the new mouse wheel events
+		data = migrateMouseWheelEvents(data);
+
 	data = opds.addNewDefaultCatalogs(data, changes);
 
 	return data;

scripts/reading.js

@@ -1349,7 +1349,7 @@ function goToIndex(index, animation = true, nextPrevious = false, end = false)
 		currentZoomIndex = false;
 		currentScale = _currentScale;
 		reading.applyScale(false, _currentScale, true, _currentScale > 1 ? false : true);
-		zoomMove(0, readingDirection ? 99999 : -99999);
+		if(animation) zoomMove(0, readingDirection ? 99999 : -99999);
 	}
 
 	//goToImageCL(imagesDistribution[eIndex-1][0].index, animation);
@@ -2287,54 +2287,58 @@ function zoomScrollHeight()
 }
 
 // Zoom in
-function zoomIn(animation = true, center = false)
+function zoomIn(animation = true, center = false, delta = 120)
 {
 	if(zoomMoveData.active)
 		return;
 
+	const multipler = 0.25 * (delta / 120);
+
 	if(currentScale < 8)
-		currentScale *= 1.25;
+		currentScale *= 1 + multipler;
 
 	applyScale(animation, currentScale, center);
 }
 
 // Zoom out
-function zoomOut(animation = true, center = false)
+function zoomOut(animation = true, center = false, delta = 120)
 {
 	if(zoomMoveData.active)
 		return;
 
+	const multipler = 0.25 * (delta / 120);
+
 	if(currentScale > 0.2)
-		currentScale /= 1.25;
+		currentScale /= 1 + multipler;
 
 	applyScale(animation, currentScale, center, true);
 }
 
-function zoomUp()
+function zoomUp(delta = 20, animation = false)
 {
-	zoomMove(0, 20);
+	zoomMove(0, delta, animation);
 }
 
-function zoomDown()
+function zoomDown(delta = 20, animation = false)
 {
-	zoomMove(0, -20);
+	zoomMove(0, -delta, animation);
 }
 
-function zoomLeft()
+function zoomLeft(delta = 20, animation = false)
 {
-	zoomMove(-20, 0);
+	zoomMove(-delta, 0, animation);
 }
 
-function zoomRight()
+function zoomRight(delta = 20, animation = false)
 {
-	zoomMove(20, 0);
+	zoomMove(delta, 0, animation);
 }
 
-function zoomMove(x = 0, y = 0)
+function zoomMove(x = 0, y = 0, animation = false)
 {
 	if(!haveZoom) return;
 
-	dragZoom(x, y);
+	dragZoom(x, y, animation);
 	dragZoomEnd(true);
 }
 
@@ -2537,9 +2541,10 @@ function notCrossZoomLimits(x, y, scale = false)
 }
 
 // Drag zoom
-function dragZoom(x, y)
+function dragZoom(x, y, animation = false)
 {
-	let withLimits = notCrossZoomLimits(scalePrevData.tranX2 + x, scalePrevData.tranY2 + y);
+	const transition = animation ? app.scrollTransition('dragZoom', _config.readingViewSpeed) : 0;
+	const withLimits = notCrossZoomLimits(scalePrevData.tranX2 + x, scalePrevData.tranY2 + y);
 
 	const diff = {
 		x: (scalePrevData.tranX2 + x) - withLimits.x,
@@ -2549,15 +2554,15 @@ function dragZoom(x, y)
 	x = withLimits.x;
 	y = withLimits.y;
 
-	let contentRight = template._contentRight();
+	const contentRight = template._contentRight();
 
 	if(config.readingGlobalZoom && readingViewIs('scroll'))
 	{
 		scalePrevData.tranX = zoomMoveData.tranX = x;
 		zoomMoveData.tranY = scalePrevData.tranY;
 
 		dom.this(contentRight).find('.reading-body > div').css({
-			transition: 'transform 0s, z-index 0s',
+			transition: 'transform '+transition.speed+'s '+transition.function+', z-index 0s',
 			transform: 'translateX('+app.roundDPR(x)+'px) translateY('+app.roundDPR(scalePrevData.tranY)+'px) scale('+scalePrevData.scale+')',
 			transformOrigin: 'top center',
 		});
@@ -2568,7 +2573,7 @@ function dragZoom(x, y)
 		zoomMoveData.tranY = y;
 
 		dom.this(contentRight).find('.image-position'+currentZoomIndex, true).css({
-			transition: 'transform 0s, z-index 0s',
+			transition: 'transform '+transition.speed+'s '+transition.function+', z-index 0s',
 			transform: 'translateX('+app.roundDPR(x)+'px) translateY('+app.roundDPR(y)+'px) scale('+scalePrevData.scale+')',
 			transformOrigin: 'center center',
 		});
@@ -4894,33 +4899,14 @@ async function read(path, index = 1, end = false, isCanvas = false, isEbook = fa
 	});
 	onLoadPromise = {promise: promise, resolve: resolve};
 
-	template.contentRight().on('mousewheel', function(e) {
+	template.contentRight().on('mousewheel', function(event) {
 
 		if(onReading && isLoaded)
 		{
-			if(config.readingTurnPagesWithMouseWheel && !e.originalEvent.ctrlKey && !readingViewIs('scroll'))
-			{
-				e.preventDefault();
-				
-				if(e.originalEvent.wheelDelta / 120 > 0)
-					reading.goPrev();
-				else
-					reading.goNext();
-			}
-			else if(e.originalEvent.ctrlKey || !readingViewIs('scroll'))
-			{
-				e.preventDefault();
+			const oEvent = event.originalEvent;
 
-				if(e.originalEvent.wheelDelta / 120 > 0)
-					reading.zoomIn();
-				else
-					reading.zoomOut();
-			}
-			else
-			{
-				if(reading.scrollNextOrPrevComic(e.originalEvent.wheelDelta / 120 > 0, true))
-					e.preventDefault();
-			}
+			if(readingViewIs('scroll') && !oEvent.altKey && !oEvent.metaKey && !oEvent.ctrlKey && !oEvent.shiftKey && reading.scrollNextOrPrevComic(oEvent.wheelDelta / 120 > 0, true))
+				event.preventDefault();
 		}
 
 	});

scripts/settings.js

@@ -652,6 +652,8 @@ function changeShortcut(action, current, This)
 
 		generateShortcutsTable(gamepad.currentHighlightItem());
 
+		events.events();
+
 		setTimeout(function(){recording = false}, 100);
 
 	});
@@ -662,6 +664,8 @@ function removeShortcut(action, current)
 	shortcuts.change('reading', action, current, '');
 
 	generateShortcutsTable(gamepad.currentHighlightItem());
+
+	events.events();
 }
 
 function changeButton(action, current, This)