[wip] Allow long captions

index.html

@@ -78,6 +78,7 @@
                 </button>
 
                 <div class="pswp__caption">
+                    <button class="pswp__button pswp__button--caption--ctrl" id="pswp__button--caption--ctrl" title="Expand caption"></button>
                     <div class="pswp__caption__center"></div>
                 </div>
 
@@ -100,7 +101,8 @@
                 {
                     src: 'https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg',
                     w: 1024,
-                    h: 683
+                    h: 683,
+                    title: 'First caption. Image height and width defined. Images are displayed at their highest possible size and are not limited by the width of the column or wrapper. Each image is isolated from the other content and fits the viewport vertically, so that the user can focus on it. If an image is larger than the viewport, it can be zoomed (which most galleries are unable to do)'
                 },
                 // Auto sized images
                 {
@@ -111,7 +113,7 @@
                 {
                     src: 'https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg',
                     autoSize: true,
-                    title: 'Another example caption. Image height and width defined also via "autoSize: true"'
+                    title: 'Another example caption. Image height and width defined also via "autoSize: true". Images are displayed at their highest possible size and are not limited by the width of the column or wrapper. Each image is isolated from the other content and fits the viewport vertically, so that the user can focus on it. If an image is larger than the viewport, it can be zoomed (which most galleries are unable to do). Images are displayed at their highest possible size and are not limited by the width of the column or wrapper. Each image is isolated from the other content and fits the viewport vertically, so that the user can focus on it. If an image is larger than the viewport, it can be zoomed (which most galleries are unable to do). Images are displayed at their highest possible size and are not limited by the width of the column or wrapper. Each image is isolated from the other content and fits the viewport vertically, so that the user can focus on it. If an image is larger than the viewport, it can be zoomed (which most galleries are unable to do). Images are displayed at their highest possible size and are not limited by the width of the column or wrapper. Each image is isolated from the other content and fits the viewport vertically, so that the user can focus on it. If an image is larger than the viewport, it can be zoomed (which most galleries are unable to do)'
                 }
             ];
 
@@ -132,6 +134,7 @@
 
                 closeEl: true,
                 captionEl: true,
+                allowLongCaptions: true,
                 fullscreenEl: true,
                 zoomEl: true,
                 shareEl: true,

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 {
@@ -329,6 +338,7 @@ a.pswp__share--download {
 
 .pswp__caption {
 	position: absolute;
+	z-index: 2;
 	left: 0;
 	bottom: 0;
 	width: 100%;
@@ -344,10 +354,71 @@ a.pswp__share--download {
 	text-align: center;
 	max-width: 420px;
 	margin: 0 auto;
-	font-size: 13px;
-	padding: 10px;
+	font-size: 15px;
+	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 1em 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 {
@@ -494,6 +565,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

@@ -19,8 +19,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,
@@ -319,7 +319,12 @@ var _isOpen,
 			s.height = h + 'px';
 			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) {
 				var s = _currZoomElementStyle,
@@ -345,6 +350,21 @@ 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';
+					}
+				}
 			}
 		}
 
@@ -672,8 +692,8 @@ var publicMethods = {
 		framework.unbind(window, 'scroll', self);
 
 		_stopDragUpdateLoop();
-
 		_stopAllAnimations();
+		self.ui.resetCaption();
 
 		_listeners = {};
 	},
@@ -796,6 +816,10 @@ var publicMethods = {
 		self.updateSize(true);
 	},
 
+	toggleCaption: function (el) {
+		self.ui.toggleCaption(el);
+	},
+
 	// update current zoom/pan objects
 	updateCurrZoomItem: function (emulateSetContent) {
 		if (emulateSetContent) {

src/js/desktop-zoom.js

@@ -83,6 +83,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) {
 					if (!_options.closeOnScroll || _numAnimations || _isDragging) {

src/js/framework-bridge.js

@@ -19,7 +19,7 @@ var framework = {
 	isArray: function (obj) {
 		return obj instanceof Array;
 	},
-	createEl: function (classes, tag) {
+	createElement: function (classes, tag) {
 		var el = document.createElement(tag || 'div');
 		if (classes) {
 			el.className = classes;
@@ -133,7 +133,7 @@ var framework = {
 		if (framework.features) {
 			return framework.features;
 		}
-		var helperEl = framework.createEl(),
+		var helperEl = framework.createElement(),
 			helperStyle = helperEl.style,
 			vendor = '',
 			features = {};
@@ -277,3 +277,21 @@ 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/gestures.js

@@ -47,6 +47,7 @@ var _gestureStartTime,
 	_opacityChanged,
 	_bgOpacity,
 	_wasOverInitialZoom,
+	_target,
 	_isEqualPoints = function (p1, p2) {
 		return p1.x === p2.x && p1.y === p2.y;
 	},
@@ -288,6 +289,8 @@ var _gestureStartTime,
 
 		_shout('pointerDown');
 
+		_target = e.target || e.srcElement;
+
 		if (_pointerEventEnabled) {
 			var pointerIndex = framework.arraySearch(_currPointers, e.pointerId, 'id');
 			if (pointerIndex < 0) {
@@ -307,6 +310,7 @@ var _gestureStartTime,
 		if (!_isDragging || numPoints === 1) {
 			_isDragging = _isFirstMove = true;
 			framework.bind(window, _upMoveEvents, self);
+			// framework.bind(window, _downEvents, self); // I thought this might be needed to collapse caption but it made no difference.
 
 			_isZoomingIn = _wasOverInitialZoom = _opacityChanged = _verticalDragInitiated = _mainScrollShifted = _moved = _isMultitouch = _zoomStarted = false;
 
@@ -521,6 +525,29 @@ var _gestureStartTime,
 				return;
 			}
 
+			/* **************************************************************
+			 Commenting this section out because it does not work reliably
+			 especially when swiping down in an attempt to close the caption.
+			 I'd be grateful if anyone can figure out why and fix it.
+			*****************************************************************
+			// If dragging up on a collapsed long caption, expand the caption; 
+			// If dragging down on expanded long caption when at the top, collapse the caption.
+			if(_direction === 'v' && _options.allowLongCaptions) {
+				var targetCaption = _target.closest(".pswp__caption");
+				if(targetCaption) {
+					var toggleCaptionBtn = targetCaption.querySelector(".pswp__button--caption--ctrl");
+					var isExpanded = toggleCaptionBtn.classList.contains("pswp__button--caption--ctrl--collapse");
+					var isCollapsed = toggleCaptionBtn.classList.contains("pswp__button--caption--ctrl--expand");
+					var innerCaptionElement = targetCaption.querySelector(".pswp__caption__center");
+					if((delta.y < -DIRECTION_CHECK_OFFSET && isCollapsed) || 
+					   (delta.y > DIRECTION_CHECK_OFFSET && isExpanded && innerCaptionElement.scrollTop === 0)) {
+						self.ui.toggleCaption(toggleCaptionBtn);
+						return;
+					}
+				}
+			}
+			*/
+
 			if (_direction === 'v' && _options.closeOnVerticalDrag) {
 				if (!_canPan()) {
 					_currPanDist.y += delta.y;
@@ -640,6 +667,7 @@ var _gestureStartTime,
 		if (numPoints === 0) {
 			_isDragging = false;
 			framework.unbind(window, _upMoveEvents, self);
+			// framework.unbind(window, _downEvents, self); // I thought this might be needed to collapse caption but it made no difference.
 
 			_stopDragUpdateLoop();