Fix #108

src/Carousel/Carousel.js

@@ -200,7 +200,7 @@ export class Carousel extends Base {
 
     let viewportWidth = Math.max(this.$track.offsetWidth, round(this.$track.getBoundingClientRect().width));
 
-    let viewportStyles = window.getComputedStyle(this.$track);
+    let viewportStyles = getComputedStyle(this.$track);
     viewportWidth = viewportWidth - (parseFloat(viewportStyles.paddingLeft) + parseFloat(viewportStyles.paddingRight));
 
     this.contentWidth = contentWidth;
@@ -505,8 +505,8 @@ export class Carousel extends Base {
     const preload = this.option("preload");
     const infinite = this.option("infiniteX", this.option("infinite"));
 
-    const paddingLeft = parseFloat(window.getComputedStyle(this.$viewport, null).getPropertyValue("padding-left"));
+    const paddingLeft = parseFloat(getComputedStyle(this.$viewport, null).getPropertyValue("padding-left"));
-    const paddingRight = parseFloat(window.getComputedStyle(this.$viewport, null).getPropertyValue("padding-right"));
+    const paddingRight = parseFloat(getComputedStyle(this.$viewport, null).getPropertyValue("padding-right"));
 
     // Check visibility of each slide
     this.slides.forEach((slide) => {

src/Fancybox/Fancybox.js

@@ -1,4 +1,3 @@
-// var global = global || window;
 import { extend } from "../shared/utils/extend.js";
 import { canUseDOM } from "../shared/utils/canUseDOM.js";
 
@@ -11,6 +10,7 @@ import { Plugins } from "./plugins/index.js";
 // Default language
 import en from "./l10n/en.js";
 
+// Default settings
 const defaults = {
   // Index of active slide on the start
   startIndex: 0,
@@ -94,6 +94,10 @@ const defaults = {
   l10n: en,
 };
 
+// Object that contains all active instances of Fancybox
+const instances = {};
+
+// Number of Fancybox instances created, it is used to generate new instance "id"
 let called = 0;
 
 class Fancybox extends Base {
@@ -126,6 +130,8 @@ class Fancybox extends Base {
 
     this.attachEvents();
 
+    instances[this.id] = this;
+
     // "prepare" event will trigger the creation of additional layout elements, such as thumbnails and toolbar
     this.trigger("prepare");
 
@@ -486,7 +492,7 @@ class Fancybox extends Base {
     }
 
     // Skip if text is selected
-    if (window.getSelection().toString().length) {
+    if (getSelection().toString().length) {
       return;
     }
 
@@ -836,7 +842,7 @@ class Fancybox extends Base {
     $content.classList.add("fancybox__content");
 
     // Make sure that content is not hidden and will be visible
-    if ($content.style.display === "none" || window.getComputedStyle($content).getPropertyValue("display") === "none") {
+    if ($content.style.display === "none" || getComputedStyle($content).getPropertyValue("display") === "none") {
       $content.style.display = slide.display || this.option("defaultDisplay") || "flex";
     }
 
@@ -1084,7 +1090,7 @@ class Fancybox extends Base {
 
     // First, stop further execution if this instance is already closing
     // (this can happen if, for example, user clicks close button multiple times really fast)
-    if (["closing", "customClosing", "destroy"].indexOf(this.state) > -1) {
+    if (["closing", "customClosing", "destroy"].includes(this.state)) {
       return;
     }
 
@@ -1172,6 +1178,8 @@ class Fancybox extends Base {
       }
     }
 
+    delete instances[this.id];
+
     const nextInstance = Fancybox.getInstance();
 
     if (nextInstance) {
@@ -1446,23 +1454,21 @@ class Fancybox extends Base {
    * @param {String|Numeric} [id] - Optional instance identifier
    */
   static getInstance(id) {
-    let nodes = [];
-
     if (id) {
-      nodes = [document.getElementById(`fancybox-${id}`)];
+      return instances[id];
-    } else {
-      nodes = Array.from(document.querySelectorAll(".fancybox__container")).reverse();
     }
 
-    for (const $container of nodes) {
+    const instance = Object.values(instances)
-      const instance = $container && $container.Fancybox;
+      .reverse()
+      .find((instance) => {
+        if (!["closing", "customClosing", "destroy"].includes(instance.state)) {
+          return instance;
+        }
 
-      if (instance && instance.state !== "closing" && instance.state !== "customClosing") {
+        return false;
-        return instance;
+      });
-      }
-    }
 
-    return null;
+    return instance || null;
   }
 
   /**

src/shared/utils/isScrollable.js

@@ -4,8 +4,8 @@
  * @returns {Boolean}
  */
 export const hasScrollbars = function (node) {
-  const overflowY = window.getComputedStyle(node)["overflow-y"],
+  const overflowY = getComputedStyle(node)["overflow-y"],
-    overflowX = window.getComputedStyle(node)["overflow-x"],
+    overflowX = getComputedStyle(node)["overflow-x"],
     vertical = (overflowY === "scroll" || overflowY === "auto") && Math.abs(node.scrollHeight - node.clientHeight) > 1,
     horizontal = (overflowX === "scroll" || overflowX === "auto") && Math.abs(node.scrollWidth - node.clientWidth) > 1;
 
@@ -18,7 +18,7 @@ export const hasScrollbars = function (node) {
  * @returns {Boolean}
  */
 export const isScrollable = function (node) {
-  if (!node || node === document.body) {
+  if (!node || !(typeof node === "object" && node instanceof Element) || node === document.body) {
     return false;
   }