lightbox2 2.10.0.1 → 2.11.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1f9b68d0d78e88a3a523f13d759350cbc90a2fe0a9d477e7161180b77a6d1bf1
-  data.tar.gz: f9d0b8a54dd42cb88b41ea801f3ed75da47b0c8627cfcb3c8b8917ad6ecae745
+  metadata.gz: ea407e1dda07a26a65941114b36bf194b52b660ac3dbd64a9f7b8fa9e6c21da9
+  data.tar.gz: 25a34b1d0e268e9f0c4d206a5e2e0c2d2c862882d7e73b2d1ba1e4d18e593de4
 SHA512:
-  metadata.gz: fe05fc217b8f0a6ecb8079e89eda1bbeef7ba5d54788ddebdec65dca9086dfffd7e0eb4b2132278563986bed014019fbd43bf5acbbb29b1b4482894e2855b60c
-  data.tar.gz: 97af2e4983e8dc0872bde952c8d3898db1787fc84cab882a11eec03028399b94f513d4b20eb97e9f5627266c39da95080b1f4ae899f8eb2d2fcd03c40e0eca7e
+  metadata.gz: f0c212d160249f7c7e5f65b9922e1bd417aa357acab6a630127048b7c2a03c1698b92bc0d66dc9bf706678cce0b86c0d5be4171332e8c8131dc4d7f58f91fe6f
+  data.tar.gz: 62897c2b29f162a789b5380a8c98982374a5683a4243981e98e7250d15a9bc854f37dbb7ab63639e3f376b66774ca79b1c8307c9c2825a14c1a3a02b9e79cd47

data/CHANGELOG.md

@@ -0,0 +1,24 @@
+# Release 2.11.1.1
+
+* Fixed LIGHTBOX2_VERSION and VERSION constants (The values were not updated for the last release)
+
+# Release 2.11.1
+
+* Updated to upstream lightbox2 version 2.11.1 (https://github.com/lokesh/lightbox2/releases/tag/v2.11.1)
+
+# Release 2.11.0
+
+* Updated to upstream lightbox2 version 2.11.0 (https://github.com/lokesh/lightbox2/releases/tag/v2.11.0)
+
+# Release 2.10.0.2
+
+* Fix: Wrong version of `jquery-rails` was required within the gemspec file
+
+# Release 2.10.0.1
+
+* Fixes an issue when lightbox2 is being used in combination with turbolinks
+
+# Release 2.10.0
+
+This release provides the latest version of lightbox2 (2.10.0):
+https://lokeshdhakar.com/projects/lightbox2

data/README.md

@@ -7,7 +7,7 @@ This ruby gem provides the latest version of [lightbox2](https://github.com/loke
 Require this Ruby gem in your Ruby on Rails app by adding the following line to your `Gemfile`:
 
 ```
-gem 'lightbox2', '~> 2.10.0'
+gem 'lightbox2'
 ```
 
 Install the ruby gem by running `bundle` in your Rails app directory.

data/lib/lightbox2/rails/version.rb

@@ -1,6 +1,6 @@
 module Lightbox2
   module Rails
-    VERSION = '2.10.0.1'
-    LIGHTBOX2_VERSION = '2.10.0'
+    VERSION = '2.11.3'
+    LIGHTBOX2_VERSION = '2.11.3'
   end
 end

data/vendor/assets/javascripts/lightbox2.js

@@ -1,11 +1,11 @@
 /*!
- * Lightbox v2.10.0
+ * Lightbox v2.11.3
  * by Lokesh Dhakar
  *
  * More info:
  * http://lokeshdhakar.com/projects/lightbox2/
  *
- * Copyright 2007, 2018 Lokesh Dhakar
+ * Copyright Lokesh Dhakar
  * Released under the MIT license
  * https://github.com/lokesh/lightbox2/blob/master/LICENSE
  *
@@ -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==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" 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');
@@ -134,7 +146,6 @@
       if ($(event.target).attr('id') === 'lightbox') {
         self.end();
       }
-      return false;
     });
 
     this.$outerContainer.on('click', function(event) {
@@ -201,10 +212,6 @@
 
     $window.on('resize', $.proxy(this.sizeOverlay, this));
 
-    $('select, object, embed').css({
-      visibility: 'hidden'
-    });
-
     this.sizeOverlay();
 
     this.album = [];
@@ -256,7 +263,7 @@
 
     // Disable scrolling of the page while open
     if (this.options.disableScrolling) {
-      $('html').addClass('lb-disable-scrolling');
+      $('body').addClass('lb-disable-scrolling');
     }
 
     this.changeImage(imageNumber);
@@ -265,15 +272,17 @@
   // Hide most UI elements in preparation for the animated resizing of the lightbox.
   Lightbox.prototype.changeImage = function(imageNumber) {
     var self = this;
+    var filename = this.album[imageNumber].link;
+    var filetype = filename.split('.').slice(-1)[0];
+    var $image = this.$lightbox.find('.lb-image');
 
+    // Disable keyboard nav during transitions
     this.disableKeyboardNav();
-    var $image = this.$lightbox.find('.lb-image');
 
+    // Show loading state
     this.$overlay.fadeIn(this.options.fadeDuration);
-
     $('.lb-loader').fadeIn('slow');
     this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
-
     this.$outerContainer.addClass('animating');
 
     // When image to show is preloaded, we send the width and height to sizeContainer()
@@ -289,62 +298,90 @@
 
       $image.attr({
         'alt': self.album[imageNumber].alt,
-        'src': self.album[imageNumber].link
+        'src': filename
       });
 
       $preloader = $(preloader);
 
       $image.width(preloader.width);
       $image.height(preloader.height);
+      windowWidth = $(window).width();
+      windowHeight = $(window).height();
+
+      // Calculate the max image dimensions for the current viewport.
+      // Take into account the border around the image and an additional 10px gutter on each side.
+      maxImageWidth  = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
+      maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - self.options.positionFromTop - 70;
+
+      /*
+      Since many SVGs have small intrinsic dimensions, but they support scaling
+      up without quality loss because of their vector format, max out their
+      size.
+      */
+      if (filetype === 'svg') {
+        $image.width(maxImageWidth);
+        $image.height(maxImageHeight);
+      }
 
+      // Fit image inside the viewport.
       if (self.options.fitImagesInViewport) {
-        // Fit image inside the viewport.
-        // Take into account the border around the image and an additional 10px gutter on each side.
-
-        windowWidth    = $(window).width();
-        windowHeight   = $(window).height();
-        maxImageWidth  = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
-        maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - 120;
 
         // Check if image size is larger then maxWidth|maxHeight in settings
         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());
     };
 
-    preloader.src          = this.album[imageNumber].link;
+    // Preload image before showing
+    preloader.src = this.album[imageNumber].link;
     this.currentImageIndex = imageNumber;
   };
 
   // Stretch overlay to fit the viewport
   Lightbox.prototype.sizeOverlay = function() {
-    this.$overlay
-      .width($(document).width())
-      .height($(document).height());
+    var self = this;
+    /*
+    We use a setTimeout 0 to pause JS execution and let the rendering catch-up.
+    Why do this? If the `disableScrolling` option is set to true, a class is added to the body
+    tag that disables scrolling and hides the scrollbar. We want to make sure the scrollbar is
+    hidden before we measure the document width, as the presence of the scrollbar will affect the
+    number.
+    */
+    setTimeout(function() {
+      self.$overlay
+        .width($(document).width())
+        .height($(document).height());
+
+    }, 0);
   };
 
   // Animate the size of the lightbox to fit the image we are showing
+  // This method also shows the the image.
   Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
     var self = this;
 
@@ -357,6 +394,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();
     }
 
@@ -433,14 +474,7 @@
       } else {
         $caption.html(this.album[this.currentImageIndex].title);
       }
-      $caption.fadeIn('fast')
-        .find('a').on('click', function(event) {
-          if ($(this).attr('target') !== undefined) {
-            window.open($(this).attr('href'), $(this).attr('target'));
-          } else {
-            location.href = $(this).attr('href');
-          }
-        });
+      $caption.fadeIn('fast');
     }
 
     if (this.album.length > 1 && this.options.showImageNumberLabel) {
@@ -470,11 +504,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) {
@@ -483,16 +519,17 @@
     var KEYCODE_RIGHTARROW = 39;
 
     var keycode = event.keyCode;
-    var key     = String.fromCharCode(keycode).toLowerCase();
-    if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
+    if (keycode === KEYCODE_ESC) {
+      // Prevent bubbling so as to not affect other components on the page.
+      event.stopPropagation();
       this.end();
-    } else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
+    } else if (keycode === KEYCODE_LEFTARROW) {
       if (this.currentImageIndex !== 0) {
         this.changeImage(this.currentImageIndex - 1);
       } else if (this.options.wrapAround && this.album.length > 1) {
         this.changeImage(this.album.length - 1);
       }
-    } else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
+    } else if (keycode === KEYCODE_RIGHTARROW) {
       if (this.currentImageIndex !== this.album.length - 1) {
         this.changeImage(this.currentImageIndex + 1);
       } else if (this.options.wrapAround && this.album.length > 1) {
@@ -507,17 +544,17 @@
     $(window).off('resize', this.sizeOverlay);
     this.$lightbox.fadeOut(this.options.fadeDuration);
     this.$overlay.fadeOut(this.options.fadeDuration);
-    $('select, object, embed').css({
-      visibility: 'visible'
-    });
+
     if (this.options.disableScrolling) {
-      $('html').removeClass('lb-disable-scrolling');
+      $('body').removeClass('lb-disable-scrolling');
     }
   };
 
   return new Lightbox();
 }));
 
+// The lightbox has to be (re-)initiated, when the 'load' event of Rails Turobolinks gets fired, otherwise
+// it won't work when navigating to another page
 $(document).on('turbolinks:load', function(event) {
   lightbox.init();
 });

data/vendor/assets/stylesheets/lightbox2.scss

@@ -1,9 +1,5 @@
-html.lb-disable-scrolling {
+body.lb-disable-scrolling {
   overflow: hidden;
-  /* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */
-  position: fixed;
-  height: 100vh;
-  width: 100vw;
 }
 
 .lightboxOverlay {
@@ -25,6 +21,7 @@ html.lb-disable-scrolling {
   text-align: center;
   line-height: 0;
   font-weight: normal;
+  outline: none;
 }
 
 .lightbox .lb-image {

metadata

@@ -1,22 +1,19 @@
 --- !ruby/object:Gem::Specification
 name: lightbox2
 version: !ruby/object:Gem::Version
-  version: 2.10.0.1
+  version: 2.11.3
 platform: ruby
 authors:
 - Manuel Schnitzer
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-03-11 00:00:00.000000000 Z
+date: 2021-02-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jquery-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.1'
     - - ">="
       - !ruby/object:Gem::Version
         version: 3.1.3
@@ -24,9 +21,6 @@ dependencies:
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.1'
     - - ">="
       - !ruby/object:Gem::Version
         version: 3.1.3
@@ -37,15 +31,20 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- CHANGELOG.md
 - README.md
 - lib/lightbox2.rb
 - lib/lightbox2/rails.rb
 - lib/lightbox2/rails/engine.rb
 - lib/lightbox2/rails/version.rb
+- vendor/assets/images/close.png
 - vendor/assets/images/lightbox2/close.png
 - vendor/assets/images/lightbox2/loading.gif
 - vendor/assets/images/lightbox2/next.png
 - vendor/assets/images/lightbox2/prev.png
+- vendor/assets/images/loading.gif
+- vendor/assets/images/next.png
+- vendor/assets/images/prev.png
 - vendor/assets/javascripts/lightbox2.js
 - vendor/assets/stylesheets/lightbox2.scss
 homepage: https://github.com/mschnitzer/lightbox2-rubygem
@@ -68,7 +67,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.7.3
+rubygems_version: 2.7.6.2
 signing_key: 
 specification_version: 4
 summary: lightbox2 for Ruby on Rails