intranet-pictures 2.0.0 → 2.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f83afa6acab98f33abb964031b20ee5e3e13a9225ff3ec4525be209c87c66f51
-  data.tar.gz: 1c43a4f8cc550fe3900684a81e93ed0e50276ed59154f166132b1395d0748911
+  metadata.gz: 6e5e318561ea69bdaed8eaf38cf8d1349220835196596acc6ba65640c2deac52
+  data.tar.gz: ebc612ab80afffc3c9f70a3ea0b2da47467006b91854a0e7f7c05227a2c64a2d
 SHA512:
-  metadata.gz: 9746b40dee3c630e69510789eed1d3f937f88441b7a484c0a139d90b7eacfdff63394875bc8122e9efea0583c6955fbc3da77852bb4816a1615952b3658de099
-  data.tar.gz: 9e8d8f8903b495bb1dbbacf010cea817f11440a0475b2eb6b98dc7b6e0576ea1dd6d1583cff63f27a9f607f384d108e1a6fa8dc969d009ba43d57b3e544cccb9
+  metadata.gz: fc2992a96129bf8b0e8a0e79753a9833541a10b875bddc9893cf5dec74e595dcf5693fd28f5b5c4b771725fb0bb64f14ebc43efb87855959c780efa19e4a822f
+  data.tar.gz: 26b461521d1b71a98a37f0e1848a3cae417eb79ccc8ba19faeaafbbc94a38143fa00871e53118417923b3a9bd1326520ae57492f732fa9fcc9f7ee68b0f35a6f

data/lib/intranet/pictures/responder.rb

@@ -240,7 +240,8 @@ module Intranet
          "  viewer_close: '#{I18n.t('pictures.viewer.close')}',\n" \
          "  viewer_zoom: '#{I18n.t('pictures.viewer.zoom')}',\n" \
          "  viewer_previous: '#{I18n.t('pictures.viewer.previous')}',\n" \
-         "  viewer_next: '#{I18n.t('pictures.viewer.next')}' };"]
+         "  viewer_next: '#{I18n.t('pictures.viewer.next')}',\n" \
+         "  viewer_toggle_caption: '#{I18n.t('pictures.viewer.toggle_caption')}' };"]
       end
 
       ##########################################################################

data/lib/intranet/pictures/version.rb

@@ -8,7 +8,7 @@ module Intranet
     NAME = 'intranet-pictures'
 
     # The version of the gem, according to semantic versionning.
-    VERSION = '2.0.0'
+    VERSION = '2.2.0'
 
     # The URL of the gem homepage.
     HOMEPAGE_URL = 'https://rubygems.org/gems/intranet-pictures'

data/lib/intranet/resources/locales/en.yml

@@ -10,6 +10,7 @@ en:
       zoom: 'Zoom'
       previous: 'Previous image'
       next: 'Next image'
+      toggle_caption: 'Toggle caption/info pannel'
     nav:
       event: 'Events'
       city: 'Cities'

data/lib/intranet/resources/locales/fr.yml

@@ -10,6 +10,7 @@ fr:
       zoom: 'Agrandir'
       previous: 'Image précédente'
       next: 'Image suivante'
+      toggle_caption: 'Afficher/Masquer les détails'
     nav:
       event: 'Événements'
       city: 'Villes'

data/lib/intranet/resources/www/jpictures.js

@@ -12,43 +12,141 @@ import PhotoSwipeDynamicCaption from './photoswipe/photoswipe-dynamic-caption-pl
 // 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;
+class PhotoSwipePictureGallery {
+  constructor(items) {
+    // 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,
+    };
+    this.lightbox = new PhotoSwipeLightbox(lightboxOptions);
+
+    // Initialize caption plugin
+    const captionPluginOptions = {
+      type: 'below',
+      mobileLayoutBreakpoint: 800,
+      captionContent: (slide) => {
+        return this._captionContent(slide)
+      },
+    };
+    this.captionPlugin = new PhotoSwipeDynamicCaption(this.lightbox, captionPluginOptions);
+
+    // Add custom 'Info' button, see https://photoswipe.com/v5/docs/adding-custom-buttons/
+    // Info menu button
+    const infoButton = {
+      name: 'info',
+      title: i18n.viewer_toggle_caption,
+      order: 15, // Insert button between zoom & close buttons
+      isButton: true,
+      html: {
+        isCustomSVG: true,
+        inner: '<path d="M7 16a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" id="pswp__icn-info"/>'
+              + '<path fill="currentColor" d="M17 15h-2v6h2z"/>'
+              + '<path fill="currentColor" d="M17 11h-2v2h2z"/>',
+        outlineID: 'pswp__icn-info',
+      },
+      onClick: (ev, el, pswp) => {
+        this._toggleInfoPannel(ev, el, pswp);
+      },
+    };
+    this.lightbox.on('uiRegister', () => {
+      this.lightbox.pswp.ui.registerElement(infoButton);
+    });
+
+    this.lightbox.on('calcSlideSize', (e) => {
+      /* When using mobile layout for caption, hide the Info button since the caption is fixed
+       * at the bottom. */
+      if (this.captionPlugin.useMobileLayout()) {
+        document.querySelector('.pswp__button--info').style.display = 'none';
+      } else {
+        document.querySelector('.pswp__button--info').style.display = '';
+      }
+    });
+  }
+
+  // Open gallery at the given slide index (starting at 0)
+  open(index) {
+    this.lightbox.init();
+    this.lightbox.loadAndOpen(index);
+  }
+
+  // Switch between regular caption (below image) and info pannel (aside)
+  _toggleInfoPannel(ev, el, pswp) {
+    if (this.captionPlugin.options.type === 'below') {
+      this.captionPlugin.options.type = 'aside';
+    } else if (this.captionPlugin.options.type === 'aside') {
+      this.captionPlugin.options.type = 'below';
+    }
+    /* Force updating size of all PhotoSwipe elements. This will trigger the 'calcSlideSize' event
+     * on each loaded slide, causing update of the caption text (see handler above). */
+    this.lightbox.pswp.updateSize(true);
+  }
+
+  _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;
+  }
+
+  // Get caption content, according to current image & caption layout
+  _captionContent(slide) {
+    const slideTitle    = slide.data.title;
+    const slideDateTime = this._convertDate(slide.data.datetime, true);
+
+    if (this.captionPlugin.options.type === 'aside' && !this.captionPlugin.useMobileLayout()) {
+      var caption = '<strong>' + slideTitle + '</strong><hr />' +
+                    '<p class="pswp__caption__exif pswp__caption__exif_datetime">' + slideDateTime + '</p>';
+      if (slide.data.artist) {
+        caption += '<p class="pswp__caption__exif pswp__caption__exif_author">' + slide.data.artist + '</p>';
+      }
+      if (slide.data.event) {
+        caption += '<p class="pswp__caption__exif pswp__caption__exif_event">' + slide.data.event + '</p>';
+      }
+      if (slide.data.city || slide.data.region) {
+        caption += '<p class="pswp__caption__exif pswp__caption__exif_location">';
+        if (slide.data.city) { caption += slide.data.city; }
+        if (slide.data.city && slide.data.region) { caption += ', '; }
+        if (slide.data.region) { caption += slide.data.region; }
+        caption += '</p>';
+      }
+      if (slide.data.model) {
+        caption += '<p class="pswp__caption__exif pswp__caption__exif_camera">' + slide.data.model + '</p>';
+      }
+      if (slide.data.focallength) {
+        caption += '<p class="pswp__caption__exif pswp__caption__exif_focal">' + slide.data.focallength + '</p>';
+      }
+      if (slide.data.fnumber) {
+        caption += '<p class="pswp__caption__exif pswp__caption__exif_fstop">' + slide.data.fnumber + '</p>';
+      }
+      if (slide.data.exposure) {
+        caption += '<p class="pswp__caption__exif pswp__caption__exif_shutter">' + slide.data.exposure + '</p>';
+      }
+      if (slide.data.isospeed) {
+        caption += '<p class="pswp__caption__exif pswp__caption__exif_iso">' + 'ISO ' + slide.data.isospeed + '</p>';
+      }
+      return caption;
+    } else {
+      return '<strong>' + slideDateTime + '</strong> &mdash; ' + slideTitle;
+    }
+  }
 }
 
 function createImageGallery(json) {
   var items = [];
   for (let i = 0; i < json.length; i++) {
-    const imageUrl   = 'api/picture?id=' + json[i].id;
-    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});
+    var imageData = json[i];
+    imageData.src = 'api/picture?id=' + json[i].id; // Add 'src' field required by PhotoSwipe
+    items.push(imageData);
   }
 
-  // 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);
-
-  // Initialize caption plugin
-  const captionPluginOptions = {
-    type: 'below',
-    captionContent: (slide) => { return slide.data.title || ''; }
-  };
-  const captionPlugin = new PhotoSwipeDynamicCaption(lightbox, captionPluginOptions);
-
-  // Open gallery
-  lightbox.init();
-  lightbox.loadAndOpen(0); // start at first slide
+  const gallery = new PhotoSwipePictureGallery(items);
+  gallery.open(0); // start at first slide
 }
 
 // Export this function so that it may be called from HTML

data/lib/intranet/resources/www/photoswipe/photoswipe-dynamic-caption-plugin.css

@@ -39,9 +39,14 @@
 
 .pswp__dynamic-caption--mobile {
   width: 100%;
-  top: auto;
-  right: 0;
-  bottom: 0;
   background: rgba(0,0,0,0.5);
   padding: 10px 15px;
+
+  right: 0;
+  bottom: 0;
+
+  /* override styles that were set via JS.
+    as they interfere with size measurement */
+  top: auto !important; 
+  left: 0 !important;
 }