Autohide mouse cursor in gallery, update CHANGELOG.md

refs #14
cbgdn · Nov 19, 2018 · 2686055 · 2686055
1 parent 19a5abc
commit 2686055
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,9 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 
+### Added
+
+- LightSpread kann die Galerie in einem eigenen Fullscreen-Fenster starten, alternativ kann weiterhin der native Browser verwendet werden
+
 ### Changed
 
-- Alle Abhängigkeiten aktualisiert
+- In der Galerie wird die Maus zusammen mit den Steuerungselementen nach 2 Sekunden ausgeblendet
+- Alle Abhängigkeiten wurden aktualisiert
 
 ### Fixed
 
@@ -22,7 +27,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Autoplay zeigt keinen Progress mehr an
 - Autoplay wechselt Bilder nach 8 Sekunden statt nach 5 Sekunden
 - Port für Webserver wurde von 3000 auf 8080 geändert
-- Alle Abhängigkeiten aktualisiert
+- Alle Abhängigkeiten wurden aktualisiert
 
 ### Fixed
 
@@ -32,10 +37,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Added
 
-- simple window for choosing a folder, start the webserver and open the browser
-- create thumbnails if folder is chosen
-- show images with autoplay and fullscreen with [jQuery lightgallery](http://sachinchoolur.github.io/lightGallery/)
-- this CHANGELOG.md
+- Einfaches Fenster mit Buttons, um den Bilderordner zu wählen, den Server zu starten und den Browser zu öffnen
+- Thumbnails werden erstellt, sobald ein Ordner gewählt wurde
+- Zeige Bilder mit Autoplay und Fullscreen dank [jQuery lightgallery](http://sachinchoolur.github.io/lightGallery/)
+- Diese CHANGELOG.md Datei
 
 [Unreleased]: https://github.com/Art4/lightspread/compare/1.0.0-beta.2...HEAD
 [1.0.0-beta.2]: https://github.com/Art4/lightspread/compare/1.0.0-beta.1...1.0.0-beta.2

diff --git a/main.js b/main.js
@@ -59,12 +59,12 @@ function createMainWindow() {
         }
 
         galleryWindow = new BrowserWindow({
-            width: 600,
-            height: 800,
+            // width: 800,
+            // height: 600,
             parent: mainWindow,
             kiosk: false,
             frame: true,
-            // fullscreen: true,
+            fullscreen: true,
             backgroundColor: '#333333',
             autoHideMenuBar: true,
             title: 'LightSpread Gallery',

diff --git a/views/assets/js/gallery.js b/views/assets/js/gallery.js
@@ -28,6 +28,8 @@ import 'lightgallery/dist/js/lightgallery.js';
 import 'lightgallery/modules/lg-autoplay.js';
 import 'lightgallery/modules/lg-fullscreen.js';
 
+var autoHideControlsTimeout = 2000;
+
 var setupImages = function(data) {
     var galleryElement = document.getElementById('lightgallery');
 
@@ -47,6 +49,41 @@ var setupImages = function(data) {
     return true;
 }
 
+// Autohide cursor after 5 seconds
+// Thanks to https://stackoverflow.com/a/31798987
+$(function() {
+    var timer;
+    var fadeInBuffer = false;
+    $(document).mousemove(function() {
+        if (!fadeInBuffer) {
+            if (timer) {
+                clearTimeout(timer);
+                timer = 0;
+            }
+
+            $('html').css({
+                cursor: ''
+            });
+        } else {
+            $('html').css({
+                cursor: 'default'
+            });
+            fadeInBuffer = false;
+        }
+
+        timer = setTimeout(function() {
+            $('html').css({
+                cursor: 'none'
+            });
+
+            fadeInBuffer = true;
+        }, autoHideControlsTimeout);
+    });
+    $('.html5gallery-box-0').css({
+        cursor: 'default'
+    });
+});
+
 $(document).ready(function() {
     $.ajax('/images', {
         error: function(jqXHR, textStatus, errorThrown) {
@@ -57,11 +94,11 @@ $(document).ready(function() {
         success: function(data, textStatus, jqXHR) {
             if (setupImages(data.data)) {
                 $("#lightgallery").lightGallery({
-                    selector: '.galleryitem',
+                    selector: '.galleryitem', // TODO: make it configurable
                     mode: 'lg-soft-zoom',
                     height: '100%',
-                    speed: 1500,
-                    hideBarsDelay: 1000,
+                    speed: 1000, // TODO: make it configurable
+                    hideBarsDelay: autoHideControlsTimeout,
                     autoplay: false, // TODO: make it configurable
                     pause: 8000, // TODO: make it configurable
                     progressBar: false, // TODO: make it configurable

diff --git a/views/index.js b/views/index.js
@@ -163,10 +163,6 @@ let stopServer = () => {
     console.log('Server gestoppt');
 };
 
-let startGallery = (url) => {
-    ipcRenderer.send('opengallery', url);
-};
-
 let handleSelectedFolder = (filePaths) => {
     if (! filePaths) {
         selectedPath = null;
@@ -261,12 +257,15 @@ document.querySelector('#server-switch').addEventListener('click', (e) => {
 // If gallery starter is clicked
 document.querySelector('#gallery-start').addEventListener('click', (e) => {
     e.preventDefault();
-    startGallery('http://'+serverHost+':'+serverPort);
+    let url = 'http://'+serverHost+':'+serverPort;
+
+    ipcRenderer.send('opengallery', url);
 });
 
 // If browser starter is clicked
 document.querySelector('#browser-start').addEventListener('click', (e) => {
     e.preventDefault();
+
     ipcRenderer.send('openexternalpage', 'http://'+serverHost+':'+serverPort);
 });