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

Fix lightbox portrait mode: dynamic media data position

Browse Source
This commit is contained in:
Franzz
2020-05-09 19:46:09 +02:00
parent 4a9c303684
commit f45343e47d
7 changed files with 115 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
masks/project.html
View File

@@ -86,7 +86,7 @@ oSpot.onQuitPage = function() {
oSpot.onKeydown = function(oEvent) { oSpot.onKeydown = function(oEvent) {
switch(oEvent.which) { switch(oEvent.which) {
case 27: case 27:
toggleFeedPanel(false); if(!$('#lightboxOverlay').is(':visible')) toggleFeedPanel(false);
break; break;
} }
} }

1
readme.md
View File

@@ -13,7 +13,6 @@
## To Do List ## To Do List
* ECMA import/export * ECMA import/export
* Reset zoom on image closing (lightbox) * Reset zoom on image closing (lightbox)
* Fix lightbox portrait mode: push text under (mobile especially)
* Add mail frequency slider * Add mail frequency slider
* Replace Project Time Zone with browser Time Zone when uploading media? * Replace Project Time Zone with browser Time Zone when uploading media?
* Use WMTS servers directly when not using Geo Caching Server * Use WMTS servers directly when not using Geo Caching Server

74
script/lightbox.js
View File

@@ -302,7 +302,6 @@
} }
} }
// Position Lightbox // Position Lightbox
//ADDED-START //ADDED-START
//var top = $window.scrollTop() + this.options.positionFromTop; //var top = $window.scrollTop() + this.options.positionFromTop;
@@ -336,13 +335,42 @@
$('.lb-loader').fadeIn('slow'); $('.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(); //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').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'});
//ADDED-END //ADDED-END
this.$outerContainer.addClass('animating'); this.$outerContainer.addClass('animating');
//ADDED-START //ADDED-START
var getMaxSizes = function(iMediaWidth, iMediaHeight, sMediaType) {
var iWindowWidth = $(window).width();
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};
};
if(self.options.hasVideo) { if(self.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');
@@ -351,38 +379,40 @@
this.$video.on('loadedmetadata', function(){ this.$video.on('loadedmetadata', function(){
var $This = $(this); 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 //TODO merge with image
windowWidth = $(window).width();
windowHeight = $(window).height();
maxVideoWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.videoBorderWidth.left - self.videoBorderWidth.right - self.$lightbox.find('.lb-dataContainer').outerWidth();
maxVideoHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.videoBorderWidth.top - self.videoBorderWidth.bottom;
if(self.options.fitImagesInViewport) { 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(self.options.maxWidth && self.options.maxWidth < maxVideoWidth) maxVideoWidth = self.options.maxWidth;
if(self.options.maxHeight && self.options.maxHeight < maxVideoWidth) maxVideoHeight = self.options.maxHeight; if(self.options.maxHeight && self.options.maxHeight < maxVideoHeight) maxVideoHeight = self.options.maxHeight;
} }
else { else {
maxVideoWidth = self.options.maxWidth || this.videoWidth || maxVideoWidth; maxVideoWidth = self.options.maxWidth || this.videoWidth || maxVideoWidth;
maxVideoHeight = self.options.maxHeight || this.videoHeight || maxVideoHeight; maxVideoHeight = self.options.maxHeight || this.videoHeight || maxVideoHeight;
} }
//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)) { if((this.videoWidth > maxVideoWidth) || (this.videoHeight > maxVideoHeight)) {
if ((this.videoWidth / maxVideoWidth) > (this.videoHeight / maxVideoHeight)) { if ((this.videoWidth / maxVideoWidth) > (this.videoHeight / maxVideoHeight)) {
videoWidth = maxVideoWidth; videoWidth = maxVideoWidth;
videoHeight = Math.round(this.videoHeight / (this.videoWidth / videoWidth)); videoHeight = Math.round(this.videoHeight / (this.videoWidth / videoWidth));
$This.width(videoWidth);
$This.height(videoHeight);
} else { } else {
videoHeight = maxVideoHeight; videoHeight = maxVideoHeight;
videoWidth = Math.round(this.videoWidth / (this.videoHeight / videoHeight)); videoWidth = Math.round(this.videoWidth / (this.videoHeight / videoHeight));
$This.width(videoWidth);
$This.height(videoHeight);
} }
} }
else {
videoWidth = this.videoWidth;
videoHeight = this.videoHeight;
}
$This.width(videoWidth);
$This.height(videoHeight);
self.sizeContainer($This.width(), $This.height(), 'video'); self.sizeContainer($This.width(), $This.height(), 'video');
$This.off('loadedmetadata'); $This.off('loadedmetadata');
}); });
@@ -394,7 +424,7 @@
return; return;
} }
else { else {
this.$video.attr('src', ''); this.$video.prop('src', null);
if($hasVideoNav) $lbContainer.removeClass('lb-video-nav'); if($hasVideoNav) $lbContainer.removeClass('lb-video-nav');
} }
} }
@@ -438,8 +468,10 @@
//ADDED-START //ADDED-START
//maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20; //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; //maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - self.options.positionFromTop - 70;
maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - self.$lightbox.find('.lb-dataContainer').outerWidth(); var oMaxSizes = getMaxSizes(preloader.width, preloader.height, 'image');
maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - self.options.positionFromTop; maxImageWidth = oMaxSizes.maxWidth;
maxImageHeight = oMaxSizes.maxHeight;
self.$lightbox.removeClass('vertical horizontal').addClass(oMaxSizes.direction);
//ADDED-END //ADDED-END
/* /*
@@ -547,7 +579,8 @@
function postResize() { function postResize() {
//ADDED-START //ADDED-START
//self.$lightbox.find('.lb-dataContainer').width(newWidth); //self.$lightbox.find('.lb-dataContainer').width(newWidth);
self.$lightbox.find('.lb-dataContainer').height(newHeight); if(self.$lightbox.hasClass('vertical')) self.$lightbox.find('.lb-dataContainer').width(newWidth);
else self.$lightbox.find('.lb-dataContainer').height(newHeight);
//ADDED-END //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);
@@ -636,7 +669,10 @@
} else { } else {
$caption.html(this.album[this.currentImageIndex].title); $caption.html(this.album[this.currentImageIndex].title);
} }
$caption.fadeIn('fast'); //ADDED-START
//$caption.fadeIn('fast');
$caption.add(this.$lightbox.find('.lb-close')).fadeIn('fast');
//ADDED-END
} }
if (this.album.length > 1 && this.options.showImageNumberLabel) { if (this.album.length > 1 && this.options.showImageNumberLabel) {

69
style/_lightbox.scss
View File

@@ -19,6 +19,52 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
&.vertical {
flex-direction: column;
.lb-dataContainer {
width: 100%;
height: 30px;
.lb-data {
padding: 0.5em 0;
.lb-details {
display: inline;
.lb-caption-line {
padding-right: 1em;
}
}
.lb-closeContainer {
display: inline;
}
}
}
}
&.horizontal {
flex-direction: row;
.lb-dataContainer {
width: 200px;
height: 100%;
.lb-data {
padding: 0.5em 0.5em 0;
.lb-caption-line {
display: block;
margin-top: 1em;
}
.lb-closeContainer .lb-close {
margin-top: 1em;
float: none;
}
}
}
}
.lb-outerContainer { .lb-outerContainer {
margin: 0; margin: 0;
@@ -30,6 +76,7 @@
.lb-image { .lb-image {
image-orientation: from-image; image-orientation: from-image;
border-radius: 0;
border: none; border: none;
--translate-x: 0; --translate-x: 0;
--translate-y: 0; --translate-y: 0;
@@ -80,23 +127,17 @@
.lb-dataContainer { .lb-dataContainer {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: inline-block;
vertical-align: top;
width: 200px;
max-width: 100%;
flex: 0 0 auto; flex: 0 0 auto;
overflow: hidden; overflow: hidden;
.lb-data { .lb-data {
padding: 1em 0 0 1em; text-align: left;
.lb-details { .lb-details {
float: none; float: none;
.lb-caption-line { .lb-caption-line {
cursor: default; cursor: default;
display: block;
margin-top: 1em;
} }
.lb-caption-line:first-child { .lb-caption-line:first-child {
@@ -104,17 +145,19 @@
} }
.lb-number { .lb-number {
padding: 0; display: none !important;
margin-top: 2em;
} }
} }
.lb-closeContainer { .lb-closeContainer {
display: none !important; color: white;
margin-top: 2em;
.lb-close { .lb-close {
@include lightbox-icon(close); @include lightbox-icon(close);
float: none; width: auto;
height: auto;
text-align: left;
@extend .fa-lg;
font-size: 1.3333333333em !important;
} }
} }
} }

1
style/_mask_upload.scss
View File

@@ -31,6 +31,7 @@
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 0.5em; padding: 0.5em;
border: 1px solid #333;
} }
.save { .save {

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