viewerjs 1.3.3 → 1.3.7

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 1.3.7 (Oct 2, 2019)
+
+- Do nothing if the `index` value is invalid when call the `view` method (#312).
+- Ignore invalid `element` parameter on the class utility functions (#317).
+- Improve event type determining for iOS 13+ (#321).
+
+## 1.3.6 (Jul 4, 2019)
+
+- Avoid using the `innerHTML` property for security (#269).
+- Avoid escaping URLs (#298, #301).
+
+## 1.3.5 (Jun 29, 2019)
+
+- Improve the escaping function to avoid to escape HTML entities repeatedly.
+
+## 1.3.4 (Jun 1, 2019)
+
+- Escape all strings that use in HTML for better security (#269).
+- Fix the missing fade out transition when hiding the viewer (#275).
+- Decode image name when it comes from URL (#282).
+
 ## 1.3.3 (Apr 6, 2019)
 
 - Fix unexpected modal exiting behavior when the mouse is pressed (#255).
@@ -37,14 +58,14 @@
 
 ## 1.0.1 (May 20, 2018)
 
-- Add namespace to data attribute names (from `data-*` to `data-viewer-*`) to avoid side effect.
+- Add a namespace to data attribute names (from `data-*` to `data-viewer-*`) to avoid side effect.
 - Make sure the image data is a non-null object to avoid unexpected errors.
 - Fix broken zoom feature in iOS browsers (#167).
 
 ## 1.0.0 (Apr 1, 2018)
 
 - Add in browser checking to support to import in Node.js.
-- Cancel update when there are no images when call the `update` method.
+- Cancel update when there are no images when calling the `update` method.
 
 ## 1.0.0-rc.1 (Mar 13, 2018)
 
@@ -57,7 +78,7 @@
 - Add a new option: `loading`.
 - Add type definitions file for TypeScript.
 - Enhance the `show`, `hide` and `play` methods.
-- Change the default value of `loop` option from `false` to `true`.
+- Change the default value of the `loop` option from `false` to `true`.
 
 ## 1.0.0-beta.2 (Feb 13, 2018)
 
@@ -83,7 +104,7 @@
 
 - Add a new option: `filter`.
 - Enhance the `prev` and `next` methods (#47).
-- Support to customize the layout of toolbar (#79).
+- Support to customize the layout of the toolbar (#79).
 - Disallow to show again if it had shown.
 
 ## 0.8.0 (Oct 8, 2017)
@@ -94,8 +115,8 @@
 
 ## 0.7.2 (Aug 19, 2017)
 
-- Ignore mouse down event when the viewer is hiding (#70).
-- Fixed multiple active items in navbar (#75).
+- Ignore the mouse down event when the viewer is hiding (#70).
+- Fixed multiple active items in the navbar (#75).
 
 ## 0.7.1 (May 14, 2017)
 
@@ -113,7 +134,7 @@
 
 ## 0.6.1 (Feb 18, 2017)
 
-- Prevented the default behaviour of drag action (#63).
+- Prevented the default behavior of drag action (#63).
 
 ## 0.6.0 (Jan 24, 2017)
 
@@ -122,12 +143,12 @@
 
 ## 0.5.1 (Jan 2, 2017)
 
-- Improved event handler for Pointer Events.
+- Improve event handler for Pointer Events.
 
 ## 0.5.0 (July 22, 2016)
 
 - Improve modal opening and closing.
-- Remove `build` event.
+- Remove the `build` event.
 - Rename `built` event to `ready`.
 - Fixed a bug of `data-*` attributes setting and getting (#33).
 
@@ -137,22 +158,22 @@
 
 ## 0.3.3 (Mar 19, 2016)
 
-- Fix the issue of hiding wrong element in the "view" method (#19).
+- Fix the issue of hiding the wrong element in the "view" method (#19).
 
 ## 0.3.2 (Mar 11, 2016)
 
-- Fix the parameters error on the "url" option when it is a function.
+- Fix the error of the parameters on the "url" option when it is a function.
 
 ## 0.3.1 (Feb 2, 2016)
 
 - Added tests.
-- Ignored invalid class name.
+- Ignored the invalid class name.
 - Re-render image only when viewed.
 
 ## 0.3.0 (Jan 21, 2016)
 
 - Add more available values to the "title", "toolbar" and "navbar" options.
-- Support to toggle the visibility of title, toolbar and navbar between different screen widths.
+- Support to toggle the visibility of title, toolbar, and navbar between different screen widths.
 - Exit fullscreen when stop playing.
 - Fixed title not generated bug.
 

package/README.md

@@ -1,6 +1,6 @@
 # Viewer.js
 
-[![Build Status](https://img.shields.io/travis/fengyuanchen/viewerjs.svg)](https://travis-ci.org/fengyuanchen/viewerjs) [![Downloads](https://img.shields.io/npm/dm/viewerjs.svg)](https://www.npmjs.com/package/viewerjs) [![Version](https://img.shields.io/npm/v/viewerjs.svg)](https://www.npmjs.com/package/viewerjs) [![Donate on Patreon](https://img.shields.io/badge/donate-on%20patreon-fa7664.svg)](https://www.patreon.com/chenfengyuan)
+[![Build Status](https://img.shields.io/travis/fengyuanchen/viewerjs.svg)](https://travis-ci.org/fengyuanchen/viewerjs) [![Downloads](https://img.shields.io/npm/dm/viewerjs.svg)](https://www.npmjs.com/package/viewerjs) [![Version](https://img.shields.io/npm/v/viewerjs.svg)](https://www.npmjs.com/package/viewerjs)
 
 > JavaScript image viewer.
 

package/dist/viewer.common.js

@@ -1,11 +1,11 @@
 /*!
- * Viewer.js v1.3.3
+ * Viewer.js v1.3.7
  * https://fengyuanchen.github.io/viewerjs
  *
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2019-04-06T14:06:28.301Z
+ * Date: 2019-10-02T09:29:13.426Z
  */
 
 'use strict';
@@ -46,6 +46,55 @@ function _createClass(Constructor, protoProps, staticProps) {
   return Constructor;
 }
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+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);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(source, true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(source).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
 var DEFAULTS = {
   /**
    * Enable a modal backdrop, specify `static` for a backdrop
@@ -246,7 +295,7 @@ var DEFAULTS = {
 
 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>';
 
-var IS_BROWSER = typeof window !== 'undefined';
+var IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';
 var WINDOW = IS_BROWSER ? window : {};
 var IS_TOUCH_DEVICE = IS_BROWSER ? 'ontouchstart' in WINDOW.document.documentElement : false;
 var HAS_POINTER_EVENT = IS_BROWSER ? 'PointerEvent' in WINDOW : false;
@@ -444,6 +493,15 @@ function setStyle(element, styles) {
     style[property] = value;
   });
 }
+/**
+ * Escape a string for using in HTML.
+ * @param {String} value - The string to escape.
+ * @returns {String} Returns the escaped string.
+ */
+
+function escapeHTMLEntities(value) {
+  return isString(value) ? value.replace(/&(?!amp;|quot;|#39;|lt;|gt;)/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;') : value;
+}
 /**
  * Check if the given element has a special class.
  * @param {Element} element - The element to check.
@@ -452,6 +510,10 @@ function setStyle(element, styles) {
  */
 
 function hasClass(element, value) {
+  if (!element || !value) {
+    return false;
+  }
+
   return element.classList ? element.classList.contains(value) : element.className.indexOf(value) > -1;
 }
 /**
@@ -461,7 +523,7 @@ function hasClass(element, value) {
  */
 
 function addClass(element, value) {
-  if (!value) {
+  if (!element || !value) {
     return;
   }
 
@@ -492,7 +554,7 @@ function addClass(element, value) {
  */
 
 function removeClass(element, value) {
-  if (!value) {
+  if (!element || !value) {
     return;
   }
 
@@ -776,7 +838,7 @@ function getTransforms(_ref) {
  */
 
 function getImageNameFromURL(url) {
-  return isString(url) ? url.replace(/^.*\//, '').replace(/[?&#].*$/, '') : '';
+  return isString(url) ? decodeURIComponent(url.replace(/^.*\//, '').replace(/[?&#].*$/, '')) : '';
 }
 var IS_SAFARI = WINDOW.navigator && /(Macintosh|iPhone|iPod|iPad).*AppleWebKit/i.test(WINDOW.navigator.userAgent);
 /**
@@ -842,7 +904,8 @@ function getResponsiveClass(type) {
  */
 
 function getMaxZoomRatio(pointers) {
-  var pointers2 = assign({}, pointers);
+  var pointers2 = _objectSpread2({}, pointers);
+
   var ratios = [];
   forEach(pointers, function (pointer, pointerId) {
     delete pointers2[pointerId];
@@ -876,7 +939,7 @@ function getPointer(_ref2, endOnly) {
     endX: pageX,
     endY: pageY
   };
-  return endOnly ? end : assign({
+  return endOnly ? end : _objectSpread2({
     timeStamp: Date.now(),
     startX: pageX,
     startY: pageY
@@ -950,8 +1013,10 @@ var render = {
     var element = this.element,
         options = this.options,
         list = this.list;
-    var items = [];
-    forEach(this.images, function (image, i) {
+    var items = []; // initList may be called in this.update, so should keep idempotent
+
+    list.innerHTML = '';
+    forEach(this.images, function (image, index) {
       var src = image.src;
       var alt = image.alt || getImageNameFromURL(src);
       var url = options.url;
@@ -963,12 +1028,21 @@ var render = {
       }
 
       if (src || url) {
-        items.push('<li>' + '<img' + " src=\"".concat(src || url, "\"") + ' role="button"' + ' data-viewer-action="view"' + " data-index=\"".concat(i, "\"") + " data-original-url=\"".concat(url || src, "\"") + " alt=\"".concat(alt, "\"") + '>' + '</li>');
+        var item = document.createElement('li');
+        var 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, function (item) {
+    this.items = items;
+    forEach(items, function (item) {
       var image = item.firstElementChild;
       setData(image, 'filled', true);
 
@@ -1425,10 +1499,10 @@ var handlers = {
     var buttons = event.buttons,
         button = event.button;
 
-    if (!this.viewed || this.showing || 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) {
+    if (!this.viewed || this.showing || this.viewing || this.hiding // 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;
     } // Prevent default behaviours as page zooming in touch devices.
 
@@ -1710,10 +1784,13 @@ var methods = {
       var hidden = this.hidden.bind(this);
 
       var hide = function 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(function () {
+          addListener(viewer, EVENT_TRANSITION_END, hidden, {
+            once: true
+          });
+          removeClass(viewer, CLASS_IN);
+        }, 0);
       };
 
       this.transitioning = {
@@ -1753,15 +1830,15 @@ var methods = {
     var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.options.initialViewIndex;
     index = Number(index) || 0;
 
+    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.hiding || this.played || index < 0 || index >= this.length || this.viewed && index === this.index) {
-      return this;
-    }
-
     if (this.viewing) {
       this.viewing.abort();
     }
@@ -1814,7 +1891,7 @@ var methods = {
     var onViewed = function onViewed() {
       var imageData = _this.imageData;
       var render = Array.isArray(options.title) ? options.title[1] : options.title;
-      title.innerHTML = isFunction(render) ? render.call(_this, image, imageData) : "".concat(alt, " (").concat(imageData.naturalWidth, " \xD7 ").concat(imageData.naturalHeight, ")");
+      title.innerHTML = escapeHTMLEntities(isFunction(render) ? render.call(_this, image, imageData) : "".concat(alt, " (").concat(imageData.naturalWidth, " \xD7 ").concat(imageData.naturalHeight, ")"));
     };
 
     var onLoad;

package/dist/viewer.css

@@ -1,11 +1,11 @@
 /*!
- * Viewer.js v1.3.3
+ * Viewer.js v1.3.7
  * https://fengyuanchen.github.io/viewerjs
  *
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2019-04-06T14:06:24.626Z
+ * Date: 2019-10-02T09:29:07.561Z
  */
 
 .viewer-zoom-in::before,
@@ -123,6 +123,11 @@
   user-select: none;
 }
 
+.viewer-container::-moz-selection,
+.viewer-container *::-moz-selection {
+  background-color: transparent;
+}
+
 .viewer-container::selection,
 .viewer-container *::selection {
   background-color: transparent;

package/dist/viewer.esm.js

@@ -1,11 +1,11 @@
 /*!
- * Viewer.js v1.3.3
+ * Viewer.js v1.3.7
  * https://fengyuanchen.github.io/viewerjs
  *
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2019-04-06T14:06:28.301Z
+ * Date: 2019-10-02T09:29:13.426Z
  */
 
 function _typeof(obj) {
@@ -44,6 +44,55 @@ function _createClass(Constructor, protoProps, staticProps) {
   return Constructor;
 }
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+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);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(source, true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(source).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
 var DEFAULTS = {
   /**
    * Enable a modal backdrop, specify `static` for a backdrop
@@ -244,7 +293,7 @@ var DEFAULTS = {
 
 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>';
 
-var IS_BROWSER = typeof window !== 'undefined';
+var IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';
 var WINDOW = IS_BROWSER ? window : {};
 var IS_TOUCH_DEVICE = IS_BROWSER ? 'ontouchstart' in WINDOW.document.documentElement : false;
 var HAS_POINTER_EVENT = IS_BROWSER ? 'PointerEvent' in WINDOW : false;
@@ -442,6 +491,15 @@ function setStyle(element, styles) {
     style[property] = value;
   });
 }
+/**
+ * Escape a string for using in HTML.
+ * @param {String} value - The string to escape.
+ * @returns {String} Returns the escaped string.
+ */
+
+function escapeHTMLEntities(value) {
+  return isString(value) ? value.replace(/&(?!amp;|quot;|#39;|lt;|gt;)/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;') : value;
+}
 /**
  * Check if the given element has a special class.
  * @param {Element} element - The element to check.
@@ -450,6 +508,10 @@ function setStyle(element, styles) {
  */
 
 function hasClass(element, value) {
+  if (!element || !value) {
+    return false;
+  }
+
   return element.classList ? element.classList.contains(value) : element.className.indexOf(value) > -1;
 }
 /**
@@ -459,7 +521,7 @@ function hasClass(element, value) {
  */
 
 function addClass(element, value) {
-  if (!value) {
+  if (!element || !value) {
     return;
   }
 
@@ -490,7 +552,7 @@ function addClass(element, value) {
  */
 
 function removeClass(element, value) {
-  if (!value) {
+  if (!element || !value) {
     return;
   }
 
@@ -774,7 +836,7 @@ function getTransforms(_ref) {
  */
 
 function getImageNameFromURL(url) {
-  return isString(url) ? url.replace(/^.*\//, '').replace(/[?&#].*$/, '') : '';
+  return isString(url) ? decodeURIComponent(url.replace(/^.*\//, '').replace(/[?&#].*$/, '')) : '';
 }
 var IS_SAFARI = WINDOW.navigator && /(Macintosh|iPhone|iPod|iPad).*AppleWebKit/i.test(WINDOW.navigator.userAgent);
 /**
@@ -840,7 +902,8 @@ function getResponsiveClass(type) {
  */
 
 function getMaxZoomRatio(pointers) {
-  var pointers2 = assign({}, pointers);
+  var pointers2 = _objectSpread2({}, pointers);
+
   var ratios = [];
   forEach(pointers, function (pointer, pointerId) {
     delete pointers2[pointerId];
@@ -874,7 +937,7 @@ function getPointer(_ref2, endOnly) {
     endX: pageX,
     endY: pageY
   };
-  return endOnly ? end : assign({
+  return endOnly ? end : _objectSpread2({
     timeStamp: Date.now(),
     startX: pageX,
     startY: pageY
@@ -948,8 +1011,10 @@ var render = {
     var element = this.element,
         options = this.options,
         list = this.list;
-    var items = [];
-    forEach(this.images, function (image, i) {
+    var items = []; // initList may be called in this.update, so should keep idempotent
+
+    list.innerHTML = '';
+    forEach(this.images, function (image, index) {
       var src = image.src;
       var alt = image.alt || getImageNameFromURL(src);
       var url = options.url;
@@ -961,12 +1026,21 @@ var render = {
       }
 
       if (src || url) {
-        items.push('<li>' + '<img' + " src=\"".concat(src || url, "\"") + ' role="button"' + ' data-viewer-action="view"' + " data-index=\"".concat(i, "\"") + " data-original-url=\"".concat(url || src, "\"") + " alt=\"".concat(alt, "\"") + '>' + '</li>');
+        var item = document.createElement('li');
+        var 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, function (item) {
+    this.items = items;
+    forEach(items, function (item) {
       var image = item.firstElementChild;
       setData(image, 'filled', true);
 
@@ -1423,10 +1497,10 @@ var handlers = {
     var buttons = event.buttons,
         button = event.button;
 
-    if (!this.viewed || this.showing || 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) {
+    if (!this.viewed || this.showing || this.viewing || this.hiding // 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;
     } // Prevent default behaviours as page zooming in touch devices.
 
@@ -1708,10 +1782,13 @@ var methods = {
       var hidden = this.hidden.bind(this);
 
       var hide = function 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(function () {
+          addListener(viewer, EVENT_TRANSITION_END, hidden, {
+            once: true
+          });
+          removeClass(viewer, CLASS_IN);
+        }, 0);
       };
 
       this.transitioning = {
@@ -1751,15 +1828,15 @@ var methods = {
     var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.options.initialViewIndex;
     index = Number(index) || 0;
 
+    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.hiding || this.played || index < 0 || index >= this.length || this.viewed && index === this.index) {
-      return this;
-    }
-
     if (this.viewing) {
       this.viewing.abort();
     }
@@ -1812,7 +1889,7 @@ var methods = {
     var onViewed = function onViewed() {
       var imageData = _this.imageData;
       var render = Array.isArray(options.title) ? options.title[1] : options.title;
-      title.innerHTML = isFunction(render) ? render.call(_this, image, imageData) : "".concat(alt, " (").concat(imageData.naturalWidth, " \xD7 ").concat(imageData.naturalHeight, ")");
+      title.innerHTML = escapeHTMLEntities(isFunction(render) ? render.call(_this, image, imageData) : "".concat(alt, " (").concat(imageData.naturalWidth, " \xD7 ").concat(imageData.naturalHeight, ")"));
     };
 
     var onLoad;