From af056504436145ea4e07388ad6db66e26c5f7767 Mon Sep 17 00:00:00 2001 From: Franzz Date: Thu, 19 Oct 2023 21:33:59 +0200 Subject: [PATCH] Bump lightbox to 2.11.4 --- readme.md | 1 + script/lightbox.js | 185 +++++++++++++++------------------------------ 2 files changed, 62 insertions(+), 124 deletions(-) diff --git a/readme.md b/readme.md index fd1f908..e63f30b 100644 --- a/readme.md +++ b/readme.md @@ -22,6 +22,7 @@ 4. Copy settings-sample.php to settings.php and populate 5. Go to #admin and create a new project, feed & maps 6. Add a GPX file named .gpx to /geo/ +7. Run composer install ## To Do List * ECMA import/export * Add mail frequency slider diff --git a/script/lightbox.js b/script/lightbox.js index 386284f..b5e7ad7 100644 --- a/script/lightbox.js +++ b/script/lightbox.js @@ -1,5 +1,5 @@ /*! - * Lightbox v2.11.3 + * Lightbox v2.11.4 * by Lokesh Dhakar * * More info: @@ -46,8 +46,6 @@ fadeDuration: 600, fitImagesInViewport: true, imageFadeDuration: 600, - // maxWidth: 800, - // maxHeight: 600, positionFromTop: 50, resizeDuration: 700, showImageNumberLabel: true, @@ -62,10 +60,8 @@ to prevent xss and other injection attacks. */ sanitizeTitle: false - //ADDED-START - , hasVideo: true + , hasVideo: true , onMediaChange: (oMedia) => {} - //ADDED-END }; Lightbox.prototype.option = function(options) { @@ -147,7 +143,6 @@ \ ').appendTo($('body')); - // Cache jQuery objects this.$lightbox = $('#lightbox'); this.$overlay = $('#lightboxOverlay'); @@ -155,8 +150,7 @@ this.$container = this.$lightbox.find('.lb-container'); this.$image = this.$lightbox.find('.lb-image'); this.$nav = this.$lightbox.find('.lb-nav'); - - //ADDED-START + if(self.options.hasVideo) { this.$video = $(''); this.$image.after(this.$video); @@ -166,8 +160,7 @@ bottom: parseInt(this.$video.css('border-bottom-width'), 10), left: parseInt(this.$video.css('border-left-width'), 10) }; - } - //ADDED-END + } // Store css values for future lookup this.containerPadding = { @@ -185,11 +178,8 @@ }; // Attach event handlers to the newly minted DOM elements - //ADDED-START - //this.$overlay.hide().on('click', function() { - this.$overlay.hide().add(this.$lightbox.find('.lb-dataContainer')).on('click', function() { - //ADDED-END - self.end(); + this.$overlay.hide().add(this.$lightbox.find('.lb-dataContainer')).on('click', function() { + self.end(); return false; }); @@ -250,9 +240,13 @@ }); - this.$lightbox.find('.lb-loader, .lb-close').on('click', function() { - self.end(); - return false; + this.$lightbox.find('.lb-loader, .lb-close').on('click keyup', function(e) { + // If mouse click OR 'enter' or 'space' keypress, close LB + if ( + e.type === 'click' || (e.type === 'keyup' && (e.which === 13 || e.which === 32))) { + self.end(); + return false; + } }); }; @@ -265,7 +259,6 @@ this.sizeOverlay(); - //ADDED-START //Manage Zoom Event this.$nav.mousewheel((e) => { var asImg = self.album[this.currentImageIndex]; @@ -324,11 +317,25 @@ self.$image.css('--translate-x', fTransX + 'px'); self.$image.css('--translate-y', fTransY + 'px'); } - //ADDED-END this.album = []; var imageNumber = 0; + function addToAlbum($link) { + self.album.push({ + alt: $link.attr('data-alt'), + link: $link.attr('href'), + title: $link.attr('data-title') || $link.attr('title') + , orientation: $link.attr('data-orientation') + , type: $link.attr('data-type') + , id: $link.attr('data-id') + , $Media: $link.attr('data-type')=='video'?self.$video:self.$image + , width: $link.find('img').attr('width') + , height: $link.find('img').attr('height') + , set: $link.attr('data-lightbox') || $link.attr('rel') + }); + } + // Support both data-lightbox attribute and rel attribute implementations var dataLightboxValue = $link.attr('data-lightbox'); var $links; @@ -336,7 +343,7 @@ if (dataLightboxValue) { $links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]'); for (var i = 0; i < $links.length; i = ++i) { - this.addToAlbum($($links[i])); + addToAlbum($($links[i])); if ($links[i] === $link[0]) { imageNumber = i; } @@ -344,12 +351,12 @@ } else { if ($link.attr('rel') === 'lightbox') { // If image is not part of a set - this.addToAlbum($link); + addToAlbum($link); } else { // If image is part of a set $links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]'); for (var j = 0; j < $links.length; j = ++j) { - this.addToAlbum($($links[j])); + addToAlbum($($links[j])); if ($links[j] === $link[0]) { imageNumber = j; } @@ -358,14 +365,7 @@ } // Position Lightbox - //ADDED-START - //var top = $window.scrollTop() + this.options.positionFromTop; - //var left = $window.scrollLeft(); - this.$lightbox/*.css({ - top: top + 'px', - left: left + 'px' - })*/.fadeIn(this.options.fadeDuration); - //ADDED-END + this.$lightbox.fadeIn(this.options.fadeDuration); // Disable scrolling of the page while open if (this.options.disableScrolling) { @@ -374,25 +374,7 @@ this.changeImage(imageNumber); }; - - Lightbox.prototype.addToAlbum = function($link) { - this.album.push({ - alt: $link.attr('data-alt'), - link: $link.attr('href'), - title: $link.attr('data-title') || $link.attr('title') - //ADDED-START - , orientation: $link.attr('data-orientation') - , type: $link.attr('data-type') - , id: $link.attr('data-id') - , $Media: $link.attr('data-type')=='video'?this.$video:this.$image - , width: $link.find('img').attr('width') - , height: $link.find('img').attr('height') - , set: $link.attr('data-lightbox') || $link.attr('rel') - //ADDED-END - }); - } - - //ADDED-START + Lightbox.prototype.getMaxSizes = function(iMediaWidth, iMediaHeight, sMediaType) { var iWindowWidth = $(window).width(); var iWindowHeight = $(window).height(); @@ -473,20 +455,20 @@ // 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; - - // Disable keyboard nav during transitions - this.disableKeyboardNav(); + var self = this; + var filename = this.album[imageNumber].link; - // Show loading state - this.$overlay.fadeIn(this.options.fadeDuration); - $('.lb-loader').fadeIn('slow'); + // Disable keyboard nav during transitions + this.disableKeyboardNav(); - this.$lightbox.find('.lb-image, .lb-video, .lb-nav, .lb-prev, .lb-next, .lb-number, .lb-caption, .lb-close').hide(); + // Show loading state + this.$overlay.fadeIn(this.options.fadeDuration); + $('.lb-loader').fadeIn('slow'); + + this.$lightbox.find('.lb-image, .lb-video, .lb-nav, .lb-prev, .lb-next, .lb-number, .lb-caption, .lb-close').hide(); this.$image.css({'--scale': '1', '--translate-x': '0', '--translate-y': '0'}); self.$lightbox.find('.lb-dataContainer').css({width:'200px', height:'30px'}); - this.$outerContainer.addClass('animating'); + this.$outerContainer.addClass('animating'); this.$container.removeClass('moveable moving'); this.options.onMediaChange(self.album[imageNumber]); @@ -534,31 +516,19 @@ break; } - this.currentImageIndex = imageNumber; + this.currentImageIndex = imageNumber; }; - //ADDED-END // Stretch overlay to fit the viewport Lightbox.prototype.sizeOverlay = function(e) { - //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. */ - //ADDED-START - /* - setTimeout(function() { - self.$overlay - .width($(document).width()) - .height($(document).height()); - - }, 0); - */ - if(e) { + if(e) { if(typeof oResizeTimer != 'undefined') clearTimeout(oResizeTimer); oResizeTimer = setTimeout( () => { @@ -573,17 +543,16 @@ }, 200 ); - } - //ADDED-END + } }; // Animate the size of the lightbox to fit the image we are showing // This method also shows the the image. //ADDED-START //Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) { - Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight, media) { - media = media || 'image'; - //ADDED-END + Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight, media) { + media = media || 'image'; + //ADDED-END var self = this; var oldWidth = this.$outerContainer.outerWidth(); @@ -597,19 +566,13 @@ //ADDED-END function postResize() { - //ADDED-START - //self.$lightbox.find('.lb-dataContainer').width(newWidth); if(self.$lightbox.hasClass('vertical')) self.$lightbox.find('.lb-dataContainer').width(newWidth); else self.$lightbox.find('.lb-dataContainer').height(newHeight); - //ADDED-END 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. - //ADDED-START - //self.$overlay.focus(); - self.$overlay.trigger( 'focus' ); - //ADDED-END + self.$overlay.trigger('focus'); self.showImage(); } @@ -630,11 +593,8 @@ Lightbox.prototype.showImage = function() { this.$lightbox.find('.lb-loader').stop(true).hide(); - //ADDED-START - //this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration); if(this.options.hasVideo && this.album[this.currentImageIndex].type == 'video') this.$lightbox.find('.lb-video').fadeIn(this.options.imageFadeDuration); else this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration); - //ADDED-END this.updateNav(); this.updateDetails(); @@ -691,29 +651,10 @@ $caption.text(this.album[this.currentImageIndex].title); } else { $caption.html(this.album[this.currentImageIndex].title); - } - //ADDED-START - //$caption.fadeIn('fast'); + } $caption.add(this.$lightbox.find('.lb-close')).fadeIn('fast'); - //ADDED-END } - //ADDED-START - /* - //ADDED-END - if (this.album.length > 1 && this.options.showImageNumberLabel) { - var labelText = this.imageCountLabel(this.currentImageIndex + 1, this.album.length); - //ADDED-START - //this.$lightbox.find('.lb-number').text(labelText).fadeIn('fast'); - this.$lightbox.find('.lb-number').empty().append(labelText).fadeIn('fast'); - //ADDED-END - } else { - this.$lightbox.find('.lb-number').hide(); - } - //ADDED-START - */ - //ADDED-END - this.$outerContainer.removeClass('animating'); this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() { @@ -734,9 +675,7 @@ }; Lightbox.prototype.enableKeyboardNav = function() { - //ADDED-START - this.disableKeyboardNav(); - //ADDED-END + this.disableKeyboardNav(); this.$lightbox.on('keyup.keyboard', $.proxy(this.keyboardAction, this)); this.$overlay.on('keyup.keyboard', $.proxy(this.keyboardAction, this)); }; @@ -775,19 +714,17 @@ Lightbox.prototype.end = function() { this.disableKeyboardNav(); - //ADDED-START - if(this.options.hasVideo) { - var $lbContainer = this.$lightbox.find('.lb-container'); - var $hasVideoNav = $lbContainer.hasClass('lb-video-nav'); - this.$video.attr('src', ''); + if(this.options.hasVideo) { + var $lbContainer = this.$lightbox.find('.lb-container'); + var $hasVideoNav = $lbContainer.hasClass('lb-video-nav'); + this.$video.attr('src', ''); - if($hasVideoNav) $lbContainer.removeClass('lb-video-nav'); - } - oSpot.flushHash(); - //ADDED-END + if($hasVideoNav) $lbContainer.removeClass('lb-video-nav'); + } + oSpot.flushHash(); $(window).off('resize', this.sizeOverlay); - this.$nav.off('mousewheel'); + this.$nav.off('mousewheel'); this.$lightbox.fadeOut(this.options.fadeDuration); this.$overlay.fadeOut(this.options.fadeDuration);