viewerjs 1.12.0 → 1.13.0

package/src/js/defaults.js

@@ -14,10 +14,16 @@ export default {
 
   /**
    * Show the navbar.
-   * @type {boolean | number}
+    * @type {boolean | number | string | Object}
    */
   navbar: true,
 
+  /**
+   * Show the navigation buttons.
+    * @type {boolean | number | Object}
+   */
+  navigation: false,
+
   /**
    * Specify the visibility and the content of the title.
    * @type {boolean | number | Function | Array}
@@ -88,6 +94,12 @@ export default {
    */
   inline: false,
 
+  /**
+  * Enable to automatically play the images when playing.
+  * @type {boolean}
+  */
+  autoplay: true,
+
   /**
    * The amount of time to delay between automatically cycling an image when playing.
    * @type {number}
@@ -118,6 +130,12 @@ export default {
    */
   loop: true,
 
+  /**
+  * Enable to preload the next or previous image before viewing it.
+   * @type {boolean}
+   */
+  preload: true,
+
   /**
    * Min width of the viewer in inline mode.
    * @type {number}
@@ -136,12 +154,30 @@ export default {
    */
   movable: true,
 
+  /**
+   * Show a magnifier when hovering over the image in fullscreen mode.
+   * @type {boolean | Object}
+   */
+  magnifier: false,
+
   /**
    * Enable to rotate the image.
    * @type {boolean}
    */
   rotatable: true,
 
+  /**
+  * Enable to rotate the current image by gesture.
+   * @type {boolean}
+   */
+  rotateOnGesture: true,
+
+  /**
+   * Enable to rotate the current image by dragging on the touch screen.
+   * @type {boolean}
+   */
+  rotateOnTouch: true,
+
   /**
    * Enable to scale the image.
    * @type {boolean}
@@ -160,6 +196,12 @@ export default {
    */
   zoomOnTouch: true,
 
+  /**
+   * Enable to zoom the current image by gesture.
+   * @type {boolean}
+   */
+  zoomOnGesture: true,
+
   /**
    * Enable to zoom the image by wheeling mouse.
    * @type {boolean}
@@ -187,7 +229,7 @@ export default {
 
   /**
    * Enable CSS3 Transition for some special elements.
-   * @type {boolean}
+    * @type {boolean | Object}
    */
   transition: true,
 
@@ -211,13 +253,13 @@ export default {
 
   /**
    * Define the min ratio of the image when zoom out.
-   * @type {number}
+    * @type {number | Function}
    */
   minZoomRatio: 0.01,
 
   /**
    * Define the max ratio of the image when zoom in.
-   * @type {number}
+    * @type {number | Function}
    */
   maxZoomRatio: 100,
 

package/src/js/events.js

@@ -2,8 +2,11 @@ import {
   EVENT_CLICK,
   EVENT_DBLCLICK,
   EVENT_DRAG_START,
+  EVENT_GESTURE,
   EVENT_KEY_DOWN,
   EVENT_POINTER_DOWN,
+  EVENT_POINTER_ENTER,
+  EVENT_POINTER_LEAVE,
   EVENT_POINTER_MOVE,
   EVENT_POINTER_UP,
   EVENT_RESIZE,
@@ -17,10 +20,17 @@ import {
 export default {
   bind() {
     const { options, viewer, canvas } = this;
-    const document = this.element.ownerDocument;
+    const { ownerDocument: document } = this;
 
     addListener(viewer, EVENT_CLICK, (this.onClick = this.click.bind(this)));
     addListener(viewer, EVENT_DRAG_START, (this.onDragStart = this.dragstart.bind(this)));
+    addListener(viewer, EVENT_POINTER_ENTER, (this.onMagnifyEnter = this.magnify.bind(this)));
+    addListener(viewer, EVENT_POINTER_MOVE, (this.onMagnify = this.magnify.bind(this)));
+    addListener(
+      viewer,
+      EVENT_POINTER_LEAVE,
+      (this.onMagnifierLeave = this.hideMagnifier.bind(this)),
+    );
     addListener(canvas, EVENT_POINTER_DOWN, (this.onPointerDown = this.pointerdown.bind(this)));
     addListener(document, EVENT_POINTER_MOVE, (this.onPointerMove = this.pointermove.bind(this)));
     addListener(document, EVENT_POINTER_UP, (this.onPointerUp = this.pointerup.bind(this)));
@@ -34,6 +44,13 @@ export default {
       });
     }
 
+    if ((options.zoomable && options.zoomOnGesture)
+      || (options.rotatable && options.rotateOnGesture)) {
+      addListener(viewer, EVENT_GESTURE, (this.onGesture = this.gesture.bind(this)), {
+        passive: false,
+      });
+    }
+
     if (options.toggleOnDblclick) {
       addListener(canvas, EVENT_DBLCLICK, (this.onDblclick = this.dblclick.bind(this)));
     }
@@ -41,10 +58,13 @@ export default {
 
   unbind() {
     const { options, viewer, canvas } = this;
-    const document = this.element.ownerDocument;
+    const { ownerDocument: document } = this;
 
     removeListener(viewer, EVENT_CLICK, this.onClick);
     removeListener(viewer, EVENT_DRAG_START, this.onDragStart);
+    removeListener(viewer, EVENT_POINTER_ENTER, this.onMagnifyEnter);
+    removeListener(viewer, EVENT_POINTER_MOVE, this.onMagnify);
+    removeListener(viewer, EVENT_POINTER_LEAVE, this.onMagnifierLeave);
     removeListener(canvas, EVENT_POINTER_DOWN, this.onPointerDown);
     removeListener(document, EVENT_POINTER_MOVE, this.onPointerMove);
     removeListener(document, EVENT_POINTER_UP, this.onPointerUp);
@@ -58,6 +78,13 @@ export default {
       });
     }
 
+    if ((options.zoomable && options.zoomOnGesture)
+      || (options.rotatable && options.rotateOnGesture)) {
+      removeListener(viewer, EVENT_GESTURE, this.onGesture, {
+        passive: false,
+      });
+    }
+
     if (options.toggleOnDblclick) {
       removeListener(canvas, EVENT_DBLCLICK, this.onDblclick);
     }

package/src/js/handlers.js

@@ -1,6 +1,8 @@
 import {
   ACTION_MOVE,
+  ACTION_ROTATE,
   ACTION_SWITCH,
+  ACTION_TRANSFORM,
   ACTION_ZOOM,
   CLASS_INVISIBLE,
   CLASS_LOADING,
@@ -25,6 +27,9 @@ import {
   getTransforms,
   isFunction,
   isNumber,
+  isPlainObject,
+  isTransitionEnabled,
+  isUndefined,
   removeClass,
   setStyle,
   toggleClass,
@@ -168,11 +173,18 @@ export default {
 
     this.initImage(() => {
       toggleClass(image, CLASS_MOVE, options.movable);
-      toggleClass(image, CLASS_TRANSITION, options.transition);
+      toggleClass(
+        image,
+        CLASS_TRANSITION,
+        isTransitionEnabled(options, 'view'),
+      );
 
       this.renderImage(() => {
         this.viewed = true;
         this.viewing = false;
+        setTimeout(() => {
+          toggleClass(image, CLASS_TRANSITION, options.transition);
+        }, 300);
 
         if (isFunction(options.viewed)) {
           addListener(element, EVENT_VIEWED, options.viewed, {
@@ -333,6 +345,105 @@ export default {
     }
   },
 
+  magnify(event) {
+    if (event.changedTouches || (event.pointerType && event.pointerType !== 'mouse')) {
+      this.hideMagnifier();
+      return;
+    }
+
+    this.magnifierPoint = {
+      clientX: event.clientX,
+      clientY: event.clientY,
+    };
+    this.renderMagnifier();
+  },
+
+  renderMagnifier() {
+    const {
+      options,
+      imageData,
+      magnifier,
+      magnifierImage,
+      viewer,
+    } = this;
+    const config = isPlainObject(options.magnifier) ? options.magnifier : {};
+    const point = this.magnifierPoint;
+
+    if (!options.magnifier || !this.fulled || !this.viewed || !magnifier
+      || !magnifierImage || !point) {
+      this.hideMagnifier();
+      return;
+    }
+
+    const size = Math.max(1, Number(config.size) || 100);
+    const zoomRatio = Math.max(1, Number(config.zoomRatio) || 2);
+    const opacity = Number(config.opacity);
+    const rect = viewer.getBoundingClientRect();
+    const x = point.clientX - rect.left;
+    const y = point.clientY - rect.top;
+    const imageURL = this.image.currentSrc || this.image.src;
+    const imageRect = this.image.getBoundingClientRect();
+
+    if (point.clientX < imageRect.left || point.clientX > imageRect.right
+      || point.clientY < imageRect.top || point.clientY > imageRect.bottom) {
+      this.hideMagnifier();
+      return;
+    }
+
+    const scaleX = isNumber(imageData.scaleX) ? imageData.scaleX : 1;
+    const scaleY = isNumber(imageData.scaleY) ? imageData.scaleY : 1;
+    const rotate = ((imageData.rotate || 0) * Math.PI) / 180;
+    const cos = Math.cos(rotate);
+    const sin = Math.sin(rotate);
+    const matrixA = cos * scaleX;
+    const matrixB = sin * scaleX;
+    const matrixC = -sin * scaleY;
+    const matrixD = cos * scaleY;
+    const determinant = scaleX * scaleY;
+
+    if (determinant === 0) {
+      this.hideMagnifier();
+      return;
+    }
+
+    const centerX = imageData.x + (imageData.width / 2);
+    const centerY = imageData.y + (imageData.height / 2);
+    const localX = (matrixD * (x - centerX) - matrixC * (y - centerY)) / determinant;
+    const localY = (-matrixB * (x - centerX) + matrixA * (y - centerY)) / determinant;
+    const sourceX = localX + imageData.width / 2;
+    const sourceY = localY + imageData.height / 2;
+    const magnifiedWidth = imageData.width * zoomRatio;
+    const magnifiedHeight = imageData.height * zoomRatio;
+    const transformedX = matrixA * (sourceX * zoomRatio - magnifiedWidth / 2)
+      + matrixC * (sourceY * zoomRatio - magnifiedHeight / 2);
+    const transformedY = matrixB * (sourceX * zoomRatio - magnifiedWidth / 2)
+      + matrixD * (sourceY * zoomRatio - magnifiedHeight / 2);
+
+    this.magnifierSourcePoint = {
+      x: sourceX,
+      y: sourceY,
+    };
+    magnifier.style.width = `${size}px`;
+    magnifier.style.height = `${size}px`;
+    magnifier.style.opacity = `${Math.max(0, Math.min(1, isNumber(opacity) ? opacity : 1))}`;
+    magnifierImage.src = imageURL;
+    magnifierImage.style.width = `${magnifiedWidth}px`;
+    magnifierImage.style.height = `${magnifiedHeight}px`;
+    magnifierImage.style.left = `${size / 2 - magnifiedWidth / 2 - transformedX}px`;
+    magnifierImage.style.top = `${size / 2 - magnifiedHeight / 2 - transformedY}px`;
+    magnifierImage.style.transform = `rotate(${imageData.rotate || 0}deg) scaleX(${scaleX}) scaleY(${scaleY})`;
+    magnifier.removeAttribute('aria-hidden');
+    addClass(magnifier, 'viewer-show');
+  },
+
+  hideMagnifier() {
+    if (this.magnifier) {
+      removeClass(this.magnifier, 'viewer-show');
+      this.magnifier.setAttribute('aria-hidden', true);
+      this.magnifierPoint = null;
+    }
+  },
+
   pointerdown(event) {
     const { options, pointers } = this;
     const { buttons, button } = event;
@@ -374,13 +485,21 @@ export default {
 
     let action = options.movable ? ACTION_MOVE : false;
 
-    if (options.zoomOnTouch && options.zoomable && Object.keys(pointers).length > 1) {
-      action = ACTION_ZOOM;
+    if ((
+      (options.zoomable && options.zoomOnTouch)
+      || (options.rotatable && options.rotateOnTouch)
+    ) && Object.keys(pointers).length > 1) {
+      // action = ACTION_ZOOM;
+      // action = ACTION_ROTATE;
+      action = ACTION_TRANSFORM;
     } else if (options.slideOnTouch && (event.pointerType === 'touch' || event.type === 'touchstart') && this.isSwitchable()) {
       action = ACTION_SWITCH;
     }
 
-    if (options.transition && (action === ACTION_MOVE || action === ACTION_ZOOM)) {
+    if (action === ACTION_MOVE
+      || action === ACTION_ZOOM
+      || action === ACTION_ROTATE
+      || action === ACTION_TRANSFORM) {
       removeClass(this.image, CLASS_TRANSITION);
     }
 
@@ -427,8 +546,16 @@ export default {
 
     event.preventDefault();
 
-    if (options.transition && (action === ACTION_MOVE || action === ACTION_ZOOM)) {
-      addClass(this.image, CLASS_TRANSITION);
+    if (action === ACTION_MOVE
+      || action === ACTION_ZOOM
+      || action === ACTION_ROTATE
+      || action === ACTION_TRANSFORM) {
+      const transition = action === ACTION_TRANSFORM
+        ? isTransitionEnabled(options, ACTION_ZOOM)
+          || isTransitionEnabled(options, ACTION_ROTATE)
+        : isTransitionEnabled(options, action);
+
+      toggleClass(this.image, CLASS_TRANSITION, transition);
     }
 
     this.action = false;
@@ -437,6 +564,7 @@ export default {
     if (
       IS_TOUCH_DEVICE
       && action !== ACTION_ZOOM
+      && action !== ACTION_TRANSFORM
       && pointer
       && (Date.now() - pointer.timeStamp < 500)
     ) {
@@ -492,6 +620,13 @@ export default {
     this.initContainer();
     this.initViewer();
     this.renderViewer();
+
+    const navbarOptions = isPlainObject(this.options.navbar) ? this.options.navbar : {};
+
+    if (isUndefined(navbarOptions.visibleItemCount)) {
+      this.initList(this.index);
+    }
+
     this.renderList();
 
     if (this.viewed) {
@@ -527,6 +662,10 @@ export default {
 
     event.preventDefault();
 
+    if (this.gesturing) {
+      return;
+    }
+
     // Limit wheel speed to prevent zoom too fast
     if (this.wheeling) {
       return;
@@ -551,4 +690,53 @@ export default {
 
     this.zoom(-delta * ratio, true, null, event);
   },
+
+  gesture(event) {
+    const { options } = this;
+
+    if (!this.viewed || (!options.zoomOnGesture && !options.rotateOnGesture)) {
+      return;
+    }
+
+    event.preventDefault();
+
+    switch (event.type) {
+      case 'gesturestart':
+        this.gesturing = true;
+        this.gestureScale = event.scale || 1;
+        this.gestureRotation = event.rotation || 0;
+        break;
+
+      case 'gesturechange': {
+        const scale = event.scale || 1;
+        const ratio = scale / (this.gestureScale || 1);
+        const rotation = Number(event.rotation);
+        const degree = rotation - (this.gestureRotation || 0);
+
+        this.gestureScale = scale;
+
+        if (options.zoomable && options.zoomOnGesture && ratio !== 1) {
+          this.zoom(ratio >= 1 ? ratio - 1 : 1 - (1 / ratio), false, null, event);
+        }
+
+        if (options.rotatable && options.rotateOnGesture && isNumber(rotation)) {
+          this.gestureRotation = rotation;
+
+          if (degree !== 0) {
+            this.rotate(degree);
+          }
+        }
+
+        break;
+      }
+
+      case 'gestureend':
+        this.gesturing = false;
+        this.gestureScale = 1;
+        this.gestureRotation = 0;
+        break;
+
+      default:
+    }
+  },
 };