From d8d0410d8196debf03f564c17c6d2abb093b5590 Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Thu, 16 Apr 2020 11:55:28 +0100 Subject: [PATCH 01/35] Rename framework.createEl to framework.createElement for clarity. --- src/js/framework-bridge.js | 4 ++-- src/js/items-controller.js | 10 +++++----- src/js/ui/photoswipe-ui-default.js | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/js/framework-bridge.js b/src/js/framework-bridge.js index c0bdb12c2..e2e1d7bd8 100644 --- a/src/js/framework-bridge.js +++ b/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 = {}; diff --git a/src/js/items-controller.js b/src/js/items-controller.js index 096b0f8dd..98aa54f4f 100644 --- a/src/js/items-controller.js +++ b/src/js/items-controller.js @@ -133,7 +133,7 @@ var _getItemAt, _preloadImage = function (item) { item.loading = true; item.loaded = false; - var img = (item.img = framework.createEl('pswp__img', 'img')); + var img = (item.img = framework.createElement('pswp__img', 'img')); var onComplete = function () { item.loading = false; item.loaded = true; @@ -316,7 +316,7 @@ _registerModule('Controller', { allowProgressiveImg: function () { // 1. Progressive image loading isn't working on webkit/blink // when hw-acceleration (e.g. translateZ) is applied to IMG element. - // That's why in PhotoSwipe parent element gets zoom transform, not image itself. + // That's why in PhotoSwipe parent element (.pwsp__zoom-wrap) gets zoom transform, not image itself. // // 2. Progressive image loading sometimes blinks in webkit/blink when applying animation to parent element. // That's why it's disabled on touch devices (mainly because of swipe transition) @@ -353,7 +353,7 @@ _registerModule('Controller', { holder.item = item; // base container DIV is created only once for each of 3 holders - var baseDiv = (item.container = framework.createEl('pswp__zoom-wrap')); + var baseDiv = (item.container = framework.createElement('pswp__zoom-wrap')); if (!item.src && item.html) { if (item.html.tagName) { @@ -419,7 +419,7 @@ _registerModule('Controller', { var placeholderClassName = 'pswp__img pswp__img--placeholder'; placeholderClassName += item.msrc ? '' : ' pswp__img--placeholder--blank'; - var placeholder = framework.createEl(placeholderClassName, item.msrc ? 'img' : ''); + var placeholder = framework.createElement(placeholderClassName, item.msrc ? 'img' : ''); if (item.msrc) { placeholder.src = item.msrc; } @@ -450,7 +450,7 @@ _registerModule('Controller', { } } else if (item.src && !item.loadError) { // image object is created every time, due to bugs of image loading & delay when switching images - img = framework.createEl('pswp__img', 'img'); + img = framework.createElement('pswp__img', 'img'); img.style.opacity = 1; img.src = item.src; _setImageSize(item, img); diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index fb6ea695f..5017f2339 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -345,8 +345,8 @@ if (_fitControlsInViewport()) { if (_options.captionEl && bars.bottom === 'auto') { if (!_fakeCaptionContainer) { - _fakeCaptionContainer = framework.createEl('pswp__caption pswp__caption--fake'); - _fakeCaptionContainer.appendChild(framework.createEl('pswp__caption__center')); + _fakeCaptionContainer = framework.createElement('pswp__caption pswp__caption--fake'); + _fakeCaptionContainer.appendChild(framework.createElement('pswp__caption__center')); _controls.insertBefore(_fakeCaptionContainer, _captionContainer); framework.addClass(_controls, 'pswp__ui--fit'); } From 3d968eae4b0c456953a2b1943156e1fcacc4ba11 Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Thu, 16 Apr 2020 12:46:34 +0100 Subject: [PATCH 02/35] Rename function argument of a DOM node from 'captionEl' to 'captionElement' to avoid confusion with the boolean option of the same name a few lines below. Also add some extra whitespace to separate functions. --- src/js/ui/photoswipe-ui-default.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index 5017f2339..2022afde4 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -46,12 +46,12 @@ timeToIdleOutside: 1000, loadingIndicatorDelay: 1000, // 2s - addCaptionHTMLFn: function (item, captionEl /*, isFake */) { + addCaptionHTMLFn: function (item, captionElement /*, isFake */) { if (!item.title) { - framework.resetEl(captionEl.firstChild); + framework.resetEl(captionElement.firstChild); return false; } - captionEl.children[0].innerHTML = item.title; + captionElement.children[0].innerHTML = item.title; return true; }, From dae5c9770f2ec943379e38aa98a58e756a37de0d Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Thu, 16 Apr 2020 12:28:25 +0100 Subject: [PATCH 03/35] Capture the calculated size of the image and set an option for the caption to go under the picture and be able to scroll to see it. --- src/js/items-controller.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/items-controller.js b/src/js/items-controller.js index 98aa54f4f..14c3ca6d7 100644 --- a/src/js/items-controller.js +++ b/src/js/items-controller.js @@ -183,8 +183,8 @@ var _getItemAt, img = item.container.lastChild; } - var w = maxRes ? item.w : Math.round(item.w * item.fitRatio), - h = maxRes ? item.h : Math.round(item.h * item.fitRatio); + var w = (item.calculatedWidth = maxRes ? item.w : Math.round(item.w * item.fitRatio)), + h = (item.calculatedHeight = maxRes ? item.h : Math.round(item.h * item.fitRatio)); // ensure correct aspect ratio if (img.naturalHeight && img.naturalWidth) { From 09d9b20cfa6e2b43752fb1e41296848d56a9ccfe Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Thu, 16 Apr 2020 16:19:21 +0100 Subject: [PATCH 04/35] Move new option to the UI file. --- src/js/ui/photoswipe-ui-default.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index 2022afde4..c07ea02e4 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -57,6 +57,7 @@ closeEl: true, captionEl: true, + verticalScrollForCaptions: false, fullscreenEl: true, zoomEl: true, shareEl: true, From a2e8e60aeedc832ab6d746a8a5e333ad51ee55bd Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Thu, 23 Apr 2020 19:49:32 +0100 Subject: [PATCH 05/35] First pass with something that works. Need to fix z-index on captionElement and arrows and figure out why it is failing on mobile. --- src/css/default-skin/default-skin.scss | 2 +- src/js/items-controller.js | 6 ++-- src/js/ui/photoswipe-ui-default.js | 44 ++++++++++++++++++++++++-- 3 files changed, 47 insertions(+), 5 deletions(-) diff --git a/src/css/default-skin/default-skin.scss b/src/css/default-skin/default-skin.scss index a7bafd5ce..6aa28abfb 100644 --- a/src/css/default-skin/default-skin.scss +++ b/src/css/default-skin/default-skin.scss @@ -345,7 +345,7 @@ a.pswp__share--download { max-width: 420px; margin: 0 auto; font-size: 13px; - padding: 10px; + padding: 20px 10px 10px 10px; line-height: 20px; color: #ccc; } diff --git a/src/js/items-controller.js b/src/js/items-controller.js index 14c3ca6d7..3384ce895 100644 --- a/src/js/items-controller.js +++ b/src/js/items-controller.js @@ -183,8 +183,10 @@ var _getItemAt, img = item.container.lastChild; } - var w = (item.calculatedWidth = maxRes ? item.w : Math.round(item.w * item.fitRatio)), - h = (item.calculatedHeight = maxRes ? item.h : Math.round(item.h * item.fitRatio)); + item.calculatedSize = {}; + + var w = (item.calculatedSize.x = maxRes ? item.w : Math.round(item.w * item.fitRatio)), + h = (item.calculatedSize.y = maxRes ? item.h : Math.round(item.h * item.fitRatio)); // ensure correct aspect ratio if (img.naturalHeight && img.naturalWidth) { diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index c07ea02e4..2d01eaf51 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -47,11 +47,27 @@ loadingIndicatorDelay: 1000, // 2s addCaptionHTMLFn: function (item, captionElement /*, isFake */) { + var innerCaptionElement = captionElement.querySelector('.pswp__caption__center'); if (!item.title) { - framework.resetEl(captionElement.firstChild); + innerCaptionElement.innerHTML = ''; return false; } - captionElement.children[0].innerHTML = item.title; + innerCaptionElement.innerHTML = item.title; + + // If verticalScrollForCaption it true, position caption from top rather than bottom. + if (_options.verticalScrollForCaption) { + item.imageBottomAt = item.vGap.top + item.calculatedSize.y; + captionElement.style.bottom = 'auto'; + captionElement.style.top = item.imageBottomAt + 'px'; + + // Show the 'expand' control if caption extends out of view + if (innerCaptionElement.clientHeight > item.vGap.bottom) { + var captionCtrl = captionElement.querySelector('.pswp__caption__handle'); + captionCtrl.classList.add('pswp__caption__handle--expand'); + captionCtrl.addEventListener('click', toggleCaption.bind(null, item, captionElement, captionCtrl)); + } + } + return true; }, @@ -99,6 +115,30 @@ _blockControlsTap, _blockControlsTapTimeout; + var toggleCaption = function (item, captionElement, captionCtrl) { + var innerCaptionElement = captionElement.querySelector('.pswp__caption__center'); + + if (captionCtrl.classList.contains('pswp__caption__handle--expand')) { + var topAfterExpansion = item.vGap.top; + if (captionElement.clientHeight < item.calculatedSize.y + item.vGap.bottom) { + topAfterExpansion = item.vGap.top + item.vGap.bottom + (item.calculatedSize.y - captionElement.clientHeight); + captionElement.style.height = 'auto'; + } else { + innerCaptionElement.style.height = item.calculatedSize.y + item.vGap.bottom + 'px'; + innerCaptionElement.style.overflowY = 'auto'; + } + + captionElement.style.top = topAfterExpansion + 'px'; + captionCtrl.classList.remove('pswp__caption__handle--expand'); + captionCtrl.classList.add('pswp__caption__handle--collapse'); + } else { + innerCaptionElement.style.height = 'auto'; + captionElement.style.top = item.vGap.top + item.calculatedSize.y + 'px'; + captionCtrl.classList.add('pswp__caption__handle--expand'); + captionCtrl.classList.remove('pswp__caption__handle--collapse'); + } + }; + var _onControlsTap = function (e) { if (_blockControlsTap) { return true; From 52becb60de0abe38b7e1b774695602751b386cb3 Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Thu, 23 Apr 2020 22:08:02 +0100 Subject: [PATCH 06/35] Rename button to be consistent pattern with others. Fix z-index issue so arrows are above expanded caption. --- src/css/default-skin/default-skin.scss | 50 ++++++++++++++++++++++++++ src/js/ui/photoswipe-ui-default.js | 14 ++++---- 2 files changed, 57 insertions(+), 7 deletions(-) diff --git a/src/css/default-skin/default-skin.scss b/src/css/default-skin/default-skin.scss index 6aa28abfb..7488f0ab9 100644 --- a/src/css/default-skin/default-skin.scss +++ b/src/css/default-skin/default-skin.scss @@ -142,6 +142,7 @@ width: 70px; height: 100px; position: absolute; + z-index: 3; } .pswp__button--arrow--left { @@ -329,6 +330,7 @@ a.pswp__share--download { .pswp__caption { position: absolute; + z-index: 2; left: 0; bottom: 0; width: 100%; @@ -348,6 +350,53 @@ a.pswp__share--download { padding: 20px 10px 10px 10px; line-height: 20px; color: #ccc; + background-color: #000; + + a { + color: #ccc; + } + a:hover { + color: #fff; + } +} + +.pswp__button--caption--ctrl { + display: none; + width: 44px; + height: 44px; + background-image: none; + background-color: #000; + color: #999; + border-radius: 22px; + border: 1px solid #999; + overflow: hidden; + position: absolute; + top: -22px; + left: 50%; + transform: translateX(-50%); + text-decoration: none; + opacity: 1; +} +.pswp__button--caption--ctrl:hover { + color: #fff; + border-color: #fff; +} +.pswp__button--caption--ctrl.pswp__button--caption--ctrl--expand, +.pswp__button--caption--ctrl.pswp__button--caption--ctrl--collapse { + display: block; +} +.pswp__button--caption--ctrl::before { + position: relative; + top: -8px; + left: 1px; + font-size: 42px; +} + +.pswp__button--caption--ctrl--expand::before { + content: '\02b9d'; +} +.pswp__button--caption--ctrl--collapse::before { + content: '\02b9f'; } .pswp__caption--empty { @@ -494,6 +543,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; diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index 2d01eaf51..3cd8e69b3 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -62,8 +62,8 @@ // Show the 'expand' control if caption extends out of view if (innerCaptionElement.clientHeight > item.vGap.bottom) { - var captionCtrl = captionElement.querySelector('.pswp__caption__handle'); - captionCtrl.classList.add('pswp__caption__handle--expand'); + var captionCtrl = captionElement.querySelector('.pswp__button--caption--ctrl'); + captionCtrl.classList.add('pswp__button--caption--ctrl--expand'); captionCtrl.addEventListener('click', toggleCaption.bind(null, item, captionElement, captionCtrl)); } } @@ -118,7 +118,7 @@ var toggleCaption = function (item, captionElement, captionCtrl) { var innerCaptionElement = captionElement.querySelector('.pswp__caption__center'); - if (captionCtrl.classList.contains('pswp__caption__handle--expand')) { + if (captionCtrl.classList.contains('pswp__button--caption--ctrl--expand')) { var topAfterExpansion = item.vGap.top; if (captionElement.clientHeight < item.calculatedSize.y + item.vGap.bottom) { topAfterExpansion = item.vGap.top + item.vGap.bottom + (item.calculatedSize.y - captionElement.clientHeight); @@ -129,13 +129,13 @@ } captionElement.style.top = topAfterExpansion + 'px'; - captionCtrl.classList.remove('pswp__caption__handle--expand'); - captionCtrl.classList.add('pswp__caption__handle--collapse'); + captionCtrl.classList.remove('pswp__button--caption--ctrl--expand'); + captionCtrl.classList.add('pswp__button--caption--ctrl--collapse'); } else { innerCaptionElement.style.height = 'auto'; captionElement.style.top = item.vGap.top + item.calculatedSize.y + 'px'; - captionCtrl.classList.add('pswp__caption__handle--expand'); - captionCtrl.classList.remove('pswp__caption__handle--collapse'); + captionCtrl.classList.add('pswp__button--caption--ctrl--expand'); + captionCtrl.classList.remove('pswp__button--caption--ctrl--collapse'); } }; From 2a4a41fef29830b58ab7e119e5e8048cdee3161a Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Thu, 23 Apr 2020 22:29:30 +0100 Subject: [PATCH 07/35] Fix display/hiding of expand control when switching photos. --- src/js/ui/photoswipe-ui-default.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index 3cd8e69b3..7fc0fc958 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -60,11 +60,15 @@ captionElement.style.bottom = 'auto'; captionElement.style.top = item.imageBottomAt + 'px'; - // Show the 'expand' control if caption extends out of view + // Show the 'expand' control if caption extends out of view. Reset height first. + innerCaptionElement.style.height = 'auto'; + var captionCtrl = captionElement.querySelector('.pswp__button--caption--ctrl'); if (innerCaptionElement.clientHeight > item.vGap.bottom) { - var captionCtrl = captionElement.querySelector('.pswp__button--caption--ctrl'); captionCtrl.classList.add('pswp__button--caption--ctrl--expand'); captionCtrl.addEventListener('click', toggleCaption.bind(null, item, captionElement, captionCtrl)); + } else { + captionCtrl.classList.remove('pswp__button--caption--ctrl--expand'); + captionCtrl.classList.remove('pswp__button--caption--ctrl--collapse'); } } @@ -122,7 +126,6 @@ var topAfterExpansion = item.vGap.top; if (captionElement.clientHeight < item.calculatedSize.y + item.vGap.bottom) { topAfterExpansion = item.vGap.top + item.vGap.bottom + (item.calculatedSize.y - captionElement.clientHeight); - captionElement.style.height = 'auto'; } else { innerCaptionElement.style.height = item.calculatedSize.y + item.vGap.bottom + 'px'; innerCaptionElement.style.overflowY = 'auto'; From 0f1e189f56452c77ba1393d0cfbf9cefe01aba92 Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Fri, 24 Apr 2020 19:28:30 +0100 Subject: [PATCH 08/35] Set data attributes on .pswp__item to carry initial image height and top/bottom gaps so that caption function can be initiated with just the event. Not sure if this is better or just different. --- src/js/items-controller.js | 21 ++++++++++++------ src/js/ui/photoswipe-ui-default.js | 35 +++++++++++++++++++++--------- 2 files changed, 39 insertions(+), 17 deletions(-) diff --git a/src/js/items-controller.js b/src/js/items-controller.js index 3384ce895..07fe4ad73 100644 --- a/src/js/items-controller.js +++ b/src/js/items-controller.js @@ -183,10 +183,8 @@ var _getItemAt, img = item.container.lastChild; } - item.calculatedSize = {}; - - var w = (item.calculatedSize.x = maxRes ? item.w : Math.round(item.w * item.fitRatio)), - h = (item.calculatedSize.y = maxRes ? item.h : Math.round(item.h * item.fitRatio)); + var w = maxRes ? item.w : Math.round(item.w * item.fitRatio), + h = maxRes ? item.h : Math.round(item.h * item.fitRatio); // ensure correct aspect ratio if (img.naturalHeight && img.naturalWidth) { @@ -208,6 +206,10 @@ var _getItemAt, img.style.width = w + 'px'; img.style.height = h + 'px'; + + img.dataset.initialHeight = h; + + return {width: w, height: h}; }, _appendImagesPool = function () { if (_imagesToAppendPool.length) { @@ -341,7 +343,8 @@ _registerModule('Controller', { } var item = self.getItemAt(index), - img; + img, + imageSize; if (!item) { framework.resetEl(holder.el); @@ -426,7 +429,7 @@ _registerModule('Controller', { placeholder.src = item.msrc; } - _setImageSize(item, placeholder); + imageSize = _setImageSize(item, placeholder); baseDiv.appendChild(placeholder); item.placeholder = placeholder; @@ -455,7 +458,7 @@ _registerModule('Controller', { img = framework.createElement('pswp__img', 'img'); img.style.opacity = 1; img.src = item.src; - _setImageSize(item, img); + imageSize = _setImageSize(item, img); _appendImage(index, item, baseDiv, img, true); } @@ -468,6 +471,10 @@ _registerModule('Controller', { framework.resetEl(holder.el); holder.el.appendChild(baseDiv); + + holder.el.dataset.topGap = item.vGap.top; + holder.el.dataset.bottomGap = item.vGap.bottom; + holder.el.dataset.imageHeight = imageSize ? imageSize.height : ''; }, cleanSlide: function (item) { diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index 7fc0fc958..39f0277e0 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -56,16 +56,23 @@ // If verticalScrollForCaption it true, position caption from top rather than bottom. if (_options.verticalScrollForCaption) { - item.imageBottomAt = item.vGap.top + item.calculatedSize.y; + var currentItemElement = captionElement + .closest('.pswp__scroll-wrap') + .querySelector('.pswp__container > .pswp__item:nth-child(2)'); + var gapTop = parseInt(currentItemElement.dataset.topGap, 10); + var gapBottom = parseInt(currentItemElement.dataset.bottomGap, 10); + var imgInitialHeight = parseInt(currentItemElement.dataset.imageHeight, 10); + var imageBottomAt = gapTop + imgInitialHeight; + captionElement.style.bottom = 'auto'; - captionElement.style.top = item.imageBottomAt + 'px'; + captionElement.style.top = imageBottomAt + 'px'; // Show the 'expand' control if caption extends out of view. Reset height first. innerCaptionElement.style.height = 'auto'; var captionCtrl = captionElement.querySelector('.pswp__button--caption--ctrl'); - if (innerCaptionElement.clientHeight > item.vGap.bottom) { + if (innerCaptionElement.clientHeight > gapBottom) { captionCtrl.classList.add('pswp__button--caption--ctrl--expand'); - captionCtrl.addEventListener('click', toggleCaption.bind(null, item, captionElement, captionCtrl)); + captionCtrl.addEventListener('click', toggleCaption); } else { captionCtrl.classList.remove('pswp__button--caption--ctrl--expand'); captionCtrl.classList.remove('pswp__button--caption--ctrl--collapse'); @@ -119,15 +126,23 @@ _blockControlsTap, _blockControlsTapTimeout; - var toggleCaption = function (item, captionElement, captionCtrl) { + var toggleCaption = function (e) { + var captionCtrl = e.target || e.srcElement; + var captionElement = captionCtrl.parentNode; var innerCaptionElement = captionElement.querySelector('.pswp__caption__center'); + var currentItemElement = captionCtrl + .closest('.pswp__scroll-wrap') + .querySelector('.pswp__container > .pswp__item:nth-child(2)'); + var gapTop = parseInt(currentItemElement.dataset.topGap, 10); + var gapBottom = parseInt(currentItemElement.dataset.bottomGap, 10); + var imgInitialHeight = parseInt(currentItemElement.dataset.imageHeight, 10); if (captionCtrl.classList.contains('pswp__button--caption--ctrl--expand')) { - var topAfterExpansion = item.vGap.top; - if (captionElement.clientHeight < item.calculatedSize.y + item.vGap.bottom) { - topAfterExpansion = item.vGap.top + item.vGap.bottom + (item.calculatedSize.y - captionElement.clientHeight); + var topAfterExpansion = gapTop; + if (captionElement.clientHeight < imgInitialHeight + gapBottom) { + topAfterExpansion = gapTop + gapBottom + (imgInitialHeight - captionElement.clientHeight); } else { - innerCaptionElement.style.height = item.calculatedSize.y + item.vGap.bottom + 'px'; + innerCaptionElement.style.height = imgInitialHeight + gapBottom + 'px'; innerCaptionElement.style.overflowY = 'auto'; } @@ -136,7 +151,7 @@ captionCtrl.classList.add('pswp__button--caption--ctrl--collapse'); } else { innerCaptionElement.style.height = 'auto'; - captionElement.style.top = item.vGap.top + item.calculatedSize.y + 'px'; + captionElement.style.top = gapTop + imgInitialHeight + 'px'; captionCtrl.classList.add('pswp__button--caption--ctrl--expand'); captionCtrl.classList.remove('pswp__button--caption--ctrl--collapse'); } From c4511c43e2da6ea049a20ca434b88e47d070c8e2 Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Sat, 25 Apr 2020 13:16:10 +0100 Subject: [PATCH 09/35] Rename function to indicate that it is private. --- src/js/ui/photoswipe-ui-default.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index 39f0277e0..bfac372a7 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -72,7 +72,7 @@ var captionCtrl = captionElement.querySelector('.pswp__button--caption--ctrl'); if (innerCaptionElement.clientHeight > gapBottom) { captionCtrl.classList.add('pswp__button--caption--ctrl--expand'); - captionCtrl.addEventListener('click', toggleCaption); + captionCtrl.addEventListener('click', _toggleCaption); } else { captionCtrl.classList.remove('pswp__button--caption--ctrl--expand'); captionCtrl.classList.remove('pswp__button--caption--ctrl--collapse'); @@ -126,7 +126,7 @@ _blockControlsTap, _blockControlsTapTimeout; - var toggleCaption = function (e) { + var _toggleCaption = function (e) { var captionCtrl = e.target || e.srcElement; var captionElement = captionCtrl.parentNode; var innerCaptionElement = captionElement.querySelector('.pswp__caption__center'); @@ -552,6 +552,13 @@ } } }, + { + name: 'button--caption--ctrl', + option: 'verticalScrollForCaption' /*, + onTap: function(evt) { + _toggleCaption(evt); + }*/ + }, { name: 'preloader', option: 'preloaderEl', From 9591a4c7b6bcd8f6a86e9835f7da26fc8192c5f0 Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Wed, 29 Apr 2020 22:14:23 +0100 Subject: [PATCH 10/35] Save so far now that positioning is correct. Need to fix hiding and showing. --- src/css/default-skin/default-skin.scss | 43 +++++++++---------- src/js/items-controller.js | 9 ++-- src/js/ui/photoswipe-ui-default.js | 57 ++++++++++++++++---------- 3 files changed, 59 insertions(+), 50 deletions(-) diff --git a/src/css/default-skin/default-skin.scss b/src/css/default-skin/default-skin.scss index 7488f0ab9..c6a6d2994 100644 --- a/src/css/default-skin/default-skin.scss +++ b/src/css/default-skin/default-skin.scss @@ -362,41 +362,38 @@ a.pswp__share--download { .pswp__button--caption--ctrl { display: none; - width: 44px; - height: 44px; + width: 36px; + height: 36px; background-image: none; - background-color: #000; - color: #999; - border-radius: 22px; - border: 1px solid #999; + border-radius: 18px; + border: none; overflow: hidden; position: absolute; - top: -22px; + top: -18px; left: 50%; transform: translateX(-50%); text-decoration: none; opacity: 1; } -.pswp__button--caption--ctrl:hover { - color: #fff; - border-color: #fff; + +.pswp__button--caption--ctrl.pswp__button--caption--ctrl--expand { + background: url('data:image/svg+xml;utf8,'); +} +.pswp__button--caption--ctrl.pswp__button--caption--ctrl--collapse { + background: url('data:image/svg+xml;utf8,'); } +/* 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; -} -.pswp__button--caption--ctrl::before { - position: relative; - top: -8px; - left: 1px; - font-size: 42px; -} - -.pswp__button--caption--ctrl--expand::before { - content: '\02b9d'; -} -.pswp__button--caption--ctrl--collapse::before { - content: '\02b9f'; + width: 36px; + height: 36px; + background-color: #ccc; + background-size: cover; +} +.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 { diff --git a/src/js/items-controller.js b/src/js/items-controller.js index 07fe4ad73..c58341702 100644 --- a/src/js/items-controller.js +++ b/src/js/items-controller.js @@ -207,8 +207,6 @@ var _getItemAt, img.style.width = w + 'px'; img.style.height = h + 'px'; - img.dataset.initialHeight = h; - return {width: w, height: h}; }, _appendImagesPool = function () { @@ -472,9 +470,10 @@ _registerModule('Controller', { framework.resetEl(holder.el); holder.el.appendChild(baseDiv); - holder.el.dataset.topGap = item.vGap.top; - holder.el.dataset.bottomGap = item.vGap.bottom; - holder.el.dataset.imageHeight = imageSize ? imageSize.height : ''; + holder.el.dataset.viewportHeight = _viewportSize.y; + holder.el.dataset.gapTop = item.vGap.top; + holder.el.dataset.imagePositionTop = item.initialPosition.y; + holder.el.dataset.imageHeight = imageSize.height; }, cleanSlide: function (item) { diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index bfac372a7..bcdec011d 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -56,21 +56,15 @@ // If verticalScrollForCaption it true, position caption from top rather than bottom. if (_options.verticalScrollForCaption) { - var currentItemElement = captionElement - .closest('.pswp__scroll-wrap') - .querySelector('.pswp__container > .pswp__item:nth-child(2)'); - var gapTop = parseInt(currentItemElement.dataset.topGap, 10); - var gapBottom = parseInt(currentItemElement.dataset.bottomGap, 10); - var imgInitialHeight = parseInt(currentItemElement.dataset.imageHeight, 10); - var imageBottomAt = gapTop + imgInitialHeight; + var layoutData = _getLayoutData(captionElement); captionElement.style.bottom = 'auto'; - captionElement.style.top = imageBottomAt + 'px'; + captionElement.style.top = layoutData.captionInitialPositionTop + 'px'; - // Show the 'expand' control if caption extends out of view. Reset height first. + // 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 > gapBottom) { + if (innerCaptionElement.clientHeight > layoutData.captionInitialHeight) { captionCtrl.classList.add('pswp__button--caption--ctrl--expand'); captionCtrl.addEventListener('click', _toggleCaption); } else { @@ -126,32 +120,51 @@ _blockControlsTap, _blockControlsTapTimeout; + var _getLayoutData = function (captionElement) { + var layoutData = {}; + //var toggleCtrlHeight = 36; + + var currentItemElement = captionElement + .closest('.pswp__scroll-wrap') + .querySelector('.pswp__container > .pswp__item:nth-child(2)'); + + layoutData.viewportHeight = parseInt(currentItemElement.dataset.viewportHeight, 10); + layoutData.gapTop = parseInt(currentItemElement.dataset.gapTop, 10); + layoutData.imagePositionTop = parseInt(currentItemElement.dataset.imagePositionTop, 10); + layoutData.imageHeight = parseInt(currentItemElement.dataset.imageHeight, 10); + + layoutData.captionInitialPositionTop = layoutData.imagePositionTop + layoutData.imageHeight; // + toggleCtrlHeight/2 + 2; + layoutData.captionInitialHeight = layoutData.viewportHeight - layoutData.captionInitialPositionTop; + layoutData.captionMaxHeight = layoutData.viewportHeight - layoutData.gapTop; + + return layoutData; + }; + var _toggleCaption = function (e) { var captionCtrl = e.target || e.srcElement; var captionElement = captionCtrl.parentNode; var innerCaptionElement = captionElement.querySelector('.pswp__caption__center'); - var currentItemElement = captionCtrl - .closest('.pswp__scroll-wrap') - .querySelector('.pswp__container > .pswp__item:nth-child(2)'); - var gapTop = parseInt(currentItemElement.dataset.topGap, 10); - var gapBottom = parseInt(currentItemElement.dataset.bottomGap, 10); - var imgInitialHeight = parseInt(currentItemElement.dataset.imageHeight, 10); + var layoutData = _getLayoutData(captionElement); if (captionCtrl.classList.contains('pswp__button--caption--ctrl--expand')) { - var topAfterExpansion = gapTop; - if (captionElement.clientHeight < imgInitialHeight + gapBottom) { - topAfterExpansion = gapTop + gapBottom + (imgInitialHeight - captionElement.clientHeight); + // Expand caption + if (captionElement.clientHeight < layoutData.captionMaxHeight) { + // It fits in space below top bar + captionElement.style.top = layoutData.captionMaxHeight - captionElement.clientHeight + 'px'; + innerCaptionElement.style.height = 'auto'; } else { - innerCaptionElement.style.height = imgInitialHeight + gapBottom + 'px'; + captionElement.style.top = layoutData.gapTop + 'px'; + innerCaptionElement.style.height = layoutData.captionMaxHeight + 'px'; innerCaptionElement.style.overflowY = 'auto'; } - captionElement.style.top = topAfterExpansion + 'px'; captionCtrl.classList.remove('pswp__button--caption--ctrl--expand'); captionCtrl.classList.add('pswp__button--caption--ctrl--collapse'); } else { + // Collapse caption innerCaptionElement.style.height = 'auto'; - captionElement.style.top = gapTop + imgInitialHeight + 'px'; + captionElement.style.top = layoutData.captionInitialPositionTop + 'px'; + captionCtrl.classList.add('pswp__button--caption--ctrl--expand'); captionCtrl.classList.remove('pswp__button--caption--ctrl--collapse'); } From 29833649feec54681596d5326cac3f95b6d9b26e Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Fri, 1 May 2020 21:58:33 +0100 Subject: [PATCH 11/35] Somewhat closer. Accounting for scale but only on first load. :-( Caption toggles now. Adding/removing whitespace for clarity. --- src/js/core.js | 7 +++++++ src/js/items-controller.js | 12 +++++++++++- src/js/ui/photoswipe-ui-default.js | 16 ++++++++-------- 3 files changed, 26 insertions(+), 9 deletions(-) diff --git a/src/js/core.js b/src/js/core.js index 96057faf5..0246af3c8 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -189,6 +189,11 @@ var _isOpen, _mainScrollPos.x = x; _setTranslateX(x, _containerStyle); }, + _resetCaptionCtrl = function () { + var captionCtrl = self.scrollWrap.querySelector('.pswp__button--caption--ctrl'); + captionCtrl.classList.remove('pswp__button--caption--ctrl--expand'); + captionCtrl.classList.remove('pswp__button--caption--ctrl--collapse'); + }, _calculatePanOffset = function (axis, zoomLevel) { var m = _midZoomPoint[axis] - _offset[axis]; return _startPanOffset[axis] + _currPanDist[axis] + m - m * (zoomLevel / _startZoomLevel); @@ -739,6 +744,8 @@ var publicMethods = { _moveMainScroll(_slideSize.x * _currPositionIndex); + _resetCaptionCtrl(); + _stopAllAnimations(); _mainScrollAnimating = false; diff --git a/src/js/items-controller.js b/src/js/items-controller.js index c58341702..af60bf103 100644 --- a/src/js/items-controller.js +++ b/src/js/items-controller.js @@ -383,10 +383,12 @@ _registerModule('Controller', { item.loadComplete = item.img = null; _calculateItemSize(item, _viewportSize); _applyZoomPanToItem(item); + console.log('index: ' + index + ', item.container.style.transform: ' + item.container.style.transform); if (holder.index === _currentItemIndex) { // recalculate dimensions self.updateCurrZoomItem(); + console.log('index: ' + index + ', item.container.style.transform: ' + item.container.style.transform); } return; } @@ -460,9 +462,17 @@ _registerModule('Controller', { _appendImage(index, item, baseDiv, img, true); } + var scale = 1; 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 { _applyZoomPanToItem(item); } @@ -473,7 +483,7 @@ _registerModule('Controller', { holder.el.dataset.viewportHeight = _viewportSize.y; holder.el.dataset.gapTop = item.vGap.top; holder.el.dataset.imagePositionTop = item.initialPosition.y; - holder.el.dataset.imageHeight = imageSize.height; + holder.el.dataset.imageHeight = Math.round(imageSize.height * parseFloat(scale)); }, cleanSlide: function (item) { diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index bcdec011d..acf8e2fb5 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -66,7 +66,7 @@ var captionCtrl = captionElement.querySelector('.pswp__button--caption--ctrl'); if (innerCaptionElement.clientHeight > layoutData.captionInitialHeight) { captionCtrl.classList.add('pswp__button--caption--ctrl--expand'); - captionCtrl.addEventListener('click', _toggleCaption); + //captionCtrl.addEventListener("click", _toggleCaption); } else { captionCtrl.classList.remove('pswp__button--caption--ctrl--expand'); captionCtrl.classList.remove('pswp__button--caption--ctrl--collapse'); @@ -140,8 +140,8 @@ return layoutData; }; - var _toggleCaption = function (e) { - var captionCtrl = e.target || e.srcElement; + var _toggleCaption = function (el) { + var captionCtrl = el; //e.target || e.srcElement; var captionElement = captionCtrl.parentNode; var innerCaptionElement = captionElement.querySelector('.pswp__caption__center'); var layoutData = _getLayoutData(captionElement); @@ -190,7 +190,7 @@ for (var i = 0; i < _uiElements.length; i++) { uiElement = _uiElements[i]; if (uiElement.onTap && clickedClass.indexOf('pswp__' + uiElement.name) > -1) { - uiElement.onTap(); + uiElement.onTap(target); found = true; } } @@ -567,10 +567,10 @@ }, { name: 'button--caption--ctrl', - option: 'verticalScrollForCaption' /*, - onTap: function(evt) { - _toggleCaption(evt); - }*/ + option: 'verticalScrollForCaption', + onTap: function (el) { + _toggleCaption(el); + } }, { name: 'preloader', From 11eef5e3a9558c0a0ac68d7f019007c8bd77875c Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Sun, 3 May 2020 12:32:55 +0100 Subject: [PATCH 12/35] Seems to work. --- src/js/core.js | 6 ++++++ src/js/items-controller.js | 25 +++++++++++----------- src/js/ui/photoswipe-ui-default.js | 34 ++++++++++++++++++------------ 3 files changed, 38 insertions(+), 27 deletions(-) diff --git a/src/js/core.js b/src/js/core.js index 0246af3c8..5c905aab8 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -324,7 +324,13 @@ var _isOpen, s.height = h + 'px'; s.left = item.initialPosition.x + 'px'; s.top = item.initialPosition.y + 'px'; + + console.log('This is _applyZoomPanToItem at line 355'); + item.zoom = zoomRatio; + item.apparentImageHeight = h; + item.imageFromTop = item.initialPosition; }; + _applyCurrentZoomPan = function () { if (_currZoomElementStyle) { var s = _currZoomElementStyle, diff --git a/src/js/items-controller.js b/src/js/items-controller.js index af60bf103..fcd417327 100644 --- a/src/js/items-controller.js +++ b/src/js/items-controller.js @@ -66,7 +66,6 @@ var _getItemAt, var vRatio = _tempPanAreaSize.y / item.h; item.fitRatio = hRatio < vRatio ? hRatio : vRatio; - //item.fillRatio = hRatio > vRatio ? hRatio : vRatio; var scaleMode = _options.scaleMode; @@ -206,8 +205,6 @@ var _getItemAt, img.style.width = w + 'px'; img.style.height = h + 'px'; - - return {width: w, height: h}; }, _appendImagesPool = function () { if (_imagesToAppendPool.length) { @@ -463,27 +460,29 @@ _registerModule('Controller', { } var scale = 1; + var transform = {}; 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); - } + // 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); } framework.resetEl(holder.el); 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)); + // 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) { diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index acf8e2fb5..553604282 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -54,8 +54,14 @@ } innerCaptionElement.innerHTML = item.title; - // If verticalScrollForCaption it true, position caption from top rather than bottom. + // If verticalScrollForCaption is true, position caption from top rather than bottom. if (_options.verticalScrollForCaption) { + var imagePositionTop = item.initialPosition.y; + var apparentImageHeight = Math.round(item.h * item.initialZoomLevel); + var gapTop = item.vGap.top; + //var gapBottom = item.vGap.bottom; + + _setLayoutData(captionElement, imagePositionTop, apparentImageHeight, gapTop); var layoutData = _getLayoutData(captionElement); captionElement.style.bottom = 'auto'; @@ -120,22 +126,22 @@ _blockControlsTap, _blockControlsTapTimeout; + var _setLayoutData = function (captionElement, imagePositionTop, apparentImageHeight, gapTop, gapBottom) { + captionElement.dataset.imagePositionTop = imagePositionTop; + captionElement.dataset.apparentImageHeight = apparentImageHeight; + captionElement.dataset.gapTop = gapTop; + }; + var _getLayoutData = function (captionElement) { var layoutData = {}; - //var toggleCtrlHeight = 36; - - var currentItemElement = captionElement - .closest('.pswp__scroll-wrap') - .querySelector('.pswp__container > .pswp__item:nth-child(2)'); - layoutData.viewportHeight = parseInt(currentItemElement.dataset.viewportHeight, 10); - layoutData.gapTop = parseInt(currentItemElement.dataset.gapTop, 10); - layoutData.imagePositionTop = parseInt(currentItemElement.dataset.imagePositionTop, 10); - layoutData.imageHeight = parseInt(currentItemElement.dataset.imageHeight, 10); + layoutData.gapTop = parseInt(captionElement.dataset.gapTop, 10); + layoutData.imagePositionTop = parseInt(captionElement.dataset.imagePositionTop, 10); + layoutData.apparentImageHeight = parseInt(captionElement.dataset.apparentImageHeight, 10); - layoutData.captionInitialPositionTop = layoutData.imagePositionTop + layoutData.imageHeight; // + toggleCtrlHeight/2 + 2; - layoutData.captionInitialHeight = layoutData.viewportHeight - layoutData.captionInitialPositionTop; - layoutData.captionMaxHeight = layoutData.viewportHeight - layoutData.gapTop; + layoutData.captionInitialPositionTop = layoutData.imagePositionTop + layoutData.apparentImageHeight; + layoutData.captionInitialHeight = window.innerHeight - layoutData.captionInitialPositionTop; + layoutData.captionMaxHeight = window.innerHeight - layoutData.gapTop; return layoutData; }; @@ -150,7 +156,7 @@ // Expand caption if (captionElement.clientHeight < layoutData.captionMaxHeight) { // It fits in space below top bar - captionElement.style.top = layoutData.captionMaxHeight - captionElement.clientHeight + 'px'; + captionElement.style.top = window.innerHeight - captionElement.clientHeight + 'px'; innerCaptionElement.style.height = 'auto'; } else { captionElement.style.top = layoutData.gapTop + 'px'; From a71e6db6cc8d1df3647f28621103cd80ab9922ec Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Tue, 5 May 2020 13:10:36 +0100 Subject: [PATCH 13/35] Stop accidental scroll on close. Add a box at the end of the caption to indicate the end. Make caption text white so people like me can actually read it. --- src/css/default-skin/default-skin.scss | 14 ++++++++++++-- src/js/core.js | 2 +- src/js/desktop-zoom.js | 5 ++++- src/js/ui/photoswipe-ui-default.js | 6 ++++-- 4 files changed, 21 insertions(+), 6 deletions(-) diff --git a/src/css/default-skin/default-skin.scss b/src/css/default-skin/default-skin.scss index c6a6d2994..775ef766d 100644 --- a/src/css/default-skin/default-skin.scss +++ b/src/css/default-skin/default-skin.scss @@ -349,15 +349,25 @@ a.pswp__share--download { font-size: 13px; padding: 20px 10px 10px 10px; line-height: 20px; - color: #ccc; + color: #fff; background-color: #000; a { - color: #ccc; + color: #ccf; } a:hover { color: #fff; } + + 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 { diff --git a/src/js/core.js b/src/js/core.js index 5c905aab8..65fa13cf7 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -683,8 +683,8 @@ var publicMethods = { framework.unbind(window, 'scroll', self); _stopDragUpdateLoop(); - _stopAllAnimations(); + _resetCaptionCtrl(); _listeners = {}; }, diff --git a/src/js/desktop-zoom.js b/src/js/desktop-zoom.js index f68fb9b3c..a166ca192 100644 --- a/src/js/desktop-zoom.js +++ b/src/js/desktop-zoom.js @@ -86,7 +86,10 @@ _registerModule('DesktopZoom', { if (_currZoomLevel <= self.currItem.fitRatio) { if (_options.modal) { if (!_options.closeOnScroll || _numAnimations || _isDragging) { - e.preventDefault(); + var source = e.target || e.srcElement; + if (!source.classList.contains('pswp__caption__center')) { + e.preventDefault(); + } } else if (_transformKey && Math.abs(e.deltaY) > 2) { // close PhotoSwipe // if browser supports transforms & scroll changed enough diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index 553604282..f74fc20d4 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -59,7 +59,6 @@ var imagePositionTop = item.initialPosition.y; var apparentImageHeight = Math.round(item.h * item.initialZoomLevel); var gapTop = item.vGap.top; - //var gapBottom = item.vGap.bottom; _setLayoutData(captionElement, imagePositionTop, apparentImageHeight, gapTop); var layoutData = _getLayoutData(captionElement); @@ -126,7 +125,7 @@ _blockControlsTap, _blockControlsTapTimeout; - var _setLayoutData = function (captionElement, imagePositionTop, apparentImageHeight, gapTop, gapBottom) { + var _setLayoutData = function (captionElement, imagePositionTop, apparentImageHeight, gapTop) { captionElement.dataset.imagePositionTop = imagePositionTop; captionElement.dataset.apparentImageHeight = apparentImageHeight; captionElement.dataset.gapTop = gapTop; @@ -139,6 +138,7 @@ layoutData.imagePositionTop = parseInt(captionElement.dataset.imagePositionTop, 10); layoutData.apparentImageHeight = parseInt(captionElement.dataset.apparentImageHeight, 10); + console.log('height: ' + window.innerHeight); layoutData.captionInitialPositionTop = layoutData.imagePositionTop + layoutData.apparentImageHeight; layoutData.captionInitialHeight = window.innerHeight - layoutData.captionInitialPositionTop; layoutData.captionMaxHeight = window.innerHeight - layoutData.gapTop; @@ -156,9 +156,11 @@ // 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'; From b5e4f45a52b56425afadeac61d6c01e2a5a2460b Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Thu, 7 May 2020 13:06:03 +0100 Subject: [PATCH 14/35] Polyfill for closest() for IE11 --- src/js/framework-bridge.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/js/framework-bridge.js b/src/js/framework-bridge.js index e2e1d7bd8..da3aef173 100644 --- a/src/js/framework-bridge.js +++ b/src/js/framework-bridge.js @@ -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; + }; +} From 219be4cc19dadbb371a4e85d003baca00b09bb71 Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Thu, 7 May 2020 13:06:03 +0100 Subject: [PATCH 15/35] Various fixes --- src/css/default-skin/default-skin.scss | 8 +++++-- src/js/desktop-zoom.js | 6 +++++- src/js/items-controller.js | 15 ------------- src/js/ui/photoswipe-ui-default.js | 29 +++++++++++++++++++------- 4 files changed, 33 insertions(+), 25 deletions(-) diff --git a/src/css/default-skin/default-skin.scss b/src/css/default-skin/default-skin.scss index 775ef766d..ada299cd5 100644 --- a/src/css/default-skin/default-skin.scss +++ b/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 { @@ -347,7 +347,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; @@ -359,6 +359,10 @@ a.pswp__share--download { color: #fff; } + p { + margin: 0 0 0 10px; + } + p:last-child::after { display: inline-block; height: 10px; diff --git a/src/js/desktop-zoom.js b/src/js/desktop-zoom.js index a166ca192..677fd26f2 100644 --- a/src/js/desktop-zoom.js +++ b/src/js/desktop-zoom.js @@ -87,7 +87,11 @@ _registerModule('DesktopZoom', { if (_options.modal) { 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) { diff --git a/src/js/items-controller.js b/src/js/items-controller.js index fcd417327..3686d4bfc 100644 --- a/src/js/items-controller.js +++ b/src/js/items-controller.js @@ -459,30 +459,15 @@ _registerModule('Controller', { _appendImage(index, item, baseDiv, img, true); } - var scale = 1; - var transform = {}; 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); } framework.resetEl(holder.el); 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) { diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index f74fc20d4..c1c9be689 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -69,9 +69,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'); captionCtrl.classList.remove('pswp__button--caption--ctrl--collapse'); @@ -156,11 +155,9 @@ // 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'; @@ -222,7 +219,12 @@ } }, _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) { framework[(add ? 'add' : 'remove') + 'Class'](el, 'pswp__' + cName); @@ -462,6 +464,17 @@ }); } }, + _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 _listen('onVerticalDrag', function (now) { @@ -644,6 +657,8 @@ // create local link _listen = pswp.listen; + _overrideOptionsIfVerticalScrollForCaptionsTrue(); + _setupHidingControlsDuringGestures(); // update controls when slides change @@ -842,8 +857,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 { From 298e77e75c05ccb067fdb6aa2789ba45eba40f25 Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Thu, 7 May 2020 22:39:20 +0100 Subject: [PATCH 16/35] Sorted out weirdness with tap behavior. Now preventing closing when tapping on the caption because it is too easy to close accidentally when you thought you were swiping. --- src/js/ui/photoswipe-ui-default.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index c1c9be689..babc96b40 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -137,7 +137,6 @@ layoutData.imagePositionTop = parseInt(captionElement.dataset.imagePositionTop, 10); layoutData.apparentImageHeight = parseInt(captionElement.dataset.apparentImageHeight, 10); - console.log('height: ' + window.innerHeight); layoutData.captionInitialPositionTop = layoutData.imagePositionTop + layoutData.apparentImageHeight; layoutData.captionInitialHeight = window.innerHeight - layoutData.captionInitialPositionTop; layoutData.captionMaxHeight = window.innerHeight - layoutData.gapTop; @@ -200,6 +199,11 @@ } } + // Long captions will contain HTML so caption element will be an ancestor of target + if (target.closest('.pswp__caption__center')) { + found = true; + } + if (found) { if (e.stopPropagation) { e.stopPropagation(); @@ -472,8 +476,6 @@ _options.closeElClasses.splice(index, 1); } } - // Don't hide/show controls on tap - _options.tapToToggleControls = false; }, _setupHidingControlsDuringGestures = function () { // Hide controls on vertical drag @@ -858,7 +860,7 @@ } } else { // tap anywhere (except buttons and caption) to toggle visibility of controls - if (_options.tapToToggleControls && !target.classList.contains('pswp__caption__center')) { + if (_options.tapToToggleControls) { if (_controlsVisible) { ui.hideControls(); } else { From 534b671e9435b712cfaeb1f53d89a7709f6d368e Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Fri, 8 May 2020 12:10:47 +0100 Subject: [PATCH 17/35] Renaming option name and removing redundant code. --- src/js/ui/photoswipe-ui-default.js | 31 ++++++++++++++---------------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index babc96b40..f90294505 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -54,8 +54,8 @@ } innerCaptionElement.innerHTML = item.title; - // If verticalScrollForCaption is true, position caption from top rather than bottom. - if (_options.verticalScrollForCaption) { + // If allowLongCaptions is true, position caption from top rather than bottom. + if (_options.allowLongCaptions) { var imagePositionTop = item.initialPosition.y; var apparentImageHeight = Math.round(item.h * item.initialZoomLevel); var gapTop = item.vGap.top; @@ -82,7 +82,7 @@ closeEl: true, captionEl: true, - verticalScrollForCaptions: false, + allowLongCaptions: false, fullscreenEl: true, zoomEl: true, shareEl: true, @@ -224,10 +224,7 @@ }, _fitControlsInViewport = function () { return ( - !pswp.likelyTouchDevice || - _options.mouseUsed || - screen.width > _options.fitControlsWidth || - _options.verticalScrollForCaption + !pswp.likelyTouchDevice || _options.mouseUsed || screen.width > _options.fitControlsWidth || _options.allowLongCaptions ); }, _togglePswpClass = function (el, cName, add) { @@ -468,13 +465,14 @@ }); } }, - _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); - } + _overrideOptionsIfAllowLongCaptionsTrue = function () { + if (_options.closeOnScroll) { + console.info('Resetting _options.closeOnScroll to false because _options.allowLongCaptions is true.'); + _options.closeOnScroll = false; + } + if (_options.closeOnVerticalDrag) { + console.info('Resetting _options.closeOnVerticalDrag to false because _options.allowLongCaptions is true.'); + _options.closeOnVerticalDrag = false; } }, _setupHidingControlsDuringGestures = function () { @@ -590,7 +588,7 @@ }, { name: 'button--caption--ctrl', - option: 'verticalScrollForCaption', + option: 'allowLongCaptions', onTap: function (el) { _toggleCaption(el); } @@ -659,8 +657,7 @@ // create local link _listen = pswp.listen; - _overrideOptionsIfVerticalScrollForCaptionsTrue(); - + _overrideOptionsIfAllowLongCaptionsTrue(); _setupHidingControlsDuringGestures(); // update controls when slides change From 43453c33d99069e514987fb7674415012583d9e5 Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Fri, 8 May 2020 19:36:00 +0100 Subject: [PATCH 18/35] Drag up on collapsed caption will expand it. --- src/js/core.js | 4 ++-- src/js/gestures.js | 13 +++++++++++++ src/js/ui/photoswipe-ui-default.js | 4 ++++ 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/js/core.js b/src/js/core.js index 65fa13cf7..47658512f 100644 --- a/src/js/core.js +++ b/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, diff --git a/src/js/gestures.js b/src/js/gestures.js index 2bb73150c..f1c4b65fe 100644 --- a/src/js/gestures.js +++ b/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) { @@ -521,6 +524,16 @@ var _gestureStartTime, return; } + // if dragging up on a collapsed long caption, expand the caption + var targetCaption = _target.closest('.pswp__caption'); + if (_direction === 'v' && delta.y > -DIRECTION_CHECK_OFFSET && targetCaption) { + var toggleCaptionBtn = targetCaption.querySelector('.pswp__button--caption--ctrl'); + if (toggleCaptionBtn && toggleCaptionBtn.classList.contains('pswp__button--caption--ctrl--expand')) { + self.ui.toggleCaption(toggleCaptionBtn); + return; + } + } + if (_direction === 'v' && _options.closeOnVerticalDrag) { if (!_canPan()) { _currPanDist.y += delta.y; diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index f90294505..f64ee6c78 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -960,6 +960,10 @@ return api; }; + + ui.toggleCaption = function (el) { + _toggleCaption(el); + }; }; return PhotoSwipeUI_Default; }); From 493af2b5267aadca0f2311a84e38f428c39b619a Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Sat, 9 May 2020 22:47:38 +0100 Subject: [PATCH 19/35] Swap out two lines of SVG for two dozen lines of CSS to make the expand/collapse arrows without another request to get an image and still have it work on IE11. Now need to get the event to fire when clicking on the arrow itself. Not sure it is worth the trouble. --- src/css/default-skin/default-skin.scss | 73 +++++++++++++++++++++++--- 1 file changed, 67 insertions(+), 6 deletions(-) diff --git a/src/css/default-skin/default-skin.scss b/src/css/default-skin/default-skin.scss index ada299cd5..27ba055ca 100644 --- a/src/css/default-skin/default-skin.scss +++ b/src/css/default-skin/default-skin.scss @@ -388,14 +388,9 @@ a.pswp__share--download { transform: translateX(-50%); text-decoration: none; opacity: 1; + text-align: center; } -.pswp__button--caption--ctrl.pswp__button--caption--ctrl--expand { - background: url('data:image/svg+xml;utf8,'); -} -.pswp__button--caption--ctrl.pswp__button--caption--ctrl--collapse { - background: url('data:image/svg+xml;utf8,'); -} /* 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 { @@ -404,11 +399,77 @@ a.pswp__share--download { height: 36px; background-color: #ccc; background-size: cover; + i { + position: relative; + background: transparent; + border: 5px solid transparent; + } + i:after, + i:before { + left: 50%; + border: solid transparent; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + i:before { + margin-left: -11px; + } + i:after { + margin-left: -8px; + } +} +.pswp__button--caption--ctrl.pswp__button--caption--ctrl--expand { + i { + top: -2px; + } + i:before, + i:after { + bottom: 0%; + } + i:before { + border-bottom-color: #000; + border-width: 11px 11px 13px 11px; + } + i:after { + border-bottom-color: #ccc; + border-width: 8px 8px 10px 8px; + } } +.pswp__button--caption--ctrl.pswp__button--caption--ctrl--collapse { + i { + top: 2px; + } + i:before, + i:after { + top: 0%; + } + i:before { + border-top-color: #000; + border-width: 13px 11px 11px 11px; + } + i:after { + border-top-color: #ccc; + border-width: 10px 8px 8px 8px; + } +} + .pswp__button--caption--ctrl.pswp__button--caption--ctrl--expand:hover, .pswp__button--caption--ctrl.pswp__button--caption--ctrl--collapse:hover { background-color: #fff; } +.pswp__button--caption--ctrl.pswp__button--caption--ctrl--expand:hover { + i:after { + border-bottom-color: #fff; + } +} +.pswp__button--caption--ctrl.pswp__button--caption--ctrl--collapse:hover { + i:after { + border-top-color: #fff; + } +} .pswp__caption--empty { display: none; From aa2a9479b29d7a1a1e8661177f367221fe8aec0c Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Sun, 10 May 2020 13:11:01 +0100 Subject: [PATCH 20/35] Back to SVG background images but now Base64 encoded and background size set explicitly so that it will work with IE11. --- src/css/default-skin/default-skin.scss | 77 +++----------------------- 1 file changed, 9 insertions(+), 68 deletions(-) diff --git a/src/css/default-skin/default-skin.scss b/src/css/default-skin/default-skin.scss index 27ba055ca..e9a5cba0b 100644 --- a/src/css/default-skin/default-skin.scss +++ b/src/css/default-skin/default-skin.scss @@ -388,7 +388,14 @@ a.pswp__share--download { transform: translateX(-50%); text-decoration: none; opacity: 1; - text-align: center; +} + +.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 */ @@ -398,78 +405,12 @@ a.pswp__share--download { width: 36px; height: 36px; background-color: #ccc; - background-size: cover; - i { - position: relative; - background: transparent; - border: 5px solid transparent; - } - i:after, - i:before { - left: 50%; - border: solid transparent; - content: ' '; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - } - i:before { - margin-left: -11px; - } - i:after { - margin-left: -8px; - } -} -.pswp__button--caption--ctrl.pswp__button--caption--ctrl--expand { - i { - top: -2px; - } - i:before, - i:after { - bottom: 0%; - } - i:before { - border-bottom-color: #000; - border-width: 11px 11px 13px 11px; - } - i:after { - border-bottom-color: #ccc; - border-width: 8px 8px 10px 8px; - } -} -.pswp__button--caption--ctrl.pswp__button--caption--ctrl--collapse { - i { - top: 2px; - } - i:before, - i:after { - top: 0%; - } - i:before { - border-top-color: #000; - border-width: 13px 11px 11px 11px; - } - i:after { - border-top-color: #ccc; - border-width: 10px 8px 8px 8px; - } + 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__button--caption--ctrl.pswp__button--caption--ctrl--expand:hover { - i:after { - border-bottom-color: #fff; - } -} -.pswp__button--caption--ctrl.pswp__button--caption--ctrl--collapse:hover { - i:after { - border-top-color: #fff; - } -} .pswp__caption--empty { display: none; From f20655ee94d916d51160e644b1769e54e1c81f7d Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Sun, 10 May 2020 19:16:22 +0100 Subject: [PATCH 21/35] Ensure HTML exists for caption control and change title on button when toggling the control. --- src/js/ui/photoswipe-ui-default.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index f64ee6c78..0a31e0837 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -164,6 +164,7 @@ captionCtrl.classList.remove('pswp__button--caption--ctrl--expand'); captionCtrl.classList.add('pswp__button--caption--ctrl--collapse'); + captionCtrl.setAttribute('title', 'Collapse caption'); } else { // Collapse caption innerCaptionElement.style.height = 'auto'; @@ -171,6 +172,7 @@ captionCtrl.classList.add('pswp__button--caption--ctrl--expand'); captionCtrl.classList.remove('pswp__button--caption--ctrl--collapse'); + captionCtrl.setAttribute('title', 'Expand caption'); } }; @@ -602,6 +604,18 @@ } ]; + var _ensureCaptionCtrlExists = function () { + // Ensure that there is a button to toggle the caption + var captionElement = document.querySelector('.pswp__caption'); + if (!captionElement.querySelector('.pswp__button--caption--ctrl')) { + var btn = document.createElement('button'); + var innerCaptionElement = captionElement.querySelector('.pswp__caption__center'); + btn.setAttribute('class', 'pswp__button pswp__button--caption--ctrl'); + btn.setAttribute('title', 'Expand caption'); + captionElement.insertBefore(btn, innerCaptionElement); + } + }; + var _setupUIElements = function () { var item, classAttr, uiElement; @@ -642,6 +656,8 @@ if (topBar) { loopThroughChildElements(topBar.children); } + + _ensureCaptionCtrlExists(); }; ui.init = function () { From fd24fe19baca593c3c4907c01db69ec72af7e0c4 Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Tue, 12 May 2020 13:14:51 +0100 Subject: [PATCH 22/35] Allow left/right buttons to show above expanded caption overlay when viewport is wide enough. --- src/css/default-skin/default-skin.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/css/default-skin/default-skin.scss b/src/css/default-skin/default-skin.scss index e9a5cba0b..977947b4e 100644 --- a/src/css/default-skin/default-skin.scss +++ b/src/css/default-skin/default-skin.scss @@ -144,6 +144,14 @@ 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 { left: 0; From ab38d3eb38a9265c0c8ac91879a1dfcb3ebf1870 Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Wed, 13 May 2020 11:12:40 +0100 Subject: [PATCH 23/35] Now with keyboard control. --- src/js/core.js | 24 +++++++++++++------ src/js/ui/photoswipe-ui-default.js | 37 ++++++++++++++++++++++++++---- 2 files changed, 50 insertions(+), 11 deletions(-) diff --git a/src/js/core.js b/src/js/core.js index 47658512f..a85180fe4 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -189,11 +189,6 @@ var _isOpen, _mainScrollPos.x = x; _setTranslateX(x, _containerStyle); }, - _resetCaptionCtrl = function () { - var captionCtrl = self.scrollWrap.querySelector('.pswp__button--caption--ctrl'); - captionCtrl.classList.remove('pswp__button--caption--ctrl--expand'); - captionCtrl.classList.remove('pswp__button--caption--ctrl--collapse'); - }, _calculatePanOffset = function (axis, zoomLevel) { var m = _midZoomPoint[axis] - _offset[axis]; return _startPanOffset[axis] + _currPanDist[axis] + m - m * (zoomLevel / _startZoomLevel); @@ -356,6 +351,17 @@ 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') + ) { + keydownAction = 'toggleCaption'; + } + } } } @@ -684,7 +690,7 @@ var publicMethods = { _stopDragUpdateLoop(); _stopAllAnimations(); - _resetCaptionCtrl(); + self.ui.resetCaptionCtrl(); _listeners = {}; }, @@ -750,7 +756,7 @@ var publicMethods = { _moveMainScroll(_slideSize.x * _currPositionIndex); - _resetCaptionCtrl(); + self.ui.resetCaptionCtrl(); _stopAllAnimations(); _mainScrollAnimating = false; @@ -809,6 +815,10 @@ var publicMethods = { self.updateSize(true); }, + toggleCaption: function (el) { + self.ui.toggleCaption(el); + }, + // update current zoom/pan objects updateCurrZoomItem: function (emulateSetContent) { if (emulateSetContent) { diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index 0a31e0837..7636c477a 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -71,9 +71,10 @@ var captionCtrl = captionElement.querySelector('.pswp__button--caption--ctrl'); if (innerCaptionElement.clientHeight - 10 > layoutData.captionInitialHeight) { captionCtrl.classList.add('pswp__button--caption--ctrl--expand'); + captionCtrl.setAttribute('aria-controls', 'pswp__caption__center'); + innerCaptionElement.setAttribute('aria-expanded', 'false'); } else { - captionCtrl.classList.remove('pswp__button--caption--ctrl--expand'); - captionCtrl.classList.remove('pswp__button--caption--ctrl--collapse'); + _resetCaptionCtrl(captionCtrl); } } @@ -144,14 +145,31 @@ return layoutData; }; - var _toggleCaption = function (el) { - var captionCtrl = el; //e.target || e.srcElement; + var _resetCaptionCtrl = function (captionCtrl) { + if (!captionCtrl) { + captionCtrl = pswp.scrollWrap.querySelector('.pswp__button--caption--ctrl'); + } + + captionCtrl.classList.remove('pswp__button--caption--ctrl--expand'); + captionCtrl.classList.remove('pswp__button--caption--ctrl--collapse'); + captionCtrl.removeAttribute('aria-controls'); + + var innerCaptionElement = captionCtrl.parentNode.querySelector('.pswp__caption__center'); + innerCaptionElement.removeAttribute('aria-expanded'); + }; + + var _toggleCaption = function (captionCtrl) { + if (!captionCtrl) { + captionCtrl = pswp.scrollWrap.querySelector('.pswp__button--caption--ctrl'); + } + var captionElement = captionCtrl.parentNode; var innerCaptionElement = captionElement.querySelector('.pswp__caption__center'); var layoutData = _getLayoutData(captionElement); if (captionCtrl.classList.contains('pswp__button--caption--ctrl--expand')) { // Expand caption + console.log('expand caption'); if (captionElement.clientHeight < layoutData.captionMaxHeight) { // It fits in space below top bar captionElement.style.top = window.innerHeight - captionElement.clientHeight + 'px'; @@ -160,14 +178,21 @@ captionElement.style.top = layoutData.gapTop + 'px'; innerCaptionElement.style.height = layoutData.captionMaxHeight + 'px'; innerCaptionElement.style.overflowY = 'auto'; + innerCaptionElement.focus(); + console.log('innerCaptionElement should be focussed'); } captionCtrl.classList.remove('pswp__button--caption--ctrl--expand'); captionCtrl.classList.add('pswp__button--caption--ctrl--collapse'); captionCtrl.setAttribute('title', 'Collapse caption'); + + innerCaptionElement.setAttribute('aria-expanded', 'true'); } else { // Collapse caption + console.log('collapse caption'); innerCaptionElement.style.height = 'auto'; + innerCaptionElement.setAttribute('aria-expanded', 'false'); + captionElement.style.top = layoutData.captionInitialPositionTop + 'px'; captionCtrl.classList.add('pswp__button--caption--ctrl--expand'); @@ -980,6 +1005,10 @@ ui.toggleCaption = function (el) { _toggleCaption(el); }; + + ui.resetCaptionCtrl = function (el) { + _resetCaptionCtrl(el); + }; }; return PhotoSwipeUI_Default; }); From 599f1b02ba9a072fa5773c2fa49074e99d7a2319 Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Wed, 13 May 2020 12:45:13 +0100 Subject: [PATCH 24/35] Moving the setting of tabindex and focus on the innerCaptionElement to where the keydown events are handled. Also removing some console output. --- src/js/core.js | 4 ++++ src/js/ui/photoswipe-ui-default.js | 5 +---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/js/core.js b/src/js/core.js index a85180fe4..72e9a41bf 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -359,6 +359,10 @@ var _isOpen, 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'; } } diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index 7636c477a..302424e10 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -169,7 +169,6 @@ if (captionCtrl.classList.contains('pswp__button--caption--ctrl--expand')) { // Expand caption - console.log('expand caption'); if (captionElement.clientHeight < layoutData.captionMaxHeight) { // It fits in space below top bar captionElement.style.top = window.innerHeight - captionElement.clientHeight + 'px'; @@ -178,8 +177,6 @@ captionElement.style.top = layoutData.gapTop + 'px'; innerCaptionElement.style.height = layoutData.captionMaxHeight + 'px'; innerCaptionElement.style.overflowY = 'auto'; - innerCaptionElement.focus(); - console.log('innerCaptionElement should be focussed'); } captionCtrl.classList.remove('pswp__button--caption--ctrl--expand'); @@ -189,7 +186,6 @@ innerCaptionElement.setAttribute('aria-expanded', 'true'); } else { // Collapse caption - console.log('collapse caption'); innerCaptionElement.style.height = 'auto'; innerCaptionElement.setAttribute('aria-expanded', 'false'); @@ -636,6 +632,7 @@ var btn = document.createElement('button'); var innerCaptionElement = captionElement.querySelector('.pswp__caption__center'); btn.setAttribute('class', 'pswp__button pswp__button--caption--ctrl'); + btn.setAttribute('id', 'pswp__button--caption--ctrl'); btn.setAttribute('title', 'Expand caption'); captionElement.insertBefore(btn, innerCaptionElement); } From d16f1e993a01f5914554070880ad1618a6422ea9 Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Wed, 13 May 2020 21:06:58 +0100 Subject: [PATCH 25/35] Animate expansion and collapse of caption. Note that Google says that doing a CSS animation on height (and width) is bad for performance so I may revisit this later but it seems to work just fine. https://developers.google.com/web/updates/2017/03/performant-expand-and-collapse --- src/css/default-skin/default-skin.scss | 1 + src/js/core.js | 4 +- src/js/ui/photoswipe-ui-default.js | 78 +++++++++++++++++--------- 3 files changed, 56 insertions(+), 27 deletions(-) diff --git a/src/css/default-skin/default-skin.scss b/src/css/default-skin/default-skin.scss index 977947b4e..8143d988d 100644 --- a/src/css/default-skin/default-skin.scss +++ b/src/css/default-skin/default-skin.scss @@ -359,6 +359,7 @@ a.pswp__share--download { line-height: 20px; color: #fff; background-color: #000; + transition: height 250ms ease-out; a { color: #ccf; diff --git a/src/js/core.js b/src/js/core.js index 72e9a41bf..020bfe16c 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -694,7 +694,7 @@ var publicMethods = { _stopDragUpdateLoop(); _stopAllAnimations(); - self.ui.resetCaptionCtrl(); + self.ui.resetCaption(); _listeners = {}; }, @@ -760,7 +760,7 @@ var publicMethods = { _moveMainScroll(_slideSize.x * _currPositionIndex); - self.ui.resetCaptionCtrl(); + self.ui.resetCaption(); _stopAllAnimations(); _mainScrollAnimating = false; diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index 302424e10..32c10ec08 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -38,6 +38,9 @@ _loadingIndicatorHidden, _loadingIndicatorTimeout, _galleryHasOneSlide, + _stylesheet, + _ruleExpanded, + _ruleCollapsed, _options, _defaultUIOptions = { barsSize: {top: 44, bottom: 'auto'}, @@ -54,28 +57,30 @@ } innerCaptionElement.innerHTML = item.title; - // If allowLongCaptions is true, position caption from top rather than bottom. + // If allowLongCaptions is true, position caption just under picture and show "Expand" button if necessary if (_options.allowLongCaptions) { var imagePositionTop = item.initialPosition.y; var apparentImageHeight = Math.round(item.h * item.initialZoomLevel); var gapTop = item.vGap.top; + var naturalCaptionHeight = innerCaptionElement.clientHeight; - _setLayoutData(captionElement, imagePositionTop, apparentImageHeight, gapTop); - var layoutData = _getLayoutData(captionElement); + var captionCtrl = captionElement.querySelector('.pswp__button--caption--ctrl'); - captionElement.style.bottom = 'auto'; - captionElement.style.top = layoutData.captionInitialPositionTop + 'px'; + _setLayoutData(captionElement, imagePositionTop, apparentImageHeight, gapTop, naturalCaptionHeight); + var layoutData = _getLayoutData(captionElement); // 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 - 10 > layoutData.captionInitialHeight) { + if (naturalCaptionHeight - 10 > layoutData.maxCollapsedCaptionHeight) { captionCtrl.classList.add('pswp__button--caption--ctrl--expand'); captionCtrl.setAttribute('aria-controls', 'pswp__caption__center'); + + innerCaptionElement.classList.add('collapsed'); innerCaptionElement.setAttribute('aria-expanded', 'false'); } else { - _resetCaptionCtrl(captionCtrl); + _resetCaption(captionCtrl); } + + _ruleCollapsed.style.height = layoutData.maxCollapsedCaptionHeight + 'px'; } return true; @@ -125,27 +130,31 @@ _blockControlsTap, _blockControlsTapTimeout; - var _setLayoutData = function (captionElement, imagePositionTop, apparentImageHeight, gapTop) { + // Write key layout dimensions as data attributes on the caption element + var _setLayoutData = function (captionElement, imagePositionTop, apparentImageHeight, gapTop, naturalCaptionHeight) { captionElement.dataset.imagePositionTop = imagePositionTop; captionElement.dataset.apparentImageHeight = apparentImageHeight; captionElement.dataset.gapTop = gapTop; + captionElement.dataset.naturalCaptionHeight = naturalCaptionHeight; }; var _getLayoutData = function (captionElement) { var layoutData = {}; + // Read data attributes on the caption element layoutData.gapTop = parseInt(captionElement.dataset.gapTop, 10); layoutData.imagePositionTop = parseInt(captionElement.dataset.imagePositionTop, 10); layoutData.apparentImageHeight = parseInt(captionElement.dataset.apparentImageHeight, 10); + layoutData.naturalCaptionHeight = parseInt(captionElement.dataset.naturalCaptionHeight, 10); - layoutData.captionInitialPositionTop = layoutData.imagePositionTop + layoutData.apparentImageHeight; - layoutData.captionInitialHeight = window.innerHeight - layoutData.captionInitialPositionTop; - layoutData.captionMaxHeight = window.innerHeight - layoutData.gapTop; + var imageBottomEdgeFromTop = layoutData.imagePositionTop + layoutData.apparentImageHeight; + layoutData.maxCollapsedCaptionHeight = window.innerHeight - imageBottomEdgeFromTop; + layoutData.maxExpandedCaptionHeight = window.innerHeight - layoutData.gapTop; return layoutData; }; - var _resetCaptionCtrl = function (captionCtrl) { + var _resetCaption = function (captionCtrl) { if (!captionCtrl) { captionCtrl = pswp.scrollWrap.querySelector('.pswp__button--caption--ctrl'); } @@ -156,6 +165,11 @@ var innerCaptionElement = captionCtrl.parentNode.querySelector('.pswp__caption__center'); innerCaptionElement.removeAttribute('aria-expanded'); + innerCaptionElement.classList.remove('expanded'); + innerCaptionElement.classList.remove('collapsed'); + + _ruleExpanded.style.height = 'auto'; + _ruleCollapsed.style.height = 'auto'; }; var _toggleCaption = function (captionCtrl) { @@ -169,13 +183,12 @@ if (captionCtrl.classList.contains('pswp__button--caption--ctrl--expand')) { // Expand caption - if (captionElement.clientHeight < layoutData.captionMaxHeight) { + if (layoutData.naturalCaptionHeight < layoutData.maxExpandedCaptionHeight) { // It fits in space below top bar - captionElement.style.top = window.innerHeight - captionElement.clientHeight + 'px'; - innerCaptionElement.style.height = 'auto'; + _ruleExpanded.style.height = layoutData.naturalCaptionHeight + 'px'; } else { - captionElement.style.top = layoutData.gapTop + 'px'; - innerCaptionElement.style.height = layoutData.captionMaxHeight + 'px'; + // Caption is taller than the space available + _ruleExpanded.style.height = layoutData.maxExpandedCaptionHeight + 'px'; innerCaptionElement.style.overflowY = 'auto'; } @@ -183,17 +196,21 @@ captionCtrl.classList.add('pswp__button--caption--ctrl--collapse'); captionCtrl.setAttribute('title', 'Collapse caption'); + innerCaptionElement.classList.remove('collapsed'); + innerCaptionElement.classList.add('expanded'); innerCaptionElement.setAttribute('aria-expanded', 'true'); } else { // Collapse caption - innerCaptionElement.style.height = 'auto'; - innerCaptionElement.setAttribute('aria-expanded', 'false'); - - captionElement.style.top = layoutData.captionInitialPositionTop + 'px'; + _ruleCollapsed.style.height = layoutData.maxCollapsedCaptionHeight + 'px'; captionCtrl.classList.add('pswp__button--caption--ctrl--expand'); captionCtrl.classList.remove('pswp__button--caption--ctrl--collapse'); captionCtrl.setAttribute('title', 'Expand caption'); + + innerCaptionElement.style.overflowY = 'hidden'; + innerCaptionElement.classList.remove('expanded'); + innerCaptionElement.classList.add('collapsed'); + innerCaptionElement.setAttribute('aria-expanded', 'false'); } }; @@ -803,6 +820,17 @@ _setupFullscreenAPI(); _setupLoadingIndicator(); + + // Get handle on stylesheet - doesn't really matter which but I'll take default-skin.css + _stylesheet = document.styleSheets[1]; + + // From https://davidwalsh.name/add-rules-stylesheets + // We insert an empty rule just to create a new CSSStyleRule object. The second param is the index to + // insert at using the length property we effectively "append" the rule to the end of the sheet + var ruleExpandedIndex = _stylesheet.insertRule('.pswp__caption__center.expanded {}', _stylesheet.cssRules.length); + var ruleCollapsedIndex = _stylesheet.insertRule('.pswp__caption__center.collapsed {}', _stylesheet.cssRules.length); + _ruleExpanded = _stylesheet.cssRules.item(ruleExpandedIndex); + _ruleCollapsed = _stylesheet.cssRules.item(ruleCollapsedIndex); }; ui.setIdle = function (isIdle) { @@ -1003,8 +1031,8 @@ _toggleCaption(el); }; - ui.resetCaptionCtrl = function (el) { - _resetCaptionCtrl(el); + ui.resetCaption = function (el) { + _resetCaption(el); }; }; return PhotoSwipeUI_Default; From d8e13fd4d931996bcd3f5f4b2b164a2f734cfc36 Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Wed, 13 May 2020 22:00:53 +0100 Subject: [PATCH 26/35] Get around cross-site security issue by creating a new stylesheet rather than attempting to manipulate an existing one. --- src/js/ui/photoswipe-ui-default.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index 32c10ec08..d6ef702df 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -544,6 +544,14 @@ }); }; + // From https://davidwalsh.name/add-rules-stylesheets + var _createStylesheet = function () { + var style = document.createElement('style'); + style.appendChild(document.createTextNode('')); + document.head.appendChild(style); + return style.sheet; + }; + var _uiElements = [ { name: 'caption', @@ -821,12 +829,12 @@ _setupLoadingIndicator(); - // Get handle on stylesheet - doesn't really matter which but I'll take default-skin.css - _stylesheet = document.styleSheets[1]; + // Make a new stylesheet since there will be cross-site security issues if referencing a stylesheet on CDN + _stylesheet = _createStylesheet(); // From https://davidwalsh.name/add-rules-stylesheets // We insert an empty rule just to create a new CSSStyleRule object. The second param is the index to - // insert at using the length property we effectively "append" the rule to the end of the sheet + // insert at using the length property we effectively "append" the rule to the end of the sheet. var ruleExpandedIndex = _stylesheet.insertRule('.pswp__caption__center.expanded {}', _stylesheet.cssRules.length); var ruleCollapsedIndex = _stylesheet.insertRule('.pswp__caption__center.collapsed {}', _stylesheet.cssRules.length); _ruleExpanded = _stylesheet.cssRules.item(ruleExpandedIndex); From d8fe302cf98c5115cfae77eb375ae7e31b49da32 Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Thu, 14 May 2020 13:54:43 +0100 Subject: [PATCH 27/35] A bit of rearrangement as I discovered that dragging to a new photo on a phone does not call the goTo function so the resetCaption function was not getting called which had some odd results. --- src/js/core.js | 2 -- src/js/ui/photoswipe-ui-default.js | 4 +++- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/js/core.js b/src/js/core.js index 020bfe16c..2a2632c15 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -760,8 +760,6 @@ var publicMethods = { _moveMainScroll(_slideSize.x * _currPositionIndex); - self.ui.resetCaption(); - _stopAllAnimations(); _mainScrollAnimating = false; diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index d6ef702df..5abb89be7 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -62,6 +62,8 @@ var imagePositionTop = item.initialPosition.y; var apparentImageHeight = Math.round(item.h * item.initialZoomLevel); var gapTop = item.vGap.top; + + ui.resetCaption(); var naturalCaptionHeight = innerCaptionElement.clientHeight; var captionCtrl = captionElement.querySelector('.pswp__button--caption--ctrl'); @@ -74,13 +76,13 @@ captionCtrl.classList.add('pswp__button--caption--ctrl--expand'); captionCtrl.setAttribute('aria-controls', 'pswp__caption__center'); - innerCaptionElement.classList.add('collapsed'); innerCaptionElement.setAttribute('aria-expanded', 'false'); } else { _resetCaption(captionCtrl); } _ruleCollapsed.style.height = layoutData.maxCollapsedCaptionHeight + 'px'; + innerCaptionElement.classList.add('collapsed'); } return true; From 99a15f969e5640296ec8c42eeeb90f33a6c1940e Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Thu, 14 May 2020 16:56:18 +0100 Subject: [PATCH 28/35] Increase the width of the caption if long captions are selected. --- src/js/ui/photoswipe-ui-default.js | 30 ++++++++++++++++++++---------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index 5abb89be7..b830bec2d 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -554,6 +554,23 @@ return style.sheet; }; + var _createStylesForLongCaptions = function () { + // Make a new stylesheet since there will be cross-site security issues if referencing a stylesheet on CDN + _stylesheet = _createStylesheet(); + + // From https://davidwalsh.name/add-rules-stylesheets + // We insert an empty rule just to create a new CSSStyleRule object. The second param is the index to + // insert at using the length property we effectively "append" the rule to the end of the sheet. + var ruleExpandedIndex = _stylesheet.insertRule('.pswp__caption__center.expanded {}', _stylesheet.cssRules.length); + var ruleCollapsedIndex = _stylesheet.insertRule('.pswp__caption__center.collapsed {}', _stylesheet.cssRules.length); + _ruleExpanded = _stylesheet.cssRules.item(ruleExpandedIndex); + _ruleCollapsed = _stylesheet.cssRules.item(ruleCollapsedIndex); + + // While we are here, increase the width of the caption. It is very narrow which keeps it roughly centered + // if there are only a few words but it looks odd when the photo is wide and the caption is long. + _stylesheet.insertRule('.pswp__caption__center { width: 100%; max-width: 720px; }', _stylesheet.cssRules.length); + }; + var _uiElements = [ { name: 'caption', @@ -831,16 +848,9 @@ _setupLoadingIndicator(); - // Make a new stylesheet since there will be cross-site security issues if referencing a stylesheet on CDN - _stylesheet = _createStylesheet(); - - // From https://davidwalsh.name/add-rules-stylesheets - // We insert an empty rule just to create a new CSSStyleRule object. The second param is the index to - // insert at using the length property we effectively "append" the rule to the end of the sheet. - var ruleExpandedIndex = _stylesheet.insertRule('.pswp__caption__center.expanded {}', _stylesheet.cssRules.length); - var ruleCollapsedIndex = _stylesheet.insertRule('.pswp__caption__center.collapsed {}', _stylesheet.cssRules.length); - _ruleExpanded = _stylesheet.cssRules.item(ruleExpandedIndex); - _ruleCollapsed = _stylesheet.cssRules.item(ruleCollapsedIndex); + if (_options.allowLongCaptions) { + _createStylesForLongCaptions(); + } }; ui.setIdle = function (isIdle) { From 0878043395c46ea9f72ad169b1a26336c78928bc Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Sun, 17 May 2020 20:41:13 +0100 Subject: [PATCH 29/35] Added section for caption expand/collapse by vertical swipe/drag. Unfortunately it did not work reliably and so it is now commented out in the hope that someone else will understand how to fix it. Added lines 348 and 719 as I thought they might be why I could usually expand the caption with an upward swipe but could not close it. It seems those lines should be there but they did not seem to help so now commented out. --- src/js/gestures.js | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/src/js/gestures.js b/src/js/gestures.js index f1c4b65fe..af549bbdc 100644 --- a/src/js/gestures.js +++ b/src/js/gestures.js @@ -310,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; @@ -524,15 +525,28 @@ var _gestureStartTime, return; } - // if dragging up on a collapsed long caption, expand the caption - var targetCaption = _target.closest('.pswp__caption'); - if (_direction === 'v' && delta.y > -DIRECTION_CHECK_OFFSET && targetCaption) { - var toggleCaptionBtn = targetCaption.querySelector('.pswp__button--caption--ctrl'); - if (toggleCaptionBtn && toggleCaptionBtn.classList.contains('pswp__button--caption--ctrl--expand')) { - self.ui.toggleCaption(toggleCaptionBtn); - 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()) { @@ -653,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(); From 661065d520be7f79b8ec77f18ea63bd8f50f05e3 Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Sun, 17 May 2020 20:43:55 +0100 Subject: [PATCH 30/35] Add "FYI" to console notices explaining that two options are overridden when allowLongCaptions is true. Don't close caption on vertical drag when allowLongCaption is true. Don't close caption when tap is on an element inside the caption --- src/js/ui/photoswipe-ui-default.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index b830bec2d..c15421ae5 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -509,17 +509,21 @@ }, _overrideOptionsIfAllowLongCaptionsTrue = function () { if (_options.closeOnScroll) { - console.info('Resetting _options.closeOnScroll to false because _options.allowLongCaptions is true.'); + console.info('FYI: Resetting _options.closeOnScroll to false because _options.allowLongCaptions is true.'); _options.closeOnScroll = false; } if (_options.closeOnVerticalDrag) { - console.info('Resetting _options.closeOnVerticalDrag to false because _options.allowLongCaptions is true.'); + console.info('FYI: Resetting _options.closeOnVerticalDrag to false because _options.allowLongCaptions is true.'); _options.closeOnVerticalDrag = false; } }, _setupHidingControlsDuringGestures = function () { // Hide controls on vertical drag _listen('onVerticalDrag', function (now) { + if (_options.allowLongCaptions) { + return; + } + if (_controlsVisible && now < 0.95) { ui.hideControls(); } else if (!_controlsVisible && now >= 0.95) { @@ -942,8 +946,10 @@ } } } else { - // tap anywhere (except buttons and caption) to toggle visibility of controls - if (_options.tapToToggleControls) { + // Tap anywhere (except buttons and caption) to toggle visibility of controls + // Since the caption may now contain other elements, have to check if target is in caption + var targetCaption = target.closest('.pswp__caption'); + if (_options.tapToToggleControls && !targetCaption) { if (_controlsVisible) { ui.hideControls(); } else { From 17bf5946a2053471cb066a5e35ac065a244bd2a9 Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Sun, 17 May 2020 20:44:34 +0100 Subject: [PATCH 31/35] Remove some console output and updated generated files. --- src/js/core.js | 1 - src/js/items-controller.js | 3 --- 2 files changed, 4 deletions(-) diff --git a/src/js/core.js b/src/js/core.js index 2a2632c15..b8f6c597d 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -320,7 +320,6 @@ var _isOpen, s.left = item.initialPosition.x + 'px'; s.top = item.initialPosition.y + 'px'; - console.log('This is _applyZoomPanToItem at line 355'); item.zoom = zoomRatio; item.apparentImageHeight = h; item.imageFromTop = item.initialPosition; diff --git a/src/js/items-controller.js b/src/js/items-controller.js index 3686d4bfc..1afacb8f3 100644 --- a/src/js/items-controller.js +++ b/src/js/items-controller.js @@ -380,12 +380,9 @@ _registerModule('Controller', { item.loadComplete = item.img = null; _calculateItemSize(item, _viewportSize); _applyZoomPanToItem(item); - console.log('index: ' + index + ', item.container.style.transform: ' + item.container.style.transform); - if (holder.index === _currentItemIndex) { // recalculate dimensions self.updateCurrZoomItem(); - console.log('index: ' + index + ', item.container.style.transform: ' + item.container.style.transform); } return; } From 507a2f55d66ff840bf2b6a929915311a0097b994 Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Sat, 9 May 2020 13:31:50 +0100 Subject: [PATCH 32/35] Expand and collapse caption with just the mouse wheel --- src/js/desktop-zoom.js | 31 +++++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/src/js/desktop-zoom.js b/src/js/desktop-zoom.js index 677fd26f2..2a5504ad7 100644 --- a/src/js/desktop-zoom.js +++ b/src/js/desktop-zoom.js @@ -83,17 +83,32 @@ _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) { - var source = e.target || e.srcElement; - if (source.classList.contains('pswp__caption__center')) { - if (source.class.contains('pswp__button--caption--ctrl--expand')) { - toggleCaption(source.parentNode); - } - } else { - e.preventDefault(); - } + e.preventDefault(); } else if (_transformKey && Math.abs(e.deltaY) > 2) { // close PhotoSwipe // if browser supports transforms & scroll changed enough From d9cd2ec248b9e6438acdebaba11363ecd0ed901e Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sat, 5 Sep 2020 10:19:44 +0200 Subject: [PATCH 33/35] Add long caption to index --- index.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index f319207fa..95c68bfcf 100644 --- a/index.html +++ b/index.html @@ -78,6 +78,7 @@
+
@@ -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, From 83885edbbc9be003323254b5763ce129f4829eab Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sun, 6 Sep 2020 10:15:39 +0200 Subject: [PATCH 34/35] seems to work --- src/js/ui/photoswipe-ui-default.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/js/ui/photoswipe-ui-default.js b/src/js/ui/photoswipe-ui-default.js index c15421ae5..9ac0d659b 100644 --- a/src/js/ui/photoswipe-ui-default.js +++ b/src/js/ui/photoswipe-ui-default.js @@ -50,7 +50,20 @@ loadingIndicatorDelay: 1000, // 2s addCaptionHTMLFn: function (item, captionElement /*, isFake */) { + var captionCtrl = pswp.scrollWrap.querySelector('.pswp__button--caption--ctrl'); + var captionElement = captionCtrl.parentNode; var innerCaptionElement = captionElement.querySelector('.pswp__caption__center'); + var imagePositionTop; + if (item.initialPosition) { + imagePositionTop = item.initialPosition.y; + } else { + imagePositionTop = 0; + } + var apparentImageHeight = Math.round(item.h * item.initialZoomLevel); + var gapTop = item.vGap; + var naturalCaptionHeight = innerCaptionElement.clientHeight; + var layoutData = _getLayoutData(captionElement); + if (!item.title) { innerCaptionElement.innerHTML = ''; return false; @@ -59,17 +72,8 @@ // If allowLongCaptions is true, position caption just under picture and show "Expand" button if necessary if (_options.allowLongCaptions) { - var imagePositionTop = item.initialPosition.y; - var apparentImageHeight = Math.round(item.h * item.initialZoomLevel); - var gapTop = item.vGap.top; - ui.resetCaption(); - var naturalCaptionHeight = innerCaptionElement.clientHeight; - - var captionCtrl = captionElement.querySelector('.pswp__button--caption--ctrl'); - _setLayoutData(captionElement, imagePositionTop, apparentImageHeight, gapTop, naturalCaptionHeight); - var layoutData = _getLayoutData(captionElement); // Show the 'expand' control only if caption extends out of view. Reset height first. if (naturalCaptionHeight - 10 > layoutData.maxCollapsedCaptionHeight) { From 2e70369c4999321c9749d5b273b49526e29c3f6d Mon Sep 17 00:00:00 2001 From: petersweetandsour Date: Thu, 18 Jun 2020 18:57:20 +0100 Subject: [PATCH 35/35] Increase font size --- src/css/default-skin/default-skin.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/css/default-skin/default-skin.scss b/src/css/default-skin/default-skin.scss index 8143d988d..96f04587d 100644 --- a/src/css/default-skin/default-skin.scss +++ b/src/css/default-skin/default-skin.scss @@ -354,7 +354,7 @@ a.pswp__share--download { text-align: center; max-width: 420px; margin: 0 auto; - font-size: 13px; + font-size: 15px; padding: 18px 10px 10px 10px; line-height: 20px; color: #fff; @@ -369,7 +369,7 @@ a.pswp__share--download { } p { - margin: 0 0 0 10px; + margin: 0 0 1em 10px; } p:last-child::after {