Merge branch 'Show-gallery-in-built-in-browser'

closes #14
cbgdn · Nov 19, 2018 · 9130b01 · 9130b01
2 parents 0c2f967 + 2686055
commit 9130b01
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 43 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
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-const { app, BrowserWindow, ipcMain, shell } = require('electron');
+const { app, BrowserWindow, ipcMain, nativeImage, shell } = require('electron');
 const isDevEnv = ('ELECTRON_IS_DEV' in process.env);
 
 // Keep a global reference of the window object, if you don't, the window will
@@ -50,6 +50,48 @@ function createMainWindow() {
         mainWindow.webContents.send('app-shutdown');
     });
 
+    let galleryWindow = null;
+
+    ipcMain.on('opengallery', function (e, arg) {
+        // Do nothing if gallery allready started
+        if (galleryWindow !== null) {
+            return;
+        }
+
+        galleryWindow = new BrowserWindow({
+            // width: 800,
+            // height: 600,
+            parent: mainWindow,
+            kiosk: false,
+            frame: true,
+            fullscreen: true,
+            backgroundColor: '#333333',
+            autoHideMenuBar: true,
+            title: 'LightSpread Gallery',
+            icon: nativeImage.createFromPath('./img/lightspread-256.png'),
+        });
+
+        // galleryWindow.webContents.openDevTools({mode: 'bottom'});
+
+        galleryWindow.once('ready-to-show', () => {
+            galleryWindow.show();
+            // galleryWindow.focus();
+        });
+
+        galleryWindow.loadURL(arg);
+
+        galleryWindow.on('closed', () => {
+             galleryWindow = null;
+        });
+    });
+
+    ipcMain.on('closegallery', function (e) {
+        if (galleryWindow) {
+            galleryWindow.close();
+            galleryWindow = null;
+        }
+    });
+
     ipcMain.on('openexternalpage', function (e, url) {
         shell.openExternal(url);
     });

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.html b/views/index.html
@@ -31,11 +31,12 @@ <h2 class="text-muted"><span class="server-run-indicator far fa-circle"></span>
                 </div>
             </div>
             <div class="col-sm-8">
-                <h2 class="text-muted"><span class="browser-start-indicator fas fa-rocket"></span> 3. Galerie öffnen</h2>
+                <h2 class="text-muted"><span class="gallery-start-indicator fas fa-rocket"></span> 3. Galerie öffnen</h2>
             </div>
             <div class="col-sm-4">
                 <div>
-                    <button id="browser-start" formaction="http://localhost:8080" class="btn btn-secondary open-external" disabled>Browser öffnen</button>
+                    <button id="gallery-start" class="btn btn-secondary" disabled>Galerie starten</button>
+                    <button id="browser-start" class="btn btn-link" disabled>Oder im Browser öffnen</button>
                 </div>
             </div>
         </div>