viewerjs 1.12.0 → 1.14.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}
@@ -161,9 +197,18 @@ export default {
   zoomOnTouch: true,
 
   /**
-   * Enable to zoom the image by wheeling mouse.
+   * Enable to zoom the current image by gesture.
    * @type {boolean}
    */
+  zoomOnGesture: true,
+
+  /**
+   * Enable to zoom the image by wheeling mouse.
+   * Set to a modifier key name (`ctrl`, `shift`, `alt`, `meta`), or a
+   * combination joined with `+` (e.g. `ctrl+shift`), to only zoom when
+   * the given modifier key(s) are held down while wheeling.
+   * @type {boolean | string}
+   */
   zoomOnWheel: true,
 
   /**
@@ -172,6 +217,17 @@ export default {
    */
   slideOnTouch: true,
 
+  /**
+   * Enable to slide to the next or previous image by wheeling mouse.
+   * Set to a modifier key name (`ctrl`, `shift`, `alt`, `meta`), or a
+   * combination joined with `+` (e.g. `ctrl+shift`), to only slide when
+   * the given modifier key(s) are held down while wheeling.
+   * Takes effect over the navbar, and also over the rest of the viewer
+   * when `zoomOnWheel` doesn't take effect for the wheel event.
+   * @type {boolean | string}
+   */
+  slideOnWheel: true,
+
   /**
    * Indicate if toggle the image size between its natural size
    * and initial size when double click on the image or not.
@@ -187,7 +243,7 @@ export default {
 
   /**
    * Enable CSS3 Transition for some special elements.
-   * @type {boolean}
+    * @type {boolean | Object}
    */
   transition: true,
 
@@ -211,13 +267,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,
 
@@ -247,5 +303,6 @@ export default {
   zoom: null,
   zoomed: null,
   play: null,
+  playing: null,
   stop: null,
 };

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,23 +20,37 @@ 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)));
     addListener(document, EVENT_KEY_DOWN, (this.onKeyDown = this.keydown.bind(this)));
     addListener(window, EVENT_RESIZE, (this.onResize = this.resize.bind(this)));
 
-    if (options.zoomable && options.zoomOnWheel) {
+    if ((options.zoomable && options.zoomOnWheel) || options.slideOnWheel) {
       addListener(viewer, EVENT_WHEEL, (this.onWheel = this.wheel.bind(this)), {
         passive: false,
         capture: true,
       });
     }
 
+    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,23 +58,33 @@ 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);
     removeListener(document, EVENT_KEY_DOWN, this.onKeyDown);
     removeListener(window, EVENT_RESIZE, this.onResize);
 
-    if (options.zoomable && options.zoomOnWheel) {
+    if ((options.zoomable && options.zoomOnWheel) || options.slideOnWheel) {
       removeListener(viewer, EVENT_WHEEL, this.onWheel, {
         passive: false,
         capture: true,
       });
     }
 
+    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,10 @@ import {
   getTransforms,
   isFunction,
   isNumber,
+  isPlainObject,
+  isTransitionEnabled,
+  isUndefined,
+  isWheelActionEnabled,
   removeClass,
   setStyle,
   toggleClass,
@@ -46,6 +52,8 @@ export default {
       clearTimeout(this.clickCanvasTimeout);
     }
 
+    this.actionEvent = event;
+
     switch (action) {
       case 'mix':
         if (this.played) {
@@ -133,7 +141,8 @@ export default {
       }
 
       // XXX: No pageX/Y properties in custom event, fallback to the original event.
-      this.toggle(event.isTrusted ? event : (event.detail && event.detail.originalEvent));
+      this.actionEvent = event.isTrusted ? event : (event.detail && event.detail.originalEvent);
+      this.toggle();
     }
   },
 
@@ -168,11 +177,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, {
@@ -184,9 +200,12 @@ export default {
           originalImage: this.images[index],
           index,
           image,
+          originalEvent: this.viewOriginalEvent || null,
         }, {
           cancelable: false,
         });
+
+        this.viewOriginalEvent = null;
       });
     });
   },
@@ -234,6 +253,8 @@ export default {
 
     const keyCode = event.keyCode || event.which || event.charCode;
 
+    this.actionEvent = event;
+
     switch (keyCode) {
       // Enter
       case 13:
@@ -333,6 +354,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 +494,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 +555,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 +573,7 @@ export default {
     if (
       IS_TOUCH_DEVICE
       && action !== ACTION_ZOOM
+      && action !== ACTION_TRANSFORM
       && pointer
       && (Date.now() - pointer.timeStamp < 500)
     ) {
@@ -492,6 +629,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) {
@@ -521,13 +665,19 @@ export default {
   },
 
   wheel(event) {
+    const { options, navbar } = this;
+
     if (!this.viewed) {
       return;
     }
 
     event.preventDefault();
 
-    // Limit wheel speed to prevent zoom too fast
+    if (this.gesturing) {
+      return;
+    }
+
+    // Limit wheel speed to prevent zoom or slide too fast
     if (this.wheeling) {
       return;
     }
@@ -538,7 +688,6 @@ export default {
       this.wheeling = false;
     }, 50);
 
-    const ratio = Number(this.options.zoomRatio) || 0.1;
     let delta = 1;
 
     if (event.deltaY) {
@@ -549,6 +698,79 @@ export default {
       delta = event.detail > 0 ? 1 : -1;
     }
 
-    this.zoom(-delta * ratio, true, null, event);
+    // Wheeling over the navbar never zooms, only slides
+    const overNavbar = navbar && navbar.contains(event.target);
+    const zoomable = !overNavbar
+      && options.zoomable
+      && isWheelActionEnabled(options.zoomOnWheel, event);
+
+    if (zoomable) {
+      const ratio = Number(options.zoomRatio) || 0.1;
+
+      this.actionEvent = event;
+      this.zoom(-delta * ratio, true);
+      return;
+    }
+
+    if (isWheelActionEnabled(options.slideOnWheel, event)) {
+      this.actionEvent = event;
+
+      if (delta > 0) {
+        this.next(options.loop);
+      } else if (delta < 0) {
+        this.prev(options.loop);
+      }
+    }
+  },
+
+  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.actionEvent = event;
+          this.zoom(ratio >= 1 ? ratio - 1 : 1 - (1 / ratio));
+        }
+
+        if (options.rotatable && options.rotateOnGesture && isNumber(rotation)) {
+          this.gestureRotation = rotation;
+
+          if (degree !== 0) {
+            this.actionEvent = event;
+            this.rotate(degree);
+          }
+        }
+
+        break;
+      }
+
+      case 'gestureend':
+        this.gesturing = false;
+        this.gestureScale = 1;
+        this.gestureRotation = 0;
+        break;
+
+      default:
+    }
   },
 };