Contents

/**
 * 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 = '<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});
  }

  // 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
}

// 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;

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
intranet-pictures-2.1.0	lib/intranet/resources/www/jpictures.js
intranet-pictures-2.0.0	lib/intranet/resources/www/jpictures.js
intranet-pictures-1.1.0	lib/intranet/resources/www/jpictures.js