franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Bump lightbox to 2.11.4

Browse Source
This commit is contained in:
Franzz
2023-10-19 21:33:59 +02:00
parent b3cd217e28
commit af05650443
2 changed files with 62 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
readme.md
View File

@@ -22,6 +22,7 @@
4. Copy settings-sample.php to settings.php and populate 4. Copy settings-sample.php to settings.php and populate
5. Go to #admin and create a new project, feed & maps 5. Go to #admin and create a new project, feed & maps
6. Add a GPX file named <project_codename>.gpx to /geo/ 6. Add a GPX file named <project_codename>.gpx to /geo/
7. Run composer install
## To Do List ## To Do List
* ECMA import/export * ECMA import/export
* Add mail frequency slider * Add mail frequency slider

185
script/lightbox.js
View File

@@ -1,5 +1,5 @@
/*! /*!
* Lightbox v2.11.3 * Lightbox v2.11.4
* by Lokesh Dhakar * by Lokesh Dhakar
* *
* More info: * More info:
@@ -46,8 +46,6 @@
fadeDuration: 600, fadeDuration: 600,
fitImagesInViewport: true, fitImagesInViewport: true,
imageFadeDuration: 600, imageFadeDuration: 600,
// maxWidth: 800,
// maxHeight: 600,
positionFromTop: 50, positionFromTop: 50,
resizeDuration: 700, resizeDuration: 700,
showImageNumberLabel: true, showImageNumberLabel: true,
@@ -62,10 +60,8 @@
to prevent xss and other injection attacks. to prevent xss and other injection attacks.
*/ */
sanitizeTitle: false sanitizeTitle: false
//ADDED-START , hasVideo: true
, hasVideo: true
, onMediaChange: (oMedia) => {} , onMediaChange: (oMedia) => {}
//ADDED-END
}; };
Lightbox.prototype.option = function(options) { Lightbox.prototype.option = function(options) {
@@ -147,7 +143,6 @@
</div>\ </div>\
').appendTo($('body')); ').appendTo($('body'));
// Cache jQuery objects // Cache jQuery objects
this.$lightbox = $('#lightbox'); this.$lightbox = $('#lightbox');
this.$overlay = $('#lightboxOverlay'); this.$overlay = $('#lightboxOverlay');
@@ -155,8 +150,7 @@
this.$container = this.$lightbox.find('.lb-container'); this.$container = this.$lightbox.find('.lb-container');
this.$image = this.$lightbox.find('.lb-image'); this.$image = this.$lightbox.find('.lb-image');
this.$nav = this.$lightbox.find('.lb-nav'); this.$nav = this.$lightbox.find('.lb-nav');
//ADDED-START
if(self.options.hasVideo) { if(self.options.hasVideo) {
this.$video = $('<video class="lb-video" controls autoplay></video>'); this.$video = $('<video class="lb-video" controls autoplay></video>');
this.$image.after(this.$video); this.$image.after(this.$video);
@@ -166,8 +160,7 @@
bottom: parseInt(this.$video.css('border-bottom-width'), 10), bottom: parseInt(this.$video.css('border-bottom-width'), 10),
left: parseInt(this.$video.css('border-left-width'), 10) left: parseInt(this.$video.css('border-left-width'), 10)
}; };
} }
//ADDED-END
// Store css values for future lookup // Store css values for future lookup
this.containerPadding = { this.containerPadding = {
@@ -185,11 +178,8 @@
}; };
// Attach event handlers to the newly minted DOM elements // Attach event handlers to the newly minted DOM elements
//ADDED-START this.$overlay.hide().add(this.$lightbox.find('.lb-dataContainer')).on('click', function() {
//this.$overlay.hide().on('click', function() { self.end();
this.$overlay.hide().add(this.$lightbox.find('.lb-dataContainer')).on('click', function() {
//ADDED-END
self.end();
return false; return false;
}); });
@@ -250,9 +240,13 @@
}); });
this.$lightbox.find('.lb-loader, .lb-close').on('click', function() { this.$lightbox.find('.lb-loader, .lb-close').on('click keyup', function(e) {
self.end(); // If mouse click OR 'enter' or 'space' keypress, close LB
return false; if (
e.type === 'click' || (e.type === 'keyup' && (e.which === 13 || e.which === 32))) {
self.end();
return false;
}
}); });
}; };
@@ -265,7 +259,6 @@
this.sizeOverlay(); this.sizeOverlay();
//ADDED-START
//Manage Zoom Event //Manage Zoom Event
this.$nav.mousewheel((e) => { this.$nav.mousewheel((e) => {
var asImg = self.album[this.currentImageIndex]; var asImg = self.album[this.currentImageIndex];
@@ -324,11 +317,25 @@
self.$image.css('--translate-x', fTransX + 'px'); self.$image.css('--translate-x', fTransX + 'px');
self.$image.css('--translate-y', fTransY + 'px'); self.$image.css('--translate-y', fTransY + 'px');
} }
//ADDED-END
this.album = []; this.album = [];
var imageNumber = 0; 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 // Support both data-lightbox attribute and rel attribute implementations
var dataLightboxValue = $link.attr('data-lightbox'); var dataLightboxValue = $link.attr('data-lightbox');
var $links; var $links;
@@ -336,7 +343,7 @@
if (dataLightboxValue) { if (dataLightboxValue) {
$links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]'); $links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]');
for (var i = 0; i < $links.length; i = ++i) { for (var i = 0; i < $links.length; i = ++i) {
this.addToAlbum($($links[i])); addToAlbum($($links[i]));
if ($links[i] === $link[0]) { if ($links[i] === $link[0]) {
imageNumber = i; imageNumber = i;
} }
@@ -344,12 +351,12 @@
} else { } else {
if ($link.attr('rel') === 'lightbox') { if ($link.attr('rel') === 'lightbox') {
// If image is not part of a set // If image is not part of a set
this.addToAlbum($link); addToAlbum($link);
} else { } else {
// If image is part of a set // If image is part of a set
$links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]'); $links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]');
for (var j = 0; j < $links.length; j = ++j) { for (var j = 0; j < $links.length; j = ++j) {
this.addToAlbum($($links[j])); addToAlbum($($links[j]));
if ($links[j] === $link[0]) { if ($links[j] === $link[0]) {
imageNumber = j; imageNumber = j;
} }
@@ -358,14 +365,7 @@
} }
// Position Lightbox // Position Lightbox
//ADDED-START this.$lightbox.fadeIn(this.options.fadeDuration);
//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
// Disable scrolling of the page while open // Disable scrolling of the page while open
if (this.options.disableScrolling) { if (this.options.disableScrolling) {
@@ -374,25 +374,7 @@
this.changeImage(imageNumber); 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) { Lightbox.prototype.getMaxSizes = function(iMediaWidth, iMediaHeight, sMediaType) {
var iWindowWidth = $(window).width(); var iWindowWidth = $(window).width();
var iWindowHeight = $(window).height(); var iWindowHeight = $(window).height();
@@ -473,20 +455,20 @@
// Hide most UI elements in preparation for the animated resizing of the lightbox. // Hide most UI elements in preparation for the animated resizing of the lightbox.
Lightbox.prototype.changeImage = function(imageNumber) { Lightbox.prototype.changeImage = function(imageNumber) {
var self = this; var self = this;
var filename = this.album[imageNumber].link; var filename = this.album[imageNumber].link;
// Disable keyboard nav during transitions
this.disableKeyboardNav();
// Show loading state // Disable keyboard nav during transitions
this.$overlay.fadeIn(this.options.fadeDuration); this.disableKeyboardNav();
$('.lb-loader').fadeIn('slow');
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'}); this.$image.css({'--scale': '1', '--translate-x': '0', '--translate-y': '0'});
self.$lightbox.find('.lb-dataContainer').css({width:'200px', height:'30px'}); self.$lightbox.find('.lb-dataContainer').css({width:'200px', height:'30px'});
this.$outerContainer.addClass('animating'); this.$outerContainer.addClass('animating');
this.$container.removeClass('moveable moving'); this.$container.removeClass('moveable moving');
this.options.onMediaChange(self.album[imageNumber]); this.options.onMediaChange(self.album[imageNumber]);
@@ -534,31 +516,19 @@
break; break;
} }
this.currentImageIndex = imageNumber; this.currentImageIndex = imageNumber;
}; };
//ADDED-END
// Stretch overlay to fit the viewport // Stretch overlay to fit the viewport
Lightbox.prototype.sizeOverlay = function(e) { Lightbox.prototype.sizeOverlay = function(e) {
//var self = this; /*
/*
We use a setTimeout 0 to pause JS execution and let the rendering catch-up. 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 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 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 hidden before we measure the document width, as the presence of the scrollbar will affect the
number. number.
*/ */
//ADDED-START if(e) {
/*
setTimeout(function() {
self.$overlay
.width($(document).width())
.height($(document).height());
}, 0);
*/
if(e) {
if(typeof oResizeTimer != 'undefined') clearTimeout(oResizeTimer); if(typeof oResizeTimer != 'undefined') clearTimeout(oResizeTimer);
oResizeTimer = setTimeout( oResizeTimer = setTimeout(
() => { () => {
@@ -573,17 +543,16 @@
}, },
200 200
); );
} }
//ADDED-END
}; };
// Animate the size of the lightbox to fit the image we are showing // Animate the size of the lightbox to fit the image we are showing
// This method also shows the the image. // This method also shows the the image.
//ADDED-START //ADDED-START
//Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) { //Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight, media) { Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight, media) {
media = media || 'image'; media = media || 'image';
//ADDED-END //ADDED-END
var self = this; var self = this;
var oldWidth = this.$outerContainer.outerWidth(); var oldWidth = this.$outerContainer.outerWidth();
@@ -597,19 +566,13 @@
//ADDED-END //ADDED-END
function postResize() { function postResize() {
//ADDED-START
//self.$lightbox.find('.lb-dataContainer').width(newWidth);
if(self.$lightbox.hasClass('vertical')) 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); else self.$lightbox.find('.lb-dataContainer').height(newHeight);
//ADDED-END
self.$lightbox.find('.lb-prevLink').height(newHeight); self.$lightbox.find('.lb-prevLink').height(newHeight);
self.$lightbox.find('.lb-nextLink').height(newHeight); self.$lightbox.find('.lb-nextLink').height(newHeight);
// Set focus on one of the two root nodes so keyboard events are captured. // Set focus on one of the two root nodes so keyboard events are captured.
//ADDED-START self.$overlay.trigger('focus');
//self.$overlay.focus();
self.$overlay.trigger( 'focus' );
//ADDED-END
self.showImage(); self.showImage();
} }
@@ -630,11 +593,8 @@
Lightbox.prototype.showImage = function() { Lightbox.prototype.showImage = function() {
this.$lightbox.find('.lb-loader').stop(true).hide(); 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); 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); else this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
//ADDED-END
this.updateNav(); this.updateNav();
this.updateDetails(); this.updateDetails();
@@ -691,29 +651,10 @@
$caption.text(this.album[this.currentImageIndex].title); $caption.text(this.album[this.currentImageIndex].title);
} else { } else {
$caption.html(this.album[this.currentImageIndex].title); $caption.html(this.album[this.currentImageIndex].title);
} }
//ADDED-START
//$caption.fadeIn('fast');
$caption.add(this.$lightbox.find('.lb-close')).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.$outerContainer.removeClass('animating');
this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() { this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() {
@@ -734,9 +675,7 @@
}; };
Lightbox.prototype.enableKeyboardNav = function() { Lightbox.prototype.enableKeyboardNav = function() {
//ADDED-START this.disableKeyboardNav();
this.disableKeyboardNav();
//ADDED-END
this.$lightbox.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)); this.$overlay.on('keyup.keyboard', $.proxy(this.keyboardAction, this));
}; };
@@ -775,19 +714,17 @@
Lightbox.prototype.end = function() { Lightbox.prototype.end = function() {
this.disableKeyboardNav(); this.disableKeyboardNav();
//ADDED-START if(this.options.hasVideo) {
if(this.options.hasVideo) { var $lbContainer = this.$lightbox.find('.lb-container');
var $lbContainer = this.$lightbox.find('.lb-container'); var $hasVideoNav = $lbContainer.hasClass('lb-video-nav');
var $hasVideoNav = $lbContainer.hasClass('lb-video-nav'); this.$video.attr('src', '');
this.$video.attr('src', '');
if($hasVideoNav) $lbContainer.removeClass('lb-video-nav'); if($hasVideoNav) $lbContainer.removeClass('lb-video-nav');
} }
oSpot.flushHash(); oSpot.flushHash();
//ADDED-END
$(window).off('resize', this.sizeOverlay); $(window).off('resize', this.sizeOverlay);
this.$nav.off('mousewheel'); this.$nav.off('mousewheel');
this.$lightbox.fadeOut(this.options.fadeDuration); this.$lightbox.fadeOut(this.options.fadeDuration);
this.$overlay.fadeOut(this.options.fadeDuration); this.$overlay.fadeOut(this.options.fadeDuration);