From cc61ddf7b2bd7ee44550fd219d62207752e893b8 Mon Sep 17 00:00:00 2001 From: Art4 Date: Mon, 19 Nov 2018 10:19:10 +0100 Subject: [PATCH 1/3] Add button to start gallery refs #14 --- views/index.html | 5 +-- views/index.js | 85 ++++++++++++++++++++++++++++++------------------ 2 files changed, 57 insertions(+), 33 deletions(-) diff --git a/views/index.html b/views/index.html index eba24c3..effd663 100644 --- a/views/index.html +++ b/views/index.html @@ -31,11 +31,12 @@

-

3. Galerie öffnen

+

3. Galerie öffnen

- + +
diff --git a/views/index.js b/views/index.js index 1058607..d582f24 100644 --- a/views/index.js +++ b/views/index.js @@ -1,3 +1,5 @@ +"use strict"; + const { dialog } = require('electron').remote; const { ipcRenderer } = require('electron'); const fs = require('fs'); @@ -7,17 +9,18 @@ const packageData = require('../package.json'); const ImageStore = require('../src/imagestore'); const store = new ImageStore(); -var selectedPath = null; -var allowedExtensions = [ +let selectedPath = null; +let allowedExtensions = [ '.jpg', '.jpeg', '.png', '.gif', ]; -var server; +let server; +let serverHost = 'localhost'; let serverPort = 8080; -var selectFolder = (selectedPath) => { +let selectFolder = (selectedPath) => { document.querySelector('#folder-selector').classList.add('btn-secondary'); document.querySelector('#folder-selector').classList.remove('btn-primary'); document.querySelector('#path-selected').innerHTML = selectedPath; @@ -28,7 +31,7 @@ var selectFolder = (selectedPath) => { }); }; -var unselectFolder = (msg) => { +let unselectFolder = (msg) => { document.querySelector('#folder-selector').classList.add('btn-primary'); document.querySelector('#folder-selector').classList.remove('btn-secondary'); document.querySelector('#path-selected').innerHTML = ""+msg+""; @@ -39,51 +42,53 @@ var unselectFolder = (msg) => { }); }; -var unmuteServerSwitch = () => { +let unmuteServerSwitch = () => { document.querySelector('.server-run-indicator').parentElement.classList.remove('text-muted'); document.querySelector('#server-switch').disabled = false; document.querySelector('#server-switch').classList.add('btn-primary'); document.querySelector('#server-switch').classList.remove('btn-secondary'); }; -var muteServerSwitch = () => { +let muteServerSwitch = () => { document.querySelector('.server-run-indicator').parentElement.classList.add('text-muted'); document.querySelector('#server-switch').disabled = true; document.querySelector('#server-switch').classList.add('btn-secondary'); document.querySelector('#server-switch').classList.remove('btn-primary'); }; -var unmuteFolderSelector = () => { +let unmuteFolderSelector = () => { document.querySelector('#folder-selector').disabled = false; }; -var muteFolderSelector = () => { +let muteFolderSelector = () => { document.querySelector('#folder-selector').disabled = true; }; -var unmuteBrowserButton = () => { - document.querySelector('.browser-start-indicator').parentElement.classList.remove('text-muted'); +let unmuteBrowserButton = () => { + document.querySelector('.gallery-start-indicator').parentElement.classList.remove('text-muted'); + document.querySelector('#gallery-start').disabled = false; + document.querySelector('#gallery-start').classList.add('btn-primary'); + document.querySelector('#gallery-start').classList.remove('btn-secondary'); document.querySelector('#browser-start').disabled = false; - document.querySelector('#browser-start').classList.add('btn-primary'); - document.querySelector('#browser-start').classList.remove('btn-secondary'); }; -var muteBrowserButton = () => { - document.querySelector('.browser-start-indicator').parentElement.classList.add('text-muted'); +let muteBrowserButton = () => { + document.querySelector('.gallery-start-indicator').parentElement.classList.add('text-muted'); + document.querySelector('#gallery-start').disabled = true; + document.querySelector('#gallery-start').classList.add('btn-secondary'); + document.querySelector('#gallery-start').classList.remove('btn-primary'); document.querySelector('#browser-start').disabled = true; - document.querySelector('#browser-start').classList.add('btn-secondary'); - document.querySelector('#browser-start').classList.remove('btn-primary'); }; -var startServer = () => { - var app = express(); +let startServer = () => { + let app = express(); app.get(['/', '/index.html'], function (req, res) { res.sendFile(path.resolve(__dirname, './gallery.html')); }); app.get(['/dist/:name'], function (req, res) { - var name = req.params.name; + let name = req.params.name; fs.access(path.resolve(__dirname, './dist/' + name), fs.constants.F_OK, (err) => { if (err) { @@ -117,7 +122,7 @@ var startServer = () => { }); app.get(['/images/:name'], function (req, res) { - var name = req.params.name; + let name = req.params.name; store.getData(name) .catch(() => { @@ -129,7 +134,7 @@ var startServer = () => { }); app.get(['/thumbs/:name'], function (req, res) { - var name = req.params.name; + let name = req.params.name; store.getData(name) .catch(() => { @@ -147,7 +152,7 @@ var startServer = () => { console.log('Server gestartet'); }; -var stopServer = () => { +let stopServer = () => { if (server) { server.close(); server = null; @@ -158,7 +163,11 @@ var stopServer = () => { console.log('Server gestoppt'); }; -var handleSelectedFolder = (filePaths) => { +let startGallery = (url) => { + ipcRenderer.send('openexternalpage', url); +}; + +let handleSelectedFolder = (filePaths) => { if (! filePaths) { selectedPath = null; store.reset(); @@ -187,13 +196,13 @@ var handleSelectedFolder = (filePaths) => { files.forEach((value, index) => { // Ignore files/folders with wrong extensions - var ext = path.extname(value).toLowerCase(); + let ext = path.extname(value).toLowerCase(); if (! allowedExtensions.includes(ext)) { return; } // ignore folders and symlinks - var stat = fs.statSync(selectedPath + value); + let stat = fs.statSync(selectedPath + value); if (! stat.isFile()) { return; } @@ -212,6 +221,7 @@ var handleSelectedFolder = (filePaths) => { }); }; +// If folder selector is clicked document.querySelector('#folder-selector').addEventListener('click', (e) => { dialog.showOpenDialog( { @@ -221,6 +231,7 @@ document.querySelector('#folder-selector').addEventListener('click', (e) => { ); }); +// If server switch is clicked document.querySelector('#server-switch').addEventListener('click', (e) => { if (server) { stopServer(); @@ -238,7 +249,7 @@ document.querySelector('#server-switch').addEventListener('click', (e) => { startServer(); unmuteBrowserButton(); e.target.innerHTML = 'Server stoppen'; - document.querySelector('#server-status').innerHTML = 'Server gestartet unter http://localhost:'+serverPort+''; + document.querySelector('#server-status').innerHTML = 'Server gestartet unter http://'+serverHost+':'+serverPort+''; document.querySelectorAll('.server-run-indicator').forEach((el) => { el.classList.remove('fa-circle'); el.classList.add('fa-check-circle'); @@ -247,13 +258,25 @@ 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); +}); + +// If browser starter is clicked +document.querySelector('#browser-start').addEventListener('click', (e) => { + e.preventDefault(); + ipcRenderer.send('openexternalpage', 'http://'+serverHost+':'+serverPort); +}); + // open links in external browser -var externalButtons = document.getElementsByClassName('open-external'); +let externalButtons = document.getElementsByClassName('open-external'); -for (var i = 0; i < externalButtons.length; i++) { +for (let i = 0; i < externalButtons.length; i++) { externalButtons[i].addEventListener('click', function(e) { e.preventDefault(); - var target = ''; + let target = ''; if (this.href) { target = this.href; @@ -271,7 +294,7 @@ ipcRenderer.on('app-shutdown', (event, arg) => { }) // Set app version -var elements = document.getElementsByClassName('ls-version'); +let elements = document.getElementsByClassName('ls-version'); for (const element of elements) { element.innerHTML = packageData.name + ' ' + packageData.version; From 19a5abc3d75c0153e9fc73cc8decb2e0c2c762e0 Mon Sep 17 00:00:00 2001 From: Art4 Date: Mon, 19 Nov 2018 11:34:11 +0100 Subject: [PATCH 2/3] Add BrowserView to show gallery refs #14 --- main.js | 44 +++++++++++++++++++++++++++++++++++++++++++- views/index.js | 2 +- 2 files changed, 44 insertions(+), 2 deletions(-) diff --git a/main.js b/main.js index 8f888c0..4af221f 100644 --- 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 . */ -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: 600, + height: 800, + 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/index.js b/views/index.js index d582f24..4119e65 100644 --- a/views/index.js +++ b/views/index.js @@ -164,7 +164,7 @@ let stopServer = () => { }; let startGallery = (url) => { - ipcRenderer.send('openexternalpage', url); + ipcRenderer.send('opengallery', url); }; let handleSelectedFolder = (filePaths) => { From 26860558d417502a7bae82edd75a5bce2dd46eb3 Mon Sep 17 00:00:00 2001 From: Art4 Date: Mon, 19 Nov 2018 13:51:02 +0100 Subject: [PATCH 3/3] Autohide mouse cursor in gallery, update CHANGELOG.md refs #14 --- CHANGELOG.md | 17 +++++++++------ main.js | 6 +++--- views/assets/js/gallery.js | 43 +++++++++++++++++++++++++++++++++++--- views/index.js | 9 ++++---- 4 files changed, 58 insertions(+), 17 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0f7fd78..c66d40a 100644 --- 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 index 4af221f..a8730e4 100644 --- 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 index 8ecbbbf..4f845f4 100644 --- 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 index 4119e65..ba37e27 100644 --- 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); });