New feature: mediaBrowse by wheel (#3606)

lib/css/modules/_wheelBrowse.css

@@ -0,0 +1,18 @@
+.res-wheel-media-browse {
+	position: relative;
+	width: 30px;
+	height: 16px;
+	margin-left: 4px;
+	border-radius: 5px;
+	cursor: crosshair;
+	background-color: rgba(0, 0, 0, 0.24);
+	overflow: hidden;
+
+	&-gallery {
+		position: absolute;
+		width: 50%;
+		height: 100%;
+		right: 0;
+		background-color: rgba(255, 0, 0, 0.24);
+	}
+}

lib/css/res.scss

@@ -40,6 +40,7 @@
 @import 'modules/userInfo';
 @import 'modules/userTagger';
 @import 'modules/voteEnhancements';
+@import 'modules/wheelBrowse';
 
 body.res-console-open {
 	overflow: hidden;

lib/modules/wheelBrowse.js

@@ -0,0 +1,73 @@
+/* @flow */
+
+import { $ } from '../vendor';
+import { Module } from '../core/module';
+import * as Floater from './floater';
+import * as KeyboardNav from './keyboardNav';
+import * as SelectedEntry from './selectedEntry';
+import * as SettingsNavigation from './settingsNavigation';
+
+export const module: Module<*> = new Module('wheelBrowse');
+
+module.moduleName = 'wheelBrowseName';
+module.category = 'browsingCategory';
+module.description = 'wheelBrowseDesc';
+module.include = [
+	'linklist',
+];
+
+module.go = () => {
+	const wheelBrowseWidget = $('<div class="res-wheel-media-browse"></div>')
+		.click(() => SettingsNavigation.loadSettingsPage(module.moduleID))
+		.get(0);
+	const galleryPart = $('<div hidden class="res-wheel-media-browse-gallery"></div>')
+		.appendTo(wheelBrowseWidget)
+		.get(0);
+
+	function updateGalleryPart(selected = SelectedEntry.selectedThing(), scrollDirection) {
+		const expando = selected && selected.getEntryExpando();
+
+		galleryPart.hidden = !(
+			expando &&
+			expando.media &&
+			expando.media.classList.contains('res-gallery-slideshow') &&
+			(
+				!scrollDirection ||
+				( // Do not show the gallery scroll widget when at the end of the gallery
+					!(scrollDirection === 'down' && expando.media.querySelector('[last-piece=true]')) &&
+					!(scrollDirection === 'up' && expando.media.querySelector('[first-piece=true]'))
+				)
+			)
+		);
+	}
+
+	let isSelectionCause = false;
+
+	function scrollWidget(target, scrollDirection) {
+		if (target === wheelBrowseWidget) {
+			isSelectionCause = true;
+			if (scrollDirection === 'down') KeyboardNav.module.options.moveDown.callback();
+			else KeyboardNav.module.options.moveUp.callback();
+			isSelectionCause = false;
+		} else if (target === galleryPart) {
+			if (scrollDirection === 'down') KeyboardNav.module.options.nextGalleryImage.callback();
+			else KeyboardNav.module.options.previousGalleryImage.callback();
+			updateGalleryPart(undefined, scrollDirection);
+		}
+	}
+
+	SelectedEntry.addListener((selected, unselected, options) => {
+		// Avoid the floater disappearing when approaching the header, which may happen when using other scrollStyles
+		if (isSelectionCause) options.scrollStyle = 'top';
+
+		updateGalleryPart(selected);
+	}, 'beforeScroll');
+
+	wheelBrowseWidget.addEventListener('wheel', (e: WheelEvent) => {
+		e.stopImmediatePropagation();
+		e.preventDefault();
+		scrollWidget(e.target, e.deltaY > 0 ? 'down' : 'up');
+	});
+
+	Floater.addElement(wheelBrowseWidget);
+};

locales/locales/en.json

@@ -1836,6 +1836,14 @@
         "message": "Format or show additional information about votes on posts and comments."
     },
 
+    "wheelBrowseName": {
+        "message": "Browse by Wheel"
+    },
+
+    "wheelBrowseDesc": {
+        "message": "Browse entries and galleries by scrolling inside the grey floater."
+    },
+
     "xPostLinksName": {
         "message": "X-post Links"
     },