Permalink
Browse files

New feature: mediaBrowse by wheel (#3606)

  • Loading branch information...
1 parent 586b4d2 commit 6814b73a525cd31862dae32be443f5921b2e2225 @larsjohnsen larsjohnsen committed with erikdesjardins Jan 10, 2017
Showing with 100 additions and 0 deletions.
  1. +18 −0 lib/css/modules/_wheelBrowse.css
  2. +1 −0 lib/css/res.scss
  3. +73 −0 lib/modules/wheelBrowse.js
  4. +8 −0 locales/locales/en.json
@@ -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);
+ }
+}
View
@@ -40,6 +40,7 @@
@import 'modules/userInfo';
@import 'modules/userTagger';
@import 'modules/voteEnhancements';
+@import 'modules/wheelBrowse';
body.res-console-open {
overflow: hidden;
@@ -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);
+};
@@ -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"
},

0 comments on commit 6814b73

Please sign in to comment.