intranet-pictures 2.1.0 → 2.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 389f9f8c45887f26425f96b166204dda1c9edcc443b8e6b70fc83dc3ce8e6ab4
-  data.tar.gz: 8cd7e0f11ae898d2ccee675f87d14facacf84b472c37d456f2a5ba2b8ed68d64
+  metadata.gz: 6e5e318561ea69bdaed8eaf38cf8d1349220835196596acc6ba65640c2deac52
+  data.tar.gz: ebc612ab80afffc3c9f70a3ea0b2da47467006b91854a0e7f7c05227a2c64a2d
 SHA512:
-  metadata.gz: a26dab3d6b2d07d29bde79c2ce8b6fe8c95a3d3f0e7bf5fd90bf9537619b9ef5cae2d947c2ba6b068919c0048bbfc94612d02abb534510626e9d04ab5e97b0d3
-  data.tar.gz: 71ef4e5113ee75f4067c22dd0623bb17fbf651cbbb5f91aa9440c0ec19391f4f21faab2aa5cac3e8672084cef6448287e6d5fc5cb021eb01863c86287ed31472
+  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.1.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;
 }

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

@@ -1,5 +1,5 @@
 /**
- * PhotoSwipe Dynamic Caption plugin v1.1.0
+ * PhotoSwipe Dynamic Caption plugin v1.2.7
  * https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin
  * 
  * By https://dimsemenov.com
@@ -11,6 +11,7 @@ const defaultOptions = {
   horizontalEdgeThreshold: 20,
   mobileCaptionOverlapRatio: 0.3,
   mobileLayoutBreakpoint: 600,
+  verticallyCenterImage: false
 };
 
 class PhotoSwipeDynamicCaption {
@@ -23,28 +24,8 @@ class PhotoSwipeDynamicCaption {
     this.lightbox = lightbox;
 
     this.lightbox.on('init', () => {
-      this.initPlugin();
-    });
-  }
-
-  initPlugin() {
-    this.pswp = this.lightbox.pswp;
-    this.isCaptionHidden = false;
-    this.tempCaption = false;
-    this.captionElement = false;
-
-    this.pswp.on('uiRegister', () => {
-      this.pswp.ui.registerElement({
-        name: 'dynamic-caption',
-        order: 9,
-        isButton: false,
-        appendTo: 'root',
-        html: '',
-        onInit: (el) => {
-          this.captionElement = el;
-          this.initCaption();
-        }
-      });
+      this.pswp = this.lightbox.pswp;
+      this.initCaption();
     });
   }
 
@@ -52,51 +33,72 @@ class PhotoSwipeDynamicCaption {
     const { pswp } = this;
 
     pswp.on('change', () => {
-      this.updateCaptionHTML(); 
-      this.updateCurrentCaptionPosition();
-
       // make sure caption is displayed after slides are switched
-      this.showCaption();
+      this.showCaption(this.pswp.currSlide);
     });
 
     pswp.on('calcSlideSize', (e) => this.onCalcSlideSize(e));
 
-    // hide caption if mainscroll is shifted (dragging)
-    pswp.on('moveMainScroll', () => {
-      if (!this.useMobileLayout()) {
-        if (this.pswp.mainScroll.isShifted()) {
-          this.hideCaption();
-        } else {
-          this.showCaption();
+    pswp.on('slideDestroy', (e) => {
+      if (e.slide.dynamicCaption) {
+        if (e.slide.dynamicCaption.element) {
+          e.slide.dynamicCaption.element.remove();
         }
+        delete e.slide.dynamicCaption;
       }
     });
 
     // hide caption if zoomed
-    pswp.on('zoomPanUpdate', () => {
-      if (pswp.currSlide.currZoomLevel > pswp.currSlide.zoomLevels.initial) {
-        this.hideCaption();
-      } else {
-        this.showCaption();
+    pswp.on('zoomPanUpdate', ({ slide }) => {
+      if (pswp.opener.isOpen && slide.dynamicCaption) {
+        if (slide.currZoomLevel > slide.zoomLevels.initial) {
+          this.hideCaption(slide);
+        } else {
+          this.showCaption(slide);
+        }
+  
+        // move caption on vertical drag
+        if (slide.dynamicCaption.element) {
+          let captionYOffset = 0;
+          if (slide.currZoomLevel <= slide.zoomLevels.initial) {
+            const shiftedAmount = slide.pan.y - slide.bounds.center.y;
+            if (Math.abs(shiftedAmount) > 1) {
+              captionYOffset = shiftedAmount;
+            }
+          }
+
+          this.setCaptionYOffset(slide.dynamicCaption.element, captionYOffset);
+        }
+
+        this.adjustPanArea(slide, slide.currZoomLevel);
       }
     });
 
     pswp.on('beforeZoomTo', (e) => {
-      const { currSlide } = pswp;
+      this.adjustPanArea(pswp.currSlide, e.destZoomLevel);
+    });
 
-      if (currSlide.__dcAdjustedPanAreaSize) {
-        if (e.destZoomLevel > currSlide.zoomLevels.initial) {
-          currSlide.panAreaSize.x = currSlide.__dcOriginalPanAreaSize.x;
-          currSlide.panAreaSize.y = currSlide.__dcOriginalPanAreaSize.y;
-        } else {
-          // Restore panAreaSize after we zoom back to initial position
-          currSlide.panAreaSize.x = currSlide.__dcAdjustedPanAreaSize.x;
-          currSlide.panAreaSize.y = currSlide.__dcAdjustedPanAreaSize.y;
-        }
+    // Stop default action of tap when tapping on the caption
+    pswp.on('tapAction', (e) => {
+      if (e.originalEvent.target.closest('.pswp__dynamic-caption')) {
+        e.preventDefault();
       }
     });
   }
 
+  adjustPanArea(slide, zoomLevel) {
+    if (slide.dynamicCaption && slide.dynamicCaption.adjustedPanAreaSize) {
+      if (zoomLevel > slide.zoomLevels.initial) {
+        slide.panAreaSize.x = slide.dynamicCaption.originalPanAreaSize.x;
+        slide.panAreaSize.y = slide.dynamicCaption.originalPanAreaSize.y;
+      } else {
+        // Restore panAreaSize after we zoom back to initial position
+        slide.panAreaSize.x = slide.dynamicCaption.adjustedPanAreaSize.x;
+        slide.panAreaSize.y = slide.dynamicCaption.adjustedPanAreaSize.y;
+      }
+    }
+  }
+
   useMobileLayout() {
     const { mobileLayoutBreakpoint } = this.options;
 
@@ -111,43 +113,59 @@ class PhotoSwipeDynamicCaption {
     return false;
   }
 
-  hideCaption() {
-    if (!this.isCaptionHidden) {
-      this.isCaptionHidden = true;
-      this.captionElement.classList.add('pswp__dynamic-caption--faded');
+  hideCaption(slide) {
+    if (slide.dynamicCaption && !slide.dynamicCaption.hidden) {
+      const captionElement = slide.dynamicCaption.element;
+
+      if (!captionElement) {
+        return;
+      }
+
+      slide.dynamicCaption.hidden = true;
+      captionElement.classList.add('pswp__dynamic-caption--faded');
 
       // Disable caption visibility with the delay, so it's not interactable 
-      if (this.captionFadeTimeout) {
-        clearTimeout(this.captionFadeTimeout);
+      if (slide.captionFadeTimeout) {
+        clearTimeout(slide.captionFadeTimeout);
       }
-      this.captionFadeTimeout = setTimeout(() => {
-        this.captionElement.style.visibility = 'hidden';
-        this.captionFadeTimeout = null;
+      slide.captionFadeTimeout = setTimeout(() => {
+        captionElement.style.visibility = 'hidden';
+        delete slide.captionFadeTimeout;
       }, 400);
     }
   }
 
-  showCaption() {
-    if (this.isCaptionHidden) {
-      this.isCaptionHidden = false;
-      this.captionElement.style.visibility = 'visible';
+  setCaptionYOffset(el, y) {
+    el.style.transform = `translateY(${y}px)`;
+  }
+
+  showCaption(slide) {
+    if (slide.dynamicCaption && slide.dynamicCaption.hidden) {
+      const captionElement = slide.dynamicCaption.element;
+
+      if (!captionElement) {
+        return;
+      }
+
+      slide.dynamicCaption.hidden = false;
+      captionElement.style.visibility = 'visible';
       
-      clearTimeout(this.captionFadeTimeout);
-      this.captionFadeTimeout = setTimeout(() => {
-        this.captionElement.classList.remove('pswp__dynamic-caption--faded');
-        this.captionFadeTimeout = null;
+      clearTimeout(slide.captionFadeTimeout);
+      slide.captionFadeTimeout = setTimeout(() => {
+        captionElement.classList.remove('pswp__dynamic-caption--faded');
+        delete slide.captionFadeTimeout;;
       }, 50);
     }
   }
 
-  setCaptionPosition(x, y) {
+  setCaptionPosition(captionEl, x, y) {
     const isOnHorizontalEdge = (x <= this.options.horizontalEdgeThreshold);
-    this.captionElement.classList[
+    captionEl.classList[
       isOnHorizontalEdge ? 'add' : 'remove'
     ]('pswp__dynamic-caption--on-hor-edge');
 
-    this.captionElement.style.left = x + 'px';
-    this.captionElement.style.top = y + 'px';
+    captionEl.style.left = x + 'px';
+    captionEl.style.top = y + 'px';
   }
 
   setCaptionWidth(captionEl, width) {
@@ -167,67 +185,84 @@ class PhotoSwipeDynamicCaption {
     }
   }
 
-  updateCurrentCaptionPosition() {
-    const slide = this.pswp.currSlide;
-
-    if (!slide.dynamicCaptionType) {
+  updateCaptionPosition(slide) {
+    if (!slide.dynamicCaption || !slide.dynamicCaption.type || !slide.dynamicCaption.element) {
       return;
     }
 
-    if (slide.dynamicCaptionType === 'mobile') {
-      this.setCaptionType(this.captionElement, slide.dynamicCaptionType);
+    if (slide.dynamicCaption.type === 'mobile') {
+      this.setCaptionType(
+        slide.dynamicCaption.element, 
+        slide.dynamicCaption.type
+      );
       
-      this.captionElement.style.removeProperty('left');
-      this.captionElement.style.removeProperty('top');
-      this.setCaptionWidth(this.captionElement, false);
+      slide.dynamicCaption.element.style.removeProperty('left');
+      slide.dynamicCaption.element.style.removeProperty('top');
+      this.setCaptionWidth(slide.dynamicCaption.element, false);
       return;
     }
 
     const zoomLevel = slide.zoomLevels.initial;
     const imageWidth = Math.ceil(slide.width * zoomLevel);
     const imageHeight = Math.ceil(slide.height * zoomLevel);
-
     
-    this.setCaptionType(this.captionElement, slide.dynamicCaptionType);
-    if (slide.dynamicCaptionType === 'aside') {
+    this.setCaptionType(slide.dynamicCaption.element, slide.dynamicCaption.type);
+    if (slide.dynamicCaption.type === 'aside') {
       this.setCaptionPosition(
-        this.pswp.currSlide.bounds.center.x + imageWidth,
-        this.pswp.currSlide.bounds.center.y
+        slide.dynamicCaption.element,
+        slide.bounds.center.x + imageWidth,
+        slide.bounds.center.y
       );
-      this.setCaptionWidth(this.captionElement, false);
-    } else if (slide.dynamicCaptionType === 'below') {
+      this.setCaptionWidth(slide.dynamicCaption.element, false);
+    } else if (slide.dynamicCaption.type === 'below') {
       this.setCaptionPosition(
-        this.pswp.currSlide.bounds.center.x,
-        this.pswp.currSlide.bounds.center.y + imageHeight
+        slide.dynamicCaption.element,
+        slide.bounds.center.x,
+        slide.bounds.center.y + imageHeight
       );
-      this.setCaptionWidth(this.captionElement, imageWidth);
+      this.setCaptionWidth(slide.dynamicCaption.element, imageWidth);
     }
   }
 
-  /**
-   * Temporary caption is used to measure size for the current/next/previous captions,
-   * (it has visibility:hidden)
-   */
-  createTemporaryCaption() {
-    this.tempCaption = document.createElement('div');
-    this.tempCaption.className = 'pswp__dynamic-caption pswp__dynamic-caption--temp';
-    this.tempCaption.style.visibility = 'hidden';
-    this.tempCaption.setAttribute('aria-hidden', 'true');
-    // move caption element, so it's after BG,
-    // so that other controls can freely overlap it
-    this.pswp.bg.after(this.captionElement); 
-    this.captionElement.after(this.tempCaption);
-  }
-
   onCalcSlideSize(e) {
     const { slide } = e;
-
-    const captionHTML = this.getCaptionHTML(e.slide);
-    let useMobileVersion = false;
     let captionSize;
+    let useMobileVersion;
+
+    if (!slide.dynamicCaption) {
+      slide.dynamicCaption = {
+        element: undefined,
+        type: false,
+        hidden: false
+      };
+    } // INTRANET-CHANGE: even if the slide already has a caption, reevaluate its content
+
+    const captionHTML = this.getCaptionHTML(slide);
 
     if (!captionHTML) {
-      slide.dynamicCaptionType = false;
+      return;
+    }
+    
+    // INTRANET-CHANGE: remove previous element from DOM, if required
+    if (e.slide.dynamicCaption.element) {
+      if (captionHTML != slide.dynamicCaption.element.innerHTML) {
+        e.slide.dynamicCaption.element.remove();
+      }
+    }
+
+    slide.dynamicCaption.element = document.createElement('div');
+    slide.dynamicCaption.element.className = 'pswp__dynamic-caption pswp__hide-on-close';
+    slide.dynamicCaption.element.innerHTML = captionHTML;
+
+    this.pswp.dispatch('dynamicCaptionUpdateHTML', { 
+      captionElement: slide.dynamicCaption.element,
+      slide
+    });
+
+    slide.holderElement.appendChild(slide.dynamicCaption.element);
+    //}
+
+    if (!slide.dynamicCaption.element) {
       return;
     }
 
@@ -236,33 +271,32 @@ class PhotoSwipeDynamicCaption {
     slide.bounds.update(slide.zoomLevels.initial);
     
     if (this.useMobileLayout()) {
-      slide.dynamicCaptionType = 'mobile';
+      slide.dynamicCaption.type = 'mobile';
       useMobileVersion = true;
     } else {
       if (this.options.type === 'auto') {
         if (slide.bounds.center.x > slide.bounds.center.y) {
-          slide.dynamicCaptionType = 'aside';
+          slide.dynamicCaption.type = 'aside';
         } else {
-          slide.dynamicCaptionType = 'below';
+          slide.dynamicCaption.type = 'below';
         }
       } else {
-        slide.dynamicCaptionType = this.options.type;
+        slide.dynamicCaption.type = this.options.type;
       }
     } 
 
     const imageWidth = Math.ceil(slide.width * slide.zoomLevels.initial);
     const imageHeight = Math.ceil(slide.height * slide.zoomLevels.initial);
 
-    if (!this.tempCaption) {
-      this.createTemporaryCaption();
-    }
+    this.setCaptionType(
+      slide.dynamicCaption.element, 
+      slide.dynamicCaption.type
+    );
 
-    this.setCaptionType(this.tempCaption, slide.dynamicCaptionType);
+    if (slide.dynamicCaption.type === 'aside') {
+      this.setCaptionWidth(slide.dynamicCaption.element, false);
+      captionSize = this.measureCaptionSize(slide.dynamicCaption.element, e.slide);
 
-    if (slide.dynamicCaptionType === 'aside') {
-      this.tempCaption.innerHTML = this.getCaptionHTML(e.slide);
-      this.setCaptionWidth(this.tempCaption, false);
-      captionSize = this.measureCaptionSize(this.tempCaption, e.slide);
       const captionWidth = captionSize.x;      
 
       const horizontalEnding = imageWidth + slide.bounds.center.x;
@@ -274,60 +308,53 @@ class PhotoSwipeDynamicCaption {
       } else {
         // do nothing, caption will fit aside without any adjustments
       }
-    } else if (slide.dynamicCaptionType === 'below' || useMobileVersion) {
+    } else if (slide.dynamicCaption.type === 'below' || useMobileVersion) {
       this.setCaptionWidth(
-        this.tempCaption, 
+        slide.dynamicCaption.element, 
         useMobileVersion ? this.pswp.viewportSize.x : imageWidth
       );
-      this.tempCaption.innerHTML = this.getCaptionHTML(e.slide);
-      captionSize = this.measureCaptionSize(this.tempCaption, e.slide);
+
+      captionSize = this.measureCaptionSize(slide.dynamicCaption.element, e.slide);
       const captionHeight = captionSize.y;
 
+      if (this.options.verticallyCenterImage) {
+        slide.panAreaSize.y -= captionHeight;
+        this.recalculateZoomLevelAndBounds(slide);
+      } else {
+        // Lift up the image only by caption height
 
-      // vertical ending of the image
-      const verticalEnding = imageHeight + slide.bounds.center.y;
+        // vertical ending of the image
+        const verticalEnding = imageHeight + slide.bounds.center.y;
 
-      // height between bottom of the screen and ending of the image
-      // (before any adjustments applied) 
-      const verticalLeftover = slide.panAreaSize.y - verticalEnding;
-      const initialPanAreaHeight = slide.panAreaSize.y;
+        // height between bottom of the screen and ending of the image
+        // (before any adjustments applied) 
+        const verticalLeftover = slide.panAreaSize.y - verticalEnding;
+        const initialPanAreaHeight = slide.panAreaSize.y;
 
-      if (verticalLeftover <= captionHeight) {
-        // lift up the image to give more space for caption
-        slide.panAreaSize.y -= Math.min((captionHeight - verticalLeftover) * 2, captionHeight);
+        if (verticalLeftover <= captionHeight) {
+          // lift up the image to give more space for caption
+          slide.panAreaSize.y -= Math.min((captionHeight - verticalLeftover) * 2, captionHeight);
 
-        // we reduce viewport size, thus we need to update zoom level and pan bounds
-        this.recalculateZoomLevelAndBounds(slide);
+          // we reduce viewport size, thus we need to update zoom level and pan bounds
+          this.recalculateZoomLevelAndBounds(slide);
 
-        const maxPositionX = slide.panAreaSize.x * this.options.mobileCaptionOverlapRatio / 2;
+          const maxPositionX = slide.panAreaSize.x * this.options.mobileCaptionOverlapRatio / 2;
 
-        // Do not reduce viewport height if too few space available
-        if (useMobileVersion 
-            && slide.bounds.center.x > maxPositionX) {
-          // Restore the default position
-          slide.panAreaSize.y = initialPanAreaHeight;
-          this.recalculateZoomLevelAndBounds(slide);
+          // Do not reduce viewport height if too few space available
+          if (useMobileVersion 
+              && slide.bounds.center.x > maxPositionX) {
+            // Restore the default position
+            slide.panAreaSize.y = initialPanAreaHeight;
+            this.recalculateZoomLevelAndBounds(slide);
+          }
         }
       }
-
-      
-      
-      // if (this.useMobileLayout && slide.bounds.center.x > 100) {
-      //   // do nothing, caption will overlap the bottom part of the image
-      // } else if (verticalLeftover <= captionHeight) {
-        
-      // } else {
-      //   // do nothing, caption will fit below the image without any adjustments
-      // }
     } else {
       // mobile
     }
 
     this.storeAdjustedPanAreaSize(slide);
-
-    if (slide === this.pswp.currSlide) {
-      this.updateCurrentCaptionPosition();
-    }
+    this.updateCaptionPosition(slide);
   }
 
   measureCaptionSize(captionEl, slide) {
@@ -349,19 +376,23 @@ class PhotoSwipeDynamicCaption {
   }
 
   storeAdjustedPanAreaSize(slide) {
-    if (!slide.__dcAdjustedPanAreaSize) {
-      slide.__dcAdjustedPanAreaSize = {};
+    if (slide.dynamicCaption) {
+      if (!slide.dynamicCaption.adjustedPanAreaSize) {
+        slide.dynamicCaption.adjustedPanAreaSize = {};
+      }
+      slide.dynamicCaption.adjustedPanAreaSize.x = slide.panAreaSize.x;
+      slide.dynamicCaption.adjustedPanAreaSize.y = slide.panAreaSize.y;
     }
-    slide.__dcAdjustedPanAreaSize.x = slide.panAreaSize.x;
-    slide.__dcAdjustedPanAreaSize.y = slide.panAreaSize.y;
   }
 
   storeOriginalPanAreaSize(slide) {
-    if (!slide.__dcOriginalPanAreaSize) {
-      slide.__dcOriginalPanAreaSize = {};
+    if (slide.dynamicCaption) {
+      if (!slide.dynamicCaption.originalPanAreaSize) {
+        slide.dynamicCaption.originalPanAreaSize = {};
+      }
+      slide.dynamicCaption.originalPanAreaSize.x = slide.panAreaSize.x;
+      slide.dynamicCaption.originalPanAreaSize.y = slide.panAreaSize.y;
     }
-    slide.__dcOriginalPanAreaSize.x = slide.panAreaSize.x;
-    slide.__dcOriginalPanAreaSize.y = slide.panAreaSize.y;
   }
 
   getCaptionHTML(slide) {
@@ -386,15 +417,6 @@ class PhotoSwipeDynamicCaption {
     }
     return captionHTML;
   }
-
-  updateCaptionHTML() {
-    const captionHTML = this.getCaptionHTML(this.pswp.currSlide);
-    this.captionElement.style.visibility = captionHTML ? 'visible' :  'hidden';
-    this.captionElement.innerHTML = captionHTML || '';
-    this.pswp.dispatch('dynamicCaptionUpdateHTML', { 
-      captionElement: this.captionElement
-    });
-  }
 }
 
 export default PhotoSwipeDynamicCaption;

data/lib/intranet/resources/www/style.css

@@ -22,6 +22,13 @@ ul.groups {
 ul.groups.wide {
   grid-template-columns: repeat(2, 1fr);
 }
+
+/* Small screens only */
+@media only screen and (max-width: 1023px), only screen and (max-device-width: 1023px) {
+  ul.groups { grid-template-columns: repeat(2, 1fr); }
+  ul.groups.wide { grid-template-columns: repeat(1, 1fr); }
+}
+
 ul.groups li {
   display: block;
   width: 100%;
@@ -34,19 +41,11 @@ ul.groups li {
   border-radius: 3px;
   justify-self: center;
 }
-ul.groups a {
-  color: black;
-}
-
-/* Small screens only */
-@media only screen and (max-width: 1023px), only screen and (max-device-width: 1023px) {
-  ul.groups { grid-template-columns: repeat(2, 1fr); }
-  ul.groups.wide { grid-template-columns: repeat(1, 1fr); }
-}
 
 ul.groups li a {
   display: block;
   height: 100%;
+  color: black;
 }
 ul.groups li figure {
   margin: 0px;
@@ -87,5 +86,62 @@ ul.groups li:hover, ul.groups li:focus {
 
 .pswp .pswp__dynamic-caption--below {
   max-width: 800px;
-  padding: 10px 20px 10px;
+  padding: 10px 20px; /* top/bottom sides */
+}
+
+.pswp .pswp__dynamic-caption--aside {
+  max-width: 400px;
+  width: 400px;
+  text-align: justify;
+  padding: 10px 20px; /* top/bottom sides */
+}
+
+.pswp .pswp__dynamic-caption--aside hr {
+  margin: 8px 0px; /* top/bottom sides */
+  background: rgba(255, 255, 255, 0.7);
+  height: 1px;
+}
+
+.pswp .pswp__caption__exif {
+  padding: .25em 0 .25em 2.5em; /* top right bottom left */
+  margin: .125em 0; /* top/bottom sides */
+	background-position: .5em center;
+	background-repeat: no-repeat;
+	background-size: 20px 20px;
+}
+
+.pswp .pswp__caption__exif_datetime {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNjY2NjY2MiPjxwYXRoIGQ9Ik0xMzIuNSwxNjMuMVY0MC42YzAtMTYuOSwxMy43LTMwLjYsMzAuNi0zMC42czMwLjYsMTMuNywzMC42LDMwLjZ2MTIyLjVjMCwxNi45LTEzLjcsMzAuNi0zMC42LDMwLjZTMTMyLjUsMTgwLjEsMTMyLjUsMTYzLjF6IE02NTMuMSwxOTMuOGMxNi45LDAsMzAuNi0xMy43LDMwLjYtMzAuNlY0MC42YzAtMTYuOS0xMy43LTMwLjYtMzAuNi0zMC42cy0zMC42LDEzLjctMzAuNiwzMC42djEyMi41QzYyMi41LDE4MC4xLDYzNi4yLDE5My44LDY1My4xLDE5My44eiBNOTkwLDc0NWMwLDEzNS4zLTEwOS43LDI0NS0yNDUsMjQ1UzUwMCw4ODAuMyw1MDAsNzQ1czEwOS43LTI0NSwyNDUtMjQ1Uzk5MCw2MDkuNyw5OTAsNzQ1eiBNOTI4LjgsNzQ1YzAtMTAxLjMtODIuNC0xODMuOC0xODMuOC0xODMuOFM1NjEuMyw2NDMuNyw1NjEuMyw3NDVTNjQzLjcsOTI4LjgsNzQ1LDkyOC44UzkyOC44LDg0Ni4zLDkyOC44LDc0NXogTTI1NSwzNzcuNUgxMzIuNVY1MDBIMjU1VjM3Ny41eiBNMTMyLjUsNjgzLjhIMjU1VjU2MS4zSDEzMi41VjY4My44eiBNMzE2LjMsNTAwaDEyMi41VjM3Ny41SDMxNi4zVjUwMHogTTMxNi4zLDY4My44aDEyMi41VjU2MS4zSDMxNi4zVjY4My44eiBNNzEuMyw3MzguOVYzMTYuM0g3NDV2MTIyLjVoNjEuM1YxOTkuOWMwLTM3LjItMjkuNy02Ny40LTY2LjMtNjcuNGgtMjUuNXYzMC42YzAsMzMuNy0yNy41LDYxLjMtNjEuMyw2MS4zcy02MS4zLTI3LjUtNjEuMy02MS4zdi0zMC42SDIyNC40djMwLjZjMCwzMy43LTI3LjUsNjEuMy02MS4zLDYxLjNzLTYxLjMtMjcuNS02MS4zLTYxLjN2LTMwLjZINzYuNGMtMzYuNywwLTY2LjQsMzAuMS02Ni40LDY3LjR2NTM5YzAsMzcuMSwyOS43LDY3LjQsNjYuNCw2Ny40aDM2Mi40Vjc0NUg3Ni40QzczLjYsNzQ1LDcxLjMsNzQyLjEsNzEuMyw3MzguOXogTTYyMi41LDUwMFYzNzcuNUg1MDBWNTAwSDYyMi41eiBNODM2LjksNzQ1SDc0NXYtOTEuOWMwLTE2LjktMTMuNy0zMC42LTMwLjYtMzAuNnMtMzAuNiwxMy43LTMwLjYsMzAuNnYxMjIuNWMwLDE2LjksMTMuNywzMC42LDMwLjYsMzAuNmgxMjIuNWMxNi45LDAsMzAuNi0xMy43LDMwLjYtMzAuNlM4NTMuOCw3NDUsODM2LjksNzQ1eiIvPjwvc3ZnPgo=);
+}
+
+.pswp .pswp__caption__exif_author {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iI2NjY2NjYyI+PHBhdGggZD0iTTEwIDEyLjVjLTUuOTIgMC05IDMuNS05IDUuNXYxaDE4di0xYzAtMi0zLjA4LTUuNS05LTUuNXoiLz48Y2lyY2xlIGN4PSIxMCIgY3k9IjYiIHI9IjUiLz48L3N2Zz4K);
+}
+
+.pswp .pswp__caption__exif_event {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNjY2NjY2MiPjxwYXRoIGQ9Ik0xNTUuMiwxMzdjMCwyNy4yLTEyLjEsNDgtMzYuMyw2Mi40djcxOGMwLDQuOS0xLjgsOS4yLTUuNCwxMi44cy03LjgsNS40LTEyLjgsNS40SDY0LjRjLTQuOSwwLTkuMi0xLjgtMTIuOC01LjRzLTUuNC03LjgtNS40LTEyLjh2LTcxOEMyMi4xLDE4NS4xLDEwLDE2NC4zLDEwLDEzN2MwLTIwLDcuMS0zNy4xLDIxLjMtNTEuM2MxNC4yLTE0LjIsMzEuMy0yMS4zLDUxLjMtMjEuM3MzNy4xLDcuMSw1MS4zLDIxLjNDMTQ4LjEsOTkuOSwxNTUuMiwxMTcsMTU1LjIsMTM3TDE1NS4yLDEzN3ogTTk5MCwxNzMuM3Y0MzIuN2MwLDkuNS0yLjQsMTYuNy03LjEsMjEuOGMtNC43LDUuMS0xMi4yLDEwLjMtMjIuNCwxNS42Yy04MS4zLDQzLjktMTUxLDY1LjgtMjA5LjMsNjUuOGMtMjMuMSwwLTQ2LjQtNC4yLTcwLTEyLjVjLTIzLjYtOC4zLTQ0LjEtMTcuNC02MS41LTI3LjJzLTM5LjItMTguOS02NS41LTI3LjJjLTI2LjMtOC4zLTUzLjItMTIuNS04MC44LTEyLjVjLTcyLjYsMC0xNjAuMywyNy42LTI2My4xLDgyLjhjLTYuNCwzLjQtMTIuNyw1LjEtMTguNyw1LjFjLTkuOCwwLTE4LjMtMy42LTI1LjUtMTAuOGMtNy4yLTcuMi0xMC44LTE1LjctMTAuOC0yNS41VjI2MC43YzAtMTIuMSw1LjktMjIuNSwxNy42LTMxLjJjNy45LTUuMywyMi45LTEzLjQsNDQuOC0yNC40Yzg5LjItNDUuNCwxNjguOC02OC4xLDIzOC44LTY4LjFjNDAuNSwwLDc4LjMsNS41LDExMy40LDE2LjRjMzUuMiwxMSw3Ni42LDI3LjYsMTI0LjIsNDkuOWMxNC40LDcuMiwzMSwxMC44LDQ5LjksMTAuOGMyMC40LDAsNDIuNi00LDY2LjYtMTEuOWMyNC03LjksNDQuOC0xNi44LDYyLjQtMjYuN2MxNy42LTkuOCwzNC4yLTE4LjcsNDkuOS0yNi43czI2LTExLjksMzAuOS0xMS45YzkuOCwwLDE4LjMsMy42LDI1LjUsMTAuOEM5ODYuNCwxNTUsOTkwLDE2My41LDk5MCwxNzMuM0w5OTAsMTczLjN6Ii8+PC9zdmc+Cg==);
+}
+
+.pswp .pswp__caption__exif_location {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNjY2NjY2MiPjxwYXRoIGQ9Ik02MTAsNzU5LjRsLTE4LjksMzkuOWMxMDEuMywxMy4yLDE2Mi42LDQ2LjcsMTYyLjYsNzEuNGMwLDMxLjUtOTguOCw3Ny4zLTI1My43LDc3LjNjLTE1NC44LDAtMjUzLjYtNDUuOC0yNTMuNi03Ny4zYzAtMjkuMyw4NS4zLTcwLjcsMjIxLjYtNzYuNWwzMiw2Ni43bDIyMC00NTguMmgtMC4zYzIxLjctMzguNiwzNC4zLTgzLjIsMzQuMy0xMzAuOUM3NTMuOSwxMjcuMiw2NDAuMiwxMCw1MDAsMTBjLTE0MC4yLDAtMjUzLjksMTE3LjItMjUzLjksMjYxLjhjMCw0Ny43LDEyLjYsOTIuMywzNC4yLDEzMC45aC0wLjJsMTY4LjEsMzUwLjRjLTEyNy41LDguNS0yNDIuNyw0OC41LTI0Mi43LDExNy41QzIwNS41LDk0OSwzNTMuNyw5OTAsNTAwLDk5MGMxNDYuMywwLDI5NC41LTQxLDI5NC41LTExOS4zQzc5NC41LDgxMi40LDcxMi4zLDc3NC44LDYxMCw3NTkuNHogTTM5My40LDIzOS42YzAtNjAuNyw0Ny43LTExMCwxMDYuNi0xMTBjNTksMCwxMDYuNyw0OS4zLDEwNi43LDExMGMwLDYwLjctNDcuNywxMDkuOS0xMDYuNywxMDkuOUM0NDEuMSwzNDkuNSwzOTMuNCwzMDAuMywzOTMuNCwyMzkuNnoiLz48L3N2Zz4K);
+}
+
+.pswp .pswp__caption__exif_camera {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjY2NjY2NjIiBkPSJNMTE1LjUsMjYuN0g5NC4zbC05LjEtOS41Yy0yLjEtMy44LTYuMi02LjEtMTAuNi02LjFINTMuOWMtNC40LDAtOC41LDIuNC0xMC42LDYuMWwtOS4yLDkuNUgxMi41ICAgYy02LjcsMC0xMi4yLDUuMy0xMi4yLDExLjlWMTA1YzAsNi42LDUuNCwxMS45LDEyLjIsMTEuOWgxMDIuOWM2LjcsMCwxMi4yLTUuMywxMi4yLTExLjlWMzguN0MxMjcuNiwzMi4xLDEyMi4yLDI2LjcsMTE1LjUsMjYuN3ogICAgTTY0LDEwMS4yYy0xNy42LDAtMzEuOS0xNC4zLTMxLjktMzEuOWMwLTE3LjYsMTQuMy0zMS45LDMxLjktMzEuOWMxNy42LDAsMzEuOSwxNC4zLDMxLjksMzEuOUM5NS44LDg3LDgxLjYsMTAxLjIsNjQsMTAxLjJ6ICAgIE02NCw0OC4xYy0xMS43LDAtMjEuMiw5LjUtMjEuMiwyMS4yYzAsMTEuNyw5LjUsMjEuMiwyMS4yLDIxLjJjMTEuNywwLDIxLjItOS41LDIxLjItMjEuMkM4NS4yLDU3LjYsNzUuNyw0OC4xLDY0LDQ4LjF6Ii8+PC9zdmc+Cg==);
+}
+
+.pswp .pswp__caption__exif_focal {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjY2NjY2NjIiBkPSJNMTIgNi41YzMuNzkgMCA3LjE3IDIuMTMgOC44MiA1LjUtMS42NSAzLjM3LTUuMDIgNS41LTguODIgNS41UzQuODMgMTUuMzcgMy4xOCAxMkM0LjgzIDguNjMgOC4yMSA2LjUgMTIgNi41bTAtMkM3IDQuNSAyLjczIDcuNjEgMSAxMmMxLjczIDQuMzkgNiA3LjUgMTEgNy41czkuMjctMy4xMSAxMS03LjVjLTEuNzMtNC4zOS02LTcuNS0xMS03LjV6bTAgNWMxLjM4IDAgMi41IDEuMTIgMi41IDIuNXMtMS4xMiAyLjUtMi41IDIuNS0yLjUtMS4xMi0yLjUtMi41IDEuMTItMi41IDIuNS0yLjVtMC0yYy0yLjQ4IDAtNC41IDIuMDItNC41IDQuNXMyLjAyIDQuNSA0LjUgNC41IDQuNS0yLjAyIDQuNS00LjUtMi4wMi00LjUtNC41LTQuNXoiPjwvcGF0aD48L3N2Zz4K);
+}
+
+.pswp .pswp__caption__exif_fstop {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjY2NjY2NjIiBkPSJNOS40IDEwLjVsNC43Ny04LjI2QzEzLjQ3IDIuMDkgMTIuNzUgMiAxMiAyYy0yLjQgMC00LjYuODUtNi4zMiAyLjI1bDMuNjYgNi4zNS4wNi0uMXpNMjEuNTQgOWMtLjkyLTIuOTItMy4xNS01LjI2LTYtNi4zNEwxMS44OCA5aDkuNjZ6bS4yNiAxaC03LjQ5bC4yOS41IDQuNzYgOC4yNUMyMSAxNi45NyAyMiAxNC42MSAyMiAxMmMwLS42OS0uMDctMS4zNS0uMi0yek04LjU0IDEybC0zLjktNi43NUMzLjAxIDcuMDMgMiA5LjM5IDIgMTJjMCAuNjkuMDcgMS4zNS4yIDJoNy40OWwtMS4xNS0yem0tNi4wOCAzYy45MiAyLjkyIDMuMTUgNS4yNiA2IDYuMzRMMTIuMTIgMTVIMi40NnptMTEuMjcgMGwtMy45IDYuNzZjLjcuMTUgMS40Mi4yNCAyLjE3LjI0IDIuNCAwIDQuNi0uODUgNi4zMi0yLjI1bC0zLjY2LTYuMzUtLjkzIDEuNnoiPjwvcGF0aD48L3N2Zz4=);
+}
+
+.pswp .pswp__caption__exif_shutter {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjY2NjY2NjIiBkPSJNMTUgMUg5djJoNlYxem00LjAzIDYuMzlsMS40Mi0xLjQyYy0uNDMtLjUxLS45LS45OS0xLjQxLTEuNDFsLTEuNDIgMS40MkMxNi4wNyA0Ljc0IDE0LjEyIDQgMTIgNGMtNC45NyAwLTkgNC4wMy05IDlzNC4wMiA5IDkgOSA5LTQuMDMgOS05YzAtMi4xMi0uNzQtNC4wNy0xLjk3LTUuNjF6TTEyIDIwYy0zLjg3IDAtNy0zLjEzLTctN3MzLjEzLTcgNy03IDcgMy4xMyA3IDctMy4xMyA3LTcgN3ptLS4zMi01SDYuMzVjLjU3IDEuNjIgMS44MiAyLjkyIDMuNDEgMy41NmwtLjExLS4wNiAyLjAzLTMuNXptNS45Ny00Yy0uNTctMS42LTEuNzgtMi44OS0zLjM0LTMuNTRMMTIuMjYgMTFoNS4zOXptLTcuMDQgNy44M2MuNDUuMTEuOTEuMTcgMS4zOS4xNyAxLjM0IDAgMi41Ny0uNDUgMy41Ny0xLjE5bC0yLjExLTMuOS0yLjg1IDQuOTJ6TTcuNTUgOC45OUM2LjU5IDEwLjA1IDYgMTEuNDYgNiAxM2MwIC4zNC4wNC42Ny4wOSAxaDQuNzJMNy41NSA4Ljk5em04Ljc5IDguMTRDMTcuMzcgMTYuMDYgMTggMTQuNiAxOCAxM2MwLS4zNC0uMDQtLjY3LS4wOS0xaC00LjM0bDIuNzcgNS4xM3ptLTMuMDEtOS45OEMxMi45IDcuMDYgMTIuNDYgNyAxMiA3Yy0xLjQgMC0yLjY5LjQ5LTMuNzEgMS4yOWwyLjMyIDMuNTYgMi43Mi00Ljd6Ij48L3BhdGg+PC9zdmc+Cg==);
+}
+
+.pswp .pswp__caption__exif_iso {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjY2NjY2NjIiBkPSJNMTkgM0g1Yy0xLjEgMC0yIC45LTIgMnYxNGMwIDEuMS45IDIgMiAyaDE0YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6TTUuNSA3LjVoMnYtMkg5djJoMlY5SDl2Mkg3LjVWOWgtMlY3LjV6TTE5IDE5SDVMMTkgNXYxNHptLTItMnYtMS41aC01VjE3aDV6Ij48L3BhdGg+PC9zdmc+Cg==);
 }

data/spec/intranet/pictures/responder_spec.rb

@@ -339,7 +339,8 @@ RSpec.describe Intranet::Pictures::Responder do
           "  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
     end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: intranet-pictures
 version: !ruby/object:Gem::Version
-  version: 2.1.0
+  version: 2.2.0
 platform: ruby
 authors:
 - Ebling Mis
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-12-25 00:00:00.000000000 Z
+date: 2023-12-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: intranet-core