Added new option uniqueImages for #156, focus for #190 and fixed bug #…

…200 issue closing during animation.
andreknieriem · Oct 29, 2020 · 473b7eb · 473b7eb
1 parent 16f5f2b
commit 473b7eb
Show file tree

Hide file tree

Showing 17 changed files with 482 additions and 173 deletions.
diff --git a/README.md b/README.md
@@ -112,6 +112,7 @@ For a whole example just look at the demo folder.
 | rtl | false | bool | change direction to rigth-to-left |
 | fixedClass | 'sl-fixed' | string | elements with this class are fixed and get the right padding when lightbox opens |
 | fadeSpeed | 300 | int | the duration for fading in and out in milliseconds. Used for caption fadein/out too. If smaller than 100 it should be used with animationSlide:false |
+| uniqueImages | true | bool | whether to uniqualize images or not |
 
 ### Events
 | Name | Description |
@@ -132,12 +133,19 @@ For a whole example just look at the demo folder.
 
 **Example**  
 ```javascript
-$('.gallery a').on('open.simplelightbox', function () {
-  // do something…
+let gallery = new SimpleLightbox('.gallery a');
+gallery.on('show.simplelightbox', function () {
+	// do something…
 });
 
-$('.gallery a').on('error.simplelightbox', function (e) {
-  console.log(e); // some usefull information
+gallery.on('error.simplelightbox', function (e) {
+	console.log(e); // some usefull information
+});
+
+// with jQuery nearly the same
+let gallery = $('.gallery a').simpleLightbox();
+gallery.on('show.simplelightbox', function () {
+	// do something…
 });
 ```
 
@@ -207,6 +215,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.6.0 - Added new option uniqueImages for #156, focus for #190 and fixed bug #200 issue closing during animation**  
 **2.5.0 - Added new option fadeSpeed. This will fix #147 and #186**  
 **2.4.1 - Added new simple-lightbox.legacy.js with IE 11 Support. Fixes #175, #178, #183 and some other bugs from 2.4.0**  
 **2.4.0 - Added new option for fixed elements class #195**  

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "simplelightbox",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "homepage": "https://simplelightbox.com/",
   "authors": [
     "André Rinas <[email protected]> (https://www.andrerinas.de)"

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.5.0" />
+<link rel="stylesheet" href="../dist/simple-lightbox.css?v2.6.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.5.0</sup></h1>
+				<h1>SimpleLightbox <sup>v2.6.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>
@@ -395,6 +395,18 @@ <h2>JavaScript Options</h2>
 					<td>int</td>
 					<td>the duration for fading in and out in milliseconds. Used for caption fadein/out too. If smaller than 100 it should be used with animationSlide:false</td>
 					</tr>
+					<tr>
+					<td>uniqueImages</td>
+					<td>true</td>
+					<td>bool</td>
+					<td>whether to uniqualize images or not</td>
+					</tr>
+					<tr>
+					<td>focus</td>
+					<td>true</td>
+					<td>bool</td>
+					<td>focus the lightbox on open to enable tab control</td>
+					</tr>
 					</tbody>
 					</table>
 			</div>
@@ -609,6 +621,7 @@ <h2>Customization</h2>
 				<h2>Changelog</h2>
 			</div>
 			<div class="col-right">
+				<strong>2.6.0</strong> - Added new option uniqueImages for #156, focus for #190 and fixed bug #200 issue closing during animation.<br />
 				<strong>2.5.0</strong> - Added new option fadeSpeed. This will fix #147.<br />
 				<strong>2.4.1</strong> - Added new simple-lightbox.legacy.js with IE 11 Support<br />
 				<strong>2.4.0</strong> - Added new option for fixed elements class #195<br />
@@ -710,12 +723,8 @@ <h2>Author/<br />Contributors</h2>
 		Images from <a href="https://unsplash.com/" target="_blank">Unsplash</a> &middot; Thanks to <a target="_blank" href="http://prismjs.com/">PrismJS</a> for syntax highlighting.
 	</div>
 </footer>
-<script
-  src="https://code.jquery.com/jquery-3.4.1.min.js"
-  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
-  crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/gh/michalsnik/[email protected]/dist/aos.js"></script>
-<script src="../dist/simple-lightbox.min.js?v2.5.0"></script>
+<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.6.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.5.0
+	Version 2.6.0
 */
 body.hidden-scroll {
   overflow: hidden; }
@@ -19,7 +19,12 @@ body.hidden-scroll {
   z-index: 1035; }
 
 .sl-wrapper {
-  z-index: 1040; }
+  z-index: 1040;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  position: fixed; }
   .sl-wrapper * {
     box-sizing: border-box; }
   .sl-wrapper button {
@@ -44,8 +49,6 @@ body.hidden-scroll {
     font-family: Arial, Baskerville, monospace;
     color: #000;
     font-size: 3rem; }
-    .sl-wrapper .sl-close:focus {
-      outline: none; }
   .sl-wrapper .sl-counter {
     display: none;
     position: fixed;
@@ -75,8 +78,6 @@ body.hidden-scroll {
       .sl-wrapper .sl-navigation button.sl-prev {
         left: 5px;
         font-size: 2rem; }
-      .sl-wrapper .sl-navigation button:focus {
-        outline: none; }
       @media (min-width: 35.5em) {
         .sl-wrapper .sl-navigation button {
           width: 44px; }

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.5.0
+	Version 2.6.0
 */
 class SimpleLightbox {
 
@@ -48,7 +48,9 @@ class SimpleLightbox {
         htmlClass: 'has-lightbox',
         rtl: false,
         fixedClass: 'sl-fixed',
-        fadeSpeed: 300
+        fadeSpeed: 300,
+        uniqueImages: true,
+        focus: true
     };
 
     transitionPrefix;
@@ -146,6 +148,20 @@ class SimpleLightbox {
             this.elements = this.getRelated(this.options.rel);
         }
 
+        if (this.options.uniqueImages) {
+            let imgArr = [];
+            this.elements = Array.from(this.elements).filter(
+                element => {
+                    let src = element.getAttribute(this.options.sourceAttr);
+                    if(imgArr.indexOf(src) === -1) {
+                        imgArr.push(src);
+                        return true;
+                    }
+                    return false;
+                }
+            );
+        }
+
         this.createDomNodes();
 
         if (this.options.close) {
@@ -175,8 +191,8 @@ class SimpleLightbox {
 
         // close addEventListener click addEventListener doc
         if (this.options.docClose) {
-            this.addEventListener(this.domNodes.overlay, ['click.' + this.eventNamespace, 'touchstart.' + this.eventNamespace], (event) => {
-                if (this.isOpen) {
+            this.addEventListener(this.domNodes.wrapper, ['click.' + this.eventNamespace, 'touchstart.' + this.eventNamespace], (event) => {
+                if (this.isOpen && event.target === event.currentTarget) {
                     this.close();
                 }
             });
@@ -250,7 +266,9 @@ class SimpleLightbox {
 
         this.domNodes.wrapper = document.createElement('div');
         this.domNodes.wrapper.classList.add('sl-wrapper');
-        this.domNodes.wrapper.setAttribute('tabindex',0);
+        this.domNodes.wrapper.setAttribute('tabindex',-1);
+        this.domNodes.wrapper.setAttribute('role','dialog');
+        this.domNodes.wrapper.setAttribute('aria-hidden',false);
         if (this.options.className) {
             this.domNodes.wrapper.classList.add(this.options.className);
         }
@@ -349,6 +367,9 @@ class SimpleLightbox {
             }
         }
 
+        this.removeEventListener(document, 'focusin.' + this.eventNamespace);
+
+
         this.fadeOut(document.querySelectorAll('.sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter'), this.options.fadeSpeed, () => {
             if (this.options.disableScroll) {
                 this.toggleScrollbar('show');
@@ -438,22 +459,28 @@ class SimpleLightbox {
         }
 
         this.fadeOut(this.domNodes.image, this.options.fadeSpeed, () => {
-          this.isAnimating = true;
-            setTimeout(() => {
-                let element = this.relatedElements[this.currentImageIndex];
-                this.currentImage.setAttribute('src', element.getAttribute(this.options.sourceAttr));
+            this.isAnimating = true;
 
-                if (this.loadedImages.indexOf(element.getAttribute(this.options.sourceAttr)) === -1) {
-                    this.show(this.domNodes.spinner);
-                }
+            if(!this.isClosing) {
+                setTimeout(() => {
 
-                if(this.domNodes.image.contains(this.domNodes.caption)) {
-                  this.domNodes.image.removeChild(this.domNodes.caption);
-                }
+                    let element = this.relatedElements[this.currentImageIndex];
+                    this.currentImage.setAttribute('src', element.getAttribute(this.options.sourceAttr));
+
+                    if (this.loadedImages.indexOf(element.getAttribute(this.options.sourceAttr)) === -1) {
+                        this.show(this.domNodes.spinner);
+                    }
+
+                    if(this.domNodes.image.contains(this.domNodes.caption)) {
+                      this.domNodes.image.removeChild(this.domNodes.caption);
+                    }
 
-                this.adjustImage(slideDirection);
-                if (this.options.preloading) this.preload();
-            }, 100);
+                    this.adjustImage(slideDirection);
+                    if (this.options.preloading) this.preload();
+                }, 100);
+            } else {
+                this.isAnimating = false;
+            }
         });
     }
 
@@ -522,8 +549,14 @@ class SimpleLightbox {
             this.domNodes.image.style.height = imageHeight + 'px';
 
             this.domNodes.spinner.style.display = 'none';
-
-            this.fadeIn(this.currentImage, this.options.fadeSpeed);
+            if( this.options.focus ) {
+                this.forceFocus();
+            }
+            this.fadeIn(this.currentImage, this.options.fadeSpeed, () => {
+                if( this.options.focus ) {
+                    this.domNodes.wrapper.focus();
+                }
+            });
 
             this.isOpen = true;
 
@@ -1109,6 +1142,17 @@ class SimpleLightbox {
         }, this.options.animationSpeed);
     }
 
+    forceFocus() {
+        this.removeEventListener(document, 'focusin.' + this.eventNamespace);
+        this.addEventListener(document, 'focusin.' + this.eventNamespace, event => {
+            if (document !== event.target &&
+                this.domNodes.wrapper !== event.target &&
+                !this.domNodes.wrapper.contains(event.target)) {
+                this.domNodes.wrapper.focus();
+            }
+        });
+    }
+
     // utility
 
     addEventListener(elements, events, callback, opts) {
@@ -1135,8 +1179,10 @@ class SimpleLightbox {
         events = this.wrap(events);
         for (let element of elements) {
             for (let event of events) {
-                element.removeEventListener(event.split('.')[0], element.namespaces[event]);
-                delete element.namespaces[event];
+                if(element.namespaces && element.namespaces[event]) {
+                    element.removeEventListener(event.split('.')[0], element.namespaces[event]);
+                    delete element.namespaces[event];
+                }
             }
         }
     }
@@ -1286,7 +1332,7 @@ class SimpleLightbox {
         ]);
 
         this.removeEventListener(this.elements, 'click.' + this.eventNamespace);
-
+        this.removeEventListener(document, 'focusin.' + this.eventNamespace);
         this.removeEventListener(document.body, 'contextmenu.' + this.eventNamespace);
         this.removeEventListener(document.body, 'keyup.' + this.eventNamespace);