viewerjs 1.9.2 → 1.10.3

package/README.md

@@ -1,6 +1,6 @@
 # Viewer.js
 
-[![Build Status](https://img.shields.io/travis/fengyuanchen/viewerjs.svg)](https://travis-ci.org/fengyuanchen/viewerjs) [![Downloads](https://img.shields.io/npm/dm/viewerjs.svg)](https://www.npmjs.com/package/viewerjs) [![Version](https://img.shields.io/npm/v/viewerjs.svg)](https://www.npmjs.com/package/viewerjs) [![Gzip Size](https://img.shields.io/bundlephobia/minzip/viewerjs.svg)](https://unpkg.com/viewerjs/dist/viewer.common.js) [![Dependencies](https://img.shields.io/david/fengyuanchen/viewerjs.svg)](https://www.npmjs.com/package/viewerjs)
+[![Downloads](https://img.shields.io/npm/dm/viewerjs.svg)](https://www.npmjs.com/package/viewerjs) [![Version](https://img.shields.io/npm/v/viewerjs.svg)](https://www.npmjs.com/package/viewerjs) [![Gzip Size](https://img.shields.io/bundlephobia/minzip/viewerjs.svg)](https://unpkg.com/viewerjs/dist/viewer.common.js)
 
 > JavaScript image viewer.
 
@@ -36,7 +36,7 @@
 - Supports keyboard
 - Cross-browser support
 
-## Main
+## Main files
 
 ```text
 dist/
@@ -206,8 +206,8 @@ new Viewer(image, {
   - `{ key: String }`: customize the size of the button.
   - `{ key: Function }`: customize the click handler of the button.
   - `{ key: { show: Boolean | Number, size: String, click: Function }`: customize each property of the button.
-  - Available keys: "zoomIn", "zoomOut", "oneToOne", "reset", "prev", "play", "next", "rotateLeft", "rotateRight", "flipHorizontal" and "flipVertical".
-  - Available sizes: "small", "medium" (default) and "large".
+  - Available built-in keys: "zoomIn", "zoomOut", "oneToOne", "reset", "prev", "play", "next", "rotateLeft", "rotateRight", "flipHorizontal", "flipVertical".
+  - Available built-in sizes: "small", "medium" (default) and "large".
 
 Specify the visibility and layout of the toolbar its buttons.
 
@@ -234,6 +234,8 @@ new Viewer(image, {
 });
 ```
 
+> see more for [custom toolbar](docs/examples/custom-toolbar.html).
+
 ### className
 
 - Type: `String`
@@ -272,7 +274,7 @@ new Viewer(image, {
 
 ### fullscreen
 
-- Type: `Boolean`
+- Type: `Boolean` or [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions)
 - Default: `true`
 
 Enable to request full screen when play.
@@ -838,7 +840,7 @@ viewer.zoomTo(1); // Zoom to natural size (100%)
 ### play([fullscreen])
 
 - **fullscreen** (optional):
-  - Type: `Boolean`
+  - Type: `Boolean` or [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions)
   - Default: `false`
   - Indicate if request fullscreen or not.
 
@@ -868,7 +870,7 @@ Show the current ratio of the image by percentage.
 
 ### toggle()
 
-Toggle the image size between its natural size and initial size.
+Toggle the image size between its current size and natural size.
 
 > Used by the [`toggleOnDblclick`](#toggleOnDblclick) option.
 

package/dist/viewer.common.js

@@ -1,11 +1,11 @@
 /*!
- * Viewer.js v1.9.2
+ * Viewer.js v1.10.3
  * https://fengyuanchen.github.io/viewerjs
  *
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2021-05-29T03:50:07.891Z
+ * Date: 2022-02-02T05:15:01.702Z
  */
 
 'use strict';
@@ -15,14 +15,9 @@ function ownKeys(object, enumerableOnly) {
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-
-    if (enumerableOnly) {
-      symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-
-    keys.push.apply(keys, symbols);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
   }
 
   return keys;
@@ -30,19 +25,12 @@ function ownKeys(object, enumerableOnly) {
 
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
   }
 
   return target;
@@ -51,17 +39,11 @@ function _objectSpread2(target) {
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 
 function _classCallCheck(instance, Constructor) {
@@ -83,6 +65,9 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
   return Constructor;
 }
 
@@ -153,7 +138,8 @@ var DEFAULTS = {
 
   /**
    * Enable to request fullscreen when play.
-   * @type {boolean}
+   * {@link https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions}
+   * @type {boolean|FullscreenOptions}
    */
   fullscreen: true,
 
@@ -373,6 +359,7 @@ var EVENT_DRAG_START = 'dragstart';
 var EVENT_FOCUSIN = 'focusin';
 var EVENT_KEY_DOWN = 'keydown';
 var EVENT_LOAD = 'load';
+var EVENT_ERROR = 'error';
 var EVENT_TOUCH_END = IS_TOUCH_DEVICE ? 'touchend touchcancel' : 'mouseup';
 var EVENT_TOUCH_MOVE = IS_TOUCH_DEVICE ? 'touchmove' : 'mousemove';
 var EVENT_TOUCH_START = IS_TOUCH_DEVICE ? 'touchstart' : 'mousedown';
@@ -489,15 +476,15 @@ function forEach(data, callback) {
     if (Array.isArray(data) || isNumber(data.length)
     /* array-like */
     ) {
-        var length = data.length;
-        var i;
+      var length = data.length;
+      var i;
 
-        for (i = 0; i < length; i += 1) {
-          if (callback.call(data, data[i], i, data) === false) {
-            break;
-          }
+      for (i = 0; i < length; i += 1) {
+        if (callback.call(data, data[i], i, data) === false) {
+          break;
         }
-      } else if (isObject(data)) {
+      }
+    } else if (isObject(data)) {
       Object.keys(data).forEach(function (key) {
         callback.call(data, data[key], key, data);
       });
@@ -1122,13 +1109,17 @@ var render = {
     this.items = items;
     forEach(items, function (item) {
       var image = item.firstElementChild;
+      var onLoad;
+      var onError;
       setData(image, 'filled', true);
 
       if (options.loading) {
         addClass(item, CLASS_LOADING);
       }
 
-      addListener(image, EVENT_LOAD, function (event) {
+      addListener(image, EVENT_LOAD, onLoad = function onLoad(event) {
+        removeListener(image, EVENT_ERROR, onError);
+
         if (options.loading) {
           removeClass(item, CLASS_LOADING);
         }
@@ -1137,6 +1128,15 @@ var render = {
       }, {
         once: true
       });
+      addListener(image, EVENT_ERROR, onError = function onError() {
+        removeListener(image, EVENT_LOAD, onLoad);
+
+        if (options.loading) {
+          removeClass(item, CLASS_LOADING);
+        }
+      }, {
+        once: true
+      });
     });
 
     if (options.transition) {
@@ -1147,16 +1147,23 @@ var render = {
       });
     }
   },
-  renderList: function renderList(index) {
-    var i = index || this.index;
-    var width = this.items[i].offsetWidth || 30;
-    var outerWidth = width + 1; // 1 pixel of `margin-left` width
-    // Place the active item in the center of the screen
+  renderList: function renderList() {
+    var index = this.index;
+    var item = this.items[index];
+
+    if (!item) {
+      return;
+    }
+
+    var next = item.nextElementSibling;
+    var gutter = parseInt(window.getComputedStyle(next || item).marginLeft, 10);
+    var offsetWidth = item.offsetWidth;
+    var outerWidth = offsetWidth + gutter; // Place the active item in the center of the screen
 
     setStyle(this.list, assign({
-      width: outerWidth * this.length
+      width: outerWidth * this.length - gutter
     }, getTransforms({
-      translateX: (this.viewerData.width - width) / 2 - outerWidth * i
+      translateX: (this.viewerData.width - offsetWidth) / 2 - outerWidth * index
     })));
   },
   resetList: function resetList() {
@@ -1206,6 +1213,7 @@ var render = {
         y: top,
         width: width,
         height: height,
+        oldRatio: 1,
         ratio: width / naturalWidth,
         aspectRatio: aspectRatio,
         naturalWidth: naturalWidth,
@@ -1431,9 +1439,10 @@ var handlers = {
       // Cancel the emulated double click when the native dblclick event was triggered.
       if (IS_TOUCH_DEVICE && event.isTrusted) {
         clearTimeout(this.doubleClickImageTimeout);
-      }
+      } // XXX: No pageX/Y properties in custom event, fallback to the original event.
 
-      this.toggle();
+
+      this.toggle(event.isTrusted ? event : event.detail && event.detail.originalEvent);
     }
   },
   load: function load() {
@@ -1455,7 +1464,7 @@ var handlers = {
       removeClass(this.canvas, CLASS_LOADING);
     }
 
-    image.style.cssText = 'height:0;' + "margin-left:".concat(viewerData.width / 2, "px;") + "margin-top:".concat(viewerData.height / 2, "px;") + 'max-width:none!important;' + 'position:absolute;' + 'width:0;';
+    image.style.cssText = 'height:0;' + "margin-left:".concat(viewerData.width / 2, "px;") + "margin-top:".concat(viewerData.height / 2, "px;") + 'max-width:none!important;' + 'position:relative;' + 'width:0;';
     this.initImage(function () {
       toggleClass(image, CLASS_MOVE, options.movable);
       toggleClass(image, CLASS_TRANSITION, options.transition);
@@ -1700,7 +1709,9 @@ var handlers = {
           this.imageClicked = false; // This timeout will be cleared later when a native dblclick event is triggering
 
           this.doubleClickImageTimeout = setTimeout(function () {
-            dispatchEvent(_this2.image, EVENT_DBLCLICK);
+            dispatchEvent(_this2.image, EVENT_DBLCLICK, {
+              originalEvent: event
+            });
           }, 50);
         } else {
           this.imageClicked = true; // The default timing of a double click in Windows is 500 ms
@@ -1715,7 +1726,9 @@ var handlers = {
         if (options.backdrop && options.backdrop !== 'static' && event.target === this.canvas) {
           // This timeout will be cleared later when a native click event is triggering
           this.clickCanvasTimeout = setTimeout(function () {
-            dispatchEvent(_this2.canvas, EVENT_CLICK);
+            dispatchEvent(_this2.canvas, EVENT_CLICK, {
+              originalEvent: event
+            });
           }, 50);
         }
       }
@@ -1943,7 +1956,7 @@ var methods = {
         addListener(image, EVENT_TRANSITION_END, onImageTransitionEnd, {
           once: true
         });
-        this.zoomTo(0, false, false, true);
+        this.zoomTo(0, false, null, true);
       } else {
         onImageTransitionEnd();
       }
@@ -2012,8 +2025,12 @@ var methods = {
     }
 
     var activeItem = this.items[this.index];
-    removeClass(activeItem, CLASS_ACTIVE);
-    activeItem.removeAttribute('aria-selected');
+
+    if (activeItem) {
+      removeClass(activeItem, CLASS_ACTIVE);
+      activeItem.removeAttribute('aria-selected');
+    }
+
     addClass(item, CLASS_ACTIVE);
     item.setAttribute('aria-selected', true);
 
@@ -2045,6 +2062,7 @@ var methods = {
     };
 
     var onLoad;
+    var onError;
     addListener(element, EVENT_VIEWED, onViewed, {
       once: true
     });
@@ -2073,7 +2091,27 @@ var methods = {
     if (image.complete) {
       this.load();
     } else {
-      addListener(image, EVENT_LOAD, onLoad = this.load.bind(this), {
+      addListener(image, EVENT_LOAD, onLoad = function onLoad() {
+        removeListener(image, EVENT_ERROR, onError);
+
+        _this2.load();
+      }, {
+        once: true
+      });
+      addListener(image, EVENT_ERROR, onError = function onError() {
+        removeListener(image, EVENT_LOAD, onLoad);
+
+        if (_this2.timeout) {
+          clearTimeout(_this2.timeout);
+          _this2.timeout = false;
+        }
+
+        removeClass(image, CLASS_INVISIBLE);
+
+        if (options.loading) {
+          removeClass(_this2.canvas, CLASS_LOADING);
+        }
+      }, {
         once: true
       });
 
@@ -2444,15 +2482,31 @@ var methods = {
         ratio = Math.min(Math.max(ratio, minZoomRatio), maxZoomRatio);
       }
 
-      if (_originalEvent && options.zoomRatio >= 0.055 && ratio > 0.95 && ratio < 1.05) {
-        ratio = 1;
+      if (_originalEvent) {
+        switch (_originalEvent.type) {
+          case 'wheel':
+            if (options.zoomRatio >= 0.055 && ratio > 0.95 && ratio < 1.05) {
+              ratio = 1;
+            }
+
+            break;
+
+          case 'pointermove':
+          case 'touchmove':
+          case 'mousemove':
+            if (ratio > 0.99 && ratio < 1.01) {
+              ratio = 1;
+            }
+
+            break;
+        }
       }
 
       var newWidth = naturalWidth * ratio;
       var newHeight = naturalHeight * ratio;
       var offsetWidth = newWidth - width;
       var offsetHeight = newHeight - height;
-      var oldRatio = width / naturalWidth;
+      var oldRatio = imageData.ratio;
 
       if (isFunction(options.zoom)) {
         addListener(element, EVENT_ZOOM, options.zoom, {
@@ -2472,7 +2526,7 @@ var methods = {
 
       if (_originalEvent) {
         var offset = getOffset(this.viewer);
-        var center = pointers && Object.keys(pointers).length ? getPointersCenter(pointers) : {
+        var center = pointers && Object.keys(pointers).length > 0 ? getPointersCenter(pointers) : {
           pageX: _originalEvent.pageX,
           pageY: _originalEvent.pageY
         }; // Zoom from the triggering point of the event
@@ -2489,6 +2543,7 @@ var methods = {
       imageData.top = imageData.y;
       imageData.width = newWidth;
       imageData.height = newHeight;
+      imageData.oldRatio = oldRatio;
       imageData.ratio = ratio;
       this.renderImage(function () {
         _this6.zooming = false;
@@ -2518,7 +2573,7 @@ var methods = {
 
   /**
    * Play the images
-   * @param {boolean} [fullscreen=false] - Indicate if request fullscreen or not.
+   * @param {boolean|FullscreenOptions} [fullscreen=false] - Indicate if request fullscreen or not.
    * @returns {Viewer} this
    */
   play: function play() {
@@ -2552,7 +2607,7 @@ var methods = {
     this.onLoadWhenPlay = onLoad;
 
     if (fullscreen) {
-      this.requestFullscreen();
+      this.requestFullscreen(fullscreen);
     }
 
     addClass(player, CLASS_SHOW);
@@ -2797,12 +2852,19 @@ var methods = {
     }, 1000);
     return this;
   },
-  // Toggle the image size between its natural size and initial size
+
+  /**
+   * Toggle the image size between its current size and natural size
+   * @param {Event} [_originalEvent=null] - The original event if any.
+   * @returns {Viewer} this
+   */
   toggle: function toggle() {
+    var _originalEvent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+
     if (this.imageData.ratio === 1) {
-      this.zoomTo(this.initialImageData.ratio, true);
+      this.zoomTo(this.imageData.oldRatio, true, _originalEvent);
     } else {
-      this.zoomTo(1, true);
+      this.zoomTo(1, true, _originalEvent);
     }
 
     return this;
@@ -3064,14 +3126,19 @@ var others = {
       });
     }
   },
-  requestFullscreen: function requestFullscreen() {
+  requestFullscreen: function requestFullscreen(options) {
     var document = this.element.ownerDocument;
 
     if (this.fulled && !(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)) {
       var documentElement = document.documentElement; // Element.requestFullscreen()
 
       if (documentElement.requestFullscreen) {
-        documentElement.requestFullscreen();
+        // Avoid TypeError when convert `options` to dictionary
+        if (isPlainObject(options)) {
+          documentElement.requestFullscreen(options);
+        } else {
+          documentElement.requestFullscreen();
+        }
       } else if (documentElement.webkitRequestFullscreen) {
         documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
       } else if (documentElement.mozRequestFullScreen) {