Added rel grouping feature #16 and added rtl support #161

andreknieriem · Feb 17, 2020 · 4647cce · 4647cce
1 parent e0acce0
commit 4647cce
Show file tree

Hide file tree

Showing 6 changed files with 286 additions and 259 deletions.
diff --git a/README.md b/README.md
@@ -79,7 +79,7 @@ For a whole example just look at the demo folder.
 | preloading | true | bool | allows preloading next und previous images |
 | enableKeyboard | true | bool | allow keyboard arrow navigation and close with ESC key |
 | loop | true | bool | enables looping through images |
-| rel | false | mixed | This can be used as an anchor rel alternative for Simplelightbox. This allows the user to group any combination of elements together for a gallery, or to override an existing rel so elements are not grouped together. Note: The value can also be set to 'nofollow' to disable grouping. |
+| rel | false | mixed | By default, false means, that the lightbox groups by rel automatically. This option can be used as an anchor rel alternative for Simplelightbox. It allows the user to group any combination of elements together for a gallery, or to override an existing rel so elements are not grouped together. Note: The value can also be set to 'nofollow' to disable grouping. |
 | docClose | true | bool | closes the lightbox when clicking outside |
 | swipeTolerance | 50 | int | how much pixel you have to swipe, until next or previous image |
 | className: | 'simple-lightbox' | string | adds a class to the wrapper of the lightbox |
@@ -96,6 +96,7 @@ For a whole example just look at the demo folder.
 | doubleTapZoom | 2 | int | zoom level if double tapping on image |
 | maxZoom | 10 | int | maximum zoom level on pinching |
 | htmlClass | 'has-lightbox' | string or false | adds class to html element if lightbox is open. If empty or false no class is set |
+| rtl | false | bool | change direction to rigth-to-left |
 ### Events
 | Name | Description |
 | ---- | ----------- |
@@ -190,7 +191,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.1.0 - Added rel grouping feature #16**      
+**2.1.0 - Added rel grouping feature #16 and added rtl support #161**      
 **2.0.0 - Complete rewrite. Now uses modern ES6 javascript, without the need of jQuery. Can use jQuery anyway. Developers can use gulp with babel to contribute. Thanks to Mtillmann #129 for the implementation**    
 **1.17.3 - Fixed new chrome passive error #155**  
 **1.17.2 - Fixed caption keeps disappeared on double click #139 and added better close symbol #133**  

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="https://cdn.jsdelivr.net/gh/andreknieriem/simplelightbox@master/dist/simple-lightbox.min.css" />
+<link rel="stylesheet" href="../dist/simple-lightbox.css" />
 <link rel="stylesheet" href="demo.css" />
 <title>SimpleLightbox by André Rinas</title>
 </head>
@@ -368,6 +368,12 @@ <h2>JavaScript Options</h2>
 					<td>string</td>
 					<td>adds class to html element if lightbox is open. If empty or false no class is set</td>
 					</tr>
+					<tr>
+					<td>rtl</td>
+					<td>false</td>
+					<td>bool</td>
+					<td>change direction to rigth-to-left</td>
+					</tr>
 					</tbody>
 					</table>
 			</div>
@@ -697,7 +703,6 @@ <h2>Author/<br />Contributors</h2>
 		$('body').fadeIn(200);
 
 		var $gallery = new SimpleLightbox('.small-demo a', {});
-		var $gallery2 = new SimpleLightbox('.small-demo2 a', {});
 
 		interval = window.setInterval(function(){
 			$('.scrollwheel').animate({

diff --git a/dist/simple-lightbox.css b/dist/simple-lightbox.css
@@ -95,6 +95,8 @@ body.hidden-scroll {
           .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;

diff --git a/dist/simple-lightbox.js b/dist/simple-lightbox.js
@@ -61,7 +61,8 @@ function () {
       throttleInterval: 0,
       doubleTapZoom: 2,
       maxZoom: 10,
-      htmlClass: 'has-lightbox'
+      htmlClass: 'has-lightbox',
+      rtl: false
     });
 
     _defineProperty(this, "transitionPrefix", void 0);
@@ -237,10 +238,7 @@ function () {
 
           if (!_this.isAnimating && ['ArrowLeft', 'ArrowRight'].indexOf(event.key) > -1) {
             _this.loadImage(event.key === 'ArrowRight' ? 1 : -1);
-          } // if (['ArrowLeft', 'ArrowRight'].indexOf(event.key) > -1) {
-          //     this.loadImage(event.key === 'ArrowRight' ? 1 : -1);
-          // }
-
+          }
         }
       }, this.options.throttleInterval));
     }
@@ -281,6 +279,10 @@ function () {
       if (this.options.className) {
         this.domNodes.wrapper.classList.add(this.options.className);
       }
+
+      if (this.options.rtl) {
+        this.domNodes.wrapper.classList.add('sl-dir-rtl');
+      }
     }
   }, {
     key: "throttle",
@@ -428,6 +430,12 @@ function () {
     value: function loadImage(direction) {
       var _this4 = this;
 
+      var slideDirection = direction;
+
+      if (this.options.rtl) {
+        direction = -direction;
+      }
+
       this.relatedElements[this.currentImageIndex].dispatchEvent(new Event('change.' + this.eventNamespace));
       this.relatedElements[this.currentImageIndex].dispatchEvent(new Event((direction === 1 ? 'next' : 'prev') + '.' + this.eventNamespace));
       var newIndex = this.currentImageIndex + direction;
@@ -440,7 +448,7 @@ function () {
       this.domNodes.counter.querySelector('.sl-current').innerHTML = this.currentImageIndex + 1;
 
       if (this.options.animationSlide) {
-        this.slide(this.options.animationSpeed / 1000, -100 * direction - this.controlCoordinates.swipeDiff + 'px');
+        this.slide(this.options.animationSpeed / 1000, -100 * slideDirection - this.controlCoordinates.swipeDiff + 'px');
       }
 
       this.fadeOut(this.domNodes.image, 300, function () {
@@ -458,7 +466,7 @@ function () {
             _this4.domNodes.image.removeChild(_this4.domNodes.caption);
           }
 
-          _this4.adjustImage(direction);
+          _this4.adjustImage(slideDirection);
 
           if (_this4.options.preloading) _this4.preload();
         }, 100);

diff --git a/src/simple-lightbox.js b/src/simple-lightbox.js
@@ -39,7 +39,8 @@ class SimpleLightbox {
         throttleInterval: 0,
         doubleTapZoom: 2,
         maxZoom: 10,
-        htmlClass: 'has-lightbox'
+        htmlClass: 'has-lightbox',
+        rtl: false
     };
 
     transitionPrefix;
@@ -116,7 +117,7 @@ class SimpleLightbox {
 
     constructor(elements, options) {
 
-        this.options = Object.assign(this.defaultOptions, options)
+        this.options = Object.assign(this.defaultOptions, options);
 
         if (typeof elements === 'string') {
             this.initialSelector = elements;
@@ -208,9 +209,6 @@ class SimpleLightbox {
                     if(!this.isAnimating && ['ArrowLeft', 'ArrowRight'].indexOf(event.key) > -1) {
                       this.loadImage(event.key === 'ArrowRight' ? 1 : -1);
                     }
-                    // if (['ArrowLeft', 'ArrowRight'].indexOf(event.key) > -1) {
-                    //     this.loadImage(event.key === 'ArrowRight' ? 1 : -1);
-                    // }
                 }
             }, this.options.throttleInterval));
         }
@@ -253,6 +251,9 @@ class SimpleLightbox {
         if (this.options.className) {
             this.domNodes.wrapper.classList.add(this.options.className);
         }
+        if(this.options.rtl) {
+            this.domNodes.wrapper.classList.add('sl-dir-rtl');
+        }
     }
 
     throttle(func, limit) {
@@ -393,6 +394,10 @@ class SimpleLightbox {
     }
 
     loadImage(direction) {
+        let slideDirection = direction;
+        if(this.options.rtl) {
+            direction = -direction;
+        }
 
         this.relatedElements[this.currentImageIndex].dispatchEvent(new Event('change.' + this.eventNamespace));
         this.relatedElements[this.currentImageIndex].dispatchEvent(new Event((direction === 1 ? 'next' : 'prev') + '.' + this.eventNamespace));
@@ -409,7 +414,7 @@ class SimpleLightbox {
 
 
         if (this.options.animationSlide) {
-            this.slide(this.options.animationSpeed / 1000, (-100 * direction) - this.controlCoordinates.swipeDiff + 'px');
+            this.slide(this.options.animationSpeed / 1000, (-100 * slideDirection) - this.controlCoordinates.swipeDiff + 'px');
         }
 
         this.fadeOut(this.domNodes.image, 300, () => {
@@ -426,7 +431,7 @@ class SimpleLightbox {
                   this.domNodes.image.removeChild(this.domNodes.caption);
                 }
 
-                this.adjustImage(direction);
+                this.adjustImage(slideDirection);
                 if (this.options.preloading) this.preload();
             }, 100);
         });