diff --git a/lightbox2.gemspec b/lightbox2.gemspec index 108fde4..787eb19 100644 --- a/lightbox2.gemspec +++ b/lightbox2.gemspec @@ -1,7 +1,7 @@ Gem::Specification.new do |s| s.name = 'lightbox2' - s.version = '2.11.0' - s.date = '2019-04-23' + s.version = '2.11.1' + s.date = '2019-07-15' s.summary = 'lightbox2 for Ruby on Rails' s.description = "This gem for Ruby on Rails provides the lightbox2 library to Rails's asset pipeline." s.authors = ['Manuel Schnitzer'] diff --git a/vendor/assets/javascripts/lightbox2.js b/vendor/assets/javascripts/lightbox2.js index 659dc7c..ecd7c54 100644 --- a/vendor/assets/javascripts/lightbox2.js +++ b/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; - $('
').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 + $('
').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) { diff --git a/vendor/assets/stylesheets/lightbox2.scss b/vendor/assets/stylesheets/lightbox2.scss index 069c3ad..d8dea96 100644 --- a/vendor/assets/stylesheets/lightbox2.scss +++ b/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 {