Fix lightbox portrait mode: dynamic media data position

masks/project.html

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

readme.md

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

script/lightbox.js

@@ -302,7 +302,6 @@
       }
     }
 
-	
     // Position Lightbox
     //ADDED-START
     //var top  = $window.scrollTop() + this.options.positionFromTop;
@@ -336,13 +335,42 @@
     $('.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').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'});
+	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 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) {
 		var $lbContainer = this.$lightbox.find('.lb-container');
 		var $hasVideoNav = $lbContainer.hasClass('lb-video-nav');
@@ -351,16 +379,16 @@
 			this.$video.on('loadedmetadata', function(){
 				var $This = $(this);
 				
-				//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;
+			    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
 					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 {
 					maxVideoWidth = self.options.maxWidth || this.videoWidth || maxVideoWidth;
@@ -373,15 +401,17 @@
 			    	if ((this.videoWidth / maxVideoWidth) > (this.videoHeight / maxVideoHeight)) {
 			    		videoWidth = maxVideoWidth;
 			    		videoHeight = Math.round(this.videoHeight / (this.videoWidth / videoWidth));
-			    		$This.width(videoWidth);
-			    		$This.height(videoHeight);
 			    	} else {
 			    		videoHeight = maxVideoHeight;
 			    		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');
 				$This.off('loadedmetadata');
@@ -394,7 +424,7 @@
 			return;
 		}
 		else {
-			this.$video.attr('src', '');
+			this.$video.prop('src', null);
 			if($hasVideoNav) $lbContainer.removeClass('lb-video-nav');
         }
 	}
@@ -438,8 +468,10 @@
       //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;
-      maxImageWidth  = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - self.$lightbox.find('.lb-dataContainer').outerWidth();
-      maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - self.options.positionFromTop;
+      var oMaxSizes = getMaxSizes(preloader.width, preloader.height, 'image');
+      maxImageWidth = oMaxSizes.maxWidth;
+      maxImageHeight = oMaxSizes.maxHeight;
+      self.$lightbox.removeClass('vertical horizontal').addClass(oMaxSizes.direction);
       //ADDED-END
       
       /*
@@ -547,7 +579,8 @@
     function postResize() {
       //ADDED-START
       //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
       self.$lightbox.find('.lb-prevLink').height(newHeight);
       self.$lightbox.find('.lb-nextLink').height(newHeight);
@@ -636,7 +669,10 @@
       } else {
         $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) {

style/_lightbox.scss

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

style/_mask_upload.scss

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