Merge branch 'master' of https://github.com/unacms/una

inc/js/classes/BxDolCmts.js

@@ -62,6 +62,9 @@ BxDolCmts.prototype.cmtInit = function()
 
         // check content to show 'See More'
         $this._cmtsInitSeeMore($($this._sRootId));
+
+        // init gallery
+        $this._cmtsInitGallery($($this._sRootId));
     });
 };
 
@@ -472,176 +475,6 @@ BxDolCmts.prototype.showReplacement = function(iCmtId)
     });
 };
 
-BxDolCmts.prototype.showImage = function(eve, oLink)
-{
-    var $this = this;
-    var ePswp = document.querySelectorAll('.pswp.cmts')[0];
-
-    var aItems = []; // more items are added dynamically
-    var oItem = {};
-    var iCount = 0;
-    var options = {
-        shareEl: false,
-        counterEl: false,
-        history: false,
-        loop: false,
-        showHideOpacity: true,
-        index: 0,
-        getThumbBoundsFn: function(index) {
-            var e = $('a[data-file-id] img');
-            if (!e.length)
-                return false;
-
-            return {x:e.offset().left, y:e.offset().top, w:e.width()};
-        }
-    };
-
-    var fnProcessRetina = function (o) {
-        var dpr = ((window.glBxDisableRetina !== undefined && window.glBxDisableRetina) || window.devicePixelRatio === undefined ? 1 : window.devicePixelRatio);
-        if (dpr < 2)
-            return o;
-        o.w *= 2;
-        o.h *= 2;
-        return o;
-    };
-
-    eve.preventDefault ? eve.preventDefault() : eve.returnValue = false;
-
-    // get data for initial item from the attributes of the item which was clicked
-    $.each(oLink.attributes, function(i, attr) {
-        var sName = attr.name;
-        if (sName.indexOf('data-') !== 0)
-            return;
-
-        sName = sName.replace('data-', '');
-        oItem[sName] = attr.value;        
-
-        ++iCount;
-    });
-
-    oItem.msrc = oItem.src;
-    oItem = fnProcessRetina(oItem);
-
-    if(!iCount)
-        return false;
-
-    aItems.push(oItem);
-
-    var fnConverMedia = function (oMedia) {
-        var oMap = {
-            'id': 'file-id',
-            'file' : 'src',
-            'w': 'w',
-            'h': 'h'
-        };
-
-        var o = {};
-        for (var i in oMap)
-            o[oMap[i]] = oMedia[i];
-
-        return fnProcessRetina(o);
-    };
-
-    var fnIndexOfMediaObject = function (oArray, oItem) {
-        var iLength = oArray.length;
-        for (var i=0 ; i < iLength ; ++i)
-            if (oItem['file-id'] == oArray[i]['file-id'])
-                return i;
-
-        return -1;
-    };
-
-    var fnDisableArrows = function (oItem) {
-
-        // disable prev item and action if we are on the first item
-        if (0 == fnIndexOfMediaObject(aItems, oItem)) {
-            $('.pswp.cmts .pswp__button--arrow--left').hide();
-            glSysCmtsPrevFn = glSysCmtsGallery.prev;
-            glSysCmtsGallery.prev = function () { };
-        } 
-        else {
-            $('.pswp.cmts .pswp__button--arrow--left').show();
-            if ('undefined' !== typeof(glSysCmtsPrevFn))
-                glSysCmtsGallery.prev = glSysCmtsPrevFn;
-        }
-
-        // disable next item and action when we are in the last item
-        if ((aItems.length-1) == fnIndexOfMediaObject(aItems, oItem)) {
-            $('.pswp.cmts .pswp__button--arrow--right').hide();
-            glSysCmtsNextFn = glSysCmtsGallery.next;
-            glSysCmtsGallery.next = function () { };
-        } 
-        else {
-            $('.pswp.cmts .pswp__button--arrow--right').show();
-            if ('undefined' !== typeof(glSysCmtsNextFn))
-                glSysCmtsGallery.next = glSysCmtsNextFn;
-        }
-    };
-
-    var fnLoadMoreItem = function (oItemCurrent, bFirstLoad) {
-
-        // load addutional items only for items on the border
-        if (0 != fnIndexOfMediaObject(aItems, oItemCurrent) && (aItems.length-1) != fnIndexOfMediaObject(aItems, oItemCurrent))
-            return;
-
-        var sUrl = bx_append_url_params($this._sActionsUrl, {sys: $this._sSystem, id: $this._iObjId, action: 'GetSiblingFiles', file_id: oItemCurrent['file-id']});
-        $.getJSON(sUrl, function(oData) {
-
-            if ('undefined' !== typeof(oData.error)) {
-                if ('undefined' !== typeof(console))
-                    console.log(oData.error);
-
-                return;
-            }
-
-            var iGoTo = -1;
-            var iLength = aItems.length;
-
-            if (0 == fnIndexOfMediaObject(aItems, oItemCurrent) && 'undefined' !== typeof(oData.prev.file)) {
-                aItems.unshift(fnConverMedia(oData.prev));
-                if (bFirstLoad)
-                    options.index = 1;
-                else
-                    iGoTo = glSysCmtsGallery.getCurrentIndex() + 1;
-            }
-    
-            if ((aItems.length - 1) == fnIndexOfMediaObject(aItems, oItemCurrent) && 'undefined' !== typeof(oData.next.file))
-                aItems.push(fnConverMedia(oData.next));
-
-            if (!bFirstLoad && iLength != aItems.length) {
-                glSysCmtsGallery.invalidateCurrItems();
-                glSysCmtsGallery.updateSize(true);
-
-                if(iGoTo >= 0)
-                    glSysCmtsGallery.goTo(iGoTo);
-            }
-
-            if (bFirstLoad) {
-                glSysCmtsGallery = new PhotoSwipe(ePswp, PhotoSwipeUI_Default, aItems, options);
-                glSysCmtsGallery.init();
-
-                glSysCmtsGallery.listen('beforeChange', function() { 
-                    // load more items if we are on first or on the last item
-                    fnLoadMoreItem(glSysCmtsGallery.currItem, false);
-                });
-
-                glSysCmtsGallery.listen('afterChange', function() {
-                    fnDisableArrows(glSysCmtsGallery.currItem);
-                });
-
-                glSysCmtsGallery.listen('close', function() {
-                });
-
-                fnDisableArrows(glSysCmtsGallery.currItem);
-            }
-        });
-    };
-
-    fnLoadMoreItem(oItem, true);
-
-    return false;
-};
-
 BxDolCmts.prototype.toggleReply = function(oElement, iCmtParentId, iQuote)
 {
     var $this = this;
@@ -970,6 +803,7 @@ BxDolCmts.prototype._getCmt = function (e, iCmtId)
                     $(this).hide().html(oData.content).bxProcessHtml().bx_anim('show', $this._sAnimationEffect, $this._iAnimationSpeed);
 
                 $this._cmtsInitSeeMore($(this));
+                $this._cmtsInitGallery($(this));
             });
         },
         'json'
@@ -1048,6 +882,7 @@ BxDolCmts.prototype._cmtsReplace = function(oReplace, sContent, onLoad)
             $this._cmtsBlink($(this));
 
             $this._cmtsInitSeeMore($(this));
+            $this._cmtsInitGallery($(this));
 
             if(typeof onLoad == 'function')
                 onLoad();
@@ -1063,6 +898,7 @@ BxDolCmts.prototype._cmtsReplaceContent = function(oParent, sContent, onLoad)
             $this._cmtsBlink($(this));
 
             $this._cmtsInitSeeMore($(this));
+            $this._cmtsInitGallery($(this));
 
             if(typeof onLoad == 'function')
             onLoad();
@@ -1081,6 +917,17 @@ BxDolCmts.prototype._cmtsBlink = function(oParent)
     });
 };
 
+BxDolCmts.prototype._cmtsInitGallery = function(oParent) 
+{
+    // init gallery
+    const lightbox = new PhotoSwipeLightbox({
+        gallery: '.pswp-gallery',
+        children: 'a',
+        pswpModule: PhotoSwipe,
+    });
+    lightbox.init();
+}
+
 BxDolCmts.prototype._cmtsInitSeeMore = function(oParent)
 {
     var $this = this;

modules/boonex/albums/classes/BxAlbumsPageMedia.php

@@ -92,9 +92,6 @@ class BxAlbumsPageMedia extends BxTemplPage
                 $oMetatags->addPageMetaInfo($this->_aMediaInfo['id'], $this->_getThumbForMetaObject());
         }
 
-        $aVars = array();
-        $this->_oTemplate->addInjection ('injection_footer', 'text', $this->_oModule->_oTemplate->parseHtmlByName('photoswipe.html', $aVars));
-
         return parent::getCode ();
     }
 
@@ -114,14 +111,13 @@ class BxAlbumsPageMedia extends BxTemplPage
 
         $this->_oModule->_oTemplate->addCss([
             BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'photo-swipe/|photoswipe.css',
-            BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'photo-swipe/default-skin/|default-skin.css',
         ]);
 
         $this->_oModule->_oTemplate->addJs([
             'history.js',
             'history.adapter.jquery.js',
-            'photo-swipe/photoswipe.min.js',
-            'photo-swipe/photoswipe-ui-default.min.js',
+            'photo-swipe/photoswipe.umd.min.js',
+            'photo-swipe/photoswipe-lightbox.umd.min.js',
             'media_view.js',
         ]);
     }

modules/boonex/albums/classes/BxAlbumsTemplate.php

@@ -233,6 +233,28 @@ class BxAlbumsTemplate extends BxBaseModTextTemplate
 
         $aVars = array_merge($aVars, $this->mediaVars($aMediaInfo, $CNF['OBJECT_IMAGES_TRANSCODER_BIG'], $CNF['OBJECT_VIDEOS_TRANSCODERS']['poster'], $aParams));
 
+        $aMediaItems = $oModule->_oDb->getMediaListByContentId($aMediaInfo['content_id'], false);
+        $aMediaItemsFormatted = [];
+        foreach ($aMediaItems as $i => $r) {
+            $a = $this->mediaVars($r, $CNF['OBJECT_IMAGES_TRANSCODER_BIG'], $CNF['OBJECT_VIDEOS_TRANSCODERS']['poster'], $aParams);
+            $aMedia = $a['bx_if:image']['condition'] ? $a['bx_if:image']['content'] : $a['bx_if:video']['content'];
+            $aMediaItemsFormatted[$i] = [
+                'index' => $i,
+                'alt' => $aMedia['title'],
+                'url' => $aMedia['url'],
+                'media-id' => $r['id'],
+
+            ];
+            if ($a['bx_if:video']['condition']) {
+                $aMediaItemsFormatted[$i]['html'] = '<div class="pswp__video">' . $a['bx_if:video']['content']['video'] . '</div>';
+            } else {
+                $aMediaItemsFormatted[$i]['src'] = $aMedia['url_img'];
+                $aMediaItemsFormatted[$i]['width'] = $a['bx_if:image']['content']['w'];
+                $aMediaItemsFormatted[$i]['height'] = $a['bx_if:image']['content']['h'];
+            }
+        }
+        $aVars['media_items'] = json_encode($aMediaItemsFormatted);
+
         return $this->parseHtmlByName('media-view.html', $aVars);
     }
 

modules/boonex/albums/js/media_view.js

@@ -8,36 +8,21 @@
  * @{
  */
 
-Array.prototype.indexOfMediaObject = function (o) {
+Array.prototype.indexOfMediaObject = function (iMediaId) {
     var iLength = this.length;
     for (var i=0 ; i < iLength ; ++i) {
-        if (o['media-id'] == this[i]['media-id'])
+        if (iMediaId == this[i]['media-id'])
             return i;
     }
     return -1;
 }
 
-function bx_albums_open_gallery(eve, e, sContext) {
-    var ePswp = document.querySelectorAll('.pswp')[0];
-    var $e = $(e);
-    var aItems = []; // more items are added dynamically
-    var oItem = {};
-    var iCount = 0;
-    var options = {
-        bx_albums_context: sContext,
-        shareEl: false,
-        counterEl: false,
-        history: false,
-        loop: false,
-        showHideOpacity: true,
-        index: 0,
-        getThumbBoundsFn: function(index) {
-            var e = $('a[data-media-id] img');
-            if (!e.length)
-                return false;
-            return {x:e.offset().left, y:e.offset().top, w:e.width()};
-        }
-    };
+function bx_albums_open_gallery(eve, e, sContext, aItems) {
+    
+    eve.preventDefault ? eve.preventDefault() : eve.returnValue = false;
+
+    var options = {};
+
     var fnProcessRetina = function (o) {
         var dpr = ((window.glBxDisableRetina !== undefined && window.glBxDisableRetina) || window.devicePixelRatio === undefined ? 1 : window.devicePixelRatio);
         if (dpr < 2)
@@ -47,140 +32,29 @@ function bx_albums_open_gallery(eve, e, sContext) {
         return o;
     }
 
-    eve.preventDefault ? eve.preventDefault() : eve.returnValue = false;
-
-    
-
-    // get data for initial item from the attributes of the item which was clicked
-    $.each(e.attributes, function(i, attr) {
-        var sName = attr.name;
-        if (sName.indexOf('data-') !== 0)
-            return;
-        sName = sName.replace('data-', '');
-        oItem[sName] = attr.value;        
-
-        ++iCount;
-    });
-
-    oItem.msrc = oItem.src;
-    oItem = fnProcessRetina(oItem);
-
-    if (!iCount) // no image - no concert!
+    if (!aItems.length) // no images - no concert!
         return false;
 
-    aItems.push(oItem);
-
-    var fnConverMedia = function (oMedia) {
-        var oMap = {
-            'id': 'media-id',
-            'url': 'url',
-            'url_img' : 'src',
-            'w': 'w',
-            'h': 'h',
-            'title': 'title'
-        };
-
-        if ('undefined' !== typeof(oMedia.html) && oMedia.html.length)
-            return {'media-id': oMedia['id'], 'title': oMedia['title'], 'html': oMedia['html'], 'url': oMedia['url']};
-
-        var o = {};
-        for (var i in oMap)
-            o[oMap[i]] = oMedia[i];
-        return fnProcessRetina(o);
-    };
-
-    var fnDisableArrows = function (oItem) {
-
-        // disable prev item and action if we are on the first item
-        if (0 == aItems.indexOfMediaObject(oItem)) {
-            $('.pswp__button--arrow--left').hide();
-            glBxAlbumsPrevFn = glBxAlbumsGallery.prev;
-            glBxAlbumsGallery.prev = function () { };
-        } else {
-            $('.pswp__button--arrow--left').show();
-            if ('undefined' !== typeof(glBxAlbumsPrevFn))
-                glBxAlbumsGallery.prev = glBxAlbumsPrevFn;
-        }
-
-        // disable next item and action when we are in the last item
-        if ((aItems.length-1) == aItems.indexOfMediaObject(oItem)) {
-            $('.pswp__button--arrow--right').hide();
-            glBxAlbumsNextFn = glBxAlbumsGallery.next;
-            glBxAlbumsGallery.next = function () { };
-        } else {
-            $('.pswp__button--arrow--right').show();
-            if ('undefined' !== typeof(glBxAlbumsNextFn))
-                glBxAlbumsGallery.next = glBxAlbumsNextFn;
-        }
-    };
-
-    var fnLoadMoreItem = function (oItemCurrent, bFirstLoad) {
-
-        // load addutional items only for items on the border
-        if (0 != aItems.indexOfMediaObject(oItemCurrent) && (aItems.length-1) != aItems.indexOfMediaObject(oItemCurrent))
-            return;
-
-        var sUrl = sUrlRoot + 'modules/index.php?r=albums/get_sibling_media/' + oItemCurrent['media-id'] + '/' + sContext;
-        $.getJSON(sUrl, function(oData) {
-
-            if ('undefined' !== typeof(oData.error)) {
-                if ('undefined' !== typeof(console))
-                    console.log(oData.error);
-                return;
-            }
-
-            var iGoTo = -1;
-            var iLength = aItems.length;
-
-            if (0 == aItems.indexOfMediaObject(oItemCurrent) && 'undefined' !== typeof(oData.prev.url)) {
-                aItems.unshift(fnConverMedia(oData.prev));
-                if (bFirstLoad)
-                    options.index = 1;
-                else
-                    iGoTo = glBxAlbumsGallery.getCurrentIndex() + 1;
-            }
-    
-            if ((aItems.length - 1) == aItems.indexOfMediaObject(oItemCurrent) && 'undefined' !== typeof(oData.next.url))
-                aItems.push(fnConverMedia(oData.next));
-
-            if (!bFirstLoad && iLength != aItems.length) {
-                glBxAlbumsGallery.invalidateCurrItems();
-                glBxAlbumsGallery.updateSize(true);
-
-                if(iGoTo >= 0)
-                    glBxAlbumsGallery.goTo(iGoTo);
-            }
+    options.dataSource = aItems;
+    options.pswpModule = PhotoSwipe;
+    options.preload = [1,2];
+    options.showHideAnimationType = 'none';
 
-            if (bFirstLoad) {
-                glBxAlbumsGallery = new PhotoSwipe(ePswp, PhotoSwipeUI_Default, aItems, options);
-                glBxAlbumsGallery.init();
+    var lightbox = new PhotoSwipeLightbox(options);
+    lightbox.init();
 
-                glBxAlbumsGallery.listen('beforeChange', function() { 
-                    // load more items if we are on first or on the last item
-                    fnLoadMoreItem(glBxAlbumsGallery.currItem, false);
-                });
-
-                glBxAlbumsGallery.listen('afterChange', function() {
-                    var bChangeHistory = 'undefined' !== typeof(glBxAlbumsGallery._bx_albums_skip_history) && glBxAlbumsGallery._bx_albums_skip_history ? false : true;
-                    bx_albums_reload_page(glBxAlbumsGallery.currItem.url, glBxAlbumsGallery.currItem.title, bChangeHistory, false); // refresh url when we navigate to next/prev item
-                    glBxAlbumsGallery._bx_albums_skip_history = false;
-
-                    fnDisableArrows(glBxAlbumsGallery.currItem);
-                });
-
-                glBxAlbumsGallery.listen('close', function() {
-                    // upon gallery close reload page via AJAX, since url was changes when we navigate through items in the gallery
-                    bx_albums_reload_page(glBxAlbumsGallery.currItem.url, glBxAlbumsGallery.currItem.title, false, true);
-                });
-
-                fnDisableArrows(glBxAlbumsGallery.currItem);
-            }
-        });
-    };
-
-    fnLoadMoreItem(oItem, true);
+    lightbox.addFilter('numItems', (numItems) => {
+        return aItems.length;
+    });
+    lightbox.addFilter('itemData', (itemData, index) => {
+        return aItems[index];
+    });
+    lightbox.on('close', () => {
+        const { pswp }  = lightbox;
+        bx_albums_reload_page(pswp.currSlide.data.url, pswp.currSlide.data.alt, true, true);
+    });
 
-    return false;
+    lightbox.loadAndOpen(aItems.indexOfMediaObject($(e).attr('data-media-id')));
 }
 
 function bx_albums_reload_page(sUrl, sTitle, bChangeHistory, bChangeContent) {

modules/boonex/albums/template/css/main.css

@@ -236,6 +236,9 @@
     bottom:0;
     left:0;
     right:0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .pswp__video:before {
@@ -245,6 +248,9 @@
   height: 100%;
 }
 
-.pswp__video video {
-    vertical-align: middle;    
+.pswp__video > div,
+.pswp__video > video {
+    display:inline-block;
+    vertical-align: middle;
 }
+

modules/boonex/albums/template/media-view.html

@@ -1,3 +1,6 @@
+<script>
+    window.glBxAlbumsItems = __media_items__;
+</script>
 <div class="bx-albums-media-view">
     <div class="bx-albums-media-title bx-def-margin-sec-bottom">
         <h2>__album__</h2>
@@ -19,7 +22,7 @@
     </div>
     <div class="bx-albums-media-file">
         <bx_if:image>
-            <a href="javascript:void(0);"  onclick="bx_albums_open_gallery(event || window.event, this, '__context__')" data-media-id="__media_id__" data-url="__url__" data-src="__url_img__" data-w="__w__" data-h="__h__" data-title="__title_attr__">
+            <a href="javascript:void(0);"  onclick="bx_albums_open_gallery(event || window.event, this, '__context__', window.glBxAlbumsItems)" data-media-id="__media_id__" data-url="__url__" data-src="__url_img__" data-width="__w__" data-height="__h__" data-alt="__title_attr__">
                 <img src="__url_img__" alt="__title_attr__" />
             </a>
         </bx_if:image>

modules/boonex/albums/template/photoswipe.html

@@ -1,68 +0,0 @@
-<!-- TODO: translate -->
-
-<!-- Root element of PhotoSwipe. Must have class pswp. -->
-<div class="bx-albums pswp" tabindex="-1" role="dialog" aria-hidden="true">
-
-    <!-- Background of PhotoSwipe. 
-         It's a separate element as animating opacity is faster than rgba(). -->
-    <div class="pswp__bg"></div>
-
-    <!-- Slides wrapper with overflow:hidden. -->
-    <div class="pswp__scroll-wrap">
-
-        <!-- Container that holds slides. 
-            PhotoSwipe keeps only 3 of them in the DOM to save memory.
-            Don't modify these 3 pswp__item elements, data is added later on. -->
-        <div class="pswp__container">
-            <div class="pswp__item"></div>
-            <div class="pswp__item"></div>
-            <div class="pswp__item"></div>
-        </div>
-
-        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
-        <div class="pswp__ui pswp__ui--hidden">
-
-            <div class="pswp__top-bar">
-
-                <!--  Controls are self-explanatory. Order can be changed. -->
-
-                <div class="pswp__counter"></div>
-
-                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
-
-                <button class="pswp__button pswp__button--share" title="Share"></button>
-
-                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
-
-                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
-
-                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
-                <!-- element will get class pswp__preloader - active when preloader is running -->
-                <div class="pswp__preloader">
-                    <div class="pswp__preloader__icn">
-                      <div class="pswp__preloader__cut">
-                        <div class="pswp__preloader__donut"></div>
-                      </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
-                <div class="pswp__share-tooltip"></div> 
-            </div>
-
-            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
-            </button>
-
-            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
-            </button>
-
-            <div class="pswp__caption">
-                <div class="pswp__caption__center"></div>
-            </div>
-
-        </div>
-
-    </div>
-
-</div>

package.json

@@ -57,7 +57,7 @@
     "npm": "^11.0.0",
     "ovenplayer": "^0.10.37",
     "pdfjs-dist": "^5.3.93",
-    "photoswipe": "github:dimsemenov/PhotoSwipe#v4.1.3",
+    "photoswipe": "^5.4.4",
     "player.js": "^0.1.0",
     "prismjs": "^1.29.0",
     "pusher-js": "^8.4.0-rc2",
@@ -104,7 +104,7 @@
     "build:onesignal": "mkdir -p plugins_public/onesignal; cd plugins_public/onesignal; echo '<?php\\nheader(\"Service-Worker-Allowed: /\");\\nheader(\"Content-Type: application/javascript\");\\n?>\\nimportScripts(\"https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js\");' > OneSignalSDKUpdaterWorker.js.php; echo '<?php\\nheader(\"Service-Worker-Allowed: /\");\\nheader(\"Content-Type: application/javascript\");\\nheader(\"X-Robots-Tag: none\");\\n?>\\nimportScripts(\"https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js\");' > OneSignalSDKWorker.js.php",
     "build:ovenplayer": "mkdir -p plugins_public/ovenplayer; cd plugins_public/ovenplayer; cp ../../node_modules/ovenplayer/dist/* .; cp ../../node_modules/dashjs/dist/dash.all.min.* .; cp ../../node_modules/hls.js/dist/hls.min.* .",
     "build:pdfjs": "mkdir -p plugins_public/pdfjs; cd plugins_public/pdfjs; cp ../../node_modules/pdfjs-dist/legacy/build/pdf.min.mjs pdf.min.mjs.js; cp ../../node_modules/pdfjs-dist/legacy/build/pdf.worker.min.mjs pdf.worker.min.mjs.js",
-    "build:photoswipe": "mkdir -p plugins_public/photo-swipe; cd plugins_public/photo-swipe; cp -r ../../node_modules/photoswipe/dist/* .",
+    "build:photoswipe": "mkdir -p plugins_public/photo-swipe; cd plugins_public/photo-swipe; cp ../../node_modules/photoswipe/dist/umd/*.js .; cp ../../node_modules/photoswipe/dist/*.css .",
     "build:prismjs": "mkdir -p plugins_public/prism; cd plugins_public/prism; echo '/* https://prismjs.com/download.html?#themes=prism&languages=markup+css+clike+javascript+markup-templating+php */' > prism.js; cd ../../node_modules/prismjs/components; echo '' > nl; cat prism-core.min.js nl prism-markup.min.js nl prism-css.min.js nl prism-clike.min.js nl prism-javascript.min.js nl prism-markup-templating.min.js nl prism-php.min.js >> ../../../plugins_public/prism/prism.js; cp ../themes/prism.min.css ../../../plugins_public/prism/prism.css",
     "build:pusher": "mkdir -p plugins_public/pusher; cd plugins_public/pusher; cp -r ../../node_modules/pusher-js/dist/web/* .",
     "build:quill": "mkdir -p plugins_public/quill; cd plugins_public/quill; cp -r ../../node_modules/quill/dist/* .; cp -r ../../node_modules/quill-mention/dist/* .; cp -r ../../node_modules/quill-emoji/dist/* .; cp -r ../../node_modules/quill-html-edit-button/dist/* .; cp -r ../../node_modules/quill-image-uploader/dist/quill.* .; cp -r ../../node_modules/quill-image-resize-module/image-resize.min.js .",

template/comment_attachments.html

@@ -1,8 +1,8 @@
-<div class="flex">
+<div class="pswp-gallery flex">
     <bx_repeat:attached>
         <div class="__style_prefix__-attached-preview w-24 h-24 m-1">
             <bx_if:show_image>
-                <a href="javascript:void(0)" onclick="__js_object__.showImage(event || window.event, this)" data-file-id="__file_id__" data-src="__file__" data-w="__w__" data-h="__h__" title="<bx_text_attribute:_cmt_view_attached_image />">
+                <a href="__file__" data-file-id="__file_id__" data-src="__file__" data-pswp-src="__file__" data-pswp-width="__w__" data-pswp-height="__h__" title="<bx_text_attribute:_cmt_view_attached_image />">
                     <img class="w-24 h-24 bg-cover rounded" src="<bx_image_url:spacer.gif />" style="background-image:url(__preview__)" />
                 </a>
             </bx_if:show_image>
@@ -13,4 +13,4 @@
             </bx_if:show_file>
         </div>
     </bx_repeat:attached>
-</div>
+</div>

template/comments_block.html

@@ -13,5 +13,4 @@
     </div>
     __post_form_bottom__
 </div>
-__image_preview__
-__script__
+__script__

template/comments_photoswipe.html

@@ -1,64 +0,0 @@
-<!-- Root element of PhotoSwipe. Must have class pswp. -->
-<div class="pswp cmts" tabindex="-1" role="dialog" aria-hidden="true">
-
-    <!-- Background of PhotoSwipe. 
-         It's a separate element as animating opacity is faster than rgba(). -->
-    <div class="pswp__bg"></div>
-
-    <!-- Slides wrapper with overflow:hidden. -->
-    <div class="pswp__scroll-wrap">
-
-        <!-- Container that holds slides. 
-            PhotoSwipe keeps only 3 of them in the DOM to save memory.
-            Don't modify these 3 pswp__item elements, data is added later on. -->
-        <div class="pswp__container">
-            <div class="pswp__item"></div>
-            <div class="pswp__item"></div>
-            <div class="pswp__item"></div>
-        </div>
-
-        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
-        <div class="pswp__ui pswp__ui--hidden">
-
-            <div class="pswp__top-bar">
-
-                <!--  Controls are self-explanatory. Order can be changed. -->
-
-                <div class="pswp__counter"></div>
-
-                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
-
-                <button class="pswp__button pswp__button--share" title="Share"></button>
-
-                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
-
-                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
-
-                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
-                <!-- element will get class pswp__preloader - active when preloader is running -->
-                <div class="pswp__preloader">
-                    <div class="pswp__preloader__icn">
-                      <div class="pswp__preloader__cut">
-                        <div class="pswp__preloader__donut"></div>
-                      </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
-                <div class="pswp__share-tooltip"></div> 
-            </div>
-
-            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
-
-            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
-
-            <div class="pswp__caption">
-                <div class="pswp__caption__center"></div>
-            </div>
-
-        </div>
-
-    </div>
-
-</div>

template/scripts/BxBaseCmts.php

@@ -96,12 +96,11 @@ class BxBaseCmts extends BxDolCmts
 
         $sResult = $this->_oTemplate->addCss([
             BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'photo-swipe/|photoswipe.css',
-            BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'photo-swipe/default-skin/|default-skin.css',
         ], $bDynamicMode);
 
         $sResult .= $this->_oTemplate->addJs([
-            'photo-swipe/photoswipe.min.js',
-            'photo-swipe/photoswipe-ui-default.min.js',
+            'photo-swipe/photoswipe.umd.min.js',
+            'photo-swipe/photoswipe-lightbox.umd.min.js',
         ], $bDynamicMode);
 
         return $sResult;
@@ -288,7 +287,6 @@ class BxBaseCmts extends BxDolCmts
             'content_after' => $sContentAfter,
             'post_form_top' => $sPostFormTop,
             'post_form_bottom'  => $sPostFormBottom,
-            'image_preview' => $this->_oTemplate->parseHtmlByName('comments_photoswipe.html', []),
             'script' => $sJsContent
         ]);
 
@@ -376,8 +374,6 @@ class BxBaseCmts extends BxDolCmts
         if (!$sComment)
             return '';
 
-        BxDolTemplate::getInstance()->addInjection ('injection_footer', 'text', $this->_oTemplate->parseHtmlByName('comments_photoswipe.html', []));
-
         return $this->_oTemplate->parseHtmlByName('comment_block.html', array(
             'style_prefix' => $this->_sStylePrefix,
             'js_object' => $this->_sJsObjName,
@@ -568,8 +564,6 @@ class BxBaseCmts extends BxDolCmts
         if(empty($sAddon))
             $sAddon = $this->getJsScript($aBp, $aDp);
 
-        BxDolTemplate::getInstance()->addInjection ('injection_footer', 'text', $this->_oTemplate->parseHtmlByName('comments_photoswipe.html', []));
-
         return $this->_oTemplate->parseHtmlByName('comment_search.html', array(
             'comment' => $this->getComment($iCmtId, $aBp, $aDp),
         )); 

template/scripts/BxBaseDashboardServices.php

@@ -87,7 +87,7 @@ class BxBaseDashboardServices extends BxDol
                     'key' => $aModule['name'], 
                     'title' => $aModule['title'], 
                     'add_url' => !empty($CNF['URI_ADD_ENTRY']) ? $CNF['URI_ADD_ENTRY'] : '', 
-                    'url' => !empty($CNF['URL_HOME']) ? $oPermalink->permalink($CNF['URL_HOME']) : '', 
+                    'url' => !empty($CNF['URL_MANAGE_COMMON']) ? $oPermalink->permalink($CNF['URL_MANAGE_COMMON']) : '', 
                     'action' => 'views', 
                     'icon' => !empty($CNF['ICON']) ? $CNF['ICON'] : '', 
                     'type' => 'simple'
@@ -113,7 +113,7 @@ class BxBaseDashboardServices extends BxDol
                 $aData[] = array_merge([
                     'key' => $aModule['name'], 
                     'title' => ($_sTitle = '_' . $aModule['name']) && ($sTitle = _t($_sTitle)) && $_sTitle != $sTitle ? $sTitle : $aModule['title'], 
-                    'url' => $oPermalink->permalink($CNF['URL_HOME']), 
+                    'url' => $oPermalink->permalink($CNF['URL_MANAGE_COMMON']), 
                     'add_url' => str_replace('edit-', 'create-',$CNF['URI_EDIT_ENTRY']), 
                     'action' => 'member',  
                     'icon' => !empty($CNF['ICON']) ? $CNF['ICON'] : '', 

yarn.lock

@@ -2886,9 +2886,10 @@ pdfjs-dist@^5.3.93:
   optionalDependencies:
     "@napi-rs/canvas" "^0.1.71"
 
-"photoswipe@github:dimsemenov/PhotoSwipe#v4.1.3":
-  version "4.1.3"
-  resolved "https://codeload.github.com/dimsemenov/PhotoSwipe/tar.gz/80607e12542a1a54ecefa837649e862b35dffd25"
+photoswipe@^5.4.4:
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-5.4.4.tgz#e045dc036453493188d5c8665b0e8f1000ac4d6e"
+  integrity sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA==
 
 picocolors@^1.1.1:
   version "1.1.1"