New: Implement header scrolling functionality

Author: ollm

CHANGELOG.md

@@ -17,6 +17,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Shortcuts for saving images [`05c9b31`](https://github.com/ollm/OpenComic/commit/05c9b315788fec63aee2333b0bfb0588cfcf536a)
 - Personalize save images template and save automatically to custom folder [`47e8de7`](https://github.com/ollm/OpenComic/commit/47e8de7b73b1ec354000c1455ff651039abd49e1)
 - Multiple poster/folder sizes [`c64222a`](https://github.com/ollm/OpenComic/commit/c64222a1b697f6de3f64f0ed79f1a7f293337bcf)
+- Implement header scrolling functionality
 
 ##### 🐛 Bug Fixes
 

scripts/dom.js

@@ -3,6 +3,7 @@ const domPoster = require(p.join(appDir, 'scripts/dom/poster.js')),
 	labels = require(p.join(appDir, 'scripts/dom/labels.js')),
 	fileInfo = require(p.join(appDir, 'scripts/dom/file-info.js')),
 	search = require(p.join(appDir, 'scripts/dom/search.js')),
+	header = require(p.join(appDir, 'scripts/dom/header.js')),
 	boxes = require(p.join(appDir, 'scripts/dom/boxes.js'));
 
 /*Page - Index*/
@@ -2629,6 +2630,7 @@ module.exports = {
 	labels: labels,
 	fileInfo: fileInfo,
 	boxes: boxes,
+	header: header,
 	this: domManager.this,
 	query: domManager.query,
 	queryAll: domManager.queryAll,

scripts/dom/header.js

@@ -0,0 +1,40 @@
+let wheelST = false;
+
+function wheel(event)
+{
+	const self = this;
+
+	event.preventDefault();
+	event.stopPropagation();
+
+	let scrollLeft = (+this.dataset.scrollLeft || this.scrollLeft);
+
+	console.log(scrollLeft);
+
+	if(event.wheelDelta / 120 > 0)
+		scrollLeft -= 120;
+	else
+		scrollLeft += 120;
+
+	this.dataset.scrollLeft = scrollLeft;
+
+	clearTimeout(wheelST);
+	wheelST = setTimeout(function(){
+
+		self.dataset.scrollLeft = '';
+
+	}, 160);
+
+	$(this).stop(true).animate({scrollLeft: scrollLeft+'px'}, 160, 'linear');
+}
+
+async function event()
+{
+	await app.sleep(100);
+
+	app.event('.bar-title, .bar-right-buttons', 'mousewheel', wheel);
+}
+
+module.exports = {
+	event: event,
+};

scripts/reading.js

@@ -1150,9 +1150,6 @@ function goScrollPercent(screenPercent = 50, animation = true)
 		const now = Date.now();
 		const prevNow = +content.dataset.now;
 
-		if(now - prevNow < animationDurationMS)
-			animationDurationMS = (now - prevNow);
-
 		const scrollHeight = content.scrollHeight - rect.height;
 		let scrollTop = (+content.dataset.scrollTop || content.scrollTop) + (screenPercent / 100 * rect.height);
 
@@ -1172,7 +1169,7 @@ function goScrollPercent(screenPercent = 50, animation = true)
 
 		}, animationDurationMS);
 
-		$(content).stop(true).animate({scrollTop: scrollTop+'px'}, animationDurationMS);
+		$(content).stop(true).animate({scrollTop: scrollTop+'px'}, animationDurationMS, ((now - prevNow) < animationDurationMS ? 'linear' : 'swing'));
 	}
 }
 

scripts/template.js

@@ -116,6 +116,8 @@ function changeHeader(html, animation = true)
 	}, 300, headerZindex);
 
 	headerZindex++;
+
+	dom.header.event();
 }
 
 function loadHeader(template, animation)