Bugfixes

dist/carousel.css

@@ -1 +1 @@
-.not-selectable{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.carousel{position:relative;box-sizing:border-box}.carousel *,.carousel *:before,.carousel *:after{box-sizing:inherit}.carousel.is-draggable{cursor:move;cursor:grab}.carousel.is-dragging{cursor:move;cursor:grabbing}.carousel__viewport{position:relative;overflow:hidden;max-width:100%;max-height:100%}.carousel__track{display:flex}.carousel__slide{flex:0 0 auto;width:var(--carousel-slide-width, 60%);max-width:100%;padding:1rem;position:relative;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}.carousel.has-dots{margin-bottom:calc(0.5rem + 22px)}.carousel__dots{margin:0 auto;padding:0;position:absolute;top:calc(100% + 0.5rem);left:0;right:0;display:flex;justify-content:center;list-style:none;user-select:none}.carousel__dots .carousel__dot{margin:0;padding:0;display:block;position:relative;width:22px;height:22px;cursor:pointer}.carousel__dots .carousel__dot:after{content:"";width:8px;height:8px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:currentColor;opacity:.25;transition:opacity .15s ease-in-out}.carousel__dots .carousel__dot.is-selected:after{opacity:1}.carousel__button{width:var(--carousel-button-width, 48px);height:var(--carousel-button-height, 48px);padding:0;border:0;display:flex;justify-content:center;align-items:center;pointer-events:all;cursor:pointer;color:var(--carousel-button-color, currentColor);background:var(--carousel-button-bg, transparent);border-radius:var(--carousel-button-border-radius, 50%);box-shadow:var(--carousel-button-shadow, none);transition:opacity .15s ease}.carousel__button.is-prev,.carousel__button.is-next{position:absolute;top:50%;transform:translateY(-50%)}.carousel__button.is-prev{left:10px}.carousel__button.is-next{right:10px}.carousel__button[disabled]{cursor:default;opacity:.3}.carousel__button svg{width:var(--carousel-button-svg-width, 50%);height:var(--carousel-button-svg-height, 50%);fill:none;stroke:currentColor;stroke-width:var(--carousel-button-svg-stroke-width, 1.5);stroke-linejoin:bevel;stroke-linecap:round;filter:var(--carousel-button-svg-filter, none);pointer-events:none}
+.not-selectable{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.carousel{position:relative;box-sizing:border-box}.carousel *,.carousel *:before,.carousel *:after{box-sizing:inherit}.carousel.is-draggable{cursor:move;cursor:grab}.carousel.is-dragging{cursor:move;cursor:grabbing}.carousel__viewport{position:relative;overflow:hidden;max-width:100%;max-height:100%}.carousel__track{display:flex}.carousel__slide{flex:0 0 auto;width:var(--carousel-slide-width, 60%);max-width:100%;padding:1rem;position:relative;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}.has-dots{margin-bottom:calc(0.5rem + 22px)}.carousel__dots{margin:0 auto;padding:0;position:absolute;top:calc(100% + 0.5rem);left:0;right:0;display:flex;justify-content:center;list-style:none;user-select:none}.carousel__dots .carousel__dot{margin:0;padding:0;display:block;position:relative;width:22px;height:22px;cursor:pointer}.carousel__dots .carousel__dot:after{content:"";width:8px;height:8px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:currentColor;opacity:.25;transition:opacity .15s ease-in-out}.carousel__dots .carousel__dot.is-selected:after{opacity:1}.carousel__button{width:var(--carousel-button-width, 48px);height:var(--carousel-button-height, 48px);padding:0;border:0;display:flex;justify-content:center;align-items:center;pointer-events:all;cursor:pointer;color:var(--carousel-button-color, currentColor);background:var(--carousel-button-bg, transparent);border-radius:var(--carousel-button-border-radius, 50%);box-shadow:var(--carousel-button-shadow, none);transition:opacity .15s ease}.carousel__button.is-prev,.carousel__button.is-next{position:absolute;top:50%;transform:translateY(-50%)}.carousel__button.is-prev{left:10px}.carousel__button.is-next{right:10px}.carousel__button[disabled]{cursor:default;opacity:.3}.carousel__button svg{width:var(--carousel-button-svg-width, 50%);height:var(--carousel-button-svg-height, 50%);fill:none;stroke:currentColor;stroke-width:var(--carousel-button-svg-stroke-width, 1.5);stroke-linejoin:bevel;stroke-linecap:round;filter:var(--carousel-button-svg-filter, none);pointer-events:none}

src/Carousel/Carousel.js

@@ -7,6 +7,9 @@ import { throttle } from "../shared/utils/throttle.js";
 
 import { Plugins } from "./plugins/index.js";
 
+// Default language
+import en from "./l10n/en.js";
+
 const defaults = {
   // Virtual slides. Each object should have at least `html` property that will be used to set content,
   // example: `slides: [{html: 'First slide'}, {html: 'Second slide'}]`
@@ -40,7 +43,10 @@ const defaults = {
   // Should Carousel settle at any position after a swipe.
   dragFree: false,
 
-  // Customizable class names for DOM elements
+  // Prefix for CSS classes, must be the same as the  SCSS `$carousel-prefix` variable
+  prefix: "",
+
+  // Class names for DOM elements (without prefix)
   classNames: {
     viewport: "carousel__viewport",
     track: "carousel__track",
@@ -50,12 +56,8 @@ const defaults = {
     slideSelected: "is-selected",
   },
 
-  // Translations
-  l10n: {
-    NEXT: "Next slide",
-    PREV: "Previous slide",
-    GOTO: "Go to slide %d",
-  },
+  // Localization of strings
+  l10n: en,
 };
 
 export class Carousel extends Base {
@@ -102,7 +104,9 @@ export class Carousel extends Base {
 
     this.updateMetrics();
 
-    this.$track.style.transform = `translate3d(${this.pages[this.page].left * -1}px, 0px, 0) scale(1)`;
+    if (this.$track && this.pages.length) {
+      this.$track.style.transform = `translate3d(${this.pages[this.page].left * -1}px, 0px, 0) scale(1)`;
+    }
 
     this.manageSlideVisiblity();
 
@@ -117,24 +121,25 @@ export class Carousel extends Base {
    * Initialize layout; create necessary elements
    */
   initLayout() {
+    const prefix = this.option("prefix");
     const classNames = this.option("classNames");
 
-    this.$viewport = this.option("viewport") || this.$container.querySelector("." + classNames.viewport);
+    this.$viewport = this.option("viewport") || this.$container.querySelector(`.${prefix}${classNames.viewport}`);
 
     if (!this.$viewport) {
       this.$viewport = document.createElement("div");
-      this.$viewport.classList.add(classNames.viewport);
+      this.$viewport.classList.add(prefix + classNames.viewport);
 
       this.$viewport.append(...this.$container.childNodes);
 
       this.$container.appendChild(this.$viewport);
     }
 
-    this.$track = this.option("track") || this.$container.querySelector("." + classNames.track);
+    this.$track = this.option("track") || this.$container.querySelector(`.${prefix}${classNames.track}`);
 
     if (!this.$track) {
       this.$track = document.createElement("div");
-      this.$track.classList.add(classNames.track);
+      this.$track.classList.add(prefix + classNames.track);
 
       this.$track.append(...this.$viewport.childNodes);
 
@@ -149,7 +154,7 @@ export class Carousel extends Base {
     this.slides = [];
 
     // Get existing slides from the DOM
-    const elems = this.$viewport.querySelectorAll("." + this.option("classNames.slide"));
+    const elems = this.$viewport.querySelectorAll(`.${this.option("prefix")}${this.option("classNames.slide")}`);
 
     elems.forEach((el) => {
       const slide = {
@@ -322,7 +327,7 @@ export class Carousel extends Base {
 
       node.dataset.isTestEl = 1;
       node.style.visibility = "hidden";
-      node.classList.add(this.option("classNames.slide"));
+      node.classList.add(this.option("prefix") + this.option("classNames.slide"));
 
       // Assume all slides have the same custom class, if any
       if (firstSlide.customClass) {
@@ -421,7 +426,7 @@ export class Carousel extends Base {
         // Right now, only horizontal navigation is supported
         lockAxis: "x",
 
-        x: this.pages[this.page].left * -1,
+        x: this.pages.length ? this.pages[this.page].left * -1 : 0,
         centerOnStart: false,
 
         // Make `textSelection` option more easy to customize
@@ -472,7 +477,7 @@ export class Carousel extends Base {
 
     if (this.pages.length > 1 && this.option("infiniteX", this.option("infinite"))) {
       this.Panzoom.boundX = null;
-    } else {
+    } else if (this.pages.length) {
       this.Panzoom.boundX = {
         from: this.pages[this.pages.length - 1].left * -1,
         to: this.pages[0].left * -1,
@@ -495,7 +500,7 @@ export class Carousel extends Base {
     const contentWidth = this.contentWidth;
     const viewportWidth = this.viewportWidth;
 
-    let currentX = this.Panzoom ? this.Panzoom.content.x * -1 : this.pages[this.page].left;
+    let currentX = this.Panzoom ? this.Panzoom.content.x * -1 : this.pages.length ? this.pages[this.page].left : 0;
 
     const preload = this.option("preload");
     const infinite = this.option("infiniteX", this.option("infinite"));
@@ -632,7 +637,7 @@ export class Carousel extends Base {
     const div = document.createElement("div");
 
     div.dataset.index = slide.index;
-    div.classList.add(this.option("classNames.slide"));
+    div.classList.add(this.option("prefix") + this.option("classNames.slide"));
 
     if (slide.customClass) {
       div.classList.add(...slide.customClass.split(" "));
@@ -720,6 +725,9 @@ export class Carousel extends Base {
     });
   }
 
+  /**
+   * Perform all calculations and center current page
+   */
   updatePage() {
     this.updateMetrics();
 
@@ -887,7 +895,7 @@ export class Carousel extends Base {
     } else {
       page = pageIndex = Math.max(0, Math.min(pageIndex, pageCount - 1));
 
-      nextPosition = this.pages[page].left;
+      nextPosition = this.pages.length ? this.pages[page].left : 0;
     }
 
     this.page = page;

src/Carousel/l10n/de.js

@@ -0,0 +1,5 @@
+export default {
+  NEXT: "Nächste Folie",
+  PREV: "Vorherige Folie",
+  GOTO: "Zur #%d Folie gehen",
+};

src/Carousel/l10n/en.js

@@ -0,0 +1,5 @@
+export default {
+  NEXT: "Next slide",
+  PREV: "Previous slide",
+  GOTO: "Go to slide #%d",
+};

src/Carousel/plugins/Dots/Dots.scss

@@ -1,4 +1,4 @@
-.carousel.has-dots {
+.has-dots {
   margin-bottom: calc(#{$carousel-dots-margin} + #{$carousel-dots-height});
 }
 

src/Carousel/scss/_variables.scss

@@ -1,3 +1,4 @@
+$carousel-prefix: "" !default;
 $carousel-slide-width: var(--carousel-slide-width, 60%) !default;
 
 /*

src/Carousel/scss/base.scss

@@ -5,7 +5,7 @@
   user-select: none;
 }
 
-.carousel {
+.#{$carousel-prefix}carousel {
   position: relative;
   box-sizing: border-box;
 
@@ -26,7 +26,7 @@
   }
 }
 
-.carousel__viewport {
+.#{$carousel-prefix}carousel__viewport {
   position: relative;
   overflow: hidden;
 
@@ -34,11 +34,11 @@
   max-height: 100%;
 }
 
-.carousel__track {
+.#{$carousel-prefix}carousel__track {
   display: flex;
 }
 
-.carousel__slide {
+.#{$carousel-prefix}carousel__slide {
   flex: 0 0 auto;
   width: $carousel-slide-width;
   max-width: 100%;

src/Fancybox/Fancybox.js

@@ -8,6 +8,7 @@ import { Carousel } from "../Carousel/Carousel.js";
 
 import { Plugins } from "./plugins/index.js";
 
+// Default language
 import en from "./l10n/en.js";
 
 const defaults = {
@@ -344,6 +345,8 @@ class Fancybox extends Base {
         true,
         {},
         {
+          prefix: "",
+
           classNames: {
             viewport: "fancybox__viewport",
             track: "fancybox__track",
@@ -383,6 +386,7 @@ class Fancybox extends Base {
                 this.Carousel && this.Carousel.pages && this.Carousel.pages.length < 2 && !this.options.dragToClose
               );
             },
+
             lockAxis: () => {
               if (this.Carousel) {
                 let rez = "x";
@@ -834,7 +838,7 @@ class Fancybox extends Base {
 
     // Make sure that content is not hidden and will be visible
     if ($content.style.display === "none" || window.getComputedStyle($content).getPropertyValue("display") === "none") {
-      $content.style.display = "flex";
+      $content.style.display = slide.display || this.option("defaultDisplay") || "flex";
     }
 
     if (slide.id) {
@@ -1380,20 +1384,19 @@ class Fancybox extends Base {
    * @param {Object} [options] - Custom options
    */
   static bind(selector, options = {}) {
+    function attachClickEvent() {
+      document.body.addEventListener("click", Fancybox.fromEvent, false);
+    }
+
     if (!canUseDOM) {
       return;
     }
 
     if (!Fancybox.openers.size) {
-      document.addEventListener("click", Fancybox.fromEvent, false);
-
-      // Pass self to plugins to avoid circular dependencies
-      for (const [key, Plugin] of Object.entries(Fancybox.Plugins || {})) {
-        Plugin.Fancybox = this;
-
-        if (typeof Plugin.create === "function") {
-          Plugin.create();
-        }
+      if (/complete|interactive|loaded/.test(document.readyState)) {
+        attachClickEvent();
+      } else {
+        document.addEventListener("DOMContentLoaded", attachClickEvent);
       }
     }
 
@@ -1481,4 +1484,11 @@ Fancybox.Plugins = Plugins;
 // Auto init with default options
 Fancybox.bind("[data-fancybox]");
 
+// Prepare plugins
+for (const [key, Plugin] of Object.entries(Fancybox.Plugins || {})) {
+  if (typeof Plugin.create === "function") {
+    Plugin.create(Fancybox);
+  }
+}
+
 export { Fancybox };

src/Fancybox/plugins/Hash/Hash.js

@@ -133,7 +133,7 @@ export class Hash {
    * @param {Class} Fancybox
    */
   static startFromUrl() {
-    if (Hash.Fancybox.getInstance()) {
+    if (!Hash.Fancybox || Hash.Fancybox.getInstance()) {
       return;
     }
 
@@ -144,6 +144,7 @@ export class Hash {
     }
 
     // Support custom slug
+    // ===
     let selectedElem = document.querySelector(`[data-slug="${hash}"]`);
 
     if (selectedElem) {
@@ -154,7 +155,8 @@ export class Hash {
       return;
     }
 
-    // Use URL hash value as group name
+    // If elements are not found by custom slug, Use URL hash value as group name
+    // ===
     const groupElems = document.querySelectorAll(`[data-fancybox="${slug}"]`);
 
     if (!groupElems.length) {
@@ -222,24 +224,23 @@ export class Hash {
   /**
    * Add event bindings that will start new Fancybox instance based in the current URL
    */
+  static create(Fancybox) {
+    Hash.Fancybox = Fancybox;
 
-  static onReady() {
-    window.addEventListener("hashchange", Hash.onHashChange, false);
+    function proceed() {
+      window.addEventListener("hashchange", Hash.onHashChange, false);
 
-    Hash.startFromUrl();
-  }
-
-  static create() {
-    // Skip if SSR
-    if (!canUseDOM) {
-      return;
+      Hash.startFromUrl();
     }
 
-    /**
-     * Attempt to start Fancybox
-     */
     window.requestAnimationFrame(() => {
-      Hash.onReady();
+      if (canUseDOM) {
+        if (/complete|interactive|loaded/.test(document.readyState)) {
+          proceed();
+        } else {
+          document.addEventListener("DOMContentLoaded", proceed);
+        }
+      }
     });
   }
 

src/Fancybox/plugins/Html/Html.js

@@ -526,41 +526,39 @@ export class Html {
     // This function will be repeatedly called to check
     // if video iframe has been loaded to send message to start the video
     const poller = () => {
-      if (slide.state !== "done" || !slide.$iframe || !slide.$iframe.contentWindow) {
-        return;
-      }
-
-      let command;
+      if (slide.state === "done" && slide.$iframe && slide.$iframe.contentWindow) {
+        let command;
+
+        if (slide.$iframe.isReady) {
+          if (slide.video && slide.video.autoplay) {
+            if (slide.vendor == "youtube") {
+              command = {
+                event: "command",
+                func: "playVideo",
+              };
+            } else {
+              command = {
+                method: "play",
+                value: "true",
+              };
+            }
+          }
 
-      if (slide.$iframe.isReady) {
-        if (slide.video && slide.video.autoplay) {
-          if (slide.vendor == "youtube") {
-            command = {
-              event: "command",
-              func: "playVideo",
-            };
-          } else {
-            command = {
-              method: "play",
-              value: "true",
-            };
+          if (command) {
+            slide.$iframe.contentWindow.postMessage(JSON.stringify(command), "*");
           }
-        }
 
-        if (command) {
-          slide.$iframe.contentWindow.postMessage(JSON.stringify(command), "*");
+          return;
         }
 
-        return;
-      }
-
-      if (slide.vendor === "youtube") {
-        command = {
-          event: "listening",
-          id: slide.$iframe.getAttribute("id"),
-        };
+        if (slide.vendor === "youtube") {
+          command = {
+            event: "listening",
+            id: slide.$iframe.getAttribute("id"),
+          };
 
-        slide.$iframe.contentWindow.postMessage(JSON.stringify(command), "*");
+          slide.$iframe.contentWindow.postMessage(JSON.stringify(command), "*");
+        }
       }
 
       slide.poller = setTimeout(poller, 250);

src/Fancybox/plugins/Image/Image.js

@@ -103,6 +103,7 @@ export class Image {
    */
   onClosing(fancybox) {
     clearTimeout(this.clickTimer);
+    this.clickTimer = null;
 
     // Remove events
     fancybox.Carousel.slides.forEach((slide) => {
@@ -522,7 +523,7 @@ export class Image {
     }
 
     const panzoom = slide.Panzoom;
-    const clickAction = this.fancybox.option("Image.click");
+    const clickAction = this.fancybox.option("Image.click", false, slide);
     const classList = slide.$el.classList;
 
     if (panzoom && clickAction === "toggleZoom") {
@@ -573,7 +574,7 @@ export class Image {
    * @param {Object} event
    */
   onClick(slide, event) {
-    // Check if can click
+    // Check that clicks should be allowed
     if (this.fancybox.state !== "ready") {
       return;
     }
@@ -595,10 +596,6 @@ export class Image {
     }
 
     const process = (action) => {
-      if (this.fancybox.trigger("Image.click", event) === false) {
-        return;
-      }
-
       switch (action) {
         case "toggleZoom":
           event.stopPropagation();
@@ -621,22 +618,20 @@ export class Image {
       }
     };
 
-    // Clear pending single click
-    if (this.clickTimer) {
-      clearTimeout(this.clickTimer);
-      this.clickTimer = null;
-    }
-
     const clickAction = this.fancybox.option("Image.click");
     const dblclickAction = this.fancybox.option("Image.doubleClick");
 
     if (dblclickAction) {
-      if (event.detail === 1) {
+      if (this.clickTimer) {
+        clearTimeout(this.clickTimer);
+        this.clickTimer = null;
+
+        process(dblclickAction);
+      } else {
         this.clickTimer = setTimeout(() => {
+          this.clickTimer = null;
           process(clickAction);
         }, 300);
-      } else if (event.detail === 2) {
-        process(dblclickAction);
       }
     } else {
       process(clickAction);

src/Fancybox/plugins/Thumbs/Thumbs.js

@@ -176,6 +176,22 @@ export class Thumbs {
     this.build();
   }
 
+  /**
+   * Show thumbnail list
+   */
+  show() {
+    this.state = "hidden";
+    this.toggle();
+  }
+
+  /**
+   * Hide thumbnail list
+   */
+  hide() {
+    this.state = "visible";
+    this.toggle();
+  }
+
   /**
    * Reset the state
    */

src/Panzoom/Panzoom.js

@@ -839,6 +839,7 @@ export class Panzoom extends Base {
     this.friction = friction;
 
     this.transform = {
+      ...this.transform,
       x,
       y,
       scale,

src/shared/Base/Base.js

@@ -30,7 +30,7 @@ export class Base {
    * @param {*} [fallback] Fallback value for non-existing key
    * @returns {*}
    */
-  option(key, fallback) {
+  option(key, fallback, ...rest) {
     // Make sure it is string
     key = String(key);
 
@@ -38,7 +38,7 @@ export class Base {
 
     // Allow to have functions as options
     if (typeof value === "function") {
-      value = value.call(this, key);
+      value = value.call(this, this, ...rest);
     }
 
     return value === undefined ? fallback : value;