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):''})

231
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,37 +322,15 @@
this.changeImage(imageNumber); this.changeImage(imageNumber);
}; };
// 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();
// Show loading state
this.$overlay.fadeIn(this.options.fadeDuration);
$('.lb-loader').fadeIn('slow');
//ADDED-START //ADDED-START
//this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide(); Lightbox.prototype.getMaxSizes = function(iMediaWidth, iMediaHeight, sMediaType) {
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'});
//ADDED-END
this.$outerContainer.addClass('animating');
//ADDED-START
var getMaxSizes = function(iMediaWidth, iMediaHeight, sMediaType) {
var iWindowWidth = $(window).width(); var iWindowWidth = $(window).width();
var iWindowHeight = $(window).height(); var iWindowHeight = $(window).height();
var oBorder = (sMediaType=='image')?self.imageBorderWidth:self.videoBorderWidth; var oBorder = (sMediaType=='image')?this.imageBorderWidth:this.videoBorderWidth;
var iMaxMediaWidth = iWindowWidth - self.containerPadding.left - self.containerPadding.right - oBorder.left - oBorder.right; var iMaxMediaWidth = iWindowWidth - this.containerPadding.left - this.containerPadding.right - oBorder.left - oBorder.right;
var iMaxMediaHeight = iWindowHeight - self.containerPadding.top - self.containerPadding.bottom - oBorder.top - oBorder.bottom - self.options.positionFromTop; var iMaxMediaHeight = iWindowHeight - this.containerPadding.top - this.containerPadding.bottom - oBorder.top - oBorder.bottom - this.options.positionFromTop;
var iDataMaxWidth = self.$lightbox.find('.lb-dataContainer').width(), iDataMaxHeight = self.$lightbox.find('.lb-dataContainer').height(); var iDataMaxWidth = this.$lightbox.find('.lb-dataContainer').width(), iDataMaxHeight = this.$lightbox.find('.lb-dataContainer').height();
var iImageRatio = iMediaWidth / iMediaHeight; var iImageRatio = iMediaWidth / iMediaHeight;
//Case horizontal //Case horizontal
@@ -372,86 +351,106 @@
return {maxWidth: iMaxMediaWidth, maxHeight: iMaxMediaHeight, direction: sDirection}; return {maxWidth: iMaxMediaWidth, maxHeight: iMaxMediaHeight, direction: sDirection};
}; };
oSpot.updateHash('media', self.album[imageNumber].id); 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);
if(self.options.hasVideo) { /*
var $lbContainer = this.$lightbox.find('.lb-container'); Since many SVGs have small intrinsic dimensions, but they support scaling
var $hasVideoNav = $lbContainer.hasClass('lb-video-nav'); 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(self.album[imageNumber].type == 'video') { if(this.options.fitImagesInViewport) {
this.$video.on('loadedmetadata', function(){
var $This = $(this);
var oMaxSizes = getMaxSizes(this.videoWidth, this.videoHeight, 'video');
maxVideoWidth = oMaxSizes.maxWidth;
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 //Check if image size is larger than maxWidth|maxHeight in settings
if(self.options.maxWidth && self.options.maxWidth < maxVideoWidth) maxVideoWidth = self.options.maxWidth; if(this.options.maxWidth && this.options.maxWidth < iMaxMediaWidth) iMaxMediaWidth = this.options.maxWidth;
if(self.options.maxHeight && self.options.maxHeight < maxVideoHeight) maxVideoHeight = self.options.maxHeight; if(this.options.maxHeight && this.options.maxHeight < iMaxMediaHeight) iMaxMediaHeight = this.options.maxHeight;
} }
else { else {
maxVideoWidth = self.options.maxWidth || this.videoWidth || maxVideoWidth; iMaxMediaWidth = this.options.maxWidth || oMedia.width || iMaxMediaWidth;
maxVideoHeight = self.options.maxHeight || this.videoHeight || maxVideoHeight; iMaxMediaHeight = this.options.maxHeight || oMedia.height || iMaxMediaHeight;
} }
//Is the current image's width or height is greater than the maxImageWidth or 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. //option than we need to size down while maintaining the aspect ratio.
if((this.videoWidth > maxVideoWidth) || (this.videoHeight > maxVideoHeight)) { var iMediaFinalWidth, iMediaFinalHeight;
if ((this.videoWidth / maxVideoWidth) > (this.videoHeight / maxVideoHeight)) { if((oMedia.width > iMaxMediaWidth) || (oMedia.height > iMaxMediaHeight)) {
videoWidth = maxVideoWidth; if ((oMedia.width / iMaxMediaWidth) > (oMedia.height / iMaxMediaHeight)) {
videoHeight = Math.round(this.videoHeight / (this.videoWidth / videoWidth)); iMediaFinalWidth = iMaxMediaWidth;
iMediaFinalHeight = Math.round(oMedia.height / (oMedia.width / iMaxMediaWidth));
} else { } else {
videoHeight = maxVideoHeight; iMediaFinalWidth = Math.round(oMedia.width / (oMedia.height / iMaxMediaHeight));
videoWidth = Math.round(this.videoWidth / (this.videoHeight / videoHeight)); iMediaFinalHeight = iMaxMediaHeight;
} }
} }
else { else {
videoWidth = this.videoWidth; iMediaFinalWidth = oMedia.width;
videoHeight = this.videoHeight; iMediaFinalHeight = oMedia.height;
} }
$This.width(videoWidth);
$This.height(videoHeight);
self.sizeContainer($This.width(), $This.height(), 'video'); oMedia.$Media.width(iMediaFinalWidth);
$This.off('loadedmetadata'); oMedia.$Media.height(iMediaFinalHeight);
this.sizeContainer(iMediaFinalWidth, iMediaFinalHeight, oMedia.type);
};
// 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();
// 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');
oSpot.updateHash('media', self.album[imageNumber].id);
var $hasVideoNav = this.$container.hasClass('lb-video-nav');
switch(self.album[imageNumber].type) {
case 'video':
this.$video.on('loadedmetadata', function(){
self.album[imageNumber].width = this.videoWidth;
self.album[imageNumber].height = this.videoHeight;
self.updateSize(imageNumber);
$(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');
}
}
//ADDED-END
// When image to show is preloaded, we send the width and height to sizeContainer() // When image to show is preloaded, we send the width and height to sizeContainer()
var preloader = new Image(); var preloader = new Image();
preloader.onload = function(){ preloader.onload = function(){
var $preloader; var $preloader;
var imageHeight;
var imageWidth;
var maxImageHeight;
var maxImageWidth;
var windowHeight;
var windowWidth;
$image.attr({ self.$image.attr({
'alt': self.album[imageNumber].alt, 'alt': self.album[imageNumber].alt,
'src': filename 'src': filename
}); });
$preloader = $(preloader); $preloader = $(preloader);
//ADDED-START //Orientation management
if(Math.abs(self.album[imageNumber].orientation) == 90 && preloader.width > preloader.height) { if(Math.abs(self.album[imageNumber].orientation) == 90 && preloader.width > preloader.height) {
var sWidth = preloader.width; var sWidth = preloader.width;
preloader.width = preloader.height; preloader.width = preloader.height;
@@ -459,79 +458,22 @@
} }
self.album[imageNumber].width = preloader.width; self.album[imageNumber].width = preloader.width;
self.album[imageNumber].height = preloader.height; self.album[imageNumber].height = preloader.height;
//ADDED-END
$image.width(preloader.width); self.updateSize(imageNumber);
$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 // Preload image before showing
preloader.src = this.album[imageNumber].link; preloader.src = this.album[imageNumber].link;
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; //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.
@@ -550,8 +492,15 @@
}, 0); }, 0);
*/ */
if(e) { if(e) {
var oMedia = this.album[this.currentImageIndex];
if(oMedia.type == 'image') {
if(typeof oResizeTimer != 'undefined') clearTimeout(oResizeTimer); if(typeof oResizeTimer != 'undefined') clearTimeout(oResizeTimer);
oResizeTimer = setTimeout(function(){self.changeImage(self.currentImageIndex);}, 200); 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