viewerjs 1.13.0 → 1.14.0

package/src/js/methods.js

@@ -17,6 +17,7 @@ import {
   EVENT_MOVE,
   EVENT_MOVED,
   EVENT_PLAY,
+  EVENT_PLAYING,
   EVENT_ROTATE,
   EVENT_ROTATED,
   EVENT_SCALE,
@@ -75,13 +76,23 @@ export default {
       return this;
     }
 
+    const originalEvent = this.actionEvent
+      || this.showOriginalEvent
+      || this.viewOriginalEvent
+      || null;
+
+    this.actionEvent = null;
+    this.showOriginalEvent = originalEvent;
+
     if (isFunction(options.show)) {
       addListener(element, EVENT_SHOW, options.show, {
         once: true,
       });
     }
 
-    if (dispatchEvent(element, EVENT_SHOW) === false || !this.ready) {
+    if (dispatchEvent(element, EVENT_SHOW, {
+      originalEvent,
+    }) === false || !this.ready) {
       return this;
     }
 
@@ -138,13 +149,20 @@ export default {
       return this;
     }
 
+    const originalEvent = this.actionEvent || this.hideOriginalEvent || null;
+
+    this.actionEvent = null;
+    this.hideOriginalEvent = originalEvent;
+
     if (isFunction(options.hide)) {
       addListener(element, EVENT_HIDE, options.hide, {
         once: true,
       });
     }
 
-    if (dispatchEvent(element, EVENT_HIDE) === false || this.destroyed) {
+    if (dispatchEvent(element, EVENT_HIDE, {
+      originalEvent,
+    }) === false || this.destroyed) {
       return this;
     }
 
@@ -200,7 +218,7 @@ export default {
         addListener(image, EVENT_TRANSITION_END, onImageTransitionEnd, {
           once: true,
         });
-        this.zoomTo(0, false, null, null, true);
+        this.zoomTo(0, false, null, true);
       } else {
         onImageTransitionEnd();
       }
@@ -226,6 +244,11 @@ export default {
       return this;
     }
 
+    const originalEvent = this.actionEvent || this.viewOriginalEvent || null;
+
+    this.actionEvent = null;
+    this.viewOriginalEvent = originalEvent;
+
     if (!this.isShown) {
       this.index = index;
       return this.show();
@@ -267,6 +290,7 @@ export default {
       originalImage: this.images[index],
       index,
       image,
+      originalEvent,
     }) === false || !this.isShown || this.hiding || this.played) {
       return this;
     }
@@ -337,71 +361,87 @@ export default {
         }
       }
     };
-    let onLoad;
-    let onError;
 
     addListener(element, EVENT_VIEWED, onViewed, {
       once: true,
     });
 
-    this.viewing = {
-      abort: () => {
-        removeListener(element, EVENT_VIEWED, onViewed);
+    const loadImage = (isFallback = false) => {
+      let onLoad;
+      let onError;
 
-        if (image.complete) {
-          if (this.imageRendering) {
-            this.imageRendering.abort();
-          } else if (this.imageInitializing) {
-            this.imageInitializing.abort();
-          }
-        } else {
-          // Cancel download to save bandwidth.
-          image.src = '';
-          removeListener(image, EVENT_LOAD, onLoad);
-
-          if (this.timeout) {
-            clearTimeout(this.timeout);
-          }
-        }
-      },
-    };
-
-    if (image.complete) {
-      this.load();
-    } else {
-      addListener(image, EVENT_LOAD, onLoad = () => {
-        removeListener(image, EVENT_ERROR, onError);
-        this.load();
-      }, {
-        once: true,
-      });
-      addListener(image, EVENT_ERROR, onError = () => {
+      const clean = () => {
         removeListener(image, EVENT_LOAD, onLoad);
+        removeListener(image, EVENT_ERROR, onError);
 
         if (this.timeout) {
           clearTimeout(this.timeout);
           this.timeout = false;
         }
+      };
+
+      this.viewing = {
+        abort: () => {
+          removeListener(element, EVENT_VIEWED, onViewed);
+
+          if (image.complete) {
+            if (this.imageRendering) {
+              this.imageRendering.abort();
+            } else if (this.imageInitializing) {
+              this.imageInitializing.abort();
+            }
+          } else {
+            // Cancel download to save bandwidth.
+            image.src = '';
+            clean();
+          }
+        },
+      };
+
+      if (image.complete) {
+        this.load();
+      } else {
+        addListener(image, EVENT_LOAD, onLoad = () => {
+          clean();
+          this.load();
+        }, {
+          once: true,
+        });
+        addListener(image, EVENT_ERROR, onError = () => {
+          clean();
+
+          if (!isFallback) {
+            const fallbackSrc = img.src;
 
-        removeClass(image, CLASS_INVISIBLE);
+            if (fallbackSrc && fallbackSrc !== image.src) {
+              image.src = fallbackSrc;
+              loadImage(true);
+              return;
+            }
+          }
+
+          removeClass(image, CLASS_INVISIBLE);
+
+          if (options.loading) {
+            removeClass(this.canvas, CLASS_LOADING);
+          }
+        }, {
+          once: true,
+        });
 
-        if (options.loading) {
-          removeClass(this.canvas, CLASS_LOADING);
+        if (this.timeout) {
+          clearTimeout(this.timeout);
         }
-      }, {
-        once: true,
-      });
 
-      if (this.timeout) {
-        clearTimeout(this.timeout);
+        // Make the image visible if it fails to load within 1s
+        this.timeout = setTimeout(() => {
+          removeClass(image, CLASS_INVISIBLE);
+          this.timeout = false;
+        }, 1000);
       }
+    };
 
-      // Make the image visible if it fails to load within 1s
-      this.timeout = setTimeout(() => {
-        removeClass(image, CLASS_INVISIBLE);
-        this.timeout = false;
-      }, 1000);
-    }
+    loadImage();
 
     return this;
   },
@@ -462,10 +502,9 @@ export default {
    * Move the image to an absolute point.
    * @param {number} x - The new position in the horizontal direction.
    * @param {number} [y=x] - The new position in the vertical direction.
-   * @param {Event} [_originalEvent=null] - The original event if any.
    * @returns {Viewer} this
    */
-  moveTo(x, y = x, _originalEvent = null) {
+  moveTo(x, y = x) {
     const { element, options, imageData } = this;
 
     x = Number(x);
@@ -489,6 +528,10 @@ export default {
       }
 
       if (changed) {
+        const originalEvent = this.actionEvent || null;
+
+        this.actionEvent = null;
+
         if (isFunction(options.move)) {
           addListener(element, EVENT_MOVE, options.move, {
             once: true,
@@ -500,7 +543,7 @@ export default {
           y,
           oldX,
           oldY,
-          originalEvent: _originalEvent,
+          originalEvent,
         }) === false) {
           return this;
         }
@@ -525,7 +568,7 @@ export default {
             y,
             oldX,
             oldY,
-            originalEvent: _originalEvent,
+            originalEvent,
           }, {
             cancelable: false,
           });
@@ -559,6 +602,9 @@ export default {
 
     if (isNumber(degree) && this.viewed && !this.played && options.rotatable) {
       const oldDegree = imageData.rotate;
+      const originalEvent = this.actionEvent || null;
+
+      this.actionEvent = null;
 
       if (isFunction(options.rotate)) {
         addListener(element, EVENT_ROTATE, options.rotate, {
@@ -569,6 +615,7 @@ export default {
       if (dispatchEvent(element, EVENT_ROTATE, {
         degree,
         oldDegree,
+        originalEvent,
       }) === false) {
         return this;
       }
@@ -588,6 +635,7 @@ export default {
         dispatchEvent(element, EVENT_ROTATED, {
           degree,
           oldDegree,
+          originalEvent,
         }, {
           cancelable: false,
         });
@@ -649,6 +697,10 @@ export default {
       }
 
       if (changed) {
+        const originalEvent = this.actionEvent || null;
+
+        this.actionEvent = null;
+
         if (isFunction(options.scale)) {
           addListener(element, EVENT_SCALE, options.scale, {
             once: true,
@@ -660,6 +712,7 @@ export default {
           scaleY,
           oldScaleX,
           oldScaleY,
+          originalEvent,
         }) === false) {
           return this;
         }
@@ -682,6 +735,7 @@ export default {
             scaleY,
             oldScaleX,
             oldScaleY,
+            originalEvent,
           }, {
             cancelable: false,
           });
@@ -697,10 +751,9 @@ export default {
    * @param {number} ratio - The target ratio.
    * @param {boolean} [showTooltip=false] - Indicates whether to show the tooltip.
    * @param {Object} [pivot] - The pivot point coordinate for zooming.
-   * @param {Event} [_originalEvent=null] - The original event if any.
    * @returns {Viewer} this
    */
-  zoom(ratio, showTooltip = false, pivot = null, _originalEvent = null) {
+  zoom(ratio, showTooltip = false, pivot = null) {
     const { imageData } = this;
 
     ratio = Number(ratio);
@@ -715,7 +768,6 @@ export default {
       (imageData.width * ratio) / imageData.naturalWidth,
       showTooltip,
       pivot,
-      _originalEvent,
     );
 
     return this;
@@ -726,11 +778,10 @@ export default {
    * @param {number} ratio - The target ratio.
    * @param {boolean} [showTooltip] - Indicates whether to show the tooltip.
    * @param {Object} [pivot] - The pivot point coordinate for zooming.
-   * @param {Event} [_originalEvent=null] - The original event if any.
-   * @param {Event} [_zoomable=false] - Indicates if the current zoom is available or not.
+   * @param {boolean} [_zoomable=false] - Indicates if the current zoom is available or not.
    * @returns {Viewer} this
    */
-  zoomTo(ratio, showTooltip = false, pivot = null, _originalEvent = null, _zoomable = false) {
+  zoomTo(ratio, showTooltip = false, pivot = null, _zoomable = false) {
     const {
       element,
       options,
@@ -760,8 +811,12 @@ export default {
         ratio = Math.min(Math.max(ratio, minZoomRatio), maxZoomRatio);
       }
 
-      if (_originalEvent) {
-        switch (_originalEvent.type) {
+      const originalEvent = this.actionEvent || null;
+
+      this.actionEvent = null;
+
+      if (originalEvent && originalEvent.type !== EVENT_CLICK) {
+        switch (originalEvent.type) {
           case 'wheel':
             if (options.zoomRatio >= 0.055 && ratio > 0.95 && ratio < 1.05) {
               ratio = 1;
@@ -795,20 +850,20 @@ export default {
       if (dispatchEvent(element, EVENT_ZOOM, {
         ratio,
         oldRatio,
-        originalEvent: _originalEvent,
+        originalEvent,
       }) === false) {
         return this;
       }
 
       this.zooming = true;
 
-      if (_originalEvent) {
+      if (originalEvent && originalEvent.type !== EVENT_CLICK) {
         const offset = getOffset(this.viewer);
         const center = pointers && Object.keys(pointers).length > 0
           ? getPointersCenter(pointers)
           : {
-            pageX: _originalEvent.pageX,
-            pageY: _originalEvent.pageY,
+            pageX: originalEvent.pageX,
+            pageY: originalEvent.pageY,
           };
 
         // Zoom from the triggering point of the event
@@ -842,7 +897,7 @@ export default {
         dispatchEvent(element, EVENT_ZOOMED, {
           ratio,
           oldRatio,
-          originalEvent: _originalEvent,
+          originalEvent,
         }, {
           cancelable: false,
         });
@@ -867,6 +922,9 @@ export default {
     }
 
     const { element, options } = this;
+    const originalEvent = this.actionEvent || null;
+
+    this.actionEvent = null;
 
     if (isFunction(options.play)) {
       addListener(element, EVENT_PLAY, options.play, {
@@ -874,7 +932,9 @@ export default {
       });
     }
 
-    if (dispatchEvent(element, EVENT_PLAY) === false) {
+    if (dispatchEvent(element, EVENT_PLAY, {
+      originalEvent,
+    }) === false) {
       return this;
     }
 
@@ -892,6 +952,7 @@ export default {
     }
 
     addClass(player, CLASS_SHOW);
+    player.removeAttribute('aria-hidden');
     forEach(this.images, (originalImage, i) => {
       const image = document.createElement('img');
 
@@ -917,17 +978,65 @@ export default {
     if (isNumber(options.interval) && options.interval > 0) {
       const prev = () => {
         clearTimeout(this.playing.timeout);
+
+        const currentOriginalEvent = this.actionEvent || null;
+
+        this.actionEvent = null;
+
+        let prevIndex = index - 1;
+
+        prevIndex = prevIndex >= 0 ? prevIndex : total - 1;
+
+        if (isFunction(options.playing)) {
+          addListener(element, EVENT_PLAYING, options.playing, {
+            once: true,
+          });
+        }
+
+        if (dispatchEvent(element, EVENT_PLAYING, {
+          originalImage: this.images[prevIndex],
+          index: prevIndex,
+          image: list[prevIndex],
+          originalEvent: currentOriginalEvent,
+        }) === false) {
+          this.playing.timeout = options.autoplay ? setTimeout(prev, options.interval) : null;
+          return;
+        }
+
         removeClass(list[index], CLASS_IN);
-        index -= 1;
-        index = index >= 0 ? index : total - 1;
+        index = prevIndex;
         addClass(list[index], CLASS_IN);
         this.playing.timeout = options.autoplay ? setTimeout(prev, options.interval) : null;
       };
       const next = () => {
         clearTimeout(this.playing.timeout);
+
+        const currentOriginalEvent = this.actionEvent || null;
+
+        this.actionEvent = null;
+
+        let nextIndex = index + 1;
+
+        nextIndex = nextIndex < total ? nextIndex : 0;
+
+        if (isFunction(options.playing)) {
+          addListener(element, EVENT_PLAYING, options.playing, {
+            once: true,
+          });
+        }
+
+        if (dispatchEvent(element, EVENT_PLAYING, {
+          originalImage: this.images[nextIndex],
+          index: nextIndex,
+          image: list[nextIndex],
+          originalEvent: currentOriginalEvent,
+        }) === false) {
+          this.playing.timeout = options.autoplay ? setTimeout(next, options.interval) : null;
+          return;
+        }
+
         removeClass(list[index], CLASS_IN);
-        index += 1;
-        index = index < total ? index : 0;
+        index = nextIndex;
         addClass(list[index], CLASS_IN);
         this.playing.timeout = options.autoplay ? setTimeout(next, options.interval) : null;
       };
@@ -944,13 +1053,19 @@ export default {
     return this;
   },
 
-  // Stop play
+  /**
+   * Stop play
+   * @returns {Viewer} this
+   */
   stop() {
     if (!this.played) {
       return this;
     }
 
     const { element, options } = this;
+    const originalEvent = this.actionEvent || null;
+
+    this.actionEvent = null;
 
     if (isFunction(options.stop)) {
       addListener(element, EVENT_STOP, options.stop, {
@@ -958,7 +1073,9 @@ export default {
       });
     }
 
-    if (dispatchEvent(element, EVENT_STOP) === false) {
+    if (dispatchEvent(element, EVENT_STOP, {
+      originalEvent,
+    }) === false) {
       return this;
     }
 
@@ -971,6 +1088,7 @@ export default {
       removeListener(image, EVENT_LOAD, this.onLoadWhenPlay);
     });
     removeClass(player, CLASS_SHOW);
+    player.setAttribute('aria-hidden', true);
     player.innerHTML = '';
     this.exitFullscreen();
 
@@ -1133,14 +1251,13 @@ export default {
 
   /**
    * Toggle the image size between its current size and natural size
-   * @param {Event} [_originalEvent=null] - The original event if any.
    * @returns {Viewer} this
    */
-  toggle(_originalEvent = null) {
+  toggle() {
     if (this.imageData.ratio === 1) {
-      this.zoomTo(this.imageData.oldRatio, true, null, _originalEvent);
+      this.zoomTo(this.imageData.oldRatio, true);
     } else {
-      this.zoomTo(1, true, null, _originalEvent);
+      this.zoomTo(1, true);
     }
 
     return this;

package/src/js/others.js

@@ -109,10 +109,14 @@ export default {
       });
     }
 
-    if (dispatchEvent(element, EVENT_SHOWN) === false) {
+    if (dispatchEvent(element, EVENT_SHOWN, {
+      originalEvent: this.showOriginalEvent || null,
+    }) === false) {
       return;
     }
 
+    this.showOriginalEvent = null;
+
     if (this.ready && this.isShown && !this.hiding) {
       this.view(this.index);
     }
@@ -152,9 +156,13 @@ export default {
         });
       }
 
-      dispatchEvent(element, EVENT_HIDDEN, null, {
+      dispatchEvent(element, EVENT_HIDDEN, {
+        originalEvent: this.hideOriginalEvent || null,
+      }, {
         cancelable: false,
       });
+
+      this.hideOriginalEvent = null;
     }
   },
 
@@ -226,7 +234,8 @@ export default {
       case ACTION_MOVE:
         if (offsetX !== 0 || offsetY !== 0) {
           this.pointerMoved = true;
-          this.move(offsetX, offsetY, event);
+          this.actionEvent = event;
+          this.move(offsetX, offsetY);
         }
         break;
 
@@ -236,7 +245,8 @@ export default {
           const zoomRatio = getMaxZoomRatio(pointers);
 
           if (zoomRatio !== 0) {
-            this.zoom(zoomRatio, false, null, event);
+            this.actionEvent = event;
+            this.zoom(zoomRatio);
           }
         }
         break;
@@ -247,7 +257,8 @@ export default {
           const rotateDegree = getMaxRotateDegree(pointers);
 
           if (rotateDegree !== 0) {
-            this.rotate(rotateDegree, event);
+            this.actionEvent = event;
+            this.rotate(rotateDegree);
           }
         }
         break;
@@ -258,7 +269,8 @@ export default {
           const zoomRatio = getMaxZoomRatio(pointers);
 
           if (zoomRatio !== 0) {
-            this.zoom(zoomRatio, false, null, event);
+            this.actionEvent = event;
+            this.zoom(zoomRatio);
           }
         }
 
@@ -266,7 +278,8 @@ export default {
           const rotateDegree = getMaxRotateDegree(pointers);
 
           if (rotateDegree !== 0) {
-            this.rotate(rotateDegree, event);
+            this.actionEvent = event;
+            this.rotate(rotateDegree);
           }
         }
         break;
@@ -280,6 +293,8 @@ export default {
           // Empty `pointers` as `touchend` event will not be fired after swiped in iOS browsers.
           this.pointers = {};
 
+          this.actionEvent = event;
+
           if (offsetX > 1) {
             this.prev(options.loop);
           } else if (offsetX < -1) {

package/src/js/render.js

@@ -84,6 +84,10 @@ export default {
     const navbarOptions = isPlainObject(options.navbar) ? options.navbar : {};
     const probe = document.createElement('li');
 
+    if (!this.containerData) {
+      this.initContainer();
+    }
+
     list.appendChild(probe);
     const itemWidth = probe.offsetWidth + parseInt(window.getComputedStyle(probe).marginLeft, 10);
 

package/src/js/template.js

@@ -4,19 +4,19 @@ export default (
     + '<div class="viewer-magnifier" aria-hidden="true">'
       + '<img class="viewer-magnifier-image" alt="">'
     + '</div>'
-    + '<div class="viewer-navigation">'
+    + '<div class="viewer-navigation" aria-hidden="true">'
       + '<div class="viewer-prev" data-viewer-action="prev" role="button" aria-label="Previous"></div>'
       + '<div class="viewer-next" data-viewer-action="next" role="button" aria-label="Next"></div>'
     + '</div>'
-    + '<div class="viewer-footer">'
-      + '<div class="viewer-title"></div>'
-      + '<div class="viewer-toolbar"></div>'
-      + '<div class="viewer-navbar">'
+    + '<div class="viewer-footer" aria-hidden="true">'
+      + '<div class="viewer-title" aria-hidden="true"></div>'
+      + '<div class="viewer-toolbar" aria-hidden="true"></div>'
+      + '<div class="viewer-navbar" aria-hidden="true">'
         + '<ul class="viewer-list" role="navigation"></ul>'
       + '</div>'
     + '</div>'
     + '<div class="viewer-tooltip" role="alert" aria-hidden="true"></div>'
-    + '<div class="viewer-button" data-viewer-action="mix" role="button"></div>'
-    + '<div class="viewer-player"></div>'
+    + '<div class="viewer-button" data-viewer-action="mix" role="button" aria-hidden="true"></div>'
+    + '<div class="viewer-player" aria-hidden="true"></div>'
   + '</div>'
 );

package/src/js/utilities.js

@@ -16,6 +16,33 @@ export function isString(value) {
   return typeof value === 'string';
 }
 
+const MODIFIER_KEY_PROPERTIES = {
+  ctrl: 'ctrlKey',
+  shift: 'shiftKey',
+  alt: 'altKey',
+  meta: 'metaKey',
+};
+
+/**
+ * Check if a wheel option (`zoomOnWheel` or `slideOnWheel`) takes effect for the given wheel event.
+ * @param {boolean | string} option - The option value.
+ * @param {WheelEvent} event - The wheel event.
+ * @returns {boolean} Returns `true` if the option takes effect for the event, else `false`.
+ */
+export function isWheelActionEnabled(option, event) {
+  if (!option) {
+    return false;
+  }
+
+  if (option === true) {
+    return true;
+  }
+
+  return isString(option) && option
+    .split('+')
+    .every((key) => event[MODIFIER_KEY_PROPERTIES[key.trim().toLowerCase()]]);
+}
+
 /**
  * Check if the given value is not a number.
  */