viewerjs 1.12.0 → 1.13.0

package/src/js/methods.js

@@ -41,9 +41,11 @@ import {
   getOffset,
   getPointersCenter,
   hasClass,
+  inheritAttributes,
   isFunction,
   isNumber,
   isPlainObject,
+  isTransitionEnabled,
   isUndefined,
   removeClass,
   removeListener,
@@ -98,7 +100,7 @@ export default {
     viewer.setAttribute('aria-modal', true);
     viewer.removeAttribute('aria-hidden');
 
-    if (options.transition && !immediate) {
+    if (isTransitionEnabled(options, 'show') && !immediate) {
       const shown = this.shown.bind(this);
 
       this.transitioning = {
@@ -142,7 +144,7 @@ export default {
       });
     }
 
-    if (dispatchEvent(element, EVENT_HIDE) === false) {
+    if (dispatchEvent(element, EVENT_HIDE) === false || this.destroyed) {
       return this;
     }
 
@@ -164,7 +166,7 @@ export default {
       this.hidden();
     };
 
-    if (options.transition && !immediate) {
+    if (isTransitionEnabled(options, 'hide') && !immediate) {
       const onViewerTransitionEnd = (event) => {
         // Ignore all propagating `transitionend` events (#275).
         if (event && event.target === viewer) {
@@ -215,10 +217,12 @@ export default {
    * @returns {Viewer} this
    */
   view(index = this.options.initialViewIndex) {
+    const previousIndex = this.index;
+
     index = Number(index) || 0;
 
     if (this.hiding || this.played || index < 0 || index >= this.length
-      || (this.viewed && index === this.index)) {
+      || (this.viewed && index === previousIndex)) {
       return this;
     }
 
@@ -237,20 +241,19 @@ export default {
       title,
       canvas,
     } = this;
-    const item = this.items[index];
+    let item = this.getItem(index);
+
+    if (!item) {
+      this.initList(index);
+      item = this.getItem(index);
+    }
+
     const img = item.querySelector('img');
     const url = getData(img, 'originalUrl');
     const alt = img.getAttribute('alt');
     const image = document.createElement('img');
 
-    forEach(options.inheritedAttributes, (name) => {
-      const value = img.getAttribute(name);
-
-      if (value !== null) {
-        image.setAttribute(name, value);
-      }
-    });
-
+    inheritAttributes(image, img, options.inheritedAttributes);
     image.src = url;
     image.alt = alt;
 
@@ -268,7 +271,9 @@ export default {
       return this;
     }
 
-    const activeItem = this.items[this.index];
+    this.hideMagnifier();
+
+    const activeItem = this.getItem(previousIndex);
 
     if (activeItem) {
       removeClass(activeItem, CLASS_ACTIVE);
@@ -309,6 +314,28 @@ export default {
       title.innerHTML = escapeHTMLEntities(isFunction(render)
         ? render.call(this, image, imageData)
         : `${alt} (${imageData.naturalWidth} × ${imageData.naturalHeight})`);
+
+      // Preload the image in the direction of navigation
+      if (options.preload) {
+        const direction = index < previousIndex ? -1 : 1;
+        let nextIndex = index + direction;
+
+        if (nextIndex < 0 || nextIndex >= this.length) {
+          if (options.loop) {
+            nextIndex = direction > 0 ? 0 : this.length - 1;
+          } else {
+            nextIndex = -1;
+          }
+        }
+
+        if (nextIndex !== index) {
+          const nextImage = this.images[nextIndex];
+          const preloadedImage = document.createElement('img');
+
+          inheritAttributes(preloadedImage, nextImage, options.inheritedAttributes);
+          preloadedImage.src = this.getImageURL(nextImage) || nextImage.src;
+        }
+      }
     };
     let onLoad;
     let onError;
@@ -482,6 +509,7 @@ export default {
         imageData.y = y;
         imageData.left = x;
         imageData.top = y;
+        toggleClass(this.image, CLASS_TRANSITION, isTransitionEnabled(options, 'move'));
         this.moving = true;
         this.renderImage(() => {
           this.moving = false;
@@ -546,6 +574,7 @@ export default {
       }
 
       imageData.rotate = degree;
+      toggleClass(this.image, CLASS_TRANSITION, isTransitionEnabled(options, 'rotate'));
       this.rotating = true;
       this.renderImage(() => {
         this.rotating = false;
@@ -637,6 +666,7 @@ export default {
 
         imageData.scaleX = scaleX;
         imageData.scaleY = scaleY;
+        toggleClass(this.image, CLASS_TRANSITION, isTransitionEnabled(options, 'scale'));
         this.scaling = true;
         this.renderImage(() => {
           this.scaling = false;
@@ -720,8 +750,12 @@ export default {
 
     if (isNumber(ratio) && this.viewed && !this.played && (_zoomable || options.zoomable)) {
       if (!_zoomable) {
-        const minZoomRatio = Math.max(0.01, options.minZoomRatio);
-        const maxZoomRatio = Math.min(100, options.maxZoomRatio);
+        const minZoomRatio = Math.max(0.01, isFunction(options.minZoomRatio)
+          ? options.minZoomRatio.call(this, this.image, imageData)
+          : options.minZoomRatio);
+        const maxZoomRatio = Math.min(100, isFunction(options.maxZoomRatio)
+          ? options.maxZoomRatio.call(this, this.image, imageData)
+          : options.maxZoomRatio);
 
         ratio = Math.min(Math.max(ratio, minZoomRatio), maxZoomRatio);
       }
@@ -795,6 +829,7 @@ export default {
       imageData.height = newHeight;
       imageData.oldRatio = oldRatio;
       imageData.ratio = ratio;
+      toggleClass(this.image, CLASS_TRANSITION, isTransitionEnabled(options, 'zoom'));
       this.renderImage(() => {
         this.zooming = false;
 
@@ -857,18 +892,17 @@ export default {
     }
 
     addClass(player, CLASS_SHOW);
-    forEach(this.items, (item, i) => {
-      const img = item.querySelector('img');
+    forEach(this.images, (originalImage, i) => {
       const image = document.createElement('img');
 
-      image.src = getData(img, 'originalUrl');
-      image.alt = img.getAttribute('alt');
-      image.referrerPolicy = img.referrerPolicy;
+      image.src = this.getImageURL(originalImage) || originalImage.src;
+      image.alt = originalImage.alt || '';
+      image.referrerPolicy = originalImage.referrerPolicy;
       total += 1;
       addClass(image, CLASS_FADE);
-      toggleClass(image, CLASS_TRANSITION, options.transition);
+      toggleClass(image, CLASS_TRANSITION, isTransitionEnabled(options, 'play'));
 
-      if (hasClass(item, CLASS_ACTIVE)) {
+      if (i === this.index) {
         addClass(image, CLASS_IN);
         index = i;
       }
@@ -887,7 +921,7 @@ export default {
         index -= 1;
         index = index >= 0 ? index : total - 1;
         addClass(list[index], CLASS_IN);
-        this.playing.timeout = setTimeout(prev, options.interval);
+        this.playing.timeout = options.autoplay ? setTimeout(prev, options.interval) : null;
       };
       const next = () => {
         clearTimeout(this.playing.timeout);
@@ -895,14 +929,14 @@ export default {
         index += 1;
         index = index < total ? index : 0;
         addClass(list[index], CLASS_IN);
-        this.playing.timeout = setTimeout(next, options.interval);
+        this.playing.timeout = options.autoplay ? setTimeout(next, options.interval) : null;
       };
 
       if (total > 1) {
         this.playing = {
           prev,
           next,
-          timeout: setTimeout(next, options.interval),
+          timeout: options.autoplay ? setTimeout(next, options.interval) : null,
         };
       }
     }
@@ -960,12 +994,10 @@ export default {
     this.open();
     addClass(this.button, CLASS_FULLSCREEN_EXIT);
 
-    if (options.transition) {
-      removeClass(list, CLASS_TRANSITION);
+    removeClass(list, CLASS_TRANSITION);
 
-      if (this.viewed) {
-        removeClass(image, CLASS_TRANSITION);
-      }
+    if (this.viewed) {
+      removeClass(image, CLASS_TRANSITION);
     }
 
     addClass(viewer, CLASS_FIXED);
@@ -987,14 +1019,7 @@ export default {
 
     if (this.viewed) {
       this.initImage(() => {
-        this.renderImage(() => {
-          if (options.transition) {
-            setTimeout(() => {
-              addClass(image, CLASS_TRANSITION);
-              addClass(list, CLASS_TRANSITION);
-            }, 0);
-          }
-        });
+        this.renderImage();
       });
     }
 
@@ -1018,12 +1043,10 @@ export default {
     this.close();
     removeClass(this.button, CLASS_FULLSCREEN_EXIT);
 
-    if (options.transition) {
-      removeClass(list, CLASS_TRANSITION);
+    removeClass(list, CLASS_TRANSITION);
 
-      if (this.viewed) {
-        removeClass(image, CLASS_TRANSITION);
-      }
+    if (this.viewed) {
+      removeClass(image, CLASS_TRANSITION);
     }
 
     if (options.focus) {
@@ -1044,14 +1067,7 @@ export default {
 
     if (this.viewed) {
       this.initImage(() => {
-        this.renderImage(() => {
-          if (options.transition) {
-            setTimeout(() => {
-              addClass(image, CLASS_TRANSITION);
-              addClass(list, CLASS_TRANSITION);
-            }, 0);
-          }
-        });
+        this.renderImage();
       });
     }
 
@@ -1069,7 +1085,7 @@ export default {
     tooltipBox.textContent = `${Math.round(imageData.ratio * 100)}%`;
 
     if (!this.tooltipping) {
-      if (options.transition) {
+      if (isTransitionEnabled(options, 'tooltip')) {
         if (this.fading) {
           dispatchEvent(tooltipBox, EVENT_TRANSITION_END);
         }
@@ -1091,7 +1107,7 @@ export default {
     }
 
     this.tooltipping = setTimeout(() => {
-      if (options.transition) {
+      if (isTransitionEnabled(options, 'tooltip')) {
         addListener(tooltipBox, EVENT_TRANSITION_END, () => {
           removeClass(tooltipBox, CLASS_SHOW);
           removeClass(tooltipBox, CLASS_FADE);
@@ -1140,10 +1156,18 @@ export default {
     return this;
   },
 
-  // Update viewer when images changed
-  update() {
+  /**
+   * Update the viewer when images or options changed.
+   * @param {Object} [updateOptions] - The options to update.
+   * @returns {Viewer} this
+   */
+  update(updateOptions) {
     const { element, options, isImg } = this;
 
+    if (isPlainObject(updateOptions)) {
+      assign(options, updateOptions);
+    }
+
     // Destroy viewer if the target image was deleted
     if (isImg && !element.parentNode) {
       return this.destroy();
@@ -1171,9 +1195,10 @@ export default {
     if (this.ready) {
       const changedIndexes = [];
 
-      forEach(this.items, (item, i) => {
+      forEach(this.items, (item) => {
         const img = item.querySelector('img');
-        const image = images[i];
+        const index = Number(getData(item, 'index'));
+        const image = images[index];
 
         if (image && img) {
           if (
@@ -1182,10 +1207,10 @@ export default {
             // Title changed (#408)
             || image.alt !== img.alt
           ) {
-            changedIndexes.push(i);
+            changedIndexes.push(index);
           }
         } else {
-          changedIndexes.push(i);
+          changedIndexes.push(index);
         }
       });
 
@@ -1204,7 +1229,7 @@ export default {
               this.viewed = false;
               this.view(Math.max(Math.min(this.index - changedIndex, this.length - 1), 0));
             } else {
-              const activeItem = this.items[this.index];
+              const activeItem = this.getItem(this.index);
 
               // Reactivate the current viewing item after reset the list.
               addClass(activeItem, CLASS_ACTIVE);

package/src/js/others.js

@@ -1,6 +1,8 @@
 import {
   ACTION_MOVE,
+  ACTION_ROTATE,
   ACTION_SWITCH,
+  ACTION_TRANSFORM,
   ACTION_ZOOM,
   CLASS_HIDE,
   CLASS_OPEN,
@@ -13,6 +15,7 @@ import {
   addListener,
   dispatchEvent,
   forEach,
+  getMaxRotateDegree,
   getMaxZoomRatio,
   isFunction,
   isPlainObject,
@@ -156,7 +159,7 @@ export default {
   },
 
   requestFullscreen(options) {
-    const document = this.element.ownerDocument;
+    const { ownerDocument: document } = this;
 
     if (this.fulled && !(
       document.fullscreenElement
@@ -185,7 +188,7 @@ export default {
   },
 
   exitFullscreen() {
-    const document = this.element.ownerDocument;
+    const { ownerDocument: document } = this;
 
     if (this.fulled && (
       document.fullscreenElement
@@ -229,7 +232,43 @@ export default {
 
       // Zoom the current image
       case ACTION_ZOOM:
-        this.zoom(getMaxZoomRatio(pointers), false, null, event);
+        if (options.zoomable && options.zoomOnTouch) {
+          const zoomRatio = getMaxZoomRatio(pointers);
+
+          if (zoomRatio !== 0) {
+            this.zoom(zoomRatio, false, null, event);
+          }
+        }
+        break;
+
+      // Rotate the current image
+      case ACTION_ROTATE:
+        if (options.rotatable && options.rotateOnTouch) {
+          const rotateDegree = getMaxRotateDegree(pointers);
+
+          if (rotateDegree !== 0) {
+            this.rotate(rotateDegree, event);
+          }
+        }
+        break;
+
+      // Transform the current image
+      case ACTION_TRANSFORM:
+        if (options.zoomable && options.zoomOnTouch) {
+          const zoomRatio = getMaxZoomRatio(pointers);
+
+          if (zoomRatio !== 0) {
+            this.zoom(zoomRatio, false, null, event);
+          }
+        }
+
+        if (options.rotatable && options.rotateOnTouch) {
+          const rotateDegree = getMaxRotateDegree(pointers);
+
+          if (rotateDegree !== 0) {
+            this.rotate(rotateDegree, event);
+          }
+        }
         break;
 
       case ACTION_SWITCH: {

package/src/js/render.js

@@ -1,4 +1,5 @@
 import {
+  CLASS_ACTIVE,
   CLASS_LOADING,
   CLASS_TRANSITION,
   EVENT_ERROR,
@@ -11,11 +12,15 @@ import {
   addListener,
   assign,
   forEach,
+  getData,
   getImageNameFromURL,
   getImageNaturalSizes,
   getTransforms,
   hasClass,
+  inheritAttributes,
   isNumber,
+  isPlainObject,
+  isTransitionEnabled,
   removeClass,
   removeListener,
   setData,
@@ -31,7 +36,7 @@ export default {
   },
 
   initBody() {
-    const { ownerDocument } = this.element;
+    const { ownerDocument } = this;
     const body = ownerDocument.body || ownerDocument.documentElement;
 
     this.body = body;
@@ -73,14 +78,41 @@ export default {
     }
   },
 
-  initList() {
+  initList(viewIndex = this.index) {
     const { element, options, list } = this;
     const items = [];
+    const navbarOptions = isPlainObject(options.navbar) ? options.navbar : {};
+    const probe = document.createElement('li');
+
+    list.appendChild(probe);
+    const itemWidth = probe.offsetWidth + parseInt(window.getComputedStyle(probe).marginLeft, 10);
+
+    list.removeChild(probe);
+
+    let visibleItemCount = isNumber(navbarOptions.visibleItemCount)
+      ? Math.floor(navbarOptions.visibleItemCount)
+      : Math.floor(this.containerData.width / itemWidth);
+
+    visibleItemCount = Math.min(visibleItemCount, this.length);
+
+    const start = visibleItemCount > 0
+      ? Math.min(
+        Math.max(0, viewIndex - Math.floor(visibleItemCount / 2)),
+        Math.max(0, this.length - visibleItemCount),
+      )
+      : 0;
+    const end = visibleItemCount > 0
+      ? Math.min(this.length, start + visibleItemCount)
+      : this.length;
 
     // initList may be called in this.update, so should keep idempotent
     list.innerHTML = '';
 
     forEach(this.images, (image, index) => {
+      if (visibleItemCount > 0 && (index < start || index >= end)) {
+        return;
+      }
+
       const { src } = image;
       const alt = image.alt || getImageNameFromURL(src);
       const url = this.getImageURL(image);
@@ -89,13 +121,7 @@ export default {
         const item = document.createElement('li');
         const img = document.createElement('img');
 
-        forEach(options.inheritedAttributes, (name) => {
-          const value = image.getAttribute(name);
-
-          if (value !== null) {
-            img.setAttribute(name, value);
-          }
-        });
+        inheritAttributes(img, image, options.inheritedAttributes);
 
         if (options.navbar) {
           img.src = src || url;
@@ -119,6 +145,15 @@ export default {
 
     this.items = items;
 
+    if (this.viewed) {
+      const activeItem = this.getItem(this.index);
+
+      if (activeItem) {
+        addClass(activeItem, CLASS_ACTIVE);
+        activeItem.setAttribute('aria-selected', true);
+      }
+    }
+
     forEach(items, (item) => {
       const image = item.firstElementChild;
       let onLoad;
@@ -152,7 +187,7 @@ export default {
       });
     });
 
-    if (options.transition) {
+    if (isTransitionEnabled(options, 'view')) {
       addListener(element, EVENT_VIEWED, () => {
         addClass(list, CLASS_TRANSITION);
       }, {
@@ -161,9 +196,24 @@ export default {
     }
   },
 
+  getItem(index) {
+    let item;
+
+    forEach(this.items, (candidate) => {
+      if (Number(getData(candidate, 'index')) === index) {
+        item = candidate;
+        return false;
+      }
+
+      return true;
+    });
+
+    return item;
+  },
+
   renderList() {
     const { index } = this;
-    const item = this.items[index];
+    const item = this.getItem(index);
 
     if (!item) {
       return;
@@ -176,9 +226,9 @@ export default {
 
     // Place the active item in the center of the screen
     setStyle(this.list, assign({
-      width: outerWidth * this.length - gutter,
+      width: outerWidth * this.items.length - gutter,
     }, getTransforms({
-      translateX: ((this.viewerData.width - offsetWidth) / 2) - outerWidth * index,
+      translateX: ((this.viewerData.width - offsetWidth) / 2) - item.offsetLeft,
     })));
   },
 
@@ -277,9 +327,27 @@ export default {
       marginTop: imageData.y,
     }, getTransforms(imageData)));
 
+    if (this.magnifierPoint) {
+      this.renderMagnifier();
+    }
+
     if (done) {
-      if ((this.viewing || this.moving || this.rotating || this.scaling || this.zooming)
-        && this.options.transition
+      let action = false;
+
+      if (this.viewing) {
+        action = 'view';
+      } else if (this.moving) {
+        action = 'move';
+      } else if (this.rotating) {
+        action = 'rotate';
+      } else if (this.scaling) {
+        action = 'scale';
+      } else if (this.zooming) {
+        action = 'zoom';
+      }
+
+      if (action
+        && isTransitionEnabled(this.options, action)
         && hasClass(image, CLASS_TRANSITION)) {
         const onTransitionEnd = () => {
           this.imageRendering = false;

package/src/js/template.js

@@ -1,6 +1,13 @@
 export default (
   '<div class="viewer-container" tabindex="-1" touch-action="none">'
     + '<div class="viewer-canvas"></div>'
+    + '<div class="viewer-magnifier" aria-hidden="true">'
+      + '<img class="viewer-magnifier-image" alt="">'
+    + '</div>'
+    + '<div class="viewer-navigation">'
+      + '<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>'