viewerjs 1.10.0 → 1.10.4

package/dist/viewer.esm.js

@@ -1,11 +1,11 @@
 /*!
- * Viewer.js v1.10.0
+ * Viewer.js v1.10.4
  * https://fengyuanchen.github.io/viewerjs
  *
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2021-06-12T07:57:10.970Z
+ * Date: 2022-02-13T08:40:00.127Z
  */
 
 function ownKeys(object, enumerableOnly) {
@@ -13,14 +13,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;
@@ -28,19 +23,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;
@@ -49,17 +37,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) {
@@ -81,6 +63,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;
 }
 
@@ -372,6 +357,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';
@@ -488,15 +474,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);
       });
@@ -1121,13 +1107,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);
         }
@@ -1136,6 +1126,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) {
@@ -1146,16 +1145,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() {
@@ -1431,9 +1437,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(event);
+      this.toggle(event.isTrusted ? event : event.detail && event.detail.originalEvent);
     }
   },
   load: function load() {
@@ -1455,7 +1462,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 +1707,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 +1724,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);
         }
       }
@@ -2012,8 +2023,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 +2060,7 @@ var methods = {
     };
 
     var onLoad;
+    var onError;
     addListener(element, EVENT_VIEWED, onViewed, {
       once: true
     });
@@ -2073,7 +2089,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,8 +2480,24 @@ 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;
@@ -2472,7 +2524,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
@@ -3512,4 +3564,4 @@ var Viewer = /*#__PURE__*/function () {
 
 assign(Viewer.prototype, render, events, handlers, methods, others);
 
-export default Viewer;
+export { Viewer as default };

package/dist/viewer.js

@@ -1,32 +1,27 @@
 /*!
- * Viewer.js v1.10.0
+ * Viewer.js v1.10.4
  * https://fengyuanchen.github.io/viewerjs
  *
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2021-06-12T07:57:10.970Z
+ * Date: 2022-02-13T08:40:00.127Z
  */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Viewer = factory());
-}(this, (function () { 'use strict';
+})(this, (function () { 'use strict';
 
   function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
 
     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;
@@ -34,19 +29,12 @@
 
   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;
@@ -55,17 +43,11 @@
   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) {
@@ -87,6 +69,9 @@
   function _createClass(Constructor, protoProps, staticProps) {
     if (protoProps) _defineProperties(Constructor.prototype, protoProps);
     if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
+    });
     return Constructor;
   }
 
@@ -378,6 +363,7 @@
   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';
@@ -494,15 +480,15 @@
       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);
         });
@@ -1127,13 +1113,17 @@
       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);
           }
@@ -1142,6 +1132,15 @@
         }, {
           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) {
@@ -1152,16 +1151,23 @@
         });
       }
     },
-    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() {
@@ -1437,9 +1443,10 @@
         // 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(event);
+        this.toggle(event.isTrusted ? event : event.detail && event.detail.originalEvent);
       }
     },
     load: function load() {
@@ -1461,7 +1468,7 @@
         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);
@@ -1706,7 +1713,9 @@
             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
@@ -1721,7 +1730,9 @@
           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);
           }
         }
@@ -2018,8 +2029,12 @@
       }
 
       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);
 
@@ -2051,6 +2066,7 @@
       };
 
       var onLoad;
+      var onError;
       addListener(element, EVENT_VIEWED, onViewed, {
         once: true
       });
@@ -2079,7 +2095,27 @@
       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
         });
 
@@ -2450,8 +2486,24 @@
           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;
@@ -2478,7 +2530,7 @@
 
         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
@@ -3520,4 +3572,4 @@
 
   return Viewer;
 
-})));
+}));