@thegetty/quire-cli 0.20.3 → 0.20.4

package/bin/themes/default/source/js/deepzoom.js

@@ -0,0 +1,186 @@
+//@ts-check
+
+import L from "leaflet";
+import "leaflet-iiif";
+class DeepZoom {
+  // add map array to access map objects outside of Deepzoom class
+  constructor(id, mapArr) {
+    this.id = id;
+    this.el = document.querySelector(`#${this.id}`);
+
+    // remove and refresh before init
+    // @ts-ignore
+    if (figureModal) {
+      if (window["mapID"] != undefined || window["mapID"] != undefined) {
+        window["mapID"].off();
+        window["mapID"].remove();
+      }
+      let node = document.getElementById(id);
+      if (node) {
+        while (node.firstChild) {
+          node.removeChild(node.firstChild);
+        }
+      }
+    }
+
+    this.catalogueEntry = this.el.getAttribute("data-catalogue-entry");
+    this.imageURL = this.el.getAttribute("src");
+    this.iiif = this.el.getAttribute("data-iiif");
+
+    /** 
+     * Leaflet options object
+     * https://leafletjs.com/reference-1.7.1.html#map-option
+     */
+    const options = {
+      maxZoom: this.el.getAttribute('data-zoom-max') || 6,
+      minZoom: 1,
+      scrollWheelZoom: !this.catalogueEntry,
+      touchZoom: !this.catalogueEntry,
+      zoom: 1
+    };
+
+    if (this.imageURL) {
+      let image = new Image();
+      image.src = this.imageURL;
+      this.addImageProcess(image)
+        .then(arr => {
+          this.imgHeight = arr.height;
+          this.imgWidth = arr.width;
+          this.center = [0, 0];
+          this.map = this.createMap(options);
+          // add leaflet objects to array
+          mapArr.push(this.map);
+          if (this.catalogueEntry === undefined) {
+            window["mapID"] = this.map;
+          }
+          this.southWest = this.map.unproject(
+            [0, this.imgHeight],
+            this.map.getMaxZoom() - 1
+          );
+          this.northEast = this.map.unproject(
+            [this.imgWidth, 0],
+            this.map.getMaxZoom() - 1
+          );
+          let bounds = new L.LatLngBounds(this.southWest, this.northEast);
+          this.addTiles(bounds);
+          // well invalidate
+          // this.runMapTimeouts(this.map);
+        })
+        .catch(error => console.error(error));
+    } else if (this.imageURL && this.iiif) {
+      this.center = [0, 0];
+      this.map = this.createMap(options);
+      if (this.catalogueEntry === undefined) {
+        window["mapID"] = this.map;
+      }
+      this.addLayer(this.iiif, this.map);
+      this.runMapTimeouts(this.map);
+    } else {
+      this.center = [0, 0];
+      this.map = this.createMap(options);
+      if (this.catalogueEntry === undefined) {
+        window["mapID"] = this.map;
+      }
+      this.addLayer(this.iiif, this.map);
+      this.runMapTimeouts(this.map);
+    }
+  }
+
+  /**
+   * validateSize
+   * @description
+   * invalidateSize map as a promise
+   * @param {object} map must be an integer
+   */
+  validateSize(map) {
+    return new Promise((resolve, reject) => {
+      if (!map) reject(new Error("No map!"));
+      setTimeout(() => {
+        let modal = document.querySelector(".mfp-content");
+        if (modal) {
+          if (
+            map._container ===
+            modal.getElementsByTagName("figure")[0].children[0]
+          ) {
+            resolve(map.invalidateSize());
+          }
+        } else {
+          resolve(map.invalidateSize());
+        }
+      }, 250);
+    });
+  }
+
+  /**
+   * runMapTimeouts
+   * @description
+   * run map timeout functions
+   * @param {object} map must be an integer
+   */
+  runMapTimeouts(map) {
+    setTimeout(() => {
+      this.validateSize(map);
+    }, 100);
+    if ($(window)) {
+      $(window).on("resize", event => {
+        if (map) {
+          this.validateSize(map);
+        }
+      });
+    }
+  }
+
+  /**
+   * addImageProcess
+   * @description
+   * return an array of the natural height and width of the current image being processed
+   * @param {object} img must be an integer
+   */
+  addImageProcess(img) {
+    return new Promise((resolve, reject) => {
+      img.onload = () => {
+        let arr = [];
+        arr["height"] = img.naturalHeight;
+        arr["width"] = img.naturalWidth;
+        resolve(arr);
+      };
+      img.onerror = reject;
+    });
+  }
+
+  /** 
+   * @param {object} Leaflet options
+   */
+  createMap(options) {
+    return L.map(this.id, {
+      center: [0, 0],
+      crs: L.CRS.Simple,
+      renderer: L.canvas(),
+      ...options
+    });
+  }
+
+  addLayer(json, map) {
+    if (json) {
+      L.tileLayer.iiif(json).addTo(map);
+    }
+  }
+
+  addTiles(bounds) {
+    if (bounds) {
+      this.map.setMaxBounds(bounds);
+      this.map.fitBounds(bounds);
+      let imageOverlay = L.imageOverlay(this.imageURL, bounds, {
+        opacity: 0.0
+      });
+      this.map.addLayer(imageOverlay);
+      imageOverlay.on("load", event => {
+        setTimeout(() => {
+          imageOverlay.setOpacity(1.0);
+        }, 250);
+      });
+    }
+  }
+}
+
+export default DeepZoom;

package/bin/themes/default/source/js/epub.js

@@ -0,0 +1,9 @@
+/**
+ * @fileOverview
+ * @name epub.js
+ * @description This file serves as the entry point for Webpack, the JS library
+ * responsible for building all CSS assets for the EPUBS and MOBI
+ */
+
+// Stylesheets
+import '../css/epub.scss';

package/bin/themes/default/source/js/fullscreen.js

@@ -0,0 +1,190 @@
+(function() {
+  "use strict";
+
+  var document =
+    typeof window !== "undefined" && typeof window.document !== "undefined"
+      ? window.document
+      : {};
+  var isCommonjs = typeof module !== "undefined" && module.exports;
+  var keyboardAllowed =
+    typeof Element !== "undefined" && "ALLOW_KEYBOARD_INPUT" in Element;
+
+  var fn = (function() {
+    var val;
+
+    var fnMap = [
+      [
+        "requestFullscreen",
+        "exitFullscreen",
+        "fullscreenElement",
+        "fullscreenEnabled",
+        "fullscreenchange",
+        "fullscreenerror"
+      ],
+      // New WebKit
+      [
+        "webkitRequestFullscreen",
+        "webkitExitFullscreen",
+        "webkitFullscreenElement",
+        "webkitFullscreenEnabled",
+        "webkitfullscreenchange",
+        "webkitfullscreenerror"
+      ],
+      // Old WebKit (Safari 5.1)
+      [
+        "webkitRequestFullScreen",
+        "webkitCancelFullScreen",
+        "webkitCurrentFullScreenElement",
+        "webkitCancelFullScreen",
+        "webkitfullscreenchange",
+        "webkitfullscreenerror"
+      ],
+      [
+        "mozRequestFullScreen",
+        "mozCancelFullScreen",
+        "mozFullScreenElement",
+        "mozFullScreenEnabled",
+        "mozfullscreenchange",
+        "mozfullscreenerror"
+      ],
+      [
+        "msRequestFullscreen",
+        "msExitFullscreen",
+        "msFullscreenElement",
+        "msFullscreenEnabled",
+        "MSFullscreenChange",
+        "MSFullscreenError"
+      ]
+    ];
+
+    var i = 0;
+    var l = fnMap.length;
+    var ret = {};
+
+    for (; i < l; i++) {
+      val = fnMap[i];
+      if (val && val[1] in document) {
+        for (i = 0; i < val.length; i++) {
+          ret[fnMap[0][i]] = val[i];
+        }
+        return ret;
+      }
+    }
+
+    return false;
+  })();
+
+  var eventNameMap = {
+    change: fn.fullscreenchange,
+    error: fn.fullscreenerror
+  };
+
+  var screenfull = {
+    request: function(elem) {
+      return new Promise(
+        function(resolve) {
+          var request = fn.requestFullscreen;
+
+          var onFullScreenEntered = function() {
+            this.off("change", onFullScreenEntered);
+            resolve();
+          }.bind(this);
+
+          elem = elem || document.documentElement;
+
+          // Work around Safari 5.1 bug: reports support for
+          // keyboard in fullscreen even though it doesn't.
+          // Browser sniffing, since the alternative with
+          // setTimeout is even worse.
+          if (/ Version\/5\.1(?:\.\d+)? Safari\//.test(navigator.userAgent)) {
+            elem[request]();
+          } else {
+            elem[request](keyboardAllowed ? Element.ALLOW_KEYBOARD_INPUT : {});
+          }
+
+          this.on("change", onFullScreenEntered);
+        }.bind(this)
+      );
+    },
+    exit: function() {
+      return new Promise(
+        function(resolve) {
+          if (!this.isFullscreen) {
+            resolve();
+            return;
+          }
+
+          var onFullScreenExit = function() {
+            this.off("change", onFullScreenExit);
+            resolve();
+          }.bind(this);
+
+          document[fn.exitFullscreen]();
+
+          this.on("change", onFullScreenExit);
+        }.bind(this)
+      );
+    },
+    toggle: function(elem) {
+      return this.isFullscreen ? this.exit() : this.request(elem);
+    },
+    onchange: function(callback) {
+      this.on("change", callback);
+    },
+    onerror: function(callback) {
+      this.on("error", callback);
+    },
+    on: function(event, callback) {
+      var eventName = eventNameMap[event];
+      if (eventName) {
+        document.addEventListener(eventName, callback, false);
+      }
+    },
+    off: function(event, callback) {
+      var eventName = eventNameMap[event];
+      if (eventName) {
+        document.removeEventListener(eventName, callback, false);
+      }
+    },
+    raw: fn
+  };
+
+  if (!fn) {
+    if (isCommonjs) {
+      module.exports = false;
+    } else {
+      window.screenfull = false;
+    }
+
+    return;
+  }
+
+  Object.defineProperties(screenfull, {
+    isFullscreen: {
+      get: function() {
+        return Boolean(document[fn.fullscreenElement]);
+      }
+    },
+    element: {
+      enumerable: true,
+      get: function() {
+        return document[fn.fullscreenElement];
+      }
+    },
+    enabled: {
+      enumerable: true,
+      get: function() {
+        // Coerce to boolean in case of old WebKit
+        return Boolean(document[fn.fullscreenEnabled]);
+      }
+    }
+  });
+
+  if (isCommonjs) {
+    module.exports = screenfull;
+    // TODO: remove this in the next major version
+    module.exports.default = screenfull;
+  } else {
+    window.screenfull = screenfull;
+  }
+})();

package/bin/themes/default/source/js/helper.js

@@ -0,0 +1,197 @@
+import SmoothScroll from "smooth-scroll";
+import fullscreen from "./fullscreen";
+
+/**
+ * @fileOverview
+ * @name helper.js
+ * @description This file contains functions that are used to aid core concepts in other files.
+ * Also some of these functions are more utility in nature.
+ */
+
+/**
+ * Prevent and store scroll for expanded menu
+ * @description When the show/hide for nav is triggered we want to
+ * lock the position of the users state in scroll and also prevent
+ * the nav from going back to 0,0 in fixed state. These functions prevent that.
+ */
+export const preventDefault = e => {
+  e = e || window.event;
+  if (e.preventDefault) e.preventDefault();
+  e.returnValue = false;
+};
+
+const preventDefaultForScrollKeys = e => {
+  /*
+    left: 37, 
+    up: 38, 
+    right: 39, 
+    down: 40, 
+    spacebar: 32, 
+    pageup: 33, 
+    pagedown: 34, 
+    end: 35, 
+    home: 36
+    */
+  let keys = {
+    37: 1,
+    38: 1,
+    39: 1,
+    40: 1
+  };
+  if (keys[e.keyCode]) {
+    preventDefault(e);
+    return false;
+  }
+};
+
+/**
+ * function to trigger and use smooth scrolling, docs: https://www.npmjs.com/package/smooth-scroll
+ * scroll behavior specifications:
+ * - https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
+ * - https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo
+ */
+export const smoothScroll = e => {
+  return new SmoothScroll('a[href*="#"]', {
+    // Selectors
+    ignore: ".quire-navbar, .quire-figure a", // Selector for links to ignore (must be a valid CSS selector)
+    header: ".quire-navbar", // Selector for fixed headers (must be a valid CSS selector)
+    topOnEmtyHash: true, // Scroll to the top of the page for links with href="#"
+    // Speed & Duration
+    speed: 500, // Integer. Amount of time in milliseconds it should take to scroll 1000px
+    speedAsDuration: false, // If true, use speed as the total duration of the scroll animation
+    durationMax: null, // Integer. The maximum amount of time the scroll animation should take
+    durationMin: null, // Integer. The minimum amount of time the scroll animation should take
+    clip: true, // If true, adjust scroll distance to prevent abrupt stops near the bottom of the page
+    offset: 50, // Integer or Function returning an integer. How far to offset the scrolling anchor location in pixels
+    // Easing
+    easing: "easeInOutCubic",
+    // History
+    updateURL: true, // Update the URL on scroll
+    popstate: true, // Animate scrolling with the forward/backward browser buttons (requires updateURL to be true)
+    emitEvents: true // Emit custom events
+  });
+};
+
+/**
+ * Disable scroll on element
+ * @param  {Element} element The element that will be disabled
+ */
+export const disableScroll = element => {
+  document.querySelector("html").style.overflow = "hidden";
+  if (element.addEventListener)
+    // older FF
+    element.addEventListener("DOMMouseScroll", preventDefault, false);
+  element.onwheel = preventDefault; // modern standard
+  element.onmousewheel = element.onmousewheel = preventDefault; // older browsers, IE
+  element.ontouchmove = preventDefault; // mobile
+  element.onkeydown = preventDefaultForScrollKeys;
+};
+
+/**
+ * Enable scroll on element
+ * @param  {Element} element The element that will be enabled
+ */
+export const enableScroll = element => {
+  document.querySelector("html").style.overflow = "";
+  if (element.removeEventListener)
+    element.removeEventListener("DOMMouseScroll", preventDefault, false);
+  element.onmousewheel = element.onmousewheel = null;
+  element.onwheel = null;
+  element.ontouchmove = null;
+  element.onkeydown = null;
+};
+
+/**
+ * Preload Images
+ * @param  {Array} srcs array of images
+ * @return {Promise}
+ */
+export const preloadImages = (srcs) => {
+  return new Promise((resolve) => {
+    if (!srcs.length) resolve();
+    for (let i = srcs.length; i >= 0; --i) {
+      const img = new Image();
+      img.onload = () => {
+        if (i <= 0) resolve();
+      };
+      img.src = srcs[i];
+    }
+  });
+};
+
+/**
+ * Stop an iframe or HTML5 <video> from playing
+ * @param  {Element} element The element that contains the video
+ */
+export const stopVideo = element => {
+  let iframe = element.querySelector("iframe");
+  let video = element.querySelector("video");
+  if (iframe) {
+    let iframeSrc = iframe.src;
+    iframe.src = iframeSrc;
+  }
+  if (video) {
+    video.pause();
+  }
+};
+
+/**
+ * @description toggle fullscreen for entry leaflet images
+ * Also pass in the maps array to invalidate size after transition.
+ * @param {array} mapArr must be an integer
+ * @param {element} fullscreenButton must be an element
+ * @param {element} elementToFullscreen must be an element
+ */
+export const toggleFullscreen = (
+  mapArr,
+  fullscreenButton,
+  elementToFullscreen
+) => {
+  /**
+   * validateSize
+   * @description
+   * invalidateSize map as a promise
+   * @param {object} map must be an object
+   */
+  function validateSize(map) {
+    return new Promise((resolve, reject) => {
+      if (!map) reject(new Error("No map!"));
+      setTimeout(() => {
+        let modal = document.querySelector(".mfp-content");
+        if (modal) {
+          if (
+            map._container ===
+            modal.getElementsByTagName("figure")[0].children[0]
+          ) {
+            resolve(map.invalidateSize());
+          }
+        } else {
+          resolve(map.invalidateSize());
+        }
+      }, 250);
+    });
+  }
+
+  const el = elementToFullscreen;
+  let toggleFullscreen = fullscreenButton;
+  if (toggleFullscreen) {
+    toggleFullscreen.addEventListener("click", event => {
+      event.stopPropagation();
+      event.preventDefault();
+      if (fullscreen.enabled && el) {
+        el.classList.toggle("fullscreen", !el.classList.contains("fullscreen"));
+        // @ts-ignore
+        event.target.classList.toggle(
+          "fullscreen",
+          // @ts-ignore
+          !event.target.classList.contains("fullscreen")
+        );
+        fullscreen.toggle(el);
+        mapArr.forEach(v => {
+          validateSize(v).catch(err => console.log(err));
+        });
+      }
+      return false;
+    });
+  }
+};

package/bin/themes/default/source/js/map.js

@@ -0,0 +1,94 @@
+import L from 'leaflet'
+import 'leaflet-fullscreen'
+// import leafletImage from 'leaflet-image'
+
+class Map {
+  constructor(id) {
+    
+    // remove and refresh before init
+    if (figureModal) {
+      if (window.mapID != undefined || window.mapID != undefined) {
+        window.mapID.off()
+        window.mapID.remove()
+      }
+      let node = document.getElementById(id);
+      if (node) {
+        while (node.firstChild) {
+          node.removeChild(node.firstChild)
+        }  
+      }
+    }
+  
+    
+    if (id) {
+      this.el = id
+      this.tiles = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+      this.attribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
+      this.data = $(`#${this.el}`).data('geojson')
+      this.center = this.getCoordinates()
+      this.defaultZoom = 6
+      this.map = this.createMap()
+      window.mapID = this.map
+      this.addTiles()
+ 
+      this.map.on('fullscreenchange', function () {
+          this.invalidateSize(true)
+      })
+  
+      if (this.data) {
+        this.getData()
+      }
+  
+      setTimeout(() => {
+        this.map.invalidateSize()
+      }, 100)
+    }
+  }
+
+  createMap() {
+    return L.map(this.el, {
+      fullscreenControl: {
+          pseudoFullscreen: false // if true, fullscreen to page width and height
+      }
+    })
+    .setView(this.center, this.defaultZoom)
+  }
+
+  addTiles() {
+    L.tileLayer(this.tiles, {
+      // options
+      attribution: this.attribution
+    }).addTo(this.map)
+  }
+
+  getCoordinates() {
+    let lat = $('#' + this.el).data('lat')
+    let long = $('#' + this.el).data('long')
+    return [lat, long]
+  }
+
+  getData() {
+    $.getJSON(this.data, json => {
+      L.geoJson(json, {
+        // Change the style here as desired
+        pointToLayer: (feature, latlng) => {
+          return L.circleMarker(latlng, {
+            radius: 8,
+            fillColor: '#333',
+            color: '#000',
+            weight: 1,
+            opacity: 1,
+            fillOpacity: 0.75
+          })
+        },
+        // Change styles here as desired
+        onEachFeature: (feature, layer) => {
+          let options = { minWidth: 100, maxHeight: 250 }
+          layer.bindPopup(feature.properties.description, options)
+        }
+      }).addTo(this.map)
+    })
+  }
+}
+
+export default Map