viewerjs 1.12.0 → 1.13.0

package/src/js/utilities.js

@@ -106,6 +106,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 +523,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 +577,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 +651,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,15 +52,16 @@ 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.fading = false;
@@ -123,7 +125,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;
     }
 
@@ -217,6 +219,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 +228,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 +243,54 @@ 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));
+    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 (['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),
+      );
+    }
+
     toggleClass(button, CLASS_HIDE, !options.button);
 
     if (options.keyboard) {
       button.setAttribute('tabindex', 0);
+      forEach(navigation.querySelectorAll('[role="button"]'), (item) => {
+        item.setAttribute('tabindex', 0);
+      });
     }
 
     if (options.backdrop) {
@@ -356,7 +405,7 @@ class Viewer {
       let { container } = options;
 
       if (isString(container)) {
-        container = element.ownerDocument.querySelector(container);
+        container = this.ownerDocument.querySelector(container);
       }
 
       if (!container) {
@@ -391,12 +440,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 +456,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);

package/types/index.d.ts

@@ -5,6 +5,7 @@ declare namespace Viewer {
   export type Filter = (this: Viewer, image: HTMLImageElement) => boolean;
   export type TitleRenderer = (this: Viewer, image: HTMLImageElement, imageData: Record<string, any>) => string;
   export type ImageURLResolver = (this: Viewer, image: HTMLImageElement) => string;
+  export type ZoomRatio = number | ((this: Viewer, image: HTMLImageElement, imageData: Record<string, any>) => number);
   export type ToolbarButtonClick = (this: Viewer, event: Event) => void;
   export type ToolbarOption = boolean | Visibility | ToolbarButtonSize | ToolbarButtonOptions | undefined;
 
@@ -29,6 +30,44 @@ declare namespace Viewer {
     [x: string]: ToolbarOption;
   }
 
+  export interface NavigationButtonOptions {
+    show?: boolean | Visibility;
+    size?: ToolbarButtonSize;
+  }
+
+  export type NavigationOption = boolean | Visibility | NavigationButtonOptions | undefined;
+
+  export interface NavbarOptions {
+    visibleItemCount?: number;
+    show?: boolean | Visibility;
+    size?: ToolbarButtonSize;
+  }
+
+  export type NavbarOption = boolean | Visibility | ToolbarButtonSize | NavbarOptions | undefined;
+
+  export interface NavigationOptions {
+    next?: NavigationOption;
+    prev?: NavigationOption;
+  }
+
+  export interface TransitionOptions {
+    hide?: boolean;
+    move?: boolean;
+    play?: boolean;
+    rotate?: boolean;
+    scale?: boolean;
+    show?: boolean;
+    tooltip?: boolean;
+    view?: boolean;
+    zoom?: boolean;
+  }
+
+  export interface MagnifierOptions {
+    size?: number;
+    zoomRatio?: number;
+    opacity?: number;
+  }
+
   export interface Pivot {
     x: number;
     y: number;
@@ -90,21 +129,27 @@ declare namespace Viewer {
     initialCoverage?: number;
     initialViewIndex?: number;
     inline?: boolean;
+    autoplay?: boolean;
     interval?: number;
     keyboard?: boolean;
     loading?: boolean;
     loop?: boolean;
-    maxZoomRatio?: number;
+    magnifier?: boolean | MagnifierOptions;
+    maxZoomRatio?: ZoomRatio;
     minHeight?: number;
     minWidth?: number;
-    minZoomRatio?: number;
+    minZoomRatio?: ZoomRatio;
     movable?: boolean;
     move?: EventHandler<MoveEvent>;
     moved?: EventHandler<MovedEvent>;
-    navbar?: boolean | Visibility;
+    navbar?: NavbarOption;
+    navigation?: boolean | Visibility | NavigationOptions;
     play?: EventHandler;
+    preload?: boolean;
     ready?: EventHandler;
     rotatable?: boolean;
+    rotateOnGesture?: boolean;
+    rotateOnTouch?: boolean;
     rotate?: EventHandler<RotateEvent>;
     rotated?: EventHandler<RotatedEvent>;
     scalable?: boolean;
@@ -118,13 +163,14 @@ declare namespace Viewer {
     toggleOnDblclick?: boolean;
     toolbar?: boolean | Visibility | ToolbarOptions;
     tooltip?: boolean;
-    transition?: boolean;
+    transition?: boolean | TransitionOptions;
     url?: string | ImageURLResolver;
     view?: EventHandler;
     viewed?: EventHandler;
     zIndex?: number;
     zIndexInline?: number;
     zoom?: EventHandler<ZoomEvent>;
+    zoomOnGesture?: boolean;
     zoomOnTouch?: boolean;
     zoomOnWheel?: boolean;
     zoomRatio?: number;
@@ -134,7 +180,7 @@ declare namespace Viewer {
 }
 
 declare class Viewer {
-  constructor(element: HTMLElement, options?: Viewer.Options);
+  constructor(element: HTMLElement | ShadowRoot, options?: Viewer.Options);
   destroy(): Viewer;
   exit(): Viewer;
   full(): Viewer;
@@ -154,12 +200,13 @@ declare class Viewer {
   stop(): Viewer;
   toggle(): Viewer;
   tooltip(): Viewer;
-  update(): Viewer;
+  update(options?: Viewer.Options): Viewer;
   view(index?: number): Viewer;
   zoom(ratio: number, hasTooltip?: boolean, pivot?: Viewer.Pivot): Viewer;
   zoomTo(ratio: number, hasTooltip?: boolean, pivot?: Viewer.Pivot): Viewer;
-  static noConflict(): Viewer;
+  static create(element: HTMLElement | ShadowRoot, options?: Viewer.Options): Viewer;
   static setDefaults(options: Viewer.Options): void;
+  static noConflict(): Viewer;
 }
 
 declare module 'viewerjs' {