[wip] Allow long captions

Gruntfile.js

@@ -173,7 +173,6 @@ module.exports = function(grunt) {
       }
     }
 
-
   });
 
 
@@ -185,7 +184,8 @@ module.exports = function(grunt) {
         basePath = this.data.basePath,
         newContents = this.data.banner;
 
-    newContents += "(function (root, factory) { \n"+
+    newContents += "// Using UMD (Universal Module Definition) https://www.davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/\n" +
+    "(function (root, factory) { \n"+
       "\tif (typeof define === 'function' && define.amd) {\n" +
         "\t\tdefine(factory);\n" +
       "\t} else if (typeof exports === 'object') {\n" +

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

@@ -142,6 +142,15 @@
 	width: 70px;
 	height: 100px;
 	position: absolute;
+	z-index: 1;
+}
+/* Buttons should appear above expanded caption overlay if viewport wider than 540px as the
+the maximum width of the caption is 480px plus 30px each side. */
+@media only screen and (min-width: 540px) {
+	.pswp__button--arrow--left,
+	.pswp__button--arrow--right {
+		z-index: 3;
+	}
 }
 
 .pswp__button--arrow--left {
@@ -333,6 +342,7 @@ a.pswp__share--download {
 
 .pswp__caption {
 	position: absolute;
+	z-index: 2;
 	left: 0;
 	bottom: 0;
 	width: 100%;
@@ -349,9 +359,69 @@ a.pswp__share--download {
 	max-width: 420px;
 	margin: 0 auto;
 	font-size: 13px;
-	padding: 10px;
+	padding: 18px 10px 10px 10px;
 	line-height: 20px;
-	color: #CCC;
+	color: #FFF;
+	background-color: #000;
+	transition: height 250ms ease-out;
+
+	a {
+		color: #CCF;
+	}
+	a:hover {
+		color: #FFF;
+	}
+
+	p {
+		margin: 0 0 0 10px;
+	}
+
+	p:last-child::after {
+		display: inline-block;
+		height: 10px;
+		width: 10px;
+		background-color: white;
+		margin-left: 6px;
+		margin-bottom: -1px;
+		content: ' ';
+	}
+}
+
+.pswp__button--caption--ctrl {
+	display: none;
+	width: 36px;
+	height: 36px;
+	background-image: none;
+	border-radius: 18px;
+	border: none;
+	overflow: hidden;
+	position: absolute;
+	top: -18px;
+	left: 50%;
+	transform: translateX(-50%);
+	text-decoration: none;
+	opacity: 1;
+}
+
+.pswp__button--caption--ctrl.pswp__button--caption--ctrl--expand {
+	background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMiAwYzYuNjIzIDAgMTIgNS4zNzcgMTIgMTJzLTUuMzc3IDEyLTEyIDEyLTEyLTUuMzc3LTEyLTEyIDUuMzc3LTEyIDEyLTEyem0wIDFjNi4wNzEgMCAxMSA0LjkyOSAxMSAxMXMtNC45MjkgMTEtMTEgMTEtMTEtNC45MjktMTEtMTEgNC45MjktMTEgMTEtMTF6bTUuMjQ3IDE1bC01LjI0Ny02LjQ0LTUuMjYzIDYuNDQtLjczNy0uNjc4IDYtNy4zMjIgNiA3LjMzNS0uNzUzLjY2NXoiLz48L3N2Zz4=');
+}
+.pswp__button--caption--ctrl.pswp__button--caption--ctrl--collapse {
+    background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMiAwYzYuNjIzIDAgMTIgNS4zNzcgMTIgMTJzLTUuMzc3IDEyLTEyIDEyLTEyLTUuMzc3LTEyLTEyIDUuMzc3LTEyIDEyLTEyem0wIDFjNi4wNzEgMCAxMSA0LjkyOSAxMSAxMXMtNC45MjkgMTEtMTEgMTEtMTEtNC45MjktMTEtMTEgNC45MjktMTEgMTEtMTF6bTUuMjQ3IDhsLTUuMjQ3IDYuNDQtNS4yNjMtNi40NC0uNzM3LjY3OCA2IDcuMzIyIDYtNy4zMzUtLjc1My0uNjY1eiIvPjwvc3ZnPg==');
+}
+
+/* This must come after setting the background above */
+.pswp__button--caption--ctrl.pswp__button--caption--ctrl--expand,
+.pswp__button--caption--ctrl.pswp__button--caption--ctrl--collapse {
+	display:block;
+	width: 36px;
+	height: 36px;
+	background-color: #ccc;
+	background-size: 36px 36px;
+	}
+.pswp__button--caption--ctrl.pswp__button--caption--ctrl--expand:hover,
+.pswp__button--caption--ctrl.pswp__button--caption--ctrl--collapse:hover {
+	background-color: #fff;
 }
 
 .pswp__caption--empty {
@@ -491,6 +561,7 @@ a.pswp__share--download {
 /* top black bar with buttons and "1 of X" indicator */
 .pswp__top-bar {
 	position: absolute;
+	z-index: 1;
 	left: 0;
 	top: 0;
 	height: 44px;

src/js/core.js

@@ -18,8 +18,8 @@ var _options = {
 	mouseUsed: false,
 	loop: true,
 	pinchToClose: true,
-	closeOnScroll: true,
-	closeOnVerticalDrag: true,
+	closeOnScroll: true,        // Will be overridden if allowLongCaptions is true
+	closeOnVerticalDrag: true,  // Will be overridden if allowLongCaptions is true
 	verticalDragRange: 0.75,
 	hideAnimationDuration: 333,
 	showAnimationDuration: 333,
@@ -112,7 +112,7 @@ var _isOpen,
 		var numSlides = _getNumItems();
 		if(index > numSlides - 1) {
 			return index - numSlides;
-		} else  if(index < 0) {
+		} else if(index < 0) {
 			return numSlides + index;
 		}
 		return index;
@@ -126,6 +126,7 @@ var _isOpen,
 		}
 		return _listeners[name].push(fn);
 	},
+
 	_shout = function(name) {
 		var listeners = _listeners[name];
 
@@ -142,18 +143,20 @@ var _isOpen,
 	_getCurrentTime = function() {
 		return new Date().getTime();
 	},
+
 	_applyBgOpacity = function(opacity) {
 		_bgOpacity = opacity;
 		self.bg.style.opacity = opacity * _options.bgOpacity;
 	},
 
-	_applyZoomTransform = function(styleObj,x,y,zoom,item) {
+	_applyZoomTransform = function(styleObj, x, y, zoom, item) {
 		if(!_renderMaxResolution || (item && item !== self.currItem) ) {
 			zoom = zoom / (item ? item.fitRatio : self.currItem.fitRatio);
 		}
 
 		styleObj[_transformKey] = _translatePrefix + x + 'px, ' + y + 'px' + _translateSufix + ' scale(' + zoom + ')';
 	},
+
 	_applyCurrentZoomPan = function( allowRenderResolution ) {
 		if(_currZoomElementStyle && !self.currItem.loadError) {
 
@@ -171,10 +174,10 @@ var _isOpen,
 				}
 			}
 
-
 			_applyZoomTransform(_currZoomElementStyle, _panOffset.x, _panOffset.y, _currZoomLevel);
 		}
 	},
+
 	_applyZoomPanToItem = function(item) {
 		if(item.container) {
 
@@ -185,9 +188,11 @@ var _isOpen,
 								item);
 		}
 	},
+
 	_setTranslateX = function(x, elStyle) {
 		elStyle[_transformKey] = _translatePrefix + x + 'px, 0px' + _translateSufix;
 	},
+
 	_moveMainScroll = function(x, dragging) {
 
 		if(!_options.loop && dragging) {
@@ -203,6 +208,7 @@ var _isOpen,
 		_mainScrollPos.x = x;
 		_setTranslateX(x, _containerStyle);
 	},
+
 	_calculatePanOffset = function(axis, zoomLevel) {
 		var m = _midZoomPoint[axis] - _offset[axis];
 		return _startPanOffset[axis] + _currPanDist[axis] + m - m * ( zoomLevel / _startZoomLevel );
@@ -215,6 +221,7 @@ var _isOpen,
 			p1.id = p2.id;
 		}
 	},
+
 	_roundPoint = function(p) {
 		p.x = Math.round(p.x);
 		p.y = Math.round(p.y);
@@ -286,6 +293,7 @@ var _isOpen,
 		}
 		return item.initialZoomLevel;
 	},
+
 	_getMaxZoomLevel = function(item) {
 		if(!item) {
 			item = self.currItem;
@@ -331,6 +339,7 @@ var _isOpen,
 		_setTranslateX = function(x, elStyle) {
 			elStyle.left = x + 'px';
 		};
+
 		_applyZoomPanToItem = function(item) {
 
 			var zoomRatio = item.fitRatio > 1 ? 1 : item.fitRatio,
@@ -343,7 +352,11 @@ var _isOpen,
 			s.left = item.initialPosition.x + 'px';
 			s.top = item.initialPosition.y + 'px';
 
+			item.zoom = zoomRatio;
+			item.apparentImageHeight = h;
+			item.imageFromTop = item.initialPosition;
 		};
+
 		_applyCurrentZoomPan = function() {
 			if(_currZoomElementStyle) {
 
@@ -356,7 +369,6 @@ var _isOpen,
 				s.width = w + 'px';
 				s.height = h + 'px';
 
-
 				s.left = _panOffset.x + 'px';
 				s.top = _panOffset.y + 'px';
 			}
@@ -373,6 +385,18 @@ var _isOpen,
 				keydownAction = 'prev';
 			} else if(e.keyCode === 39) {
 				keydownAction = 'next';
+			} else if(e.keyCode === 13 || e.keyCode === 32) {  /* Enter or spacebar */
+				var btnCaptionCtrl = document.getElementById("pswp__button--caption--ctrl");
+				if(btnCaptionCtrl) {
+					if(btnCaptionCtrl.classList.contains("pswp__button--caption--ctrl--expand") ||
+					   btnCaptionCtrl.classList.contains("pswp__button--caption--ctrl--collapse")) {
+						// Add tabindex to the caption div so that it can take focus and be controlled by up/down arrows
+						var innerCaptionElement = btnCaptionCtrl.parentNode.querySelector(".pswp__caption__center");
+						innerCaptionElement.setAttribute("tabindex", "-1");
+						innerCaptionElement.focus();
+						keydownAction = 'toggleCaption';
+					}
+				}
 			}
 		}
 
@@ -576,7 +600,7 @@ var publicMethods = {
 			self['init' + _modules[i]]();
 		}
 
-		// init
+		// Create new PhotoSwipeUI_Default object and run init
 		if(UiClass) {
 			var ui = self.ui = new UiClass(self, framework);
 			ui.init();
@@ -716,8 +740,8 @@ var publicMethods = {
 		framework.unbind(window, 'scroll', self);
 
 		_stopDragUpdateLoop();
-
 		_stopAllAnimations();
+		self.ui.resetCaption();
 
 		_listeners = {};
 	},
@@ -769,15 +793,16 @@ var publicMethods = {
 
 		_moveMainScroll(_slideSize.x * _currPositionIndex);
 
-
 		_stopAllAnimations();
 		_mainScrollAnimating = false;
 
 		self.updateCurrItem();
 	},
+
 	next: function() {
 		self.goTo( parseInt(_currentItemIndex) + 1);
 	},
+
 	prev: function() {
 		self.goTo( parseInt(_currentItemIndex) - 1);
 	},
@@ -811,6 +836,10 @@ var publicMethods = {
 		self.updateSize(true);
 	},
 
+	toggleCaption: function(el) {
+		self.ui.toggleCaption(el);
+	},
+
 	// update current zoom/pan objects
 	updateCurrZoomItem: function(emulateSetContent) {
 		if(emulateSetContent) {
@@ -873,6 +902,7 @@ var publicMethods = {
 			_containerShiftIndex += _indexDiff + (_indexDiff > 0 ? -NUM_HOLDERS : NUM_HOLDERS);
 			diffAbs = NUM_HOLDERS;
 		}
+
 		for(var i = 0; i < diffAbs; i++) {
 			if(_indexDiff > 0) {
 				tempHolder = _itemHolders.shift();
@@ -935,8 +965,6 @@ var publicMethods = {
 			template.style.height = _windowVisibleSize.y + 'px';
 		}
 
-
-
 		_viewportSize.x = self.scrollWrap.clientWidth;
 		_viewportSize.y = self.scrollWrap.clientHeight;
 

src/js/desktop-zoom.js

@@ -22,6 +22,10 @@ _registerModule('DesktopZoom', {
 				return;
 			}
 
+			self.setupDesktopZoom();
+
+			/* There seems to be a timing problem so this may run before a mouseevent is detected in which case
+			   setupDesktopZoom is not run if _likelyTouchDevice was set to true. Just run it all the time.
 			if(_likelyTouchDevice) {
 				// if detected hardware touch support, we wait until mouse is used,
 				// and only then apply desktop-zoom features
@@ -31,7 +35,7 @@ _registerModule('DesktopZoom', {
 			} else {
 				self.setupDesktopZoom(true);
 			}
-
+			*/
 		},
 
 		setupDesktopZoom: function(onInit) {
@@ -89,6 +93,28 @@ _registerModule('DesktopZoom', {
 		},
 
 		handleMouseWheel: function(e) {
+			// If scrolling down on a collapsed long caption, expand the caption
+			var _target = e.target || e.srcElement;
+			var targetCaption = _target.closest(".pswp__caption");
+			if(targetCaption) {
+				var toggleCaptionBtn = targetCaption.querySelector(".pswp__button--caption--ctrl");
+				if(toggleCaptionBtn) {
+
+					if(toggleCaptionBtn.classList.contains("pswp__button--caption--ctrl--expand")  && e.wheelDeltaY < -50) {
+						self.ui.toggleCaption(toggleCaptionBtn);
+					} else if(toggleCaptionBtn.classList.contains("pswp__button--caption--ctrl--collapse")) {
+						// Collapse the caption if scrolled to the top and user scrolls further
+						var innerCaptionElement = targetCaption.querySelector(".pswp__caption__center");
+						if(innerCaptionElement.scrollTop === 0 && e.wheelDeltaY > 50) {
+							self.ui.toggleCaption(toggleCaptionBtn);
+						}
+					} else {
+						e.preventDefault();
+					}
+
+					return;
+				}
+			}
 
 			if(_currZoomLevel <= self.currItem.fitRatio) {
 				if( _options.modal ) {
@@ -101,7 +127,6 @@ _registerModule('DesktopZoom', {
 						_closedByScroll = true;
 						self.close();
 					}
-
 				}
 				return true;
 			}