diff --git a/assets/ps5/frontend.js b/assets/ps5/frontend.js index f151619..a72c9b5 100644 --- a/assets/ps5/frontend.js +++ b/assets/ps5/frontend.js @@ -4,6 +4,16 @@ import PhotoSwipeAutoHideUI from './auto-hide-ui/photoswipe-auto-hide-ui.esm.min import PhotoSwipeFullscreen from './fullscreen/photoswipe-fullscreen.esm.min.js'; let lbwpsInit = function(domUpdate) { + // Original styles to be used to hide/show scrollbars + let originalBodyPaddingRight = document.body.style.paddingRight; + let originalBodyOverflow = document.body.style.overflow; + + // Get initial hash + let initialHash = window.location.hash.substring(1); + // Check, if history.pushState() is supported + let supportsPushState = ('pushState' in history); + let isFirstHashUpdate = true; + if (!domUpdate) { document.addEventListener('click', (event) => { // Backwards compatible solution for older browsers @@ -102,13 +112,8 @@ let lbwpsInit = function(domUpdate) { } } - let originalBodyPaddingRight = ''; - let originalBodyOverflow = ''; - let hideScrollbar = function () { const scrollbarWidth = window.innerWidth - document.body.offsetWidth; - originalBodyPaddingRight = document.body.style.paddingRight; - originalBodyOverflow = document.body.style.overflow; document.body.style.paddingRight = scrollbarWidth + 'px'; document.body.style.overflow = 'hidden'; }; @@ -348,13 +353,13 @@ let lbwpsInit = function(domUpdate) { options.counterEl = lbwpsOptions.show_counter === '1'; options.closeOnScroll = lbwpsOptions.wheelmode === 'close'; options.switchOnScroll = lbwpsOptions.wheelmode === 'switch'; - options.history = lbwpsOptions.history === '1'; options.zoomEl = lbwpsOptions.show_zoom === '1'; options.tapToToggleControls = lbwpsOptions.taptotoggle === '1'; */ const lightbox = new PhotoSwipeLightbox(options); + window.lbwpsPhotoSwipe = lightbox; lightbox.on('destroy', () => { const pswpElements = document.getElementsByClassName('pswp__scroll-wrap'); if (lbwpsOptions.hide_scrollbars === '1') { @@ -363,6 +368,14 @@ let lbwpsInit = function(domUpdate) { if (element) { element.focus(); } + + // If we support hash navigation and changed the history, restore original state + if (lbwpsOptions.history == 1) { + if (!isFirstHashUpdate) { + history.back(); + } + isFirstHashUpdate = true; + } }); // Add fullscreen button and keyboard shortcut for fullscreen mode @@ -410,16 +423,13 @@ let lbwpsInit = function(domUpdate) { } // Add sliding in desktop mode - options.desktopSlider = lbwpsOptions.desktop_slider === '1'; - - if (options.desktopSlider) { + if (lbwpsOptions.desktop_slider === '1') { const lbwpsGoTo = (index, animate = false) => { - const pwsp = lightbox.pswp; - index = pwsp.getLoopedIndex(index); - const indexChanged = pwsp.mainScroll.moveIndexBy(index - pwsp.potentialIndex, animate); + index = lightbox.pswp.getLoopedIndex(index); + const indexChanged = lightbox.pswp.mainScroll.moveIndexBy(index - lightbox.pswp.potentialIndex, animate); if (indexChanged) { - pwsp.dispatch('afterGoto'); + lightbox.pswp.dispatch('afterGoto'); } } lightbox.on('uiRegister', () => { @@ -428,13 +438,68 @@ let lbwpsInit = function(domUpdate) { }); } + // Add support for URL hash update + if (lbwpsOptions.history === '1') { + // Handler to modify URL when a new image is displayed + lightbox.on('change', () => { + let gid = 1; + if (lightbox.pswp.currSlide.data.el.dataset.lbwpsGid) { + gid = lightbox.pswp.currSlide.data.el.dataset.lbwpsGid; + } + let pid = lightbox.pswp.currSlide.index + 1; + let newHash = 'gid=' + gid + '&pid=' + pid; + let newURL = window.location.href.split('#')[0] + '#' + newHash; + if (supportsPushState) { + if (isFirstHashUpdate) { + history.pushState('', document.title, newURL); + } else { + history.replaceState('', document.title, newURL); + } + } else { + if (isFirstHashUpdate) { + window.location.hash = newHash; + } else { + window.location.replace(newURL); + } + } + isFirstHashUpdate = false; + }); + } + lightbox.init(); if (lbwpsOptions.hide_scrollbars === '1') { hideScrollbar(); } lightbox.loadAndOpen(index); + + // Handler to detect URL changes when user goes back or forth in history + // This may either mean to close the lightbox or to open it again + window.addEventListener('hashchange', () => { + let hashData = photoswipeParseHash(); + if (!hashData.gid && !hashData.pid) { + if (lightbox.pswp) { + lightbox.pswp.close(); + isFirstHashUpdate = true; + } + } else { + isFirstHashUpdate = false; + clickElement(hashData.gid, hashData.pid); + } + }) }; + let clickElement = function(gid, pid) { + // If the URL provides picture and group ID click the given element + // as opening the lightbox at this point won't work + let elements; + + if (gid == 1) { + elements = document.querySelectorAll('a[data-lbwps-width]:not([data-lbwps-gid])'); + } else { + elements = document.querySelectorAll('a[data-lbwps-width][data-lbwps-gid="' + gid + '"]'); + } + elements[pid-1].click(); + } window.lbwpsCopyToClipboard = function(str) { const el = document.createElement('textarea'); @@ -456,19 +521,12 @@ let lbwpsInit = function(domUpdate) { } } - let hashData = photoswipeParseHash(); - if (hashData.pid && hashData.gid) { - // If the URL provides picture and group ID click the given element - // as opening the lightbox at this point won't work - let elements; - - if (hashData.gid == 1) { - elements = document.querySelectorAll('a[data-lbwps-width]:not([data-lbwps-gid])'); - } else { - elements = document.querySelectorAll('a[data-lbwps-width][data-lbwps-gid="' + hashData.gid + '"]'); + if(!domUpdate) { + let hashData = photoswipeParseHash(); + if (hashData.pid && hashData.gid) { + isFirstHashUpdate = false; + clickElement(hashData.gid, hashData.pid); } - history.replaceState(null, null, ' '); - elements[hashData.pid-1].click(); } } diff --git a/assets/ps5/frontend.min.js b/assets/ps5/frontend.min.js index a6862fd..9f40897 100644 --- a/assets/ps5/frontend.min.js +++ b/assets/ps5/frontend.min.js @@ -1,11 +1,11 @@ -import PhotoSwipeLightbox from './lib/photoswipe-lightbox.esm.min.js';import PhotoSwipeDynamicCaption from './dynamic-caption/photoswipe-dynamic-caption-plugin.esm.min.js';import PhotoSwipeAutoHideUI from './auto-hide-ui/photoswipe-auto-hide-ui.esm.min.js';import PhotoSwipeFullscreen from './fullscreen/photoswipe-fullscreen.esm.min.js';let lbwpsInit=function(domUpdate){if(!domUpdate){document.addEventListener('click',(event)=>{if(event.target.parentNode.getAttribute('data-lbwps-width')){event.preventDefault();openPhotoSwipe(!1,0,event.target.parentNode,!1,'');return} +import PhotoSwipeLightbox from './lib/photoswipe-lightbox.esm.min.js';import PhotoSwipeDynamicCaption from './dynamic-caption/photoswipe-dynamic-caption-plugin.esm.min.js';import PhotoSwipeAutoHideUI from './auto-hide-ui/photoswipe-auto-hide-ui.esm.min.js';import PhotoSwipeFullscreen from './fullscreen/photoswipe-fullscreen.esm.min.js';let lbwpsInit=function(domUpdate){let originalBodyPaddingRight=document.body.style.paddingRight;let originalBodyOverflow=document.body.style.overflow;let initialHash=window.location.hash.substring(1);let supportsPushState=('pushState' in history);let isFirstHashUpdate=!0;if(!domUpdate){document.addEventListener('click',(event)=>{if(event.target.parentNode.getAttribute('data-lbwps-width')){event.preventDefault();openPhotoSwipe(!1,0,event.target.parentNode,!1,'');return} let path=event.composedPath&&event.composedPath();if(!path){return} let num=0;while(numimport('./lib/photoswipe.esm.min.js'),initialZoomLevel:'fit',secondaryZoomLevel:'fill',maxZoomLevel:2,spacing:lbwpsOptions.spacing/100,loop:lbwpsOptions.loop==='1',wheelToZoom:!1,pinchToClose:lbwpsOptions.pinchtoclose==='1',closeOnVerticalDrag:lbwpsOptions.close_on_drag==='1',clickToCloseNonZoomable:!0,bgOpacity:lbwpsOptions.bg_opacity/100,padding:{top:parseInt(lbwpsOptions.padding_top),bottom:parseInt(lbwpsOptions.padding_bottom),left:parseInt(lbwpsOptions.padding_left),right:parseInt(lbwpsOptions.padding_right)}} -const lightbox=new PhotoSwipeLightbox(options);lightbox.on('destroy',()=>{const pswpElements=document.getElementsByClassName('pswp__scroll-wrap');if(lbwpsOptions.hide_scrollbars==='1'){showScrollbar()} -if(element){element.focus()}});if(lbwpsOptions.show_fullscreen==='1'){const fullscreenPlugin=new PhotoSwipeFullscreen(lightbox,{fullscreenTitle:lbwpsOptions.label_ui_fullscreen})} +const lightbox=new PhotoSwipeLightbox(options);window.lbwpsPhotoSwipe=lightbox;lightbox.on('destroy',()=>{const pswpElements=document.getElementsByClassName('pswp__scroll-wrap');if(lbwpsOptions.hide_scrollbars==='1'){showScrollbar()} +if(element){element.focus()} +if(lbwpsOptions.history==1){if(!isFirstHashUpdate){history.back()} +isFirstHashUpdate=!0}});if(lbwpsOptions.show_fullscreen==='1'){const fullscreenPlugin=new PhotoSwipeFullscreen(lightbox,{fullscreenTitle:lbwpsOptions.label_ui_fullscreen})} if(lbwpsOptions.show_caption==='1'){const captionPlugin=new PhotoSwipeDynamicCaption(lightbox,{type:lbwpsOptions.caption_type,captionContent:(slide)=>{let caption='';if(slide.data.title&&slide.data.title!==''){caption=caption+'
'+slide.data.title+'
'} if(slide.data.exif&&slide.data.exif!==''){caption=caption+'
'+slide.data.exif+'
'} return caption},mobileLayoutBreakpoint:function(){if(this.options.type!=='overlay'){return window.innerWidth<600}}})} if(lbwpsOptions.idletime>0){const autoHideUI=new PhotoSwipeAutoHideUI(lightbox,{idleTime:lbwpsOptions.idletime})} -options.desktopSlider=lbwpsOptions.desktop_slider==='1';if(options.desktopSlider){const lbwpsGoTo=(index,animate=!1)=>{const pwsp=lightbox.pswp;index=pwsp.getLoopedIndex(index);const indexChanged=pwsp.mainScroll.moveIndexBy(index-pwsp.potentialIndex,animate);if(indexChanged){pwsp.dispatch('afterGoto')}} +if(lbwpsOptions.desktop_slider==='1'){const lbwpsGoTo=(index,animate=!1)=>{index=lightbox.pswp.getLoopedIndex(index);const indexChanged=lightbox.pswp.mainScroll.moveIndexBy(index-lightbox.pswp.potentialIndex,animate);if(indexChanged){lightbox.pswp.dispatch('afterGoto')}} lightbox.on('uiRegister',()=>{lightbox.pswp.next=()=>lbwpsGoTo(lightbox.pswp.potentialIndex+1,!0);lightbox.pswp.prev=()=>lbwpsGoTo(lightbox.pswp.potentialIndex-1,!0)})} +if(lbwpsOptions.history==='1'){lightbox.on('change',()=>{let gid=1;if(lightbox.pswp.currSlide.data.el.dataset.lbwpsGid){gid=lightbox.pswp.currSlide.data.el.dataset.lbwpsGid} +let pid=lightbox.pswp.currSlide.index+1;let newHash='gid='+gid+'&pid='+pid;let newURL=window.location.href.split('#')[0]+'#'+newHash;if(supportsPushState){if(isFirstHashUpdate){history.pushState('',document.title,newURL)}else{history.replaceState('',document.title,newURL)}}else{if(isFirstHashUpdate){window.location.hash=newHash}else{window.location.replace(newURL)}} +isFirstHashUpdate=!1})} lightbox.init();if(lbwpsOptions.hide_scrollbars==='1'){hideScrollbar()} -lightbox.loadAndOpen(index)};window.lbwpsCopyToClipboard=function(str){const el=document.createElement('textarea');el.value=str;el.setAttribute('readonly','');el.style.position='absolute';el.style.left='-9999px';document.body.appendChild(el);const selected=document.getSelection().rangeCount>0?document.getSelection().getRangeAt(0):!1;el.select();document.execCommand('copy');document.body.removeChild(el);if(selected){document.getSelection().removeAllRanges();document.getSelection().addRange(selected)}} -let hashData=photoswipeParseHash();if(hashData.pid&&hashData.gid){let elements;if(hashData.gid==1){elements=document.querySelectorAll('a[data-lbwps-width]:not([data-lbwps-gid])')}else{elements=document.querySelectorAll('a[data-lbwps-width][data-lbwps-gid="'+hashData.gid+'"]')} -history.replaceState(null,null,' ');elements[hashData.pid-1].click()}} +lightbox.loadAndOpen(index);window.addEventListener('hashchange',()=>{let hashData=photoswipeParseHash();if(!hashData.gid&&!hashData.pid){if(lightbox.pswp){lightbox.pswp.close();isFirstHashUpdate=!0}}else{isFirstHashUpdate=!1;clickElement(hashData.gid,hashData.pid)}})};let clickElement=function(gid,pid){let elements;if(gid==1){elements=document.querySelectorAll('a[data-lbwps-width]:not([data-lbwps-gid])')}else{elements=document.querySelectorAll('a[data-lbwps-width][data-lbwps-gid="'+gid+'"]')} +elements[pid-1].click()} +window.lbwpsCopyToClipboard=function(str){const el=document.createElement('textarea');el.value=str;el.setAttribute('readonly','');el.style.position='absolute';el.style.left='-9999px';document.body.appendChild(el);const selected=document.getSelection().rangeCount>0?document.getSelection().getRangeAt(0):!1;el.select();document.execCommand('copy');document.body.removeChild(el);if(selected){document.getSelection().removeAllRanges();document.getSelection().addRange(selected)}} +if(!domUpdate){let hashData=photoswipeParseHash();if(hashData.pid&&hashData.gid){isFirstHashUpdate=!1;clickElement(hashData.gid,hashData.pid)}}} let lbwpsReady=(function(){let readyEventFired=!1;return function(fn){let idempotentFn=function(){if(readyEventFired){return} readyEventFired=!0;return fn()} if(document.readyState==="complete"){return idempotentFn()} diff --git a/lightbox-photoswipe.php b/lightbox-photoswipe.php index c07a3f1..19a4d30 100644 --- a/lightbox-photoswipe.php +++ b/lightbox-photoswipe.php @@ -3,7 +3,7 @@ Plugin Name: Lightbox with PhotoSwipe Plugin URI: https://wordpress.org/plugins/lightbox-photoswipe/ Description: Lightbox with PhotoSwipe -Version: 5.4.1 +Version: 5.5.0 Author: Arno Welzel Author URI: http://arnowelzel.de Text Domain: lightbox-photoswipe diff --git a/readme.txt b/readme.txt index 048302b..2bfcf76 100644 --- a/readme.txt +++ b/readme.txt @@ -4,7 +4,7 @@ Contributors: awelzel Tags: lightbox, photoswipe, attachments, images, gallery Requires at least: 5.3 Tested up to: 6.7 -Stable tag: 5.4.1 +Stable tag: 5.5.0 Donate link: https://paypal.me/ArnoWelzel License: GPLv2 License URI: http://www.gnu.org/licenses/gpl-2.0.html @@ -28,6 +28,12 @@ As of version 4.0.0 this plugin requires at least WordPress 5.3 and PHP 7.0. Old == Frequently Asked Questions == += Issues with "optimizing" plugins = + +The plugin uses JavaScript modules for PhotoSwipe 5. This will not work, if you use any kind of "JavaScript optimizing" +with a WordPress plugin which combines all frontend script into one single. Make sure that Lightbox with PhotoSwipe is +excluded from any kind of "optimization", otherwise the plugin may not work. + = Using the plugin = All linked images in a post or page will be displayed using PhotoSwipe, regardless if they are part of a gallery or single images. @@ -151,6 +157,12 @@ If you change any of the stylesheets or frontend scripts in `src/js` or `src/lib == Changelog == += 5.5.0 = + +PhotoSwipe 5 integration: + +* Implemented URL navigation to support the option "Update browser history" again. Going forward in the browser history after closing the lightbox will also open it again. + = 5.4.1 = * Updated compatibility information for WordPress 6.7. diff --git a/src/LightboxPhotoSwipe/LightboxPhotoSwipe.php b/src/LightboxPhotoSwipe/LightboxPhotoSwipe.php index a9d2c96..f749018 100644 --- a/src/LightboxPhotoSwipe/LightboxPhotoSwipe.php +++ b/src/LightboxPhotoSwipe/LightboxPhotoSwipe.php @@ -10,7 +10,7 @@ */ class LightboxPhotoSwipe { - const VERSION = '5.4.1'; + const VERSION = '5.5.0'; const SLUG = 'lightbox-photoswipe'; const META_VERSION = '19'; const CACHE_EXPIRE_IMG_DETAILS = 86400; diff --git a/templates/options-tab2.inc.php b/templates/options-tab2.inc.php index 094d5e1..0ae5d78 100644 --- a/templates/options-tab2.inc.php +++ b/templates/options-tab2.inc.php @@ -43,7 +43,7 @@ -
+