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

Fix lightbox on resize event

Browse Source
This commit is contained in:
Franzz
2022-01-19 19:06:00 +01:00
parent 89d352cb1f
commit 3be01ab479
7 changed files with 171 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
inc/User.php
View File

@@ -79,7 +79,6 @@ class User extends PhpObject {
} }
} }
if($bSuccess) { if($bSuccess) {
$this->setUserId($iUserId); $this->setUserId($iUserId);

4
masks/project.html
View File

@@ -973,9 +973,9 @@ function getMediaLink(asData, sType) {
var bTimeDiff = (asData.posted_on_formatted && asData.posted_on_formatted_local != asData.posted_on_formatted); var bTimeDiff = (asData.posted_on_formatted && asData.posted_on_formatted_local != asData.posted_on_formatted);
var $Comment = (!asData.comment || asData.comment == '')?'': var $Comment = (!asData.comment || asData.comment == '')?'':
$('<span>', {'class': 'lb-caption-line comment', 'title': asData.comment}) $('<span>', {'class': 'lb-caption-line comment desktop', 'title': asData.comment})
.addIcon('fa-post fa-lg fa-fw', true) .addIcon('fa-post fa-lg fa-fw', true)
.append(asData.comment); .append($('<span>', {'class':'comment-text'}).text(asData.comment));
var $PostedOn = var $PostedOn =
$('<span>', {'class': 'lb-caption-line', title: bTimeDiff?oSpot.lang('local_time', asData.posted_on_formatted_local):''}) $('<span>', {'class': 'lb-caption-line', title: bTimeDiff?oSpot.lang('local_time', asData.posted_on_formatted_local):''})

345
script/lightbox.js
View File

@@ -114,7 +114,7 @@
// on the page below. // on the page below.
// //
// Github issue: https://github.com/lokesh/lightbox2/issues/663 // 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" href="#"></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')); $('<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" href="#"></a></div></div></div><div class="lb-dataContainer desktop"><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 // Cache jQuery objects
this.$lightbox = $('#lightbox'); this.$lightbox = $('#lightbox');
@@ -271,6 +271,7 @@
, orientation: $link.attr('data-orientation') , orientation: $link.attr('data-orientation')
, type: $link.attr('data-type') , type: $link.attr('data-type')
, id: $link.attr('data-id') , id: $link.attr('data-id')
, $Media: $link.attr('data-type')=='video'?self.$video:self.$image
//ADDED-END //ADDED-END
}); });
} }
@@ -321,219 +322,160 @@
this.changeImage(imageNumber); this.changeImage(imageNumber);
}; };
//ADDED-START
Lightbox.prototype.getMaxSizes = function(iMediaWidth, iMediaHeight, sMediaType) {
var iWindowWidth = $(window).width();
var iWindowHeight = $(window).height();
var oBorder = (sMediaType=='image')?this.imageBorderWidth:this.videoBorderWidth;
var iMaxMediaWidth = iWindowWidth - this.containerPadding.left - this.containerPadding.right - oBorder.left - oBorder.right;
var iMaxMediaHeight = iWindowHeight - this.containerPadding.top - this.containerPadding.bottom - oBorder.top - oBorder.bottom - this.options.positionFromTop;
var iDataMaxWidth = this.$lightbox.find('.lb-dataContainer').width(), iDataMaxHeight = this.$lightbox.find('.lb-dataContainer').height();
var iImageRatio = iMediaWidth / iMediaHeight;
//Case horizontal
var iHeightH = Math.min(iMaxMediaHeight, iMediaHeight);
var iWidthH = Math.min(iHeightH * iImageRatio, iMaxMediaWidth - iDataMaxWidth);
var iSurfaceH = Math.min(iHeightH, iWidthH / iImageRatio) * iWidthH;
//Case vertical
var iWidthV = Math.min(iMaxMediaWidth, iMediaWidth);
var iHeightV = Math.min(iWidthV / iImageRatio, iMaxMediaHeight - iDataMaxHeight);
var iSurfaceV = Math.min(iWidthV, iHeightV * iImageRatio) * iHeightV;
var sDirection = (iSurfaceV > iSurfaceH)?'vertical':'horizontal';
if(sDirection == 'vertical') iMaxMediaHeight -= iDataMaxHeight;
else iMaxMediaWidth -= iDataMaxWidth;
return {maxWidth: iMaxMediaWidth, maxHeight: iMaxMediaHeight, direction: sDirection};
};
Lightbox.prototype.updateSize = function(iMediaNumber) {
var oMedia = this.album[iMediaNumber];
var sFileType = oMedia.link.split('.').slice(-1)[0];
var oMaxSizes = this.getMaxSizes(oMedia.width, oMedia.height, oMedia.type);
var iMaxMediaWidth = oMaxSizes.maxWidth;
var iMaxMediaHeight = oMaxSizes.maxHeight;
this.$lightbox.removeClass('vertical horizontal').addClass(oMaxSizes.direction);
/*
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(sFileType === 'svg') {
oMedia.$Media.width(iMaxMediaWidth);
oMedia.$Media.height(iMaxMediaHeight);
}
if(this.options.fitImagesInViewport) {
//Check if image size is larger than maxWidth|maxHeight in settings
if(this.options.maxWidth && this.options.maxWidth < iMaxMediaWidth) iMaxMediaWidth = this.options.maxWidth;
if(this.options.maxHeight && this.options.maxHeight < iMaxMediaHeight) iMaxMediaHeight = this.options.maxHeight;
}
else {
iMaxMediaWidth = this.options.maxWidth || oMedia.width || iMaxMediaWidth;
iMaxMediaHeight = this.options.maxHeight || oMedia.height || iMaxMediaHeight;
}
//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.
var iMediaFinalWidth, iMediaFinalHeight;
if((oMedia.width > iMaxMediaWidth) || (oMedia.height > iMaxMediaHeight)) {
if ((oMedia.width / iMaxMediaWidth) > (oMedia.height / iMaxMediaHeight)) {
iMediaFinalWidth = iMaxMediaWidth;
iMediaFinalHeight = Math.round(oMedia.height / (oMedia.width / iMaxMediaWidth));
} else {
iMediaFinalWidth = Math.round(oMedia.width / (oMedia.height / iMaxMediaHeight));
iMediaFinalHeight = iMaxMediaHeight;
}
}
else {
iMediaFinalWidth = oMedia.width;
iMediaFinalHeight = oMedia.height;
}
oMedia.$Media.width(iMediaFinalWidth);
oMedia.$Media.height(iMediaFinalHeight);
this.sizeContainer(iMediaFinalWidth, iMediaFinalHeight, oMedia.type);
};
// 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;
var filetype = filename.split('.').slice(-1)[0];
var $image = this.$lightbox.find('.lb-image');
// Disable keyboard nav during transitions // Disable keyboard nav during transitions
this.disableKeyboardNav(); this.disableKeyboardNav();
// Show loading state // Show loading state
this.$overlay.fadeIn(this.options.fadeDuration); this.$overlay.fadeIn(this.options.fadeDuration);
$('.lb-loader').fadeIn('slow'); $('.lb-loader').fadeIn('slow');
//ADDED-START
//this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide(); this.$lightbox.find('.lb-image, .lb-video, .lb-nav, .lb-prev, .lb-next, .lb-number, .lb-caption, .lb-close').hide();
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'});
//ADDED-END this.$outerContainer.addClass('animating');
this.$outerContainer.addClass('animating'); oSpot.updateHash('media', self.album[imageNumber].id);
//ADDED-START var $hasVideoNav = this.$container.hasClass('lb-video-nav');
var getMaxSizes = function(iMediaWidth, iMediaHeight, sMediaType) { switch(self.album[imageNumber].type) {
var iWindowWidth = $(window).width(); case 'video':
var iWindowHeight = $(window).height();
var oBorder = (sMediaType=='image')?self.imageBorderWidth:self.videoBorderWidth;
var iMaxMediaWidth = iWindowWidth - self.containerPadding.left - self.containerPadding.right - oBorder.left - oBorder.right;
var iMaxMediaHeight = iWindowHeight - self.containerPadding.top - self.containerPadding.bottom - oBorder.top - oBorder.bottom - self.options.positionFromTop;
var iDataMaxWidth = self.$lightbox.find('.lb-dataContainer').width(), iDataMaxHeight = self.$lightbox.find('.lb-dataContainer').height();
var iImageRatio = iMediaWidth / iMediaHeight;
//Case horizontal
var iHeightH = Math.min(iMaxMediaHeight, iMediaHeight);
var iWidthH = Math.min(iHeightH * iImageRatio, iMaxMediaWidth - iDataMaxWidth);
var iSurfaceH = Math.min(iHeightH, iWidthH / iImageRatio) * iWidthH;
//Case vertical
var iWidthV = Math.min(iMaxMediaWidth, iMediaWidth);
var iHeightV = Math.min(iWidthV / iImageRatio, iMaxMediaHeight - iDataMaxHeight);
var iSurfaceV = Math.min(iWidthV, iHeightV * iImageRatio) * iHeightV;
var sDirection = (iSurfaceV > iSurfaceH)?'vertical':'horizontal';
if(sDirection == 'vertical') iMaxMediaHeight -= iDataMaxHeight;
else iMaxMediaWidth -= iDataMaxWidth;
return {maxWidth: iMaxMediaWidth, maxHeight: iMaxMediaHeight, direction: sDirection};
};
oSpot.updateHash('media', self.album[imageNumber].id);
if(self.options.hasVideo) {
var $lbContainer = this.$lightbox.find('.lb-container');
var $hasVideoNav = $lbContainer.hasClass('lb-video-nav');
if(self.album[imageNumber].type == 'video') {
this.$video.on('loadedmetadata', function(){ this.$video.on('loadedmetadata', function(){
var $This = $(this); self.album[imageNumber].width = this.videoWidth;
self.album[imageNumber].height = this.videoHeight;
var oMaxSizes = getMaxSizes(this.videoWidth, this.videoHeight, 'video'); self.updateSize(imageNumber);
maxVideoWidth = oMaxSizes.maxWidth; $(this).off('loadedmetadata');
maxVideoHeight = oMaxSizes.maxHeight;
self.$lightbox.removeClass('vertical horizontal').addClass(oMaxSizes.direction);
//TODO merge with image
if(self.options.fitImagesInViewport) {
//Check if image size is larger than maxWidth|maxHeight in settings
if(self.options.maxWidth && self.options.maxWidth < maxVideoWidth) maxVideoWidth = self.options.maxWidth;
if(self.options.maxHeight && self.options.maxHeight < maxVideoHeight) maxVideoHeight = self.options.maxHeight;
}
else {
maxVideoWidth = self.options.maxWidth || this.videoWidth || maxVideoWidth;
maxVideoHeight = self.options.maxHeight || this.videoHeight || maxVideoHeight;
}
//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((this.videoWidth > maxVideoWidth) || (this.videoHeight > maxVideoHeight)) {
if ((this.videoWidth / maxVideoWidth) > (this.videoHeight / maxVideoHeight)) {
videoWidth = maxVideoWidth;
videoHeight = Math.round(this.videoHeight / (this.videoWidth / videoWidth));
} else {
videoHeight = maxVideoHeight;
videoWidth = Math.round(this.videoWidth / (this.videoHeight / videoHeight));
}
}
else {
videoWidth = this.videoWidth;
videoHeight = this.videoHeight;
}
$This.width(videoWidth);
$This.height(videoHeight);
self.sizeContainer($This.width(), $This.height(), 'video');
$This.off('loadedmetadata');
}); });
this.currentImageIndex = imageNumber; this.$video.attr('src', filename);
this.$video.attr('src', self.album[imageNumber].link);
if(!$hasVideoNav) $lbContainer.addClass('lb-video-nav'); if(!$hasVideoNav) this.$container.addClass('lb-video-nav');
return; break;
} case 'image':
else {
this.$video.attr('src', ''); this.$video.attr('src', '');
if($hasVideoNav) $lbContainer.removeClass('lb-video-nav'); if($hasVideoNav) this.$container.removeClass('lb-video-nav');
}
// When image to show is preloaded, we send the width and height to sizeContainer()
var preloader = new Image();
preloader.onload = function(){
var $preloader;
self.$image.attr({
'alt': self.album[imageNumber].alt,
'src': filename
});
$preloader = $(preloader);
//Orientation management
if(Math.abs(self.album[imageNumber].orientation) == 90 && preloader.width > preloader.height) {
var sWidth = preloader.width;
preloader.width = preloader.height;
preloader.height = sWidth;
}
self.album[imageNumber].width = preloader.width;
self.album[imageNumber].height = preloader.height;
self.updateSize(imageNumber);
};
// Preload image before showing
preloader.src = this.album[imageNumber].link;
break;
} }
//ADDED-END
// When image to show is preloaded, we send the width and height to sizeContainer() this.currentImageIndex = imageNumber;
var preloader = new Image();
preloader.onload = function() {
var $preloader;
var imageHeight;
var imageWidth;
var maxImageHeight;
var maxImageWidth;
var windowHeight;
var windowWidth;
$image.attr({
'alt': self.album[imageNumber].alt,
'src': filename
});
$preloader = $(preloader);
//ADDED-START
if(Math.abs(self.album[imageNumber].orientation) == 90 && preloader.width > preloader.height) {
var sWidth = preloader.width;
preloader.width = preloader.height;
preloader.height = sWidth;
}
self.album[imageNumber].width = preloader.width;
self.album[imageNumber].height = preloader.height;
//ADDED-END
$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.
//ADDED-START
//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;
var oMaxSizes = getMaxSizes(preloader.width, preloader.height, 'image');
maxImageWidth = oMaxSizes.maxWidth;
maxImageHeight = oMaxSizes.maxHeight;
self.$lightbox.removeClass('vertical horizontal').addClass(oMaxSizes.direction);
//ADDED-END
/*
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) {
// 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 < maxImageHeight) {
maxImageHeight = self.options.maxHeight;
}
} 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);
}
}
//ADDED-START
//self.sizeContainer($image.width(), $image.height());
self.sizeContainer($image.width(), $image.height(), 'image');
//ADDED-END
};
// Preload image before showing
preloader.src = this.album[imageNumber].link;
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; //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
@@ -541,17 +483,24 @@
number. number.
*/ */
//ADDED-START //ADDED-START
/* /*
setTimeout(function() { setTimeout(function() {
self.$overlay self.$overlay
.width($(document).width()) .width($(document).width())
.height($(document).height()); .height($(document).height());
}, 0); }, 0);
*/ */
if(e) { if(e) {
if(typeof oResizeTimer != 'undefined') clearTimeout(oResizeTimer); var oMedia = this.album[this.currentImageIndex];
oResizeTimer = setTimeout(function(){self.changeImage(self.currentImageIndex);}, 200); if(oMedia.type == 'image') {
if(typeof oResizeTimer != 'undefined') clearTimeout(oResizeTimer);
oResizeTimer = setTimeout(()=>{this.changeImage(this.currentImageIndex);}, 200);
}
else {
//var $Media = oMedia.$Media;
//this.updateSize($($Media), $Media.videoWidth, $Media.videoHeight, oMedia.type);
}
} }
//ADDED-END //ADDED-END
}; };

24
style/_lightbox.scss
View File

@@ -19,6 +19,7 @@
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden;
&.vertical { &.vertical {
flex-direction: column; flex-direction: column;
@@ -41,6 +42,7 @@
&.comment { &.comment {
max-width: 50%; max-width: 50%;
@include no-text-overflow();
} }
} }
} }
@@ -66,6 +68,18 @@
display: block; display: block;
margin-top: 1em; margin-top: 1em;
line-height: 1.33333333em; line-height: 1.33333333em;
&.comment {
.fa {
vertical-align: text-bottom;
}
.comment-text {
display: inline-block;
width: calc(100% - 1.25em*1.33333333333 - 0.5rem);
vertical-align: top;
}
}
} }
.lb-closeContainer .lb-close { .lb-closeContainer .lb-close {
@@ -105,8 +119,8 @@
box-sizing: content-box; box-sizing: content-box;
} }
&.lb-video-nav .lb-nav { &.lb-video-nav .lb-nav {
top: 0; top: 100px;
height: calc(100% - 100px); //Leave space for video progress bar height: calc(100% - 200px); //Leave space for video progress bar
} }
.lb-nav { .lb-nav {
@@ -117,7 +131,7 @@
&:before { &:before {
position: absolute; position: absolute;
top: calc(50% - 1em + 50px); top: calc(50% - 1em);
} }
} }
@@ -158,10 +172,6 @@
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
} }
&.comment {
@include no-text-overflow();
}
} }
.lb-number { .lb-number {

4
style/_mobile.scss
View File

@@ -63,10 +63,6 @@
text-align: center; text-align: center;
} }
} }
.lightbox.vertical .lb-dataContainer .lb-data .lb-details .lb-caption-line.comment {
display: none;
}
} }
@media only screen and (min-width: 801px) { @media only screen and (min-width: 801px) {

2
style/spot.css
View File

File diff suppressed because one or more lines are too long

2
style/spot.css.map
View File

File diff suppressed because one or more lines are too long