lightbox2 2.11.0 → 2.11.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6ae6009457e3dbd9dd1195c716ef1e73ede567f8fd862b0e6d05fc411aeceaa8
-  data.tar.gz: e569e4ca6890e4cb62199882c3cd71880a47f9e95da58c05f55a6bc953691cc8
+  metadata.gz: 1d1c9036da5b0dc4f331f06473332644fb7134b7318146bd7681d192af5b3edb
+  data.tar.gz: d7ef64516cefd783dac0cc0e9df25cc7a8d737ef63b6086ec5ff883c2c696d89
 SHA512:
-  metadata.gz: 34101d21e68b4680611c2eccd110a2a81b97b47c3a730a45fbec71d8d32bcdb62b742e2adab9daecc2417f57fc088fa4d2eb7d7d48a2e51a513dc6807f3b211d
-  data.tar.gz: aaff7d3b79aeef857f778c3f88e49c28c9a409bfa61257338703e4f7e61686cdfb6ea6f0d7cca4368cbded0807d2a5f5132d412447d60247595ebd8638e9bb57
+  metadata.gz: 67bb2182d2c63b13230749dc4453bb2d0aed0a9e06847cdcc9a20fde32afb8c3377c89ebc3d7a5186fe9cce2f4c38e281f34a1755db07c796a6e4227957cd9d2
+  data.tar.gz: 3d2242f3fceda6c5830ac3887f0ffd9da8aa4903b058bfede8736406e62930120b626fec3e09388196b79439b4446cb3629c110b3c91acc2e59ecfc6e7a58b08

data/vendor/assets/javascripts/lightbox2.js

@@ -1,5 +1,5 @@
 /*!
- * Lightbox v2.11.0
+ * Lightbox v2.11.1
  * by Lokesh Dhakar
  *
  * More info:
@@ -99,7 +99,19 @@
     }
 
     var self = this;
-    $('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/><div class="lb-nav"><a class="lb-prev" aria-label="Previous image" href="" ></a><a class="lb-next" aria-label="Next image" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));
+
+    // The two root notes generated, #lightboxOverlay and #lightbox are given
+    // tabindex attrs so they are focusable. We attach our keyboard event
+    // listeners to these two elements, and not the document. Clicking anywhere
+    // while Lightbox is opened will keep the focus on or inside one of these
+    // two elements.
+    //
+    // We do this so we can prevent propogation of the Esc keypress when
+    // Lightbox is open. This prevents it from intefering with other components
+    // on the page below.
+    //
+    // Github issue: https://github.com/lokesh/lightbox2/issues/663
+    $('<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div><div id="lightbox" tabindex="-1" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/><div class="lb-nav"><a class="lb-prev" aria-label="Previous image" href="" ></a><a class="lb-next" aria-label="Next image" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));
 
     // Cache jQuery objects
     this.$lightbox       = $('#lightbox');
@@ -323,24 +335,28 @@
         if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
           maxImageWidth = self.options.maxWidth;
         }
-        if (self.options.maxHeight && self.options.maxHeight < maxImageWidth) {
+        if (self.options.maxHeight && self.options.maxHeight < maxImageHeight) {
           maxImageHeight = self.options.maxHeight;
         }
 
-        // Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
-        // option than we need to size down while maintaining the aspect ratio.
-        if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
-          if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
-            imageWidth  = maxImageWidth;
-            imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
-            $image.width(imageWidth);
-            $image.height(imageHeight);
-          } else {
-            imageHeight = maxImageHeight;
-            imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
-            $image.width(imageWidth);
-            $image.height(imageHeight);
-          }
+      } else {
+        maxImageWidth = self.options.maxWidth || preloader.width || maxImageWidth;
+        maxImageHeight = self.options.maxHeight || preloader.height || maxImageHeight;
+      }
+
+      // Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
+      // option than we need to size down while maintaining the aspect ratio.
+      if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
+        if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
+          imageWidth  = maxImageWidth;
+          imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
+          $image.width(imageWidth);
+          $image.height(imageHeight);
+        } else {
+          imageHeight = maxImageHeight;
+          imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
+          $image.width(imageWidth);
+          $image.height(imageHeight);
         }
       }
       self.sizeContainer($image.width(), $image.height());
@@ -383,6 +399,10 @@
       self.$lightbox.find('.lb-dataContainer').width(newWidth);
       self.$lightbox.find('.lb-prevLink').height(newHeight);
       self.$lightbox.find('.lb-nextLink').height(newHeight);
+
+      // Set focus on one of the two root nodes so keyboard events are captured.
+      self.$overlay.focus();
+
       self.showImage();
     }
 
@@ -489,11 +509,13 @@
   };
 
   Lightbox.prototype.enableKeyboardNav = function() {
-    $(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
+    this.$lightbox.on('keyup.keyboard', $.proxy(this.keyboardAction, this));
+    this.$overlay.on('keyup.keyboard', $.proxy(this.keyboardAction, this));
   };
 
   Lightbox.prototype.disableKeyboardNav = function() {
-    $(document).off('.keyboard');
+    this.$lightbox.off('.keyboard');
+    this.$overlay.off('.keyboard');
   };
 
   Lightbox.prototype.keyboardAction = function(event) {
@@ -503,6 +525,8 @@
 
     var keycode = event.keyCode;
     if (keycode === KEYCODE_ESC) {
+      // Prevent bubbling so as to not affect other components on the page.
+      event.stopPropagation();
       this.end();
     } else if (keycode === KEYCODE_LEFTARROW) {
       if (this.currentImageIndex !== 0) {

data/vendor/assets/stylesheets/lightbox2.scss

@@ -21,6 +21,7 @@ body.lb-disable-scrolling {
   text-align: center;
   line-height: 0;
   font-weight: normal;
+  outline: none;
 }
 
 .lightbox .lb-image {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: lightbox2
 version: !ruby/object:Gem::Version
-  version: 2.11.0
+  version: 2.11.1
 platform: ruby
 authors:
 - Manuel Schnitzer
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-04-23 00:00:00.000000000 Z
+date: 2019-07-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jquery-rails