intranet-pictures 1.0.6 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 628a14d0155be72d18ea879e45225bfa736d3e8ff85f737245595c7faba201bb
-  data.tar.gz: d9156887f2265f2dcfc622aab9ff63a87ff4b57eecd3b894b6bab8b21479250e
+  metadata.gz: 375bdf2fb9b0a0354f3066e44c59a4426077916642a248a9180aabc3842628d5
+  data.tar.gz: 34b5b68ae804b7a441320eee02880726ce8ca85eb15a813f9e49ab99c64491a6
 SHA512:
-  metadata.gz: 98cba0984d30e6ad3c6086bee626376e8775624628ecc5ebac979b96e2ddb6026c6ef88a96e9f0471b16608d2b2eb6070fec3833e7f14646c2a1f78c086b69e2
-  data.tar.gz: 8af2829b1308cbdbf28bacfbb81cd89c0ad8d5216c9084eccd8ca3b9b75b489d34925a58a07f36a4055c1f210b47a6c04b87732a57e8b7b7078956a527fa75ef
+  metadata.gz: 7ba048e77bb9b56447962e17c005c28e14f3ef30795cc218610e485be2ab7ef2da3df9faa0a189704391bae6d55bb75245ba925899093b4d56a58dfdf394cfad
+  data.tar.gz: 99eac1be0abd8986a67e3fe0ea09700a74304a053d3b33cff10c7fe7c30850942232655e48c42d2064de366829a01a835f8fc101e1052d1ec0cd961c82425464

data/lib/intranet/pictures/responder.rb

@@ -87,6 +87,7 @@ module Intranet
         when %r{^/browse_\w+\.html$}
           serve_groups(path.gsub(%r{^/browse_(\w+)\.html$}, '\\1'), query)
         when %r{^/api/} then serve_api(path.gsub(%r{^/api}, ''), query)
+        when %r{^/i18n\.js$} then serve_i18n_js
         else super(path, query)
         end
       end
@@ -97,22 +98,6 @@ module Intranet
         @provider.title
       end
 
-      # Provides the list of Cascade Style Sheets (CSS) dependencies for this module.
-      # @return [Array<String>] The list of CSS dependencies.
-      def css_dependencies
-        super + ['design/style.css',
-                 'design/photoswipe/photoswipe.css',
-                 'design/photoswipe/default-skin/default-skin.css']
-      end
-
-      # Provides the list of Javascript files (JS) dependencies for this module.
-      # @return [Array<String>] The list of JS dependencies.
-      def js_dependencies
-        super + ['design/jpictures.js',
-                 'design/photoswipe/photoswipe.min.js',
-                 'design/photoswipe/photoswipe-ui-default.min.js']
-      end
-
       private
 
       # Extract a selector from the given +query+.
@@ -141,6 +126,19 @@ module Intranet
         raise KeyError # incorrect value for 'sort_order'
       end
 
+      # Provides the list of required stylesheets.
+      # @return [Array<String>] The list of required stylesheets.
+      def stylesheets
+        ['design/style.css', 'design/photoswipe/photoswipe.css',
+         'design/photoswipe/photoswipe-dynamic-caption-plugin.css']
+      end
+
+      # Provides the list of required script files.
+      # @return [Array<Hash<Symbol,String>>] The list of required scripts.
+      def scripts
+        [{ src: 'design/jpictures.js', type: 'module' }]
+      end
+
       ##########################################################################
       ###            Servicing of the HTML "display-able" content            ###
       ##########################################################################
@@ -195,7 +193,8 @@ module Intranet
 
       def serve_home
         content = to_markup('pictures_home', nav: make_nav)
-        [206, 'text/html', { content: content, title: title }]
+        [206, 'text/html',
+         { content: content, title: title, stylesheets: stylesheets, scripts: scripts }]
       rescue KeyError
         [404, '', '']
       end
@@ -204,11 +203,21 @@ module Intranet
         groups = @provider.list_groups(type, selector(query), sort_by(query), sort_order(query))
         content = to_markup('pictures_browse', nav: make_nav(type, query), group_type: type,
                                                filters: selector(query), groups: groups)
-        [206, 'text/html', { content: content, title: title }]
+        [206, 'text/html',
+         { content: content, title: title, stylesheets: stylesheets, scripts: scripts }]
       rescue KeyError
         [404, '', '']
       end
 
+      def serve_i18n_js
+        [200, 'text/javascript',
+         "export default {\n" \
+         "  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')}' };"]
+      end
+
       ##########################################################################
       ###        Servicing of the REST API (raw JSON data & pictures)        ###
       ##########################################################################

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 = '1.0.6'
+    VERSION = '1.1.0'
 
     # The URL of the gem homepage.
     HOMEPAGE_URL = 'https://rubygems.org/gems/intranet-pictures'

data/lib/intranet/resources/haml/pictures_browse.haml

@@ -11,4 +11,3 @@
               - if group['brief']
                 %br
                 %em= group['brief']
-= to_markup 'pictures_photoswipe'

data/lib/intranet/resources/haml/pictures_home.haml

@@ -31,6 +31,3 @@
                 - if group['brief']
                   %br
                   %em= group['brief']
-
-- unless recent_groups.empty?
-  = to_markup 'pictures_photoswipe'

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

@@ -7,7 +7,6 @@ en:
     see_more: 'See more results'
     viewer:
       close: 'Close'
-      fullscreen: 'Fullscreen'
       zoom: 'Zoom'
       previous: 'Previous image'
       next: 'Next image'

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

@@ -7,7 +7,6 @@ fr:
     see_more: 'Afficher plus de résultats'
     viewer:
       close: 'Fermer'
-      fullscreen: 'Plein écran'
       zoom: 'Agrandir'
       previous: 'Image précédente'
       next: 'Image suivante'

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

@@ -4,6 +4,14 @@
  */
 "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');
@@ -14,29 +22,39 @@ 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;

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

@@ -0,0 +1,47 @@
+.pswp__dynamic-caption {
+  color: #fff;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
+  transition: opacity 120ms linear !important; /* override default */
+}
+
+.pswp-caption-content {
+  display: none;
+}
+
+.pswp__dynamic-caption a {
+  color: #fff;
+}
+
+.pswp__dynamic-caption--faded {
+  opacity: 0 !important;
+}
+
+.pswp__dynamic-caption--aside {
+  width: auto;
+  max-width: 300px;
+  padding: 20px 15px 20px 20px;
+  margin-top: 70px;
+}
+
+.pswp__dynamic-caption--below {
+  width: auto;
+  max-width: 700px;
+  padding: 15px 0 0;
+}
+
+.pswp__dynamic-caption--on-hor-edge {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.pswp__dynamic-caption--mobile {
+  width: 100%;
+  top: auto;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.5);
+  padding: 10px 15px;
+}

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

@@ -0,0 +1,400 @@
+/**
+ * PhotoSwipe Dynamic Caption plugin v1.1.0
+ * https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin
+ * 
+ * By https://dimsemenov.com
+ */
+
+const defaultOptions = {
+  captionContent: '.pswp-caption-content',
+  type: 'auto',
+  horizontalEdgeThreshold: 20,
+  mobileCaptionOverlapRatio: 0.3,
+  mobileLayoutBreakpoint: 600,
+};
+
+class PhotoSwipeDynamicCaption {
+  constructor(lightbox, options) {
+    this.options = {
+      ...defaultOptions,
+      ...options
+    };
+
+    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();
+        }
+      });
+    });
+  }
+
+  initCaption() {
+    const { pswp } = this;
+
+    pswp.on('change', () => {
+      this.updateCaptionHTML(); 
+      this.updateCurrentCaptionPosition();
+
+      // make sure caption is displayed after slides are switched
+      this.showCaption();
+    });
+
+    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();
+        }
+      }
+    });
+
+    // hide caption if zoomed
+    pswp.on('zoomPanUpdate', () => {
+      if (pswp.currSlide.currZoomLevel > pswp.currSlide.zoomLevels.initial) {
+        this.hideCaption();
+      } else {
+        this.showCaption();
+      }
+    });
+
+    pswp.on('beforeZoomTo', (e) => {
+      const { currSlide } = pswp;
+
+      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;
+        }
+      }
+    });
+  }
+
+  useMobileLayout() {
+    const { mobileLayoutBreakpoint } = this.options;
+
+    if (typeof mobileLayoutBreakpoint === 'function') {
+      return mobileLayoutBreakpoint.call(this);
+    } else if (typeof mobileLayoutBreakpoint === 'number') {
+      if (window.innerWidth < mobileLayoutBreakpoint) {
+        return true;
+      }
+    }
+    
+    return false;
+  }
+
+  hideCaption() {
+    if (!this.isCaptionHidden) {
+      this.isCaptionHidden = true;
+      this.captionElement.classList.add('pswp__dynamic-caption--faded');
+
+      // Disable caption visibility with the delay, so it's not interactable 
+      if (this.captionFadeTimeout) {
+        clearTimeout(this.captionFadeTimeout);
+      }
+      this.captionFadeTimeout = setTimeout(() => {
+        this.captionElement.style.visibility = 'hidden';
+        this.captionFadeTimeout = null;
+      }, 400);
+    }
+  }
+
+  showCaption() {
+    if (this.isCaptionHidden) {
+      this.isCaptionHidden = false;
+      this.captionElement.style.visibility = 'visible';
+      
+      clearTimeout(this.captionFadeTimeout);
+      this.captionFadeTimeout = setTimeout(() => {
+        this.captionElement.classList.remove('pswp__dynamic-caption--faded');
+        this.captionFadeTimeout = null;
+      }, 50);
+    }
+  }
+
+  setCaptionPosition(x, y) {
+    const isOnHorizontalEdge = (x <= this.options.horizontalEdgeThreshold);
+    this.captionElement.classList[
+      isOnHorizontalEdge ? 'add' : 'remove'
+    ]('pswp__dynamic-caption--on-hor-edge');
+
+    this.captionElement.style.left = x + 'px';
+    this.captionElement.style.top = y + 'px';
+  }
+
+  setCaptionWidth(captionEl, width) {
+    if (!width) {
+      captionEl.style.removeProperty('width');
+    } else {
+      captionEl.style.width = width + 'px';
+    }
+  }
+
+  setCaptionType(captionEl, type) {
+    const prevType = captionEl.dataset.pswpCaptionType;
+    if (type !== prevType) {
+      captionEl.classList.add('pswp__dynamic-caption--' + type);
+      captionEl.classList.remove('pswp__dynamic-caption--' + prevType);
+      captionEl.dataset.pswpCaptionType = type;
+    }
+  }
+
+  updateCurrentCaptionPosition() {
+    const slide = this.pswp.currSlide;
+
+    if (!slide.dynamicCaptionType) {
+      return;
+    }
+
+    if (slide.dynamicCaptionType === 'mobile') {
+      this.setCaptionType(this.captionElement, slide.dynamicCaptionType);
+      
+      this.captionElement.style.removeProperty('left');
+      this.captionElement.style.removeProperty('top');
+      this.setCaptionWidth(this.captionElement, 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.setCaptionPosition(
+        this.pswp.currSlide.bounds.center.x + imageWidth,
+        this.pswp.currSlide.bounds.center.y
+      );
+      this.setCaptionWidth(this.captionElement, false);
+    } else if (slide.dynamicCaptionType === 'below') {
+      this.setCaptionPosition(
+        this.pswp.currSlide.bounds.center.x,
+        this.pswp.currSlide.bounds.center.y + imageHeight
+      );
+      this.setCaptionWidth(this.captionElement, 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;
+
+    if (!captionHTML) {
+      slide.dynamicCaptionType = false;
+      return;
+    }
+
+    this.storeOriginalPanAreaSize(slide);
+
+    slide.bounds.update(slide.zoomLevels.initial);
+    
+    if (this.useMobileLayout()) {
+      slide.dynamicCaptionType = 'mobile';
+      useMobileVersion = true;
+    } else {
+      if (this.options.type === 'auto') {
+        if (slide.bounds.center.x > slide.bounds.center.y) {
+          slide.dynamicCaptionType = 'aside';
+        } else {
+          slide.dynamicCaptionType = 'below';
+        }
+      } else {
+        slide.dynamicCaptionType = 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(this.tempCaption, slide.dynamicCaptionType);
+
+    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;
+      const horizontalLeftover = (slide.panAreaSize.x - horizontalEnding);
+
+      if (horizontalLeftover <= captionWidth) {
+        slide.panAreaSize.x -= captionWidth;
+        this.recalculateZoomLevelAndBounds(slide);
+      } else {
+        // do nothing, caption will fit aside without any adjustments
+      }
+    } else if (slide.dynamicCaptionType === 'below' || useMobileVersion) {
+      this.setCaptionWidth(
+        this.tempCaption, 
+        useMobileVersion ? this.pswp.viewportSize.x : imageWidth
+      );
+      this.tempCaption.innerHTML = this.getCaptionHTML(e.slide);
+      captionSize = this.measureCaptionSize(this.tempCaption, e.slide);
+      const captionHeight = captionSize.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;
+
+      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);
+
+        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);
+        }
+      }
+
+      
+      
+      // 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();
+    }
+  }
+
+  measureCaptionSize(captionEl, slide) {
+    const rect = captionEl.getBoundingClientRect();
+    const event = this.pswp.dispatch('dynamicCaptionMeasureSize', {
+      captionEl,
+      slide,
+      captionSize: {
+        x: rect.width,
+        y: rect.height
+      }
+    });
+    return event.captionSize;
+  }
+
+  recalculateZoomLevelAndBounds(slide) {
+    slide.zoomLevels.update(slide.width, slide.height, slide.panAreaSize);
+    slide.bounds.update(slide.zoomLevels.initial);
+  }
+
+  storeAdjustedPanAreaSize(slide) {
+    if (!slide.__dcAdjustedPanAreaSize) {
+      slide.__dcAdjustedPanAreaSize = {};
+    }
+    slide.__dcAdjustedPanAreaSize.x = slide.panAreaSize.x;
+    slide.__dcAdjustedPanAreaSize.y = slide.panAreaSize.y;
+  }
+
+  storeOriginalPanAreaSize(slide) {
+    if (!slide.__dcOriginalPanAreaSize) {
+      slide.__dcOriginalPanAreaSize = {};
+    }
+    slide.__dcOriginalPanAreaSize.x = slide.panAreaSize.x;
+    slide.__dcOriginalPanAreaSize.y = slide.panAreaSize.y;
+  }
+
+  getCaptionHTML(slide) {
+    if (typeof this.options.captionContent === 'function') {
+      return this.options.captionContent.call(this, slide);
+    }
+
+    const currSlideElement = slide.data.element;
+    let captionHTML = '';
+    if (currSlideElement) {
+      const hiddenCaption = currSlideElement.querySelector(this.options.captionContent);
+      if (hiddenCaption) {
+        // get caption from element with class pswp-caption-content
+        captionHTML = hiddenCaption.innerHTML;
+      } else {
+        const img = currSlideElement.querySelector('img');
+        if (img) {
+          // get caption from alt attribute
+          captionHTML = img.getAttribute('alt');
+        }
+      }
+    }
+    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;