build: release 1.7.0

fengyuanchen · Sep 26, 2020 · 6283892 · 6283892
1 parent 5b0a6d3
commit 6283892
Show file tree

Hide file tree

Showing 16 changed files with 3,770 additions and 2,515 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,12 +1,12 @@
 # Changelog
 
-## next
+## 1.7.0 (Sep 26, 2020)
 
 - Add 2 new events: `play` and `stop` (#411).
 - Let the `viewed`, `zoomed` and `hidden` events can not be canceled.
 - Improve the TypeScript declarations in the `types/index.d.ts` file.
 
-## 1.6.2 (Sep 30, 2020)
+## 1.6.2 (Aug 30, 2020)
 
 - Fix wrong usage about `this` in ES6+ (#395).
 - Improve the wheel zoom behavior (#396).

diff --git a/dist/viewer.common.js b/dist/viewer.common.js
@@ -1,11 +1,11 @@
 /*!
- * Viewer.js v1.6.2
+ * Viewer.js v1.7.0
  * https://fengyuanchen.github.io/viewerjs
  *
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2020-08-30T02:33:40.250Z
+ * Date: 2020-09-26T06:58:07.157Z
  */
 
 'use strict';
@@ -316,7 +316,9 @@ var DEFAULTS = {
   view: null,
   viewed: null,
   zoom: null,
-  zoomed: null
+  zoomed: null,
+  play: null,
+  stop: null
 };
 
 var TEMPLATE = '<div class="viewer-container" touch-action="none">' + '<div class="viewer-canvas"></div>' + '<div class="viewer-footer">' + '<div class="viewer-title"></div>' + '<div class="viewer-toolbar"></div>' + '<div class="viewer-navbar">' + '<ul class="viewer-list"></ul>' + '</div>' + '</div>' + '<div class="viewer-tooltip"></div>' + '<div role="button" class="viewer-button" data-viewer-action="mix"></div>' + '<div class="viewer-player"></div>' + '</div>';
@@ -371,7 +373,9 @@ var EVENT_VIEW = 'view';
 var EVENT_VIEWED = 'viewed';
 var EVENT_WHEEL = 'wheel';
 var EVENT_ZOOM = 'zoom';
-var EVENT_ZOOMED = 'zoomed'; // Data keys
+var EVENT_ZOOMED = 'zoomed';
+var EVENT_PLAY = 'play';
+var EVENT_STOP = 'stop'; // Data keys
 
 var DATA_ACTION = "".concat(NAMESPACE, "Action"); // RegExps
 
@@ -780,18 +784,19 @@ function addListener(element, type, listener) {
  * @param {Element} element - The event target.
  * @param {string} type - The event type(s).
  * @param {Object} data - The additional event data.
+ * @param {Object} options - The additional event options.
  * @returns {boolean} Indicate if the event is default prevented or not.
  */
 
-function dispatchEvent(element, type, data) {
+function dispatchEvent(element, type, data, options) {
   var event; // Event and CustomEvent on IE9-11 are global objects, not constructors
 
   if (isFunction(Event) && isFunction(CustomEvent)) {
-    event = new CustomEvent(type, {
-      detail: data,
+    event = new CustomEvent(type, _objectSpread2({
       bubbles: true,
-      cancelable: true
-    });
+      cancelable: true,
+      detail: data
+    }, options));
   } else {
     event = document.createEvent('CustomEvent');
     event.initCustomEvent(type, true, true, data);
@@ -1430,6 +1435,8 @@ var handlers = {
           originalImage: _this.images[index],
           index: index,
           image: image
+        }, {
+          cancelable: false
         });
       });
     });
@@ -2217,6 +2224,8 @@ var methods = {
           ratio: ratio,
           oldRatio: oldRatio,
           originalEvent: _originalEvent
+        }, {
+          cancelable: false
         });
       });
 
@@ -2322,8 +2331,20 @@ var methods = {
       return this;
     }
 
-    var options = this.options,
-        player = this.player;
+    var element = this.element,
+        options = this.options;
+
+    if (isFunction(options.play)) {
+      addListener(element, EVENT_PLAY, options.play, {
+        once: true
+      });
+    }
+
+    if (dispatchEvent(element, EVENT_PLAY) === false) {
+      return this;
+    }
+
+    var player = this.player;
     var onLoad = this.loadImage.bind(this);
     var list = [];
     var total = 0;
@@ -2384,6 +2405,19 @@ var methods = {
       return this;
     }
 
+    var element = this.element,
+        options = this.options;
+
+    if (isFunction(options.stop)) {
+      addListener(element, EVENT_STOP, options.stop, {
+        once: true
+      });
+    }
+
+    if (dispatchEvent(element, EVENT_STOP) === false) {
+      return this;
+    }
+
     var player = this.player;
     this.played = false;
     clearTimeout(this.playing);
@@ -2595,17 +2629,18 @@ var methods = {
     this.length = images.length;
 
     if (this.ready) {
-      var indexes = [];
+      var changedIndexes = [];
       forEach(this.items, function (item, i) {
         var img = item.querySelector('img');
         var image = images[i];
 
         if (image && img) {
-          if (image.src !== img.src) {
-            indexes.push(i);
+          if (image.src !== img.src // Title changed (#408)
+          || image.alt !== img.alt) {
+            changedIndexes.push(i);
           }
         } else {
-          indexes.push(i);
+          changedIndexes.push(i);
         }
       });
       setStyle(this.list, {
@@ -2616,12 +2651,13 @@ var methods = {
       if (this.isShown) {
         if (this.length) {
           if (this.viewed) {
-            var index = indexes.indexOf(this.index);
+            var changedIndex = changedIndexes.indexOf(this.index);
 
-            if (index >= 0) {
+            if (changedIndex >= 0) {
               this.viewed = false;
-              this.view(Math.max(this.index - (index + 1), 0));
+              this.view(Math.max(Math.min(this.index - changedIndex, this.length - 1), 0));
             } else {
+              // Reactivate the current viewing item after reset the list.
               addClass(this.items[this.index], CLASS_ACTIVE);
             }
           }
@@ -2767,7 +2803,9 @@ var others = {
         });
       }
 
-      dispatchEvent(element, EVENT_HIDDEN);
+      dispatchEvent(element, EVENT_HIDDEN, null, {
+        cancelable: false
+      });
     }
   },
   requestFullscreen: function requestFullscreen() {

diff --git a/dist/viewer.css b/dist/viewer.css
@@ -1,11 +1,11 @@
 /*!
- * Viewer.js v1.6.2
+ * Viewer.js v1.7.0
  * https://fengyuanchen.github.io/viewerjs
  *
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2020-08-30T02:26:54.370Z
+ * Date: 2020-09-26T06:58:02.142Z
  */
 
 .viewer-zoom-in::before,

diff --git a/dist/viewer.esm.js b/dist/viewer.esm.js
@@ -1,11 +1,11 @@
 /*!
- * Viewer.js v1.6.2
+ * Viewer.js v1.7.0
  * https://fengyuanchen.github.io/viewerjs
  *
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2020-08-30T02:33:40.250Z
+ * Date: 2020-09-26T06:58:07.157Z
  */
 
 function _typeof(obj) {
@@ -314,7 +314,9 @@ var DEFAULTS = {
   view: null,
   viewed: null,
   zoom: null,
-  zoomed: null
+  zoomed: null,
+  play: null,
+  stop: null
 };
 
 var TEMPLATE = '<div class="viewer-container" touch-action="none">' + '<div class="viewer-canvas"></div>' + '<div class="viewer-footer">' + '<div class="viewer-title"></div>' + '<div class="viewer-toolbar"></div>' + '<div class="viewer-navbar">' + '<ul class="viewer-list"></ul>' + '</div>' + '</div>' + '<div class="viewer-tooltip"></div>' + '<div role="button" class="viewer-button" data-viewer-action="mix"></div>' + '<div class="viewer-player"></div>' + '</div>';
@@ -369,7 +371,9 @@ var EVENT_VIEW = 'view';
 var EVENT_VIEWED = 'viewed';
 var EVENT_WHEEL = 'wheel';
 var EVENT_ZOOM = 'zoom';
-var EVENT_ZOOMED = 'zoomed'; // Data keys
+var EVENT_ZOOMED = 'zoomed';
+var EVENT_PLAY = 'play';
+var EVENT_STOP = 'stop'; // Data keys
 
 var DATA_ACTION = "".concat(NAMESPACE, "Action"); // RegExps
 
@@ -778,18 +782,19 @@ function addListener(element, type, listener) {
  * @param {Element} element - The event target.
  * @param {string} type - The event type(s).
  * @param {Object} data - The additional event data.
+ * @param {Object} options - The additional event options.
  * @returns {boolean} Indicate if the event is default prevented or not.
  */
 
-function dispatchEvent(element, type, data) {
+function dispatchEvent(element, type, data, options) {
   var event; // Event and CustomEvent on IE9-11 are global objects, not constructors
 
   if (isFunction(Event) && isFunction(CustomEvent)) {
-    event = new CustomEvent(type, {
-      detail: data,
+    event = new CustomEvent(type, _objectSpread2({
       bubbles: true,
-      cancelable: true
-    });
+      cancelable: true,
+      detail: data
+    }, options));
   } else {
     event = document.createEvent('CustomEvent');
     event.initCustomEvent(type, true, true, data);
@@ -1428,6 +1433,8 @@ var handlers = {
           originalImage: _this.images[index],
           index: index,
           image: image
+        }, {
+          cancelable: false
         });
       });
     });
@@ -2215,6 +2222,8 @@ var methods = {
           ratio: ratio,
           oldRatio: oldRatio,
           originalEvent: _originalEvent
+        }, {
+          cancelable: false
         });
       });
 
@@ -2320,8 +2329,20 @@ var methods = {
       return this;
     }
 
-    var options = this.options,
-        player = this.player;
+    var element = this.element,
+        options = this.options;
+
+    if (isFunction(options.play)) {
+      addListener(element, EVENT_PLAY, options.play, {
+        once: true
+      });
+    }
+
+    if (dispatchEvent(element, EVENT_PLAY) === false) {
+      return this;
+    }
+
+    var player = this.player;
     var onLoad = this.loadImage.bind(this);
     var list = [];
     var total = 0;
@@ -2382,6 +2403,19 @@ var methods = {
       return this;
     }
 
+    var element = this.element,
+        options = this.options;
+
+    if (isFunction(options.stop)) {
+      addListener(element, EVENT_STOP, options.stop, {
+        once: true
+      });
+    }
+
+    if (dispatchEvent(element, EVENT_STOP) === false) {
+      return this;
+    }
+
     var player = this.player;
     this.played = false;
     clearTimeout(this.playing);
@@ -2593,17 +2627,18 @@ var methods = {
     this.length = images.length;
 
     if (this.ready) {
-      var indexes = [];
+      var changedIndexes = [];
       forEach(this.items, function (item, i) {
         var img = item.querySelector('img');
         var image = images[i];
 
         if (image && img) {
-          if (image.src !== img.src) {
-            indexes.push(i);
+          if (image.src !== img.src // Title changed (#408)
+          || image.alt !== img.alt) {
+            changedIndexes.push(i);
           }
         } else {
-          indexes.push(i);
+          changedIndexes.push(i);
         }
       });
       setStyle(this.list, {
@@ -2614,12 +2649,13 @@ var methods = {
       if (this.isShown) {
         if (this.length) {
           if (this.viewed) {
-            var index = indexes.indexOf(this.index);
+            var changedIndex = changedIndexes.indexOf(this.index);
 
-            if (index >= 0) {
+            if (changedIndex >= 0) {
               this.viewed = false;
-              this.view(Math.max(this.index - (index + 1), 0));
+              this.view(Math.max(Math.min(this.index - changedIndex, this.length - 1), 0));
             } else {
+              // Reactivate the current viewing item after reset the list.
               addClass(this.items[this.index], CLASS_ACTIVE);
             }
           }
@@ -2765,7 +2801,9 @@ var others = {
         });
       }
 
-      dispatchEvent(element, EVENT_HIDDEN);
+      dispatchEvent(element, EVENT_HIDDEN, null, {
+        cancelable: false
+      });
     }
   },
   requestFullscreen: function requestFullscreen() {