Merging #283. Fixing className whitespace error. Thanks to @MVogge. M…

…erging #287, which fixes #286 thanks to @majid-1xinternet. Added download option. Thanks to @cnotin
andreknieriem · Jan 11, 2023 · 3e493c1 · 3e493c1
1 parent dc95258
commit 3e493c1
Show file tree

Hide file tree

Showing 17 changed files with 315 additions and 169 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2022 Andre Rinas
+Copyright (c) 2023 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

diff --git a/README.md b/README.md
@@ -108,6 +108,7 @@ For a complete example just look at the demo folder.
 | alertError | true | bool | Show an alert if image was not found. If false error will be ignored |
 | alertErrorMessage | 'Image not found, next image will be loaded' | string | The message displayed if image was not found |
 | additionalHtml | false | string | Additional HTML showing inside every image. Usefull for watermark etc. If false nothing is added |
+| download | false | string | Text for a download link below the image. If false nothing is added |
 | history | true | bool | Enable history back closes lightbox instead of reloading the page |
 | throttleInterval | 0 | int | Time to wait between slides |
 | doubleTapZoom | 2 | int | Zoom level when double tapping on an image |
@@ -223,6 +224,7 @@ Run `gulp watch` to enable continous watching of both src/simple-lightbox.js and
 Just call `gulp build` to have all files and variants created inside dist!
 
 ### Changelog
+**2.12.0 - Merging #283. Fixing className whitespace error. Thanks to @MVogge. Merging #287, which fixes #286 thanks to @majid-1xinternet. Added download option. Thanks to @cnotin**    
 **2.11.0 - Added possibility to add multiple classes to captions #280, added possibility for better selectors which fixes #62 again, fixed #268 lightbox not centered with scrolling**    
 **2.10.4 - Fixed #277 - add passive listener for scroll events, #276 mistake z-index**    
 **2.10.3 - Fixed #264 - Fixed wrong mouse-zoom when the page is scrolled**    

diff --git a/demo/index.html b/demo/index.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8">
 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
 <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700" rel="stylesheet">
-<link rel="stylesheet" href="../dist/simple-lightbox.css?v2.11.0" />
+<link rel="stylesheet" href="../dist/simple-lightbox.css?v2.12.0" />
 <link rel="stylesheet" href="demo.css" />
 <title>SimpleLightbox by André Rinas</title>
 </head>
@@ -14,7 +14,7 @@
 	<div class="header-container">
 		<div class="container demo-container">
 			<div class="info">
-				<h1>SimpleLightbox <sup>v2.11.0</sup></h1>
+				<h1>SimpleLightbox <sup>v2.12.0</sup></h1>
 				<span class="subline">Touch-friendly image lightbox</span>
 				<nav>
 					<a class="btn donate" target="_blank" href="https://www.paypal.me/anrinas">Donate</a>
@@ -354,6 +354,12 @@ <h2>JavaScript Options</h2>
 					<td>Additional HTML showing inside every image. Usefull for watermark etc. If false nothing is added</td>
 					</tr>
 					<tr>
+					<td>download</td>
+					<td>false</td>
+					<td>string</td>
+					<td>Text for a download link below the image. If false nothing is added</td>
+					</tr>
+					<tr>
 					<td>history</td>
 					<td>true</td>
 					<td>bool</td>
@@ -642,6 +648,7 @@ <h2>Customization</h2>
 				<h2>Changelog</h2>
 			</div>
 			<div class="col-right">
+				<strong>2.12.0</strong> - Merging #283. Fixing className whitespace error. Thanks to @MVogge. Merging #287, which fixes #286 thanks to @majid-1xinternet. Added download option. Thanks to @cnotin<br />
 				<strong>2.11.0</strong> - Added possibility to add multiple classes to captions #280, added possibility for better selectors which fixes #62 again, fixed #268 lightbox not centered with scrolling<br />
 				<strong>2.10.4</strong> - Fixed #277 - add passive listener for scroll events, #276 mistake z-index<br />
 				<strong>2.10.3</strong> - Fixed #264 - Fixed wrong mouse-zoom when the page is scrolled<br />
@@ -760,7 +767,7 @@ <h2>Author/<br />Contributors</h2>
 	</div>
 </footer>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-<script src="../dist/simple-lightbox.js?v2.11.0"></script>
+<script src="../dist/simple-lightbox.js?v2.12.0"></script>
 <script>
 	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

diff --git a/dist/simple-lightbox.css b/dist/simple-lightbox.css
@@ -2,7 +2,7 @@
 	By André Rinas, www.andrerinas.de
 	Documentation, www.simplelightbox.de
 	Available for use under the MIT License
-	Version 2.11.0
+	Version 2.12.0
 */
 body.hidden-scroll {
   overflow: hidden; }
@@ -56,6 +56,17 @@ body.hidden-scroll {
     z-index: 10060;
     color: #000;
     font-size: 1rem; }
+  .sl-wrapper .sl-download {
+    display: none;
+    position: fixed;
+    bottom: 5px;
+    width: 100%;
+    text-align: center;
+    z-index: 10060;
+    color: #fff;
+    font-size: 1rem; }
+    .sl-wrapper .sl-download a {
+      color: #fff; }
   .sl-wrapper .sl-navigation {
     width: 100%;
     display: none; }
@@ -139,13 +150,6 @@ body.hidden-scroll {
         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;

diff --git a/dist/simple-lightbox.esm.js b/dist/simple-lightbox.esm.js
@@ -2,7 +2,7 @@
 	By André Rinas, www.andrerinas.de
 	Documentation, www.simplelightbox.de
 	Available for use under the MIT License
-	Version 2.11.0
+	Version 2.12.0
 */
 class SimpleLightbox {
 
@@ -53,7 +53,8 @@ class SimpleLightbox {
         uniqueImages: true,
         focus: true,
         scrollZoom: true,
-        scrollZoomFactor: 0.5
+        scrollZoomFactor: 0.5,
+        download: false
     };
 
     transitionPrefix;
@@ -270,7 +271,7 @@ class SimpleLightbox {
         str += (id !== '') ? `#${id}` : '';
 
         if (className) {
-            const classes = className.split(/\s/);
+            const classes = className.trim().split(/\s/);
             for (let i = 0; i < classes.length; i++) {
                 str += `.${classes[i]}`;
             }
@@ -322,6 +323,15 @@ class SimpleLightbox {
         this.domNodes.counter.classList.add('sl-counter');
         this.domNodes.counter.innerHTML = '<span class="sl-current"></span>/<span class="sl-total"></span>';
 
+        this.domNodes.download = document.createElement('div');
+        this.domNodes.download.classList.add('sl-download');
+
+        this.domNodes.downloadLink = document.createElement('a');
+        this.domNodes.downloadLink.setAttribute('download', '');
+        this.domNodes.downloadLink.textContent = this.options.download;
+
+        this.domNodes.download.appendChild(this.domNodes.downloadLink);
+
         this.domNodes.caption = document.createElement('div');
         this.domNodes.caption.classList.add('sl-caption', 'pos-' + this.options.captionPosition);
         if (this.options.captionClass) {
@@ -359,7 +369,7 @@ class SimpleLightbox {
     }
 
     isValidLink(element) {
-        return (!this.options.fileExt) || ( element.getAttribute(this.options.sourceAttr) && (new RegExp('(' + this.options.fileExt + ')$', 'i')).test(element.getAttribute(this.options.sourceAttr)));
+        return (!this.options.fileExt) || (element.getAttribute(this.options.sourceAttr) && new RegExp('(' + this.options.fileExt + ')($|\\?.*$)', 'i').test(element.getAttribute(this.options.sourceAttr)));
     }
 
     calculateTransitionPrefix() {
@@ -454,6 +464,7 @@ class SimpleLightbox {
             document.body.removeChild(this.domNodes.wrapper);
             document.body.removeChild(this.domNodes.overlay);
             this.domNodes.additionalHtml = null;
+            this.domNodes.download = null;
 
             element.dispatchEvent(new Event('closed.simplelightbox'));
 
@@ -696,6 +707,10 @@ class SimpleLightbox {
                 this.domNodes.image.appendChild(this.domNodes.additionalHtml);
             }
 
+            if (this.options.download) {
+                this.domNodes.downloadLink.setAttribute('href', this.currentImage.getAttribute('src'));
+            }
+
         });
     }
 
@@ -1260,6 +1275,10 @@ class SimpleLightbox {
             }
         }
 
+        if (this.options.download) {
+            this.domNodes.wrapper.appendChild(this.domNodes.download);
+        }
+
         this.isAnimating = true;
 
         this.currentImageIndex = this.relatedElements.indexOf(element);
@@ -1284,7 +1303,7 @@ class SimpleLightbox {
 
 
         this.fadeIn(this.domNodes.overlay, this.options.fadeSpeed);
-        this.fadeIn([this.domNodes.counter, this.domNodes.navigation, this.domNodes.closeButton], this.options.fadeSpeed);
+        this.fadeIn([this.domNodes.counter, this.domNodes.navigation, this.domNodes.closeButton, this.domNodes.download], this.options.fadeSpeed);
 
         this.show(this.domNodes.spinner);
         this.domNodes.counter.querySelector('.sl-current').innerHTML = this.currentImageIndex + 1;

diff --git a/dist/simple-lightbox.jquery.js b/dist/simple-lightbox.jquery.js
@@ -2,7 +2,7 @@
 	By André Rinas, www.andrerinas.de
 	Documentation, www.simplelightbox.de
 	Available for use under the MIT License
-	Version 2.11.0
+	Version 2.12.0
 */
 (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 "use strict";
@@ -87,7 +87,8 @@ var SimpleLightbox = /*#__PURE__*/function () {
       uniqueImages: true,
       focus: true,
       scrollZoom: true,
-      scrollZoomFactor: 0.5
+      scrollZoomFactor: 0.5,
+      download: false
     });
     _defineProperty(this, "transitionPrefix", void 0);
     _defineProperty(this, "isPassiveEventsSupported", void 0);
@@ -273,7 +274,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
       var str = tagName;
       str += id !== '' ? "#".concat(id) : '';
       if (className) {
-        var classes = className.split(/\s/);
+        var classes = className.trim().split(/\s/);
         for (var i = 0; i < classes.length; i++) {
           str += ".".concat(classes[i]);
         }
@@ -317,6 +318,12 @@ var SimpleLightbox = /*#__PURE__*/function () {
       this.domNodes.counter = document.createElement('div');
       this.domNodes.counter.classList.add('sl-counter');
       this.domNodes.counter.innerHTML = '<span class="sl-current"></span>/<span class="sl-total"></span>';
+      this.domNodes.download = document.createElement('div');
+      this.domNodes.download.classList.add('sl-download');
+      this.domNodes.downloadLink = document.createElement('a');
+      this.domNodes.downloadLink.setAttribute('download', '');
+      this.domNodes.downloadLink.textContent = this.options.download;
+      this.domNodes.download.appendChild(this.domNodes.downloadLink);
       this.domNodes.caption = document.createElement('div');
       this.domNodes.caption.classList.add('sl-caption', 'pos-' + this.options.captionPosition);
       if (this.options.captionClass) {
@@ -355,7 +362,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
   }, {
     key: "isValidLink",
     value: function isValidLink(element) {
-      return !this.options.fileExt || element.getAttribute(this.options.sourceAttr) && new RegExp('(' + this.options.fileExt + ')$', 'i').test(element.getAttribute(this.options.sourceAttr));
+      return !this.options.fileExt || element.getAttribute(this.options.sourceAttr) && new RegExp('(' + this.options.fileExt + ')($|\\?.*$)', 'i').test(element.getAttribute(this.options.sourceAttr));
     }
   }, {
     key: "calculateTransitionPrefix",
@@ -440,6 +447,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
         document.body.removeChild(_this2.domNodes.wrapper);
         document.body.removeChild(_this2.domNodes.overlay);
         _this2.domNodes.additionalHtml = null;
+        _this2.domNodes.download = null;
         element.dispatchEvent(new Event('closed.simplelightbox'));
         _this2.isClosing = false;
       });
@@ -648,6 +656,9 @@ var SimpleLightbox = /*#__PURE__*/function () {
           _this5.domNodes.additionalHtml.innerHTML = _this5.options.additionalHtml;
           _this5.domNodes.image.appendChild(_this5.domNodes.additionalHtml);
         }
+        if (_this5.options.download) {
+          _this5.domNodes.downloadLink.setAttribute('href', _this5.currentImage.getAttribute('src'));
+        }
       });
     }
   }, {
@@ -1147,6 +1158,9 @@ var SimpleLightbox = /*#__PURE__*/function () {
           this.domNodes.wrapper.appendChild(this.domNodes.counter);
         }
       }
+      if (this.options.download) {
+        this.domNodes.wrapper.appendChild(this.domNodes.download);
+      }
       this.isAnimating = true;
       this.currentImageIndex = this.relatedElements.indexOf(element);
       var targetURL = element.getAttribute(this.options.sourceAttr);
@@ -1163,7 +1177,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
       this.domNodes.image.setAttribute('style', '');
       this.domNodes.image.appendChild(this.currentImage);
       this.fadeIn(this.domNodes.overlay, this.options.fadeSpeed);
-      this.fadeIn([this.domNodes.counter, this.domNodes.navigation, this.domNodes.closeButton], this.options.fadeSpeed);
+      this.fadeIn([this.domNodes.counter, this.domNodes.navigation, this.domNodes.closeButton, this.domNodes.download], this.options.fadeSpeed);
       this.show(this.domNodes.spinner);
       this.domNodes.counter.querySelector('.sl-current').innerHTML = this.currentImageIndex + 1;
       this.domNodes.counter.querySelector('.sl-total').innerHTML = this.relatedElements.length;

diff --git a/dist/simple-lightbox.jquery.min.js b/dist/simple-lightbox.jquery.min.js
diff --git a/dist/simple-lightbox.js b/dist/simple-lightbox.js
@@ -2,7 +2,7 @@
 	By André Rinas, www.andrerinas.de
 	Documentation, www.simplelightbox.de
 	Available for use under the MIT License
-	Version 2.11.0
+	Version 2.12.0
 */
 (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 (function (global){(function (){
@@ -75,7 +75,8 @@ var SimpleLightbox = /*#__PURE__*/function () {
       uniqueImages: true,
       focus: true,
       scrollZoom: true,
-      scrollZoomFactor: 0.5
+      scrollZoomFactor: 0.5,
+      download: false
     });
     _defineProperty(this, "transitionPrefix", void 0);
     _defineProperty(this, "isPassiveEventsSupported", void 0);
@@ -261,7 +262,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
       var str = tagName;
       str += id !== '' ? "#".concat(id) : '';
       if (className) {
-        var classes = className.split(/\s/);
+        var classes = className.trim().split(/\s/);
         for (var i = 0; i < classes.length; i++) {
           str += ".".concat(classes[i]);
         }
@@ -305,6 +306,12 @@ var SimpleLightbox = /*#__PURE__*/function () {
       this.domNodes.counter = document.createElement('div');
       this.domNodes.counter.classList.add('sl-counter');
       this.domNodes.counter.innerHTML = '<span class="sl-current"></span>/<span class="sl-total"></span>';
+      this.domNodes.download = document.createElement('div');
+      this.domNodes.download.classList.add('sl-download');
+      this.domNodes.downloadLink = document.createElement('a');
+      this.domNodes.downloadLink.setAttribute('download', '');
+      this.domNodes.downloadLink.textContent = this.options.download;
+      this.domNodes.download.appendChild(this.domNodes.downloadLink);
       this.domNodes.caption = document.createElement('div');
       this.domNodes.caption.classList.add('sl-caption', 'pos-' + this.options.captionPosition);
       if (this.options.captionClass) {
@@ -343,7 +350,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
   }, {
     key: "isValidLink",
     value: function isValidLink(element) {
-      return !this.options.fileExt || element.getAttribute(this.options.sourceAttr) && new RegExp('(' + this.options.fileExt + ')$', 'i').test(element.getAttribute(this.options.sourceAttr));
+      return !this.options.fileExt || element.getAttribute(this.options.sourceAttr) && new RegExp('(' + this.options.fileExt + ')($|\\?.*$)', 'i').test(element.getAttribute(this.options.sourceAttr));
     }
   }, {
     key: "calculateTransitionPrefix",
@@ -428,6 +435,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
         document.body.removeChild(_this2.domNodes.wrapper);
         document.body.removeChild(_this2.domNodes.overlay);
         _this2.domNodes.additionalHtml = null;
+        _this2.domNodes.download = null;
         element.dispatchEvent(new Event('closed.simplelightbox'));
         _this2.isClosing = false;
       });
@@ -636,6 +644,9 @@ var SimpleLightbox = /*#__PURE__*/function () {
           _this5.domNodes.additionalHtml.innerHTML = _this5.options.additionalHtml;
           _this5.domNodes.image.appendChild(_this5.domNodes.additionalHtml);
         }
+        if (_this5.options.download) {
+          _this5.domNodes.downloadLink.setAttribute('href', _this5.currentImage.getAttribute('src'));
+        }
       });
     }
   }, {
@@ -1135,6 +1146,9 @@ var SimpleLightbox = /*#__PURE__*/function () {
           this.domNodes.wrapper.appendChild(this.domNodes.counter);
         }
       }
+      if (this.options.download) {
+        this.domNodes.wrapper.appendChild(this.domNodes.download);
+      }
       this.isAnimating = true;
       this.currentImageIndex = this.relatedElements.indexOf(element);
       var targetURL = element.getAttribute(this.options.sourceAttr);
@@ -1151,7 +1165,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
       this.domNodes.image.setAttribute('style', '');
       this.domNodes.image.appendChild(this.currentImage);
       this.fadeIn(this.domNodes.overlay, this.options.fadeSpeed);
-      this.fadeIn([this.domNodes.counter, this.domNodes.navigation, this.domNodes.closeButton], this.options.fadeSpeed);
+      this.fadeIn([this.domNodes.counter, this.domNodes.navigation, this.domNodes.closeButton, this.domNodes.download], this.options.fadeSpeed);
       this.show(this.domNodes.spinner);
       this.domNodes.counter.querySelector('.sl-current').innerHTML = this.currentImageIndex + 1;
       this.domNodes.counter.querySelector('.sl-total').innerHTML = this.relatedElements.length;