lib/intranet/resources/www/jpictures.js in intranet-pictures-1.0.6 vs lib/intranet/resources/www/jpictures.js in intranet-pictures-1.1.0

@@ -2,41 +2,59 @@
  * jpictures.js
  * JavaScript functions for the pictures galleries.
  */
 "use strict";
 
+// Import PhotoSwipe Lightbox
+import PhotoSwipe from './photoswipe/photoswipe.esm.min.js';
+import PhotoSwipeLightbox from './photoswipe/photoswipe-lightbox.esm.min.js';
+import PhotoSwipeDynamicCaption from './photoswipe/photoswipe-dynamic-caption-plugin.esm.js'
+
+// Import internationalization support
+import i18n from './../i18n.js';
+
 function convertDate(iso8601_date) {
   const d = new Date(iso8601_date);
   const str = d.toLocaleDateString() + ' ' + d.toLocaleTimeString().replace(/(\d{2}):(\d{2}):(\d{2})/, '$1h$2');
   return str;
 }
 
 function createImageGallery(json) {
   var items = [];
   for (let i = 0; i < json.length; i++) {
     const imageUrl   = 'api/picture?id=' + json[i].id;
-    const imageTitle = convertDate(json[i].datetime, true) + '<br />' + json[i].title;
-    items.push({ src: imageUrl, msrc: imageUrl, w: json[i].width, h: json[i].height, title: imageTitle});
+    const imageTitle = '<strong>' + convertDate(json[i].datetime, true) + '</strong> &mdash; ' + json[i].title;
+    items.push({ src: imageUrl, width: json[i].width, height: json[i].height, title: imageTitle});
   }
 
-  // Get the PhotoSwipe container
-  const pswpElement = document.querySelectorAll('.pswp')[0];
+  // Create PhotoSwipe Lightbox
+  const lightboxOptions = {
+    dataSource: items,
+    pswpModule: PhotoSwipe,
+    bgOpacity: 0.95,
+    closeOnVerticalDrag: false,
+    closeTitle: i18n.viewer_close + ' (Esc)',
+    zoomTitle: i18n.viewer_zoom + ' (z)',
+    arrowPrevTitle: i18n.viewer_previous,
+    arrowNextTitle: i18n.viewer_next,
+  };
+  const lightbox = new PhotoSwipeLightbox(lightboxOptions);
 
-  // Define options
-  const options = {
-      // core options
-      index: 0, // start at first slide
-      history: false,
-      closeOnScroll: false,
-      closeOnVerticalDrag: false
+  // Initialize caption plugin
+  const captionPluginOptions = {
+    type: 'below',
+    captionContent: (slide) => { return slide.data.title || ''; }
   };
+  const captionPlugin = new PhotoSwipeDynamicCaption(lightbox, captionPluginOptions);
 
-  // Initialize and open PhotoSwipe
-  let gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
-  gallery.init();
+  // Open gallery
+  lightbox.init();
+  lightbox.loadAndOpen(0); // start at first slide
 }
 
+// Export this function so that it may be called from HTML
 function openImagesGallery(selectors) {
   fetch('api/pictures?' + selectors) // selectors is not empty
     .then(response => response.json())
     .then(data => createImageGallery(data));
 }
+window.openImagesGallery = openImagesGallery;