viewerjs 1.3.3 → 1.3.7

package/src/js/handlers.js

@@ -307,13 +307,18 @@ export default {
       || this.viewing
       || this.hiding
 
-      // No primary button (Usually the left button)
-      // Note that touch events have no `buttons` or `button` property
-      || (isNumber(buttons) && buttons !== 1)
-      || (isNumber(button) && button !== 0)
-
-      // Open context menu
-      || event.ctrlKey
+      // Handle mouse event and pointer event and ignore touch event
+      || ((
+        event.type === 'mousedown'
+        || (event.type === 'pointerdown' && event.pointerType === 'mouse')
+      ) && (
+        // No primary button (Usually the left button)
+        (isNumber(buttons) && buttons !== 1)
+        || (isNumber(button) && button !== 0)
+
+        // Open context menu
+        || event.ctrlKey
+      ))
     ) {
       return;
     }

package/src/js/methods.js

@@ -25,6 +25,7 @@ import {
   addListener,
   assign,
   dispatchEvent,
+  escapeHTMLEntities,
   forEach,
   getData,
   getOffset,
@@ -148,10 +149,13 @@ export default {
     if (options.transition && !immediate) {
       const hidden = this.hidden.bind(this);
       const hide = () => {
-        addListener(viewer, EVENT_TRANSITION_END, hidden, {
-          once: true,
-        });
-        removeClass(viewer, CLASS_IN);
+        // XXX: It seems the `event.stopPropagation()` method does not work here
+        setTimeout(() => {
+          addListener(viewer, EVENT_TRANSITION_END, hidden, {
+            once: true,
+          });
+          removeClass(viewer, CLASS_IN);
+        }, 0);
       };
 
       this.transitioning = {
@@ -189,16 +193,16 @@ export default {
   view(index = this.options.initialViewIndex) {
     index = Number(index) || 0;
 
-    if (!this.isShown) {
-      this.index = index;
-      return this.show();
-    }
-
     if (this.hiding || this.played || index < 0 || index >= this.length
       || (this.viewed && index === this.index)) {
       return this;
     }
 
+    if (!this.isShown) {
+      this.index = index;
+      return this.show();
+    }
+
     if (this.viewing) {
       this.viewing.abort();
     }
@@ -258,9 +262,9 @@ export default {
       const { imageData } = this;
       const render = Array.isArray(options.title) ? options.title[1] : options.title;
 
-      title.innerHTML = isFunction(render)
+      title.innerHTML = escapeHTMLEntities(isFunction(render)
         ? render.call(this, image, imageData)
-        : `${alt} (${imageData.naturalWidth} × ${imageData.naturalHeight})`;
+        : `${alt} (${imageData.naturalWidth} × ${imageData.naturalHeight})`);
     };
     let onLoad;
 

package/src/js/render.js

@@ -66,7 +66,10 @@ export default {
     const { element, options, list } = this;
     const items = [];
 
-    forEach(this.images, (image, i) => {
+    // initList may be called in this.update, so should keep idempotent
+    list.innerHTML = '';
+
+    forEach(this.images, (image, index) => {
       const { src } = image;
       const alt = image.alt || getImageNameFromURL(src);
       let { url } = options;
@@ -78,22 +81,24 @@ export default {
       }
 
       if (src || url) {
-        items.push('<li>'
-          + '<img'
-            + ` src="${src || url}"`
-            + ' role="button"'
-            + ' data-viewer-action="view"'
-            + ` data-index="${i}"`
-            + ` data-original-url="${url || src}"`
-            + ` alt="${alt}"`
-          + '>'
-        + '</li>');
+        const item = document.createElement('li');
+        const img = document.createElement('img');
+
+        img.src = src || url;
+        img.alt = alt;
+        img.setAttribute('data-index', index);
+        img.setAttribute('data-original-url', url || src);
+        img.setAttribute('data-viewer-action', 'view');
+        img.setAttribute('role', 'button');
+        item.appendChild(img);
+        list.appendChild(item);
+        items.push(item);
       }
     });
 
-    list.innerHTML = items.join('');
-    this.items = list.getElementsByTagName('li');
-    forEach(this.items, (item) => {
+    this.items = items;
+
+    forEach(items, (item) => {
       const image = item.firstElementChild;
 
       setData(image, 'filled', true);

package/src/js/utilities.js

@@ -145,6 +145,20 @@ export function setStyle(element, styles) {
   });
 }
 
+/**
+ * Escape a string for using in HTML.
+ * @param {String} value - The string to escape.
+ * @returns {String} Returns the escaped string.
+ */
+export function escapeHTMLEntities(value) {
+  return isString(value) ? value
+    .replace(/&(?!amp;|quot;|#39;|lt;|gt;)/g, '&')
+    .replace(/"/g, '"')
+    .replace(/'/g, ''')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;') : value;
+}
+
 /**
  * Check if the given element has a special class.
  * @param {Element} element - The element to check.
@@ -152,6 +166,10 @@ export function setStyle(element, styles) {
  * @returns {boolean} Returns `true` if the special class was found.
  */
 export function hasClass(element, value) {
+  if (!element || !value) {
+    return false;
+  }
+
   return element.classList
     ? element.classList.contains(value)
     : element.className.indexOf(value) > -1;
@@ -163,7 +181,7 @@ export function hasClass(element, value) {
  * @param {string} value - The classes to be added.
  */
 export function addClass(element, value) {
-  if (!value) {
+  if (!element || !value) {
     return;
   }
 
@@ -194,7 +212,7 @@ export function addClass(element, value) {
  * @param {string} value - The classes to be removed.
  */
 export function removeClass(element, value) {
-  if (!value) {
+  if (!element || !value) {
     return;
   }
 
@@ -499,7 +517,7 @@ export function getTransforms({
  * @returns {string} A string contains the image name.
  */
 export function getImageNameFromURL(url) {
-  return isString(url) ? url.replace(/^.*\//, '').replace(/[?&#].*$/, '') : '';
+  return isString(url) ? decodeURIComponent(url.replace(/^.*\//, '').replace(/[?&#].*$/, '')) : '';
 }
 
 const IS_SAFARI = WINDOW.navigator && /(Macintosh|iPhone|iPod|iPad).*AppleWebKit/i.test(WINDOW.navigator.userAgent);
@@ -578,7 +596,7 @@ export function getResponsiveClass(type) {
  * @returns {number} The result ratio.
  */
 export function getMaxZoomRatio(pointers) {
-  const pointers2 = assign({}, pointers);
+  const pointers2 = { ...pointers };
   const ratios = [];
 
   forEach(pointers, (pointer, pointerId) => {
@@ -614,11 +632,12 @@ export function getPointer({ pageX, pageY }, endOnly) {
     endY: pageY,
   };
 
-  return endOnly ? end : assign({
+  return endOnly ? end : ({
     timeStamp: Date.now(),
     startX: pageX,
     startY: pageY,
-  }, end);
+    ...end,
+  });
 }
 
 /**