Bugfixes

package.json

@@ -15,7 +15,9 @@
     "test": "karma start karma.conf.js",
     "build:js": "rollup -c",
     "build:css": "node build-css.js",
-    "watch:css": "npm-watch"
+    "watch:css": "npm-watch",
+    "version": "npm run build:js && npm run build:css && git add .",
+    "postversion": "git push && git push --tags && npm publish --access=public"
   },
   "author": "Janis Skarnelis",
   "keywords": [
@@ -55,30 +57,30 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.14.3",
-    "@babel/preset-env": "^7.14.4",
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.7",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^2.4.2",
     "chai": "^4.3.4",
-    "core-js": "^3.13.1",
+    "core-js": "^3.15.1",
     "husky": "^6.0.0",
-    "karma": "^6.3.2",
+    "karma": "^6.3.4",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-mocha": "^2.0.1",
-    "mocha": "^8.4.0",
-    "npm-watch": "^0.9.0",
-    "prettier": "2.3.0",
-    "pretty-quick": "^3.1.0",
-    "puppeteer": "^10.0.0",
-    "rollup": "^2.50.5",
+    "mocha": "^9.0.1",
+    "npm-watch": "^0.10.0",
+    "prettier": "2.3.2",
+    "pretty-quick": "^3.1.1",
+    "puppeteer": "^10.1.0",
+    "rollup": "^2.52.3",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-banner": "^0.2.1",
     "rollup-plugin-eslint": "^7.0.0",
     "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "1.34.0",
+    "sass": "1.35.1",
     "sharp": "^0.28.3"
   },
   "browserslist": [

src/Carousel/plugins/Sync/Sync.js

@@ -24,8 +24,11 @@ export class Sync {
     this.onTargetChange(true);
 
     this.nav.on("createSlide", this.onNavCreateSlide);
-    this.sync.on("change", this.onTargetChange);
+    this.nav.on("Panzoom.updateMetrics", this.onTargetChange);
+
     this.nav.Panzoom.on("click", this.onNavClick);
+
+    this.sync.on("change", this.onTargetChange);
   }
 
   /**
@@ -111,8 +114,8 @@ export class Sync {
   detach() {
     if (this.sync) {
       this.nav.off("ready", this.onNavReady);
-
       this.nav.off("createSlide", this.onNavCreate);
+      this.nav.on("Panzoom.updateMetrics", this.onTargetChange);
 
       this.sync.off("change", this.onTargetChange);
     }

src/Fancybox/Fancybox.js

@@ -372,6 +372,7 @@ class Fancybox extends Base {
 
           slides: slides,
           initialPage: this.options.startIndex,
+          slidesPerPage: 1,
 
           infiniteX: this.option("infinite"),
           infiniteY: true,
@@ -830,8 +831,6 @@ class Fancybox extends Base {
     this.manageCloseButton(slide);
 
     if (slide.state !== "loading") {
-      this.trigger("load", slide);
-
       this.revealContent(slide);
     }
 
@@ -878,7 +877,21 @@ class Fancybox extends Base {
 
     slide.$content.style.visibility = "";
 
-    if (slide.state === "error" || this.Carousel.prevPage !== null || slide.index !== this.options.startIndex) {
+    // Add CSS class name that reveals content (default animation is "fadeIn")
+    let showClass = false;
+
+    if (
+      !(
+        slide.state === "error" ||
+        slide.state === "ready" ||
+        this.Carousel.prevPage !== null ||
+        slide.index !== this.options.startIndex
+      )
+    ) {
+      showClass = slide.showClass === undefined ? this.option("showClass") : slide.showClass;
+    }
+
+    if (!showClass) {
       this.done(slide);
 
       return;
@@ -886,9 +899,6 @@ class Fancybox extends Base {
 
     slide.state = "animating";
 
-    // Add CSS class name that reveals content (default animation is "fadeIn")
-    const showClass = slide.showClass === undefined ? this.option("showClass") : slide.showClass;
-
     this.animateCSS(slide.$content, showClass, () => {
       this.done(slide);
     });
@@ -956,11 +966,11 @@ class Fancybox extends Base {
    * @param {String} message - Error message, can contain HTML code and template variables
    */
   setError(slide, message) {
+    slide.state = "error";
+
     this.hideLoading(slide);
     this.clearContent(slide);
 
-    slide.state = "error";
-
     // Create new content
     const div = document.createElement(`div`);
     div.classList.add(`fancybox-error`);
@@ -976,6 +986,8 @@ class Fancybox extends Base {
   showLoading(slide) {
     slide.state = "loading";
 
+    this.trigger("load", slide);
+
     slide.$el.classList.add("is-loading");
 
     let $spinner = slide.$el.querySelector(".fancybox__spinner");
@@ -1001,13 +1013,17 @@ class Fancybox extends Base {
    * @param {Object} slide - Carousel slide
    */
   hideLoading(slide) {
-    const $spinner = slide.$el.querySelector(".fancybox__spinner");
+    const $spinner = slide.$el && slide.$el.querySelector(".fancybox__spinner");
 
     if ($spinner) {
       $spinner.remove();
+
+      slide.$el.classList.remove("is-loading");
     }
 
-    slide.$el.classList.remove("is-loading");
+    if (slide.state === "loading") {
+      slide.state = "ready";
+    }
   }
 
   /**
@@ -1075,7 +1091,6 @@ class Fancybox extends Base {
 
     this.$container.setAttribute("aria-hidden", "true");
 
-    // this.$container.classList.remove("show");
     this.$container.classList.add("is-closing");
 
     // Clear inactive slides

src/Fancybox/plugins/Html/Html.js

@@ -280,6 +280,8 @@ export class Html {
     };
 
     $iframe.onload = () => {
+      fancybox.hideLoading(slide);
+
       let isFirstLoad = false;
 
       if ($iframe.dataset.ready !== "yes") {
@@ -291,8 +293,6 @@ export class Html {
         return;
       }
 
-      fancybox.hideLoading(slide);
-
       $iframe.parentNode.style.visibility = "";
 
       if (slide.autoSize !== false) {
@@ -300,7 +300,7 @@ export class Html {
       }
 
       if (isFirstLoad) {
-        fancybox.animateCSS($content, fancybox.option("showClass"));
+        fancybox.revealContent(slide);
       }
     };
 

src/Fancybox/plugins/Image/Image.js

@@ -96,7 +96,7 @@ export class Image {
       "Carousel.change": this.onPageChange,
       "Carousel.createSlide": this.onCreateSlide,
       "Carousel.deleteSlide": this.onRemoveSlide,
-      "Carousel.refresh": this.onRefresh,
+      "Carousel.Panzoom.updateMetrics": this.onRefresh,
     };
   }
 
@@ -272,8 +272,6 @@ export class Image {
 
     this.initSlidePanzoom(slide);
 
-    this.fancybox.trigger("load", slide);
-
     this.revealContent(slide);
   }
 
@@ -303,11 +301,13 @@ export class Image {
    * @param {Object} slide
    */
   revealContent(slide) {
+    this.updateDimensions(slide);
+
     // Animate only on first run
     if (
       this.fancybox.Carousel.prevPage === null &&
       slide.index === this.fancybox.options.startIndex &&
-      this.canZoom()
+      this.canZoom(slide)
     ) {
       this.zoomIn();
     } else {
@@ -318,7 +318,7 @@ export class Image {
   /**
    * Determine if it is possible to do zoom-in animation
    */
-  canZoom() {
+  canZoom(slide) {
     const fancybox = this.fancybox,
       $container = fancybox.$container;
 
@@ -328,8 +328,7 @@ export class Image {
       return rez;
     }
 
-    const slide = fancybox.getSlide(),
-      $thumb = slide.$thumb;
+    const $thumb = slide.$thumb;
 
     if (!$thumb || slide.state === "loading") {
       return rez;
@@ -624,7 +623,7 @@ export class Image {
     });
 
     // If possible, start the zoom animation, it will interrupt the default closing process
-    if (this.fancybox.state === "closing" && this.canZoom()) {
+    if (this.fancybox.state === "closing" && this.canZoom(fancybox.getSlide())) {
       this.zoomOut();
     }
   }

src/Fancybox/plugins/ScrollLock/ScrollLock.js

@@ -35,17 +35,10 @@ export class ScrollLock {
   }
 
   /**
-   * Handle `resize` event to call `updateViewport` once per repaint
+   * Handle `resize` event to call `updateViewport`
    */
   onResize() {
-    if (this.pendingUpdate) {
-      return;
-    }
-
-    this.pendingUpdate = requestAnimationFrame(() => {
-      this.pendingUpdate = null;
-      this.updateViewport();
-    });
+    this.updateViewport();
   }
 
   /**
@@ -75,10 +68,6 @@ export class ScrollLock {
     $container.style.width = width;
     $container.style.height = height;
     $container.style.transform = transform;
-
-    if (fancybox.Carousel) {
-      fancybox.Carousel.updateMetrics();
-    }
   }
 
   /**

src/Fancybox/plugins/Thumbs/Thumbs.scss

@@ -1,5 +1,6 @@
 .fancybox__thumbs {
   flex: 0 0 auto;
+  position: relative;
   padding: $fancybox-thumbs-padding;
 
   .fancybox__container.is-animated[aria-hidden="true"] & {

src/Fancybox/scss/_variables.scss

@@ -24,7 +24,7 @@ $fancybox-container-color: var(--fancybox-color, #fff) !default;
 $fancybox-container-padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
   env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) !default;
 
-$fancybox-backdrop-bg: var(--fancybox-bg, rgba(24, 24, 27, 0.97)) !default;
+$fancybox-backdrop-bg: var(--fancybox-bg, rgba(24, 24, 27, 0.92)) !default;
 
 $fancybox-spinner-color: var(--fancybox-color, currentColor) !default;
 $fancybox-spinner-width: 50px !default;
@@ -37,19 +37,13 @@ $fancybox-content-color: var(--fancybox-content-color, #374151) !default;
 $fancybox-content-bg: var(--fancybox-content-bg, #fff) !default;
 $fancybox-content-padding: 36px !default;
 
-$fancybox-iframe-width: 100% !default;
-$fancybox-iframe-height: 80% !default;
-
-$fancybox-video-width: 960px !default;
-$fancybox-video-height: 540px !default;
-
 $fancybox-caption-margin: 0 !default;
 $fancybox-caption-padding: 1rem 0 0 0 !default;
 $fancybox-caption-color: var(--fancybox-color, currentColor) !default;
 $fancybox-caption-line-height: 1.375 !default;
 
 /*
-    Thumbs plugin
+  Thumbs plugin
 */
 
 $fancybox-thumbs-padding: 0px 3px !default;
@@ -61,3 +55,12 @@ $fancybox-thumbs-bg: rgba(255, 255, 255, 0.1) !default;
 
 $fancybox-thumbs-selected-opacity: false !default;
 $fancybox-thumbs-selected-border: true !default;
+
+/*
+  HTML plugin
+*/
+$fancybox-iframe-width: 100% !default;
+$fancybox-iframe-height: 80% !default;
+
+$fancybox-video-width: 960px !default;
+$fancybox-video-height: 540px !default;

src/Panzoom/Panzoom.js

@@ -713,8 +713,6 @@ export class Panzoom extends Base {
         this.pendingResizeUpdate =
           this.pendingResizeUpdate ||
           setTimeout(() => {
-            this.pendingResizeUpdate = null;
-
             let rect = entries && entries[0].contentRect;
 
             // Polyfill does not provide `contentRect`
@@ -727,7 +725,9 @@ export class Panzoom extends Base {
             ) {
               this.updateMetrics();
             }
-          }, 50);
+
+            this.pendingResizeUpdate = null;
+          }, this.option("updateRate", 250));
       });
 
     this.resizeObserver.observe($viewport);

src/shared/utils/ResizeObserver.js

@@ -20,6 +20,7 @@ export const ResizeObserver =
       if (this.observables.some((observable) => observable.el === el)) {
         return;
       }
+
       const newObservable = {
         el: el,
         size: {
@@ -27,6 +28,7 @@ export const ResizeObserver =
           width: el.clientWidth,
         },
       };
+
       this.observables.push(newObservable);
     }
 
@@ -50,9 +52,11 @@ export const ResizeObserver =
           }
         })
         .map((obj) => obj.el);
+
       if (changedEntries.length > 0) {
         this.callback(changedEntries);
       }
+
       window.requestAnimationFrame(this.boundCheck);
     }
   };

tests/2_panzoom_test.js

@@ -19,6 +19,7 @@ function createSandbox(content) {
   const sandbox = document.createElement("div");
   sandbox.style.cssText =
     "position:fixed;top:calc(50vh - 75px);left:calc(50vw - 112px);overflow:visible;visibility:hidden;";
+  // "position:fixed;top:calc(50vh - 75px);left:calc(50vw - 112px);overflow:visible; outline:1px solid red;";
   sandbox.innerHTML = content;
   document.body.appendChild(sandbox);
 

tests/3_carousel_test.js

@@ -320,7 +320,7 @@ describe("Carousel", function () {
 
     instance.$element.parentNode.style.width = "600px";
 
-    await delay(100);
+    await delay(300);
 
     expect(instance.elemDimWidth).to.equal(2520);
     expect(instance.slides[6].width).to.equal(360);
@@ -343,7 +343,7 @@ describe("Carousel", function () {
 
     mainElement.parentNode.style.width = "400px";
 
-    await delay(100);
+    await delay(300);
 
     expect(sandbox.querySelector(".carousel__nav")).to.be.instanceOf(HTMLElement);
 
@@ -364,7 +364,7 @@ describe("Carousel", function () {
 
     mainElement.parentNode.style.width = "400px";
 
-    await delay(100);
+    await delay(300);
 
     expect(sandbox.querySelector(".carousel__dots")).to.be.instanceOf(HTMLElement);
     expect(sandbox.querySelector(".carousel__dots").children.length).to.equal(2);
@@ -586,7 +586,7 @@ describe("Carousel", function () {
       clientY: y + 50,
     });
 
-    await delay(100);
+    await delay(300);
 
     triggerEvent(instance.Panzoom.$viewport, "pointerup", {
       pointerId: 1,
@@ -625,7 +625,7 @@ describe("Carousel", function () {
       clientY: y + 50,
     });
 
-    await delay(100);
+    await delay(300);
 
     triggerEvent(instance.Panzoom.$viewport, "pointerup", {
       pointerId: 1,

tests/4_fancybox_test.js

@@ -107,14 +107,12 @@ function delay(time = 500) {
 
 describe("Fancybox", function () {
   it("can be started using API", function () {
-    const instance = new Fancybox({
-      items: [
-        {
-          type: "html",
-          src: "Lorem ipsum dolor sit amet",
-        },
-      ],
-    });
+    const instance = new Fancybox([
+      {
+        type: "html",
+        src: "Lorem ipsum dolor sit amet",
+      },
+    ]);
 
     expect(instance).to.be.an.instanceof(Fancybox);
 
@@ -122,14 +120,12 @@ describe("Fancybox", function () {
   });
 
   it("returns instance using `Fancybox.getInstance()`", function () {
-    const instance = new Fancybox({
-      items: [
-        {
-          type: "html",
-          src: "Lorem ipsum dolor sit amet",
-        },
-      ],
-    });
+    const instance = new Fancybox([
+      {
+        type: "html",
+        src: "Lorem ipsum dolor sit amet",
+      },
+    ]);
 
     expect(instance).to.be.an.instanceof(Fancybox);
 
@@ -162,7 +158,7 @@ describe("Fancybox", function () {
     const triggerA = document.getElementById("trigger__html-modal-a");
     const triggerB = document.getElementById("trigger__html-modal-b");
 
-    Fancybox.assign("[data-fancybox]", {
+    Fancybox.bind("[data-fancybox]", {
       animated: false,
       showClass: false,
       hideClass: false,
@@ -189,7 +185,7 @@ describe("Fancybox", function () {
     const sandbox = createSandbox(htmlMarkup);
     const trigger = document.getElementById("trigger__html-modal");
 
-    Fancybox.assign("#trigger__html-modal", {
+    Fancybox.bind("#trigger__html-modal", {
       showClass: false,
       hideClass: false,
       l10n: {
@@ -242,7 +238,7 @@ describe("Fancybox", function () {
     const wrap = document.getElementById("html-modal__wrap");
     const node = document.getElementById("html-modal");
 
-    Fancybox.assign("#trigger__html-modal", {
+    Fancybox.bind("#trigger__html-modal", {
       showClass: false,
       hideClass: false,
     });
@@ -270,7 +266,7 @@ describe("Fancybox", function () {
     const sandbox = createSandbox(htmlMarkup);
     const trigger = document.getElementById("trigger__html-modal");
 
-    Fancybox.assign("#trigger__html-modal", {
+    Fancybox.bind("#trigger__html-modal", {
       animated: false,
       showClass: false,
       hideClass: false,
@@ -289,15 +285,17 @@ describe("Fancybox", function () {
   });
 
   it("updates state after closing", async function () {
-    const instance = new Fancybox({
-      items: [
+    const instance = new Fancybox(
+      [
         {
           type: "html",
           src: "Lorem ipsum dolor sit amet",
         },
       ],
-      showClass: false,
-    });
+      {
+        showClass: false,
+      }
+    );
 
     instance.close();
 
@@ -309,16 +307,18 @@ describe("Fancybox", function () {
   });
 
   it("sets focus on close button by default", async function () {
-    const instance = new Fancybox({
-      items: [
+    const instance = new Fancybox(
+      [
         {
           type: "html",
           src: "Lorem ipsum dolor sit amet",
         },
       ],
-      showClass: false,
-      hideClass: false,
-    });
+      {
+        showClass: false,
+        hideClass: false,
+      }
+    );
 
     expect(document.activeElement.classList.contains("is-close")).to.be.true;
 
@@ -326,14 +326,12 @@ describe("Fancybox", function () {
   });
 
   it("sets focus on first focusable element", async function () {
-    const instance = new Fancybox({
-      items: [
-        {
-          type: "html",
-          src: '<div id="html-modal"><p>Lorem ipsum dolor sit amet</p><p><input id="html-modal__input" type="text" value="" /></p></div>',
-        },
-      ],
-    });
+    const instance = new Fancybox([
+      {
+        type: "html",
+        src: '<div id="html-modal"><p>Lorem ipsum dolor sit amet</p><p><input id="html-modal__input" type="text" value="" /></p></div>',
+      },
+    ]);
 
     await delay(300);
 
@@ -346,18 +344,16 @@ describe("Fancybox", function () {
   });
 
   it("sets focus on element having `autofocus` attribute", async function () {
-    const instance = new Fancybox({
-      items: [
-        {
-          type: "html",
-          src: `<div id="html-modal">
+    const instance = new Fancybox([
+      {
+        type: "html",
+        src: `<div id="html-modal">
     <p>Lorem ipsum dolor sit amet</p>
     <p><input id="html-modal__input-a" type="text" value="" /></p>
     <p><input autofocus id="html-modal__input-b" type="text" value="" /></p>
   </div>`,
-        },
-      ],
-    });
+      },
+    ]);
 
     await delay(500);
 
@@ -394,7 +390,7 @@ describe("Fancybox", function () {
     const triggerA = document.getElementById("trigger__html-modal-a");
     const triggerB = document.getElementById("trigger__html-modal-b");
 
-    Fancybox.assign("[data-fancybox]", {
+    Fancybox.bind("[data-fancybox]", {
       animated: false,
       showClass: false,
       hideClass: false,
@@ -410,7 +406,7 @@ describe("Fancybox", function () {
 
       const instance = Fancybox.getInstance();
 
-      expect(instance.options.items).to.deep.equal(slides);
+      expect(instance.items).to.deep.equal(slides);
 
       instance.next();
 
@@ -448,7 +444,7 @@ describe("Fancybox", function () {
 
     let instance = Fancybox.getInstance();
 
-    expect(instance.options.items).to.deep.equal(items);
+    expect(instance.items).to.deep.equal(items);
 
     instance.close();
 
@@ -456,7 +452,7 @@ describe("Fancybox", function () {
 
     instance = Fancybox.getInstance();
 
-    expect(instance.options.items).to.deep.equal(items);
+    expect(instance.items).to.deep.equal(items);
 
     instance.close();
 
@@ -468,7 +464,7 @@ describe("Fancybox", function () {
 
     const eventList = [];
 
-    Fancybox.assign('[data-fancybox="html-gallery"]', {
+    Fancybox.bind('[data-fancybox="html-gallery"]', {
       showClass: false,
       hideClass: false,
       infinite: false,
@@ -567,7 +563,7 @@ describe("Fancybox", function () {
 
     await delay(300);
 
-    expect(instance.options.items).to.deep.equal(items);
+    expect(instance.items).to.deep.equal(items);
 
     instance.close();
 
@@ -580,7 +576,7 @@ describe("Fancybox", function () {
     const sandbox = createSandbox(imageMarkup);
     const trigger = sandbox.querySelector("a");
 
-    Fancybox.assign("[data-fancybox]", {
+    Fancybox.bind("[data-fancybox]", {
       animated: false,
       showClass: false,
       hideClass: false,
@@ -635,16 +631,18 @@ describe("Fancybox", function () {
   });
 
   it("resizes iframe to match content dimensions", async function () {
-    const instance = new Fancybox({
-      showClass: false,
-      hideClass: false,
-      items: [
+    const instance = new Fancybox(
+      [
         {
           type: "iframe",
           src: "./assets/iframe.html",
         },
       ],
-    });
+      {
+        showClass: false,
+        hideClass: false,
+      }
+    );
 
     expect(instance.getSlide().type).to.be.equal("iframe");
     expect(instance.getSlide().$iframe).to.be.an.instanceof(HTMLIFrameElement);
@@ -662,16 +660,18 @@ describe("Fancybox", function () {
   });
 
   it("resizes iframe after reload", async function () {
-    const instance = new Fancybox({
-      showClass: false,
-      hideClass: false,
-      items: [
+    const instance = new Fancybox(
+      [
         {
           type: "iframe",
           src: "./assets/iframe.html",
         },
       ],
-    });
+      {
+        showClass: false,
+        hideClass: false,
+      }
+    );
 
     instance.$container.setAttribute("style", "width:800px;height:600px;padding:0;");
 
@@ -693,15 +693,13 @@ describe("Fancybox", function () {
   });
 
   it("can disable iframe autosize", async function () {
-    const instance = new Fancybox({
-      items: [
-        {
-          type: "iframe",
-          src: "./assets/iframe.html",
-          autoSize: false,
-        },
-      ],
-    });
+    const instance = new Fancybox([
+      {
+        type: "iframe",
+        src: "./assets/iframe.html",
+        autoSize: false,
+      },
+    ]);
 
     instance.$container.setAttribute("style", "width:800px;height:600px;padding:0;");
 
@@ -716,14 +714,12 @@ describe("Fancybox", function () {
   });
 
   it("can load HTML content using ajax", async function () {
-    const instance = new Fancybox({
-      items: [
-        {
-          type: "ajax",
-          src: "./assets/ajax.html",
-        },
-      ],
-    });
+    const instance = new Fancybox([
+      {
+        type: "ajax",
+        src: "./assets/ajax.html",
+      },
+    ]);
 
     await delay(300);