[wip] Allow long captions

src/css/default-skin/default-skin.scss

@@ -142,7 +142,7 @@
 	width: 70px;
 	height: 100px;
 	position: absolute;
-	z-index: 3;
+	z-index: 1;
 }
 
 .pswp__button--arrow--left {
@@ -351,7 +351,7 @@ a.pswp__share--download {
 	max-width: 420px;
 	margin: 0 auto;
 	font-size: 13px;
-	padding: 20px 10px 10px 10px;
+	padding: 18px 10px 10px 10px;
 	line-height: 20px;
 	color: #FFF;
 	background-color: #000;
@@ -363,6 +363,10 @@ a.pswp__share--download {
 		color: #FFF;
 	}
 
+	p {
+		margin: 0 0 0 10px;
+	}
+
 	p:last-child::after {
 		display: inline-block;
 		height: 10px;
@@ -371,7 +375,6 @@ a.pswp__share--download {
 		margin-left: 6px;
 		margin-bottom: -1px;
 		content: ' ';
-
 	}
 }
 

src/js/desktop-zoom.js

@@ -95,7 +95,11 @@ _registerModule('DesktopZoom', {
 
 					if (!_options.closeOnScroll || _numAnimations || _isDragging) {
 						var source = e.target || e.srcElement;
-						if(!source.classList.contains("pswp__caption__center")) {
+						if(source.classList.contains("pswp__caption__center")) {
+							if(source.class.contains("pswp__button--caption--ctrl--expand")) {
+								toggleCaption(source.parentNode);
+							}
+						} else {
 							e.preventDefault();
 						}
 					} else if(_transformKey && Math.abs(e.deltaY) > 2) {

src/js/framework-bridge.js

@@ -274,4 +274,25 @@ if(framework.features.oldIE) {
 		}
 	};
 
-}
+}
+
+// Polyfill for closest() for IE11 from https://developer.mozilla.org/en-US/docs/Web/API/Element/closest.
+// Not bothering with versions older than 11 and it is debatable whether we should worry even about 11 now.
+if (!Element.prototype.matches) {
+	Element.prototype.matches = Element.prototype.msMatchesSelector ||
+								Element.prototype.webkitMatchesSelector;
+  }
+
+  if (!Element.prototype.closest) {
+	Element.prototype.closest = function(s) {
+	  var el = this;
+
+	  do {
+		if (Element.prototype.matches.call(el, s)) {
+			return el;
+		}
+		el = el.parentElement || el.parentNode;
+	  } while (el !== null && el.nodeType === 1);
+	  return null;
+	};
+  }

src/js/items-controller.js

@@ -509,25 +509,12 @@ _registerModule('Controller', {
 			if(!_initialContentSet && index === _currentItemIndex) {
 				_currZoomElementStyle = baseDiv.style;
 				_showOrHide(item, (img ||item.img) );
-
-				// var cssTransform = baseDiv.style.transform; // e.g. "translate3d(65px, 87px, 0px) scale(0.875912)";
-				// if(/^translate.*scale.*$/.test(cssTransform)) {
-                //     var translateY = cssTransform.replace(/^translate(3d)?\([0-9]*px, /, "").replace(/px.*$/, "");
-				// scale = cssTransform.replace(/^.*scale\(/, "").replace(/\)/, "");
-				// console.log("scale: " + scale + ", image height: " + imageSize.height);
-                // }
 			} else {
-				// console.log("Doing applyZoomPanToItem instead");
 				_applyZoomPanToItem(item);
 			}
 
 			holder.el.innerHTML = '';
 			holder.el.appendChild(baseDiv);
-
-			// holder.el.dataset.viewportHeight = _viewportSize.y;
-			// holder.el.dataset.gapTop = item.vGap.top;
-			// holder.el.dataset.imagePositionTop = item.initialPosition.y;
-			// holder.el.dataset.imageHeight = Math.round(imageSize.height * parseFloat(scale));
 		},
 
 		cleanSlide: function( item ) {

src/js/ui/photoswipe-ui-default.js

@@ -72,9 +72,8 @@
 						// Show the 'expand' control only if caption extends out of view. Reset height first.
 						innerCaptionElement.style.height = 'auto';
 						var captionCtrl = captionElement.querySelector(".pswp__button--caption--ctrl");
-						if(innerCaptionElement.clientHeight > layoutData.captionInitialHeight) {
+						if(innerCaptionElement.clientHeight - 10 > layoutData.captionInitialHeight) {
 							captionCtrl.classList.add("pswp__button--caption--ctrl--expand");
-							//captionCtrl.addEventListener("click", _toggleCaption);
 						}
 						else {
 							captionCtrl.classList.remove("pswp__button--caption--ctrl--expand");
@@ -124,7 +123,6 @@
 
 				indexIndicatorSep: ' / ',
 				fitControlsWidth: 1200
-
 			},
 			_blockControlsTap,
 			_blockControlsTapTimeout;
@@ -158,12 +156,10 @@
 
 			if(captionCtrl.classList.contains("pswp__button--caption--ctrl--expand")) { // Expand caption
 				if(captionElement.clientHeight < layoutData.captionMaxHeight) { // It fits in space below top bar
-					console.log("caption height: "+ captionElement.clientHeight + ", space available: " + layoutData.captionMaxHeight);
 					captionElement.style.top = (window.innerHeight - captionElement.clientHeight)  + "px";
 					innerCaptionElement.style.height = 'auto';
 				}
 				else {
-					console.log("Caption won't fit. Gap at top: " + layoutData.gapTop);
 					captionElement.style.top = layoutData.gapTop  + "px";
 					innerCaptionElement.style.height =  layoutData.captionMaxHeight  + "px";
 					innerCaptionElement.style.overflowY = "auto";
@@ -228,7 +224,7 @@
 			},
 
 			_fitControlsInViewport = function() {
-				return !pswp.likelyTouchDevice || _options.mouseUsed || screen.width > _options.fitControlsWidth;
+				return !pswp.likelyTouchDevice || _options.mouseUsed || screen.width > _options.fitControlsWidth || _options.verticalScrollForCaption;
 			},
 
 			_togglePswpClass = function(el, cName, add) {
@@ -254,7 +250,6 @@
 
 				_shareModalHidden = !_shareModalHidden;
 
-
 				if(!_shareModalHidden) {
 					_toggleShareModalClass();
 					setTimeout(function() {
@@ -479,6 +474,19 @@
 				}
 			},
 
+			_overrideOptionsIfVerticalScrollForCaptionsTrue = function() {
+				// Don't close gallery when tapping on caption
+				if(_options.verticalScrollForCaption) {
+					var index = _options.closeElClasses.indexOf('caption');
+					if (index > -1) {
+						_options.closeElClasses.splice(index, 1);
+					}
+				}
+
+				// Don't hide/show controls on tap
+				_options.tapToToggleControls = false;
+			},
+
 			_setupHidingControlsDuringGestures = function() {
 
 				// Hide controls on vertical drag
@@ -659,7 +667,7 @@
 			// create local link
 			_listen = pswp.listen;
 
-
+			_overrideOptionsIfVerticalScrollForCaptionsTrue();
 			_setupHidingControlsDuringGestures();
 
 			// update controls when slides change
@@ -852,8 +860,8 @@
 				}
 			} else {
 
-				// tap anywhere (except buttons) to toggle visibility of controls
-				if(_options.tapToToggleControls) {
+				// tap anywhere (except buttons and caption) to toggle visibility of controls
+				if(_options.tapToToggleControls && !target.classList.contains("pswp__caption__center")) {
 					if(_controlsVisible) {
 						ui.hideControls();
 					} else {
@@ -870,6 +878,7 @@
 
 			}
 		};
+
 		ui.onMouseOver = function(e) {
 			e = e || window.event;
 			var target = e.target || e.srcElement;
@@ -917,8 +926,6 @@
 					eventK: 'moz' + tF
 				};
 
-
-
 			} else if(dE.webkitRequestFullscreen) {
 				api = {
 					enterK: 'webkitRequestFullscreen',
@@ -948,13 +955,17 @@
 						return pswp.template[this.enterK]();
 					}
 				};
+
 				api.exit = function() {
 					_options.closeOnScroll = _initalCloseOnScrollValue;
 
 					return document[this.exitK]();
 
 				};
-				api.isFullscreen = function() { return document[this.elementK]; };
+
+				api.isFullscreen = function() {
+					return document[this.elementK];
+				};
 			}
 
 			return api;