Bugfixes

src/Carousel/plugins/Dots/Dots.js

@@ -1,3 +1,8 @@
+const defaults = {
+  // The minimum number of slides to display dots
+  minSlideCount: 2,
+};
+
 export class Dots {
   constructor(carousel) {
     this.carousel = carousel;
@@ -14,7 +19,7 @@ export class Dots {
    * Build wrapping DOM element containing all dots
    */
   buildList() {
-    if (this.carousel.pages.length < 2) {
+    if (this.carousel.pages.length < this.carousel.option("Dots.minSlideCount")) {
       return;
     }
 

src/Fancybox/Fancybox.js

@@ -801,6 +801,11 @@ class Fancybox extends Base {
       slide.$content = null;
     }
 
+    if (slide.$closeButton) {
+      slide.$closeButton.remove();
+      slide.$closeButton = null;
+    }
+
     if (slide._className) {
       slide.$el.classList.remove(slide._className);
     }
@@ -1146,6 +1151,10 @@ class Fancybox extends Base {
    * Clean up after closing fancybox
    */
   destroy() {
+    if (this.state === "destroy") {
+      return;
+    }
+
     this.state = "destroy";
 
     this.trigger("destroy");

src/Fancybox/plugins/Html/Html.js

@@ -293,6 +293,8 @@ export class Html {
 
       this.fancybox.setContent(slide, $iframe);
 
+      this.resizeIframe(slide);
+
       return;
     }
 
@@ -314,8 +316,8 @@ export class Html {
 
       let isFirstLoad = false;
 
-      if ($iframe.dataset.ready !== "yes") {
-        $iframe.dataset.ready = "yes";
+      if (!$iframe.isReady) {
+        $iframe.isReady = true;
         isFirstLoad = true;
       }
 
@@ -395,53 +397,62 @@ export class Html {
   resizeIframe(slide) {
     const $iframe = slide.$iframe;
 
-    if (!$iframe || !$iframe.dataset || $iframe.dataset.ready !== "yes") {
+    if (!$iframe) {
       return;
     }
 
-    const width_ = slide._width || 0;
-    const height_ = slide._height || 0;
+    let width_ = slide._width || 0;
+    let height_ = slide._height || 0;
 
-    if (slide.autoSize === false && !(width_ || height_)) {
-      return;
+    if (width_ && height_) {
+      slide.autoSize = false;
     }
 
-    const parentStyle = $iframe.parentNode.style;
+    const $parent = $iframe.parentNode;
+    const parentStyle = $parent.style;
 
-    parentStyle.flex = "1 1 auto";
-    parentStyle.width = "";
-    parentStyle.height = "";
+    if (slide.preload !== false && slide.autoSize !== false) {
+      try {
+        const compStyles = window.getComputedStyle($parent),
+          paddingX = parseFloat(compStyles.paddingLeft) + parseFloat(compStyles.paddingRight),
+          paddingY = parseFloat(compStyles.paddingTop) + parseFloat(compStyles.paddingBottom);
 
-    try {
-      const document = $iframe.contentWindow.document,
-        $html = document.getElementsByTagName("html")[0],
-        $body = document.body,
-        style = window.getComputedStyle($iframe.parentNode),
-        paddingX = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight),
-        paddingY = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+        const document = $iframe.contentWindow.document,
+          $html = document.getElementsByTagName("html")[0],
+          $body = document.body;
 
-      // Get rid of vertical scrollbar
-      $body.style.overflow = "hidden";
+        // Get rid of vertical scrollbar
+        $body.style.overflow = "hidden";
 
-      let width = $html.scrollWidth + paddingX;
+        width_ = width_ || $html.scrollWidth + paddingX;
 
-      if (width_) {
-        width = Math.min(width, width_);
-      }
+        parentStyle.width = `${width_}px`;
 
-      parentStyle.width = `${width}px`;
+        $body.style.overflow = "";
 
-      $body.style.overflow = "";
+        parentStyle.flex = "0 0 auto";
+        parentStyle.height = `${$body.scrollHeight}px`;
 
-      parentStyle.flex = "";
-      parentStyle.flexShrink = "0";
-      parentStyle.height = `${$body.scrollHeight}px`;
+        height_ = $html.scrollHeight + paddingY;
+      } catch (error) {
+        //
+      }
+    }
 
-      let height = height_ || $html.scrollHeight + paddingY;
+    if (width_ || height_) {
+      const newStyle = {
+        flex: "0 1 auto",
+      };
+
+      if (width_) {
+        newStyle.width = `${width_}px`;
+      }
 
-      parentStyle.height = `${height}px`;
-    } catch (error) {
-      parentStyle.flex = "";
+      if (height_) {
+        newStyle.height = `${height_}px`;
+      }
+
+      Object.assign(parentStyle, newStyle);
     }
   }
 
@@ -490,7 +501,7 @@ export class Html {
             .option("Html.html5video.tpl")
             .replace(/\{\{src\}\}/gi, slide.src)
             .replace("{{format}}", slide.format || (slide.html5video && slide.html5video.format) || "")
-            .replace("{{poster}}", slide.thumb || "")
+            .replace("{{poster}}", slide.poster || slide.thumb || "")
         );
 
         break;
@@ -671,11 +682,11 @@ export class Html {
       if ($content.style.display !== "none") {
         $content.style.display = "none";
       }
+    }
 
-      if (slide.$closeButton) {
-        slide.$closeButton.remove();
-        slide.$closeButton = null;
-      }
+    if (slide.$closeButton) {
+      slide.$closeButton.remove();
+      slide.$closeButton = null;
     }
 
     const $placeHolder = $content && $content.$placeHolder;

src/Fancybox/plugins/Image/Image.js

@@ -505,7 +505,7 @@ export class Image {
     // therefore animation end position has to be recalculated after each page scroll
     window.addEventListener("scroll", animatePosition);
 
-    Panzoom.on("endAnimation", () => {
+    Panzoom.once("endAnimation", () => {
       window.removeEventListener("scroll", animatePosition);
       fancybox.destroy();
     });
@@ -518,7 +518,7 @@ export class Image {
    * @param {Object} slide
    */
   handleCursor(slide) {
-    if (slide.type !== "image") {
+    if (slide.type !== "image" || !slide.$el) {
       return;
     }
 

src/Fancybox/plugins/ScrollLock/ScrollLock.js

@@ -86,6 +86,10 @@ export class ScrollLock {
     const startY = this.startY;
     const zoom = window.innerWidth / window.document.documentElement.clientWidth;
 
+    if (!event.cancelable) {
+      return;
+    }
+
     if (event.touches.length > 1 || zoom !== 1) {
       return;
     }

src/Panzoom/Panzoom.js

@@ -567,7 +567,7 @@ export class Panzoom extends Base {
         // Check to see if there are any changes
         if (Math.abs(rect.width - this.container.width) > 1 || Math.abs(rect.height - this.container.height) > 1) {
           if (this.isAnimating()) {
-            this.endAnimation();
+            this.endAnimation(true);
           }
 
           this.updateMetrics();
@@ -895,8 +895,6 @@ export class Panzoom extends Base {
     } else if (this.state !== "pointerdown") {
       this.endAnimation();
 
-      this.trigger("endAnimation");
-
       return;
     }
 
@@ -1134,7 +1132,7 @@ export class Panzoom extends Base {
   /**
    * Stop animation loop
    */
-  endAnimation() {
+  endAnimation(silently) {
     cancelAnimationFrame(this.rAF);
     this.rAF = null;
 
@@ -1149,6 +1147,10 @@ export class Panzoom extends Base {
     this.state = "ready";
 
     this.handleCursor();
+
+    if (silently !== true) {
+      this.trigger("endAnimation");
+    }
   }
 
   /**

tests/4_fancybox_test.js

@@ -666,7 +666,7 @@ describe("Fancybox", function () {
     const slide_padding = 36 * 2;
 
     expect(instance.getSlide().$iframe.clientWidth).to.be.closeTo(800 - padding_x - slide_padding, 1);
-    expect(instance.getSlide().$iframe.clientHeight).to.be.closeTo(500, 1);
+    expect(instance.getSlide().$iframe.clientHeight).to.be.closeTo(250, 1);
 
     instance.close();
   });
@@ -694,14 +694,14 @@ describe("Fancybox", function () {
     const slide_padding = 36 * 2;
 
     expect(instance.getSlide().$iframe.clientWidth).to.be.closeTo(800 - padding_x - slide_padding, 1);
-    expect(instance.getSlide().$iframe.clientHeight).to.be.closeTo(500, 1);
+    expect(instance.getSlide().$iframe.clientHeight).to.be.closeTo(250, 1);
 
     instance.getSlide().$iframe.src = instance.getSlide().$iframe.src + "?grow";
 
     await delay(500);
 
     expect(instance.getSlide().$iframe.clientWidth).to.be.closeTo(800 - padding_x - slide_padding, 1);
-    expect(instance.getSlide().$iframe.clientHeight).to.be.closeTo(700, 1);
+    expect(instance.getSlide().$iframe.clientHeight).to.be.closeTo(350, 1);
 
     instance.close();
   });

tests/assets/iframe.html

@@ -12,9 +12,9 @@
     </style>
   </head>
   <body>
-    <div id="el" style="height: 500px"></div>
+    <div id="el" style="height: 250px"></div>
   </body>
   <script>
-    if (location.search) document.getElementById("el").style.height = "700px";
+    if (location.search) document.getElementById("el").style.height = "350px";
   </script>
 </html>