viewerjs 1.12.0 → 1.14.0

package/src/js/others.js

@@ -1,6 +1,8 @@
 import {
   ACTION_MOVE,
+  ACTION_ROTATE,
   ACTION_SWITCH,
+  ACTION_TRANSFORM,
   ACTION_ZOOM,
   CLASS_HIDE,
   CLASS_OPEN,
@@ -13,6 +15,7 @@ import {
   addListener,
   dispatchEvent,
   forEach,
+  getMaxRotateDegree,
   getMaxZoomRatio,
   isFunction,
   isPlainObject,
@@ -106,10 +109,14 @@ export default {
       });
     }
 
-    if (dispatchEvent(element, EVENT_SHOWN) === false) {
+    if (dispatchEvent(element, EVENT_SHOWN, {
+      originalEvent: this.showOriginalEvent || null,
+    }) === false) {
       return;
     }
 
+    this.showOriginalEvent = null;
+
     if (this.ready && this.isShown && !this.hiding) {
       this.view(this.index);
     }
@@ -149,14 +156,18 @@ export default {
         });
       }
 
-      dispatchEvent(element, EVENT_HIDDEN, null, {
+      dispatchEvent(element, EVENT_HIDDEN, {
+        originalEvent: this.hideOriginalEvent || null,
+      }, {
         cancelable: false,
       });
+
+      this.hideOriginalEvent = null;
     }
   },
 
   requestFullscreen(options) {
-    const document = this.element.ownerDocument;
+    const { ownerDocument: document } = this;
 
     if (this.fulled && !(
       document.fullscreenElement
@@ -185,7 +196,7 @@ export default {
   },
 
   exitFullscreen() {
-    const document = this.element.ownerDocument;
+    const { ownerDocument: document } = this;
 
     if (this.fulled && (
       document.fullscreenElement
@@ -223,13 +234,54 @@ export default {
       case ACTION_MOVE:
         if (offsetX !== 0 || offsetY !== 0) {
           this.pointerMoved = true;
-          this.move(offsetX, offsetY, event);
+          this.actionEvent = event;
+          this.move(offsetX, offsetY);
         }
         break;
 
       // Zoom the current image
       case ACTION_ZOOM:
-        this.zoom(getMaxZoomRatio(pointers), false, null, event);
+        if (options.zoomable && options.zoomOnTouch) {
+          const zoomRatio = getMaxZoomRatio(pointers);
+
+          if (zoomRatio !== 0) {
+            this.actionEvent = event;
+            this.zoom(zoomRatio);
+          }
+        }
+        break;
+
+      // Rotate the current image
+      case ACTION_ROTATE:
+        if (options.rotatable && options.rotateOnTouch) {
+          const rotateDegree = getMaxRotateDegree(pointers);
+
+          if (rotateDegree !== 0) {
+            this.actionEvent = event;
+            this.rotate(rotateDegree);
+          }
+        }
+        break;
+
+      // Transform the current image
+      case ACTION_TRANSFORM:
+        if (options.zoomable && options.zoomOnTouch) {
+          const zoomRatio = getMaxZoomRatio(pointers);
+
+          if (zoomRatio !== 0) {
+            this.actionEvent = event;
+            this.zoom(zoomRatio);
+          }
+        }
+
+        if (options.rotatable && options.rotateOnTouch) {
+          const rotateDegree = getMaxRotateDegree(pointers);
+
+          if (rotateDegree !== 0) {
+            this.actionEvent = event;
+            this.rotate(rotateDegree);
+          }
+        }
         break;
 
       case ACTION_SWITCH: {
@@ -241,6 +293,8 @@ export default {
           // Empty `pointers` as `touchend` event will not be fired after swiped in iOS browsers.
           this.pointers = {};
 
+          this.actionEvent = event;
+
           if (offsetX > 1) {
             this.prev(options.loop);
           } else if (offsetX < -1) {

package/src/js/render.js

@@ -1,4 +1,5 @@
 import {
+  CLASS_ACTIVE,
   CLASS_LOADING,
   CLASS_TRANSITION,
   EVENT_ERROR,
@@ -11,11 +12,15 @@ import {
   addListener,
   assign,
   forEach,
+  getData,
   getImageNameFromURL,
   getImageNaturalSizes,
   getTransforms,
   hasClass,
+  inheritAttributes,
   isNumber,
+  isPlainObject,
+  isTransitionEnabled,
   removeClass,
   removeListener,
   setData,
@@ -31,7 +36,7 @@ export default {
   },
 
   initBody() {
-    const { ownerDocument } = this.element;
+    const { ownerDocument } = this;
     const body = ownerDocument.body || ownerDocument.documentElement;
 
     this.body = body;
@@ -73,14 +78,45 @@ export default {
     }
   },
 
-  initList() {
+  initList(viewIndex = this.index) {
     const { element, options, list } = this;
     const items = [];
+    const navbarOptions = isPlainObject(options.navbar) ? options.navbar : {};
+    const probe = document.createElement('li');
+
+    if (!this.containerData) {
+      this.initContainer();
+    }
+
+    list.appendChild(probe);
+    const itemWidth = probe.offsetWidth + parseInt(window.getComputedStyle(probe).marginLeft, 10);
+
+    list.removeChild(probe);
+
+    let visibleItemCount = isNumber(navbarOptions.visibleItemCount)
+      ? Math.floor(navbarOptions.visibleItemCount)
+      : Math.floor(this.containerData.width / itemWidth);
+
+    visibleItemCount = Math.min(visibleItemCount, this.length);
+
+    const start = visibleItemCount > 0
+      ? Math.min(
+        Math.max(0, viewIndex - Math.floor(visibleItemCount / 2)),
+        Math.max(0, this.length - visibleItemCount),
+      )
+      : 0;
+    const end = visibleItemCount > 0
+      ? Math.min(this.length, start + visibleItemCount)
+      : this.length;
 
     // initList may be called in this.update, so should keep idempotent
     list.innerHTML = '';
 
     forEach(this.images, (image, index) => {
+      if (visibleItemCount > 0 && (index < start || index >= end)) {
+        return;
+      }
+
       const { src } = image;
       const alt = image.alt || getImageNameFromURL(src);
       const url = this.getImageURL(image);
@@ -89,13 +125,7 @@ export default {
         const item = document.createElement('li');
         const img = document.createElement('img');
 
-        forEach(options.inheritedAttributes, (name) => {
-          const value = image.getAttribute(name);
-
-          if (value !== null) {
-            img.setAttribute(name, value);
-          }
-        });
+        inheritAttributes(img, image, options.inheritedAttributes);
 
         if (options.navbar) {
           img.src = src || url;
@@ -119,6 +149,15 @@ export default {
 
     this.items = items;
 
+    if (this.viewed) {
+      const activeItem = this.getItem(this.index);
+
+      if (activeItem) {
+        addClass(activeItem, CLASS_ACTIVE);
+        activeItem.setAttribute('aria-selected', true);
+      }
+    }
+
     forEach(items, (item) => {
       const image = item.firstElementChild;
       let onLoad;
@@ -152,7 +191,7 @@ export default {
       });
     });
 
-    if (options.transition) {
+    if (isTransitionEnabled(options, 'view')) {
       addListener(element, EVENT_VIEWED, () => {
         addClass(list, CLASS_TRANSITION);
       }, {
@@ -161,9 +200,24 @@ export default {
     }
   },
 
+  getItem(index) {
+    let item;
+
+    forEach(this.items, (candidate) => {
+      if (Number(getData(candidate, 'index')) === index) {
+        item = candidate;
+        return false;
+      }
+
+      return true;
+    });
+
+    return item;
+  },
+
   renderList() {
     const { index } = this;
-    const item = this.items[index];
+    const item = this.getItem(index);
 
     if (!item) {
       return;
@@ -176,9 +230,9 @@ export default {
 
     // Place the active item in the center of the screen
     setStyle(this.list, assign({
-      width: outerWidth * this.length - gutter,
+      width: outerWidth * this.items.length - gutter,
     }, getTransforms({
-      translateX: ((this.viewerData.width - offsetWidth) / 2) - outerWidth * index,
+      translateX: ((this.viewerData.width - offsetWidth) / 2) - item.offsetLeft,
     })));
   },
 
@@ -277,9 +331,27 @@ export default {
       marginTop: imageData.y,
     }, getTransforms(imageData)));
 
+    if (this.magnifierPoint) {
+      this.renderMagnifier();
+    }
+
     if (done) {
-      if ((this.viewing || this.moving || this.rotating || this.scaling || this.zooming)
-        && this.options.transition
+      let action = false;
+
+      if (this.viewing) {
+        action = 'view';
+      } else if (this.moving) {
+        action = 'move';
+      } else if (this.rotating) {
+        action = 'rotate';
+      } else if (this.scaling) {
+        action = 'scale';
+      } else if (this.zooming) {
+        action = 'zoom';
+      }
+
+      if (action
+        && isTransitionEnabled(this.options, action)
         && hasClass(image, CLASS_TRANSITION)) {
         const onTransitionEnd = () => {
           this.imageRendering = false;

package/src/js/template.js

@@ -1,15 +1,22 @@
 export default (
   '<div class="viewer-container" tabindex="-1" touch-action="none">'
     + '<div class="viewer-canvas"></div>'
-    + '<div class="viewer-footer">'
-      + '<div class="viewer-title"></div>'
-      + '<div class="viewer-toolbar"></div>'
-      + '<div class="viewer-navbar">'
+    + '<div class="viewer-magnifier" aria-hidden="true">'
+      + '<img class="viewer-magnifier-image" alt="">'
+    + '</div>'
+    + '<div class="viewer-navigation" aria-hidden="true">'
+      + '<div class="viewer-prev" data-viewer-action="prev" role="button" aria-label="Previous"></div>'
+      + '<div class="viewer-next" data-viewer-action="next" role="button" aria-label="Next"></div>'
+    + '</div>'
+    + '<div class="viewer-footer" aria-hidden="true">'
+      + '<div class="viewer-title" aria-hidden="true"></div>'
+      + '<div class="viewer-toolbar" aria-hidden="true"></div>'
+      + '<div class="viewer-navbar" aria-hidden="true">'
         + '<ul class="viewer-list" role="navigation"></ul>'
       + '</div>'
     + '</div>'
     + '<div class="viewer-tooltip" role="alert" aria-hidden="true"></div>'
-    + '<div class="viewer-button" data-viewer-action="mix" role="button"></div>'
-    + '<div class="viewer-player"></div>'
+    + '<div class="viewer-button" data-viewer-action="mix" role="button" aria-hidden="true"></div>'
+    + '<div class="viewer-player" aria-hidden="true"></div>'
   + '</div>'
 );

package/src/js/utilities.js

@@ -16,6 +16,33 @@ export function isString(value) {
   return typeof value === 'string';
 }
 
+const MODIFIER_KEY_PROPERTIES = {
+  ctrl: 'ctrlKey',
+  shift: 'shiftKey',
+  alt: 'altKey',
+  meta: 'metaKey',
+};
+
+/**
+ * Check if a wheel option (`zoomOnWheel` or `slideOnWheel`) takes effect for the given wheel event.
+ * @param {boolean | string} option - The option value.
+ * @param {WheelEvent} event - The wheel event.
+ * @returns {boolean} Returns `true` if the option takes effect for the event, else `false`.
+ */
+export function isWheelActionEnabled(option, event) {
+  if (!option) {
+    return false;
+  }
+
+  if (option === true) {
+    return true;
+  }
+
+  return isString(option) && option
+    .split('+')
+    .every((key) => event[MODIFIER_KEY_PROPERTIES[key.trim().toLowerCase()]]);
+}
+
 /**
  * Check if the given value is not a number.
  */
@@ -106,6 +133,34 @@ export function forEach(data, callback) {
   return data;
 }
 
+/**
+ * Inherit attributes from the original image.
+ * @param {Element} image - The target image.
+ * @param {Element} originalImage - The original image.
+ * @param {Array} inheritedAttributes - The attributes to inherit.
+ */
+export function inheritAttributes(image, originalImage, inheritedAttributes) {
+  forEach(inheritedAttributes, (name) => {
+    const value = originalImage.getAttribute(name);
+
+    if (value !== null) {
+      image.setAttribute(name, value);
+    }
+  });
+}
+
+/**
+ * Check if transition is enabled for the given action.
+ * @param {Object} options - The viewer options.
+ * @param {string} action - The transition action.
+ * @returns {boolean} Returns `true` if transition is enabled.
+ */
+export function isTransitionEnabled(options, action) {
+  const { transition } = options;
+
+  return transition && transition[action] !== false;
+}
+
 /**
  * Extend the given object.
  * @param {*} obj - The object to be extended.
@@ -495,11 +550,8 @@ export function getTransforms({
     values.push(`rotate(${rotate}deg)`);
   }
 
-  if (isNumber(scaleX) && scaleX !== 1) {
+  if (isNumber(scaleX) && isNumber(scaleY) && (scaleX !== 1 || scaleY !== 1)) {
     values.push(`scaleX(${scaleX})`);
-  }
-
-  if (isNumber(scaleY) && scaleY !== 1) {
     values.push(`scaleY(${scaleY})`);
   }
 
@@ -552,14 +604,7 @@ export function getImageNaturalSizes(image, options, callback) {
     }
   };
 
-  forEach(options.inheritedAttributes, (name) => {
-    const value = image.getAttribute(name);
-
-    if (value !== null) {
-      newImage.setAttribute(name, value);
-    }
-  });
-
+  inheritAttributes(newImage, image, options.inheritedAttributes);
   newImage.src = image.src;
 
   // iOS Safari will convert the image automatically
@@ -633,6 +678,44 @@ export function getMaxZoomRatio(pointers) {
   return ratios[0];
 }
 
+/**
+ * Get the max rotation degree of a group of pointers.
+ * @param {Object} pointers - The target pointers.
+ * @returns {number} The result degree.
+ */
+export function getMaxRotateDegree(pointers) {
+  const pointers2 = { ...pointers };
+  const degrees = [];
+
+  forEach(pointers, (pointer, pointerId) => {
+    delete pointers2[pointerId];
+
+    forEach(pointers2, (pointer2) => {
+      const start = Math.atan2(
+        pointer2.startY - pointer.startY,
+        pointer2.startX - pointer.startX,
+      );
+      const end = Math.atan2(
+        pointer2.endY - pointer.endY,
+        pointer2.endX - pointer.endX,
+      );
+      let radians = end - start;
+
+      if (radians > Math.PI) {
+        radians -= Math.PI * 2;
+      } else if (radians < -Math.PI) {
+        radians += Math.PI * 2;
+      }
+
+      degrees.push((radians * 180) / Math.PI);
+    });
+  });
+
+  degrees.sort((a, b) => Math.abs(b) - Math.abs(a));
+
+  return degrees[0] || 0;
+}
+
 /**
  * Get a pointer from an event object.
  * @param {Object} event - The target event object.

package/src/js/viewer.js

@@ -29,6 +29,7 @@ import {
   assign,
   dispatchEvent,
   forEach,
+  getData,
   getResponsiveClass,
   hyphenate,
   isFunction,
@@ -51,17 +52,19 @@ const getUniqueID = ((id) => (() => {
 class Viewer {
   /**
    * Create a new Viewer.
-   * @param {Element} element - The target element for viewing.
+   * @param {Element} element - The target image, or a container of images, to view.
    * @param {Object} [options={}] - The configuration options.
    */
   constructor(element, options = {}) {
-    if (!element || element.nodeType !== 1) {
+    if (!element || (element.nodeType !== 1 && element.nodeType !== 11)) {
       throw new Error('The first argument is required and must be an element.');
     }
 
     this.element = element;
+    this.ownerDocument = element.ownerDocument || element.host.ownerDocument;
     this.options = assign({}, DEFAULTS, isPlainObject(options) && options);
     this.action = false;
+    this.actionEvent = null;
     this.fading = false;
     this.fulled = false;
     this.hiding = false;
@@ -123,7 +126,7 @@ class Viewer {
     this.initBody();
 
     // Override `transition` option if it is not supported
-    if (isUndefined(document.createElement(NAMESPACE).style.transition)) {
+    if (isUndefined(this.ownerDocument.createElement(NAMESPACE).style.transition)) {
       options.transition = false;
     }
 
@@ -183,8 +186,11 @@ class Viewer {
         }
       });
     } else {
-      addListener(element, EVENT_CLICK, (this.onElementClick = ({ target }) => {
+      addListener(element, EVENT_CLICK, (this.onElementClick = (event) => {
+        const { target } = event;
+
         if (target.localName === 'img' && (!isFunction(options.filter) || options.filter.call(this, target))) {
+          this.actionEvent = event;
           this.view(this.images.indexOf(target));
         }
       }));
@@ -195,6 +201,7 @@ class Viewer {
           event.preventDefault();
 
           if (!isFunction(options.filter) || options.filter.call(this, target)) {
+            this.actionEvent = event;
             this.view(this.images.indexOf(target));
           }
         }
@@ -217,6 +224,7 @@ class Viewer {
     const title = viewer.querySelector(`.${NAMESPACE}-title`);
     const toolbar = viewer.querySelector(`.${NAMESPACE}-toolbar`);
     const navbar = viewer.querySelector(`.${NAMESPACE}-navbar`);
+    const navigation = viewer.querySelector(`.${NAMESPACE}-navigation`);
     const button = viewer.querySelector(`.${NAMESPACE}-button`);
     const canvas = viewer.querySelector(`.${NAMESPACE}-canvas`);
 
@@ -225,9 +233,12 @@ class Viewer {
     this.title = title;
     this.toolbar = toolbar;
     this.navbar = navbar;
+    this.navigation = navigation;
     this.button = button;
     this.canvas = canvas;
     this.footer = viewer.querySelector(`.${NAMESPACE}-footer`);
+    this.magnifier = viewer.querySelector(`.${NAMESPACE}-magnifier`);
+    this.magnifierImage = viewer.querySelector(`.${NAMESPACE}-magnifier-image`);
     this.tooltipBox = viewer.querySelector(`.${NAMESPACE}-tooltip`);
     this.player = viewer.querySelector(`.${NAMESPACE}-player`);
     this.list = viewer.querySelector(`.${NAMESPACE}-list`);
@@ -237,11 +248,70 @@ class Viewer {
     addClass(title, !options.title ? CLASS_HIDE : getResponsiveClass(Array.isArray(options.title)
       ? options.title[0]
       : options.title));
-    addClass(navbar, !options.navbar ? CLASS_HIDE : getResponsiveClass(options.navbar));
+
+    if (options.title) {
+      title.removeAttribute('aria-hidden');
+    }
+    const navbarOptions = isPlainObject(options.navbar) ? options.navbar : {};
+    let navbarShow = options.navbar;
+    const navbarSize = !isUndefined(navbarOptions.size) ? navbarOptions.size : options.navbar;
+
+    if (isPlainObject(options.navbar)) {
+      navbarShow = !isUndefined(navbarOptions.show) ? navbarOptions.show : true;
+    }
+
+    addClass(navbar, !navbarShow ? CLASS_HIDE : getResponsiveClass(navbarShow));
+
+    if (navbarShow) {
+      navbar.removeAttribute('aria-hidden');
+    }
+
+    if (['small', 'medium', 'large'].indexOf(navbarSize) !== -1) {
+      addClass(navbar, `${NAMESPACE}-${navbarSize}`);
+    }
+
+    if (isPlainObject(options.navigation)) {
+      forEach(navigation.querySelectorAll('[role="button"]'), (item) => {
+        const name = getData(item, DATA_ACTION);
+        const value = options.navigation[name];
+        const deep = isPlainObject(value);
+        const show = deep && !isUndefined(value.show) ? value.show : value;
+        const size = deep && !isUndefined(value.size)
+          ? value.size
+          : value;
+
+        toggleClass(item, CLASS_HIDE, !show);
+
+        if (isNumber(show)) {
+          addClass(item, getResponsiveClass(show));
+        }
+
+        if (['small', 'large'].indexOf(size) !== -1) {
+          addClass(item, `${NAMESPACE}-${size}`);
+        }
+      });
+    } else {
+      addClass(
+        navigation,
+        !options.navigation ? CLASS_HIDE : getResponsiveClass(options.navigation),
+      );
+    }
+
+    if (options.navigation) {
+      navigation.removeAttribute('aria-hidden');
+    }
+
     toggleClass(button, CLASS_HIDE, !options.button);
 
+    if (options.button) {
+      button.removeAttribute('aria-hidden');
+    }
+
     if (options.keyboard) {
       button.setAttribute('tabindex', 0);
+      forEach(navigation.querySelectorAll('[role="button"]'), (item) => {
+        item.setAttribute('tabindex', 0);
+      });
     }
 
     if (options.backdrop) {
@@ -270,6 +340,8 @@ class Viewer {
         addClass(toolbar, getResponsiveClass(options.toolbar));
       }
 
+      toolbar.removeAttribute('aria-hidden');
+
       forEach(custom ? options.toolbar : BUTTONS, (value, index) => {
         const deep = custom && isPlainObject(value);
         const name = custom ? hyphenate(index) : value;
@@ -321,6 +393,12 @@ class Viewer {
       addClass(toolbar, CLASS_HIDE);
     }
 
+    if (options.title || navbarShow || options.toolbar) {
+      this.footer.removeAttribute('aria-hidden');
+    } else {
+      addClass(this.footer, CLASS_HIDE);
+    }
+
     if (!options.rotatable) {
       const rotates = toolbar.querySelectorAll('li[class*="rotate"]');
 
@@ -356,7 +434,7 @@ class Viewer {
       let { container } = options;
 
       if (isString(container)) {
-        container = element.ownerDocument.querySelector(container);
+        container = this.ownerDocument.querySelector(container);
       }
 
       if (!container) {
@@ -391,12 +469,13 @@ class Viewer {
   }
 
   /**
-   * Get the no conflict viewer class.
-   * @returns {Viewer} The viewer class.
+   * Create a new Viewer instance.
+   * @param {Element} element - The target image, or a container of images, to view.
+   * @param {Object} [options={}] - The configuration options.
+   * @returns {Viewer} A new Viewer instance.
    */
-  static noConflict() {
-    window.Viewer = AnotherViewer;
-    return Viewer;
+  static create(element, options) {
+    return new Viewer(element, options);
   }
 
   /**
@@ -406,6 +485,15 @@ class Viewer {
   static setDefaults(options) {
     assign(DEFAULTS, isPlainObject(options) && options);
   }
+
+  /**
+   * Get the no conflict viewer class.
+   * @returns {Viewer} The viewer class.
+   */
+  static noConflict() {
+    window.Viewer = AnotherViewer;
+    return Viewer;
+  }
 }
 
 assign(Viewer.prototype, render, events, handlers, methods, others);