viewerjs 1.11.9 → 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.
@@ -172,7 +200,7 @@ export function hasClass(element, value) {
 
   return element.classList
     ? element.classList.contains(value)
-    : element.className.indexOf(value) > -1;
+    : element.className.split(REGEXP_SPACES).indexOf(value) > -1;
 }
 
 /**
@@ -319,7 +347,7 @@ export function removeData(element, name) {
       element[name] = undefined;
     }
   } else if (element.dataset) {
-    // #128 Safari not allows to delete dataset property
+    // Safari doesn't allow deleting dataset properties
     try {
       delete element.dataset[name];
     } catch (error) {
@@ -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

@@ -16,6 +16,7 @@ import {
   DATA_ACTION,
   EVENT_CLICK,
   EVENT_ERROR,
+  EVENT_KEY_DOWN,
   EVENT_LOAD,
   EVENT_READY,
   NAMESPACE,
@@ -28,6 +29,7 @@ import {
   assign,
   dispatchEvent,
   forEach,
+  getData,
   getResponsiveClass,
   hyphenate,
   isFunction,
@@ -50,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;
@@ -122,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;
     }
 
@@ -182,11 +185,22 @@ class Viewer {
         }
       });
     } else {
-      addListener(element, EVENT_CLICK, (this.onStart = ({ target }) => {
+      addListener(element, EVENT_CLICK, (this.onElementClick = ({ target }) => {
         if (target.localName === 'img' && (!isFunction(options.filter) || options.filter.call(this, target))) {
           this.view(this.images.indexOf(target));
         }
       }));
+      addListener(element, EVENT_KEY_DOWN, (this.onElementKeyDown = (event) => {
+        const { target, key } = event;
+
+        if (target.localName === 'img' && (key === 'Enter' || key === ' ')) {
+          event.preventDefault();
+
+          if (!isFunction(options.filter) || options.filter.call(this, target)) {
+            this.view(this.images.indexOf(target));
+          }
+        }
+      }));
     }
   }
 
@@ -205,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`);
 
@@ -213,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`);
@@ -225,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) {
@@ -344,7 +405,7 @@ class Viewer {
       let { container } = options;
 
       if (isString(container)) {
-        container = element.ownerDocument.querySelector(container);
+        container = this.ownerDocument.querySelector(container);
       }
 
       if (!container) {
@@ -379,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);
   }
 
   /**
@@ -394,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

@@ -1,10 +1,16 @@
 declare namespace Viewer {
   export type Visibility = 0 | 1 | 2 | 3 | 4;
   export type ToolbarButtonSize = 'small' | 'medium' | 'large';
-  export type ToolbarOption = boolean | Visibility | ToolbarButtonSize | Function | ToolbarButtonOptions | undefined;
+  export type EventHandler<T extends Event = CustomEvent> = (event: T) => void;
+  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;
 
   export interface ToolbarButtonOptions {
-    click?: Function,
+    click?: ToolbarButtonClick,
     show?: boolean | Visibility;
     size?: ToolbarButtonSize,
   }
@@ -24,9 +30,47 @@ 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;
+    x: number;
+    y: number;
   }
 
   export interface MoveEventData {
@@ -37,26 +81,18 @@ declare namespace Viewer {
     originalEvent: PointerEvent | TouchEvent | MouseEvent | null;
   }
 
-  export interface MoveEvent extends CustomEvent {
-    detail: MoveEventData;
-  }
+  export interface MoveEvent extends CustomEvent<MoveEventData> {}
 
-  export interface MovedEvent extends CustomEvent {
-    detail: MoveEventData;
-  }
+  export interface MovedEvent extends CustomEvent<MoveEventData> {}
 
   export interface RotateEventData {
     degree: number;
     oldDegree: number;
   }
 
-  export interface RotateEvent extends CustomEvent {
-    detail: RotateEventData;
-  }
+  export interface RotateEvent extends CustomEvent<RotateEventData> {}
 
-  export interface RotatedEvent extends CustomEvent {
-    detail: RotateEventData;
-  }
+  export interface RotatedEvent extends CustomEvent<RotateEventData> {}
 
   export interface ScaleEventData {
     scaleX: number;
@@ -65,13 +101,9 @@ declare namespace Viewer {
     oldScaleY: number;
   }
 
-  export interface ScaleEvent extends CustomEvent {
-    detail: ScaleEventData;
-  }
+  export interface ScaleEvent extends CustomEvent<ScaleEventData> {}
 
-  export interface ScaledEvent extends CustomEvent {
-    detail: ScaleEventData;
-  }
+  export interface ScaledEvent extends CustomEvent<ScaleEventData> {}
 
   export interface ZoomEventData {
     ratio: number;
@@ -79,73 +111,76 @@ declare namespace Viewer {
     originalEvent: WheelEvent | PointerEvent | TouchEvent | MouseEvent | null;
   }
 
-  export interface ZoomEvent extends CustomEvent {
-    detail: ZoomEventData;
-  }
+  export interface ZoomEvent extends CustomEvent<ZoomEventData> {}
 
-  export interface ZoomedEvent extends CustomEvent {
-    detail: ZoomEventData;
-  }
+  export interface ZoomedEvent extends CustomEvent<ZoomEventData> {}
 
   export interface Options {
     backdrop?: boolean | string;
     button?: boolean;
     className?: string;
     container?: string | HTMLElement;
-    filter?: Function;
+    filter?: Filter | null;
     fullscreen?: boolean | FullscreenOptions;
     focus?: boolean;
-    hidden?(event: CustomEvent): void;
-    hide?(event: CustomEvent): void;
+    hidden?: EventHandler;
+    hide?: EventHandler;
     inheritedAttributes?: string[];
     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?(event: MoveEvent): void;
-    moved?(event: MovedEvent): void;
-    navbar?: boolean | Visibility;
-    play?(event: CustomEvent): void;
-    ready?(event: CustomEvent): void;
+    move?: EventHandler<MoveEvent>;
+    moved?: EventHandler<MovedEvent>;
+    navbar?: NavbarOption;
+    navigation?: boolean | Visibility | NavigationOptions;
+    play?: EventHandler;
+    preload?: boolean;
+    ready?: EventHandler;
     rotatable?: boolean;
-    rotate?(event: RotateEvent): void;
-    rotated?(event: RotatedEvent): void;
+    rotateOnGesture?: boolean;
+    rotateOnTouch?: boolean;
+    rotate?: EventHandler<RotateEvent>;
+    rotated?: EventHandler<RotatedEvent>;
     scalable?: boolean;
-    scale?(event: ScaleEvent): void;
-    scaled?(event: ScaledEvent): void;
-    show?(event: CustomEvent): void;
-    shown?(event: CustomEvent): void;
+    scale?: EventHandler<ScaleEvent>;
+    scaled?: EventHandler<ScaledEvent>;
+    show?: EventHandler;
+    shown?: EventHandler;
     slideOnTouch?: boolean;
-    stop?(event: CustomEvent): void;
-    title?: boolean | Visibility | Function | [Visibility, Function];
+    stop?: EventHandler;
+    title?: boolean | Visibility | TitleRenderer | [Visibility, TitleRenderer] | null;
     toggleOnDblclick?: boolean;
     toolbar?: boolean | Visibility | ToolbarOptions;
     tooltip?: boolean;
-    transition?: boolean;
-    url?: string | Function;
-    view?(event: CustomEvent): void;
-    viewed?(event: CustomEvent): void;
+    transition?: boolean | TransitionOptions;
+    url?: string | ImageURLResolver;
+    view?: EventHandler;
+    viewed?: EventHandler;
     zIndex?: number;
     zIndexInline?: number;
-    zoom?(event: ZoomEvent): void;
+    zoom?: EventHandler<ZoomEvent>;
+    zoomOnGesture?: boolean;
     zoomOnTouch?: boolean;
     zoomOnWheel?: boolean;
     zoomRatio?: number;
     zoomable?: boolean;
-    zoomed?(event: ZoomedEvent): void;
+    zoomed?: EventHandler<ZoomedEvent>;
   }
 }
 
 declare class Viewer {
-  constructor(element: HTMLElement, options?: Viewer.Options);
+  constructor(element: HTMLElement | ShadowRoot, options?: Viewer.Options);
   destroy(): Viewer;
   exit(): Viewer;
   full(): Viewer;
@@ -165,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' {