feat: simple lightbox on album pages

public/libs/simple-lightbox/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Andre Rinas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

public/libs/simple-lightbox/simple-lightbox.min.css

@@ -0,0 +1,7 @@
+/*!
+	By André Rinas, www.andrerinas.de
+	Documentation, www.simplelightbox.de
+	Available for use under the MIT License
+	Version 2.10.3
+*/
+body.hidden-scroll{overflow:hidden}.sl-overlay{position:fixed;left:0;right:0;top:0;bottom:0;background:#fff;display:none;z-index:1035}.sl-wrapper{z-index:1040;width:100%;height:100%;left:0;top:0;position:fixed}.sl-wrapper *{box-sizing:border-box}.sl-wrapper button{border:0 none;background:transparent;font-size:28px;padding:0;cursor:pointer}.sl-wrapper button:hover{opacity:0.7}.sl-wrapper .sl-close{display:none;position:fixed;right:30px;top:30px;z-index:10060;margin-top:-14px;margin-right:-14px;height:44px;width:44px;line-height:44px;font-family:Arial,Baskerville,monospace;color:#000;font-size:3rem}.sl-wrapper .sl-counter{display:none;position:fixed;top:30px;left:30px;z-index:1060;color:#000;font-size:1rem}.sl-wrapper .sl-navigation{width:100%;display:none}.sl-wrapper .sl-navigation button{position:fixed;top:50%;margin-top:-22px;height:44px;width:22px;line-height:44px;text-align:center;display:block;z-index:10060;font-family:Arial,Baskerville,monospace;color:#000}.sl-wrapper .sl-navigation button.sl-next{right:5px;font-size:2rem}.sl-wrapper .sl-navigation button.sl-prev{left:5px;font-size:2rem}@media (min-width: 35.5em){.sl-wrapper .sl-navigation button{width:44px}.sl-wrapper .sl-navigation button.sl-next{right:10px;font-size:3rem}.sl-wrapper .sl-navigation button.sl-prev{left:10px;font-size:3rem}}@media (min-width: 50em){.sl-wrapper .sl-navigation button{width:44px}.sl-wrapper .sl-navigation button.sl-next{right:20px;font-size:3rem}.sl-wrapper .sl-navigation button.sl-prev{left:20px;font-size:3rem}}.sl-wrapper.sl-dir-rtl .sl-navigation{direction:ltr}.sl-wrapper .sl-image{position:fixed;-ms-touch-action:none;touch-action:none;z-index:10000}.sl-wrapper .sl-image img{margin:0;padding:0;display:block;border:0 none;width:100%;height:auto}@media (min-width: 35.5em){.sl-wrapper .sl-image img{border:0 none}}@media (min-width: 50em){.sl-wrapper .sl-image img{border:0 none}}.sl-wrapper .sl-image iframe{background:#000;border:0 none}@media (min-width: 35.5em){.sl-wrapper .sl-image iframe{border:0 none}}@media (min-width: 50em){.sl-wrapper .sl-image iframe{border:0 none}}.sl-wrapper .sl-image .sl-caption{display:none;padding:10px;color:#fff;background:rgba(0,0,0,0.8);font-size:1rem;position:absolute;bottom:0;left:0;right:0}.sl-wrapper .sl-image .sl-caption.pos-top{bottom:auto;top:0}.sl-wrapper .sl-image .sl-caption.pos-outside{bottom:auto}.sl-wrapper .sl-image .sl-download{display:none;position:absolute;bottom:5px;right:5px;color:#000;z-index:1060}.sl-spinner{display:none;border:5px solid #333;border-radius:40px;height:40px;left:50%;margin:-20px 0 0 -20px;opacity:0;position:fixed;top:50%;width:40px;z-index:1007;-webkit-animation:pulsate 1s ease-out infinite;-moz-animation:pulsate 1s ease-out infinite;-ms-animation:pulsate 1s ease-out infinite;-o-animation:pulsate 1s ease-out infinite;animation:pulsate 1s ease-out infinite}.sl-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}.sl-transition{transition:-moz-transform ease 200ms;transition:-ms-transform ease 200ms;transition:-o-transform ease 200ms;transition:-webkit-transform ease 200ms;transition:transform ease 200ms}@-webkit-keyframes pulsate{0%{transform:scale(0.1);opacity:0.0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@keyframes pulsate{0%{transform:scale(0.1);opacity:0.0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-moz-keyframes pulsate{0%{transform:scale(0.1);opacity:0.0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-o-keyframes pulsate{0%{transform:scale(0.1);opacity:0.0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-ms-keyframes pulsate{0%{transform:scale(0.1);opacity:0.0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}

src/js/album.js

@@ -1,10 +1,15 @@
-/* global LazyLoad */
+/* global LazyLoad, SimpleLightbox */
 
 // eslint-disable-next-line no-unused-vars
 const lsKeys = {}
 
 const page = {
-  lazyLoad: null
+  lazyLoad: null,
+  lightbox: null,
+
+  // Array of extensions that will be whitelisted for SimpleLightbox
+  // Should only include image extensions that can be rendered directly on browsers
+  lightboxExts: ['.gif', '.jpeg', '.jpg', '.png', '.svg', '.tif', '.tiff', '.webp', '.bmp']
 }
 
 window.addEventListener('DOMContentLoaded', () => {
@@ -26,4 +31,23 @@ window.addEventListener('DOMContentLoaded', () => {
   }
 
   page.lazyLoad = new LazyLoad()
+
+  // Build RegExp out of imageExts array
+  // SimpleLightbox demands RegExp for configuring supported file extensions
+  const imageExtsRegex = new RegExp(`${page.lightboxExts.map(ext => {
+    return ext.substring(1) // removes starting dot
+  }).join('|')}`, 'i')
+
+  console.log(imageExtsRegex)
+  page.lightbox = new SimpleLightbox('#table a.image', {
+    captions: true,
+    captionSelector: 'img',
+    captionType: 'attr',
+    captionsData: 'alt',
+    captionPosition: 'bottom',
+    captionDelay: 500,
+    fileExt: imageExtsRegex,
+    preloading: false,
+    uniqueImages: false
+  })
 })

src/js/home.js

@@ -54,8 +54,8 @@ const page = {
   urlsQueue: [],
   activeUrlsQueue: 0,
 
-  // Include BMP for uploads preview only, cause the real images will be used
+  // Include BMP for uploads preview only, because the real images will be used instead of server-generated thumbnails
-  // Sharp isn't capable of making their thumbnails for dashboard and album public pages
+  // Sharp is not capable of generating thumbnails for BMP images
   imageExts: ['.gif', '.jpeg', '.jpg', '.png', '.svg', '.tif', '.tiff', '.webp', '.bmp'],
   videoExts: ['.avi', '.m2ts', '.m4v', '.mkv', '.mov', '.mp4', '.webm', '.wmv'],
 

views/album.njk

@@ -16,6 +16,7 @@
 {% block stylesheets %}
 <!-- Libs stylesheets -->
 <link rel="stylesheet" href="../libs/fontello/fontello.css{{ versions[1] }}">
+<link rel="stylesheet" href="../libs/simple-lightbox/simple-lightbox.min.css{{ versions[3] }}">
 <!-- Stylesheets -->
 <link rel="stylesheet" href="../css/style.css{{ versions[1] }}">
 <link rel="stylesheet" href="../css/thumbs.css{{ versions[1] }}">
@@ -26,6 +27,7 @@
 {% if not nojs -%}
 <!-- Libs stylesheets -->
 <script src="../libs/lazyload/lazyload.min.js{{ versions[3] }}"></script>
+<script src="../libs/simple-lightbox/simple-lightbox.min.js{{ versions[3] }}"></script>
 <!-- Scripts -->
 <script src="../js/album.js{{ versions[1] }}"></script>
 <script src="../js/misc/utils.js{{ versions[1] }}"></script>