zoomora 1.1.0 → 1.2.1

package/dist/zoomora.umd.js

@@ -22,10 +22,10 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
   /*!
-   * Zoomora Lightbox Plugin v1.1.0
+   * Zoomora Lightbox Plugin v1.2.1
    * A modern, responsive lightbox plugin with zoom, fullscreen, and gallery features
    *
-   * Copyright (c) 2025 Faruk Ahmed (FrontTheme)
+   * Copyright (c) 2026 Faruk Ahmed (FrontTheme)
    * Licensed under MIT License
    */
   (function(global, factory) {
@@ -59,6 +59,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           // Zoom step for scroll wheel
           animationDuration: 300,
           // Animation duration in ms
+          closeOnBackgroundClick: true,
+          // Close lightbox when clicking on background
           onOpen: null,
           // Callback when lightbox opens
           onClose: null,
@@ -162,21 +164,27 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         <div class="zoomora" id="zoomoraLightbox">
           <div class="zoomora-container">
             <div class="zoomora-header" id="zoomoraHeader">
-              <div class="zoomora-counter" id="zoomoraCounter">1 / 1</div>
+              <div class="zoomora-counter" id="zoomoraCounter" ${!this.options.showCounter ? 'style="opacity:0;visibility:hidden;"' : ""}>1 / 1</div>
               <div class="zoomora-controls">
-                <button class="zoomora-btn" id="zoomoraThumbnailBtn" title="Toggle Thumbnails">
-                  <i class="zoomorai-thumbnails"></i>
-                </button>
+                ${this.options.showThumbnails ? `
+                  <button class="zoomora-btn" id="zoomoraThumbnailBtn" title="Toggle Thumbnails">
+                    <i class="zoomorai-thumbnails"></i>
+                  </button>
+                ` : ""}
                 ${autoHideButtonHTML}
-                <button class="zoomora-btn" id="zoomoraZoomBtn" title="Zoom">
-                  <i class="zoomorai-zoom"></i>
-                </button>
-                <button class="zoomora-btn" id="zoomoraFullscreenBtn" title="Fullscreen">
-                  <i class="zoomorai-expand"></i>
-                </button>
-                <button class="zoomora-btn" id="zoomoraCollapseBtn" title="Exit Fullscreen" style="display: none;">
-                  <i class="zoomorai-collapse"></i>
-                </button>
+                ${this.options.showZoom ? `
+                  <button class="zoomora-btn" id="zoomoraZoomBtn" title="Zoom">
+                    <i class="zoomorai-zoom"></i>
+                  </button>
+                ` : ""}
+                ${this.options.showFullscreen ? `
+                  <button class="zoomora-btn" id="zoomoraFullscreenBtn" title="Fullscreen">
+                    <i class="zoomorai-expand"></i>
+                  </button>
+                  <button class="zoomora-btn" id="zoomoraCollapseBtn" title="Exit Fullscreen" style="display: none;">
+                    <i class="zoomorai-collapse"></i>
+                  </button>
+                ` : ""}
                 <button class="zoomora-btn" id="zoomoraCloseBtn" title="Close">
                   <i class="zoomorai-close"></i>
                 </button>
@@ -195,8 +203,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
               <i class="zoomorai-arrow-right"></i>
             </button>
     
-            <div class="zoomora-caption" id="zoomoraCaption"></div>
-            <div class="zoomora-thumbnails" id="zoomoraThumbs"></div>
+            <div class="zoomora-caption" id="zoomoraCaption" ${!this.options.showThumbnails ? 'style="bottom:20px;"' : ""}></div>
+            <div class="zoomora-thumbnails" id="zoomoraThumbs" ${!this.options.showThumbnails ? 'style="display:none;"' : ""}></div>
           </div>
         </div>
       `;
@@ -223,10 +231,16 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         this.addEventListener(document.getElementById("zoomoraCloseBtn"), "click", () => this.close());
         this.addEventListener(document.getElementById("zoomoraPrevBtn"), "click", () => this.prev());
         this.addEventListener(document.getElementById("zoomoraNextBtn"), "click", () => this.next());
-        this.addEventListener(document.getElementById("zoomoraZoomBtn"), "click", () => this.toggleZoom());
-        this.addEventListener(document.getElementById("zoomoraFullscreenBtn"), "click", () => this.toggleFullscreen());
-        this.addEventListener(document.getElementById("zoomoraCollapseBtn"), "click", () => this.exitFullscreen());
-        this.addEventListener(document.getElementById("zoomoraThumbnailBtn"), "click", () => this.toggleThumbnails());
+        if (this.options.showZoom) {
+          this.addEventListener(document.getElementById("zoomoraZoomBtn"), "click", () => this.toggleZoom());
+        }
+        if (this.options.showFullscreen) {
+          this.addEventListener(document.getElementById("zoomoraFullscreenBtn"), "click", () => this.toggleFullscreen());
+          this.addEventListener(document.getElementById("zoomoraCollapseBtn"), "click", () => this.exitFullscreen());
+        }
+        if (this.options.showThumbnails) {
+          this.addEventListener(document.getElementById("zoomoraThumbnailBtn"), "click", () => this.toggleThumbnails());
+        }
         this.addEventListener(document, "fullscreenchange", this.boundMethods.handleFullscreenChange);
         this.addEventListener(document, "webkitfullscreenchange", this.boundMethods.handleFullscreenChange);
         this.addEventListener(document, "mozfullscreenchange", this.boundMethods.handleFullscreenChange);
@@ -313,11 +327,15 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
        * Handle fullscreen change events
        */
       handleFullscreenChange() {
-        const isInFullscreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+        const isInFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
         if (!isInFullscreen && this.isFullscreen) {
           this.isFullscreen = false;
           this.zoomora.classList.remove("fullscreen");
           this.updateButtons();
+        } else if (isInFullscreen && !this.isFullscreen) {
+          this.isFullscreen = true;
+          this.zoomora.classList.add("fullscreen");
+          this.updateButtons();
         }
       }
       /**
@@ -325,7 +343,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
        * @param {Event} e - Click event
        */
       handleZoomoraClick(e) {
-        if (e.target === this.zoomora) {
+        if (e.target === this.zoomora && this.options.closeOnBackgroundClick) {
           this.close();
         }
       }
@@ -337,9 +355,37 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         if (Date.now() - this.lastDragTime < 200) {
           return;
         }
-        const media = e.target.closest(".zoomora-media");
-        if (media && !media.classList.contains("no-zoom")) {
-          this.toggleZoom();
+        if (this.header && this.header.contains(e.target)) {
+          return;
+        }
+        if (e.target.closest("button")) {
+          return;
+        }
+        const mediaElement = e.target.closest(".zoomora-media, .zoomora-video, .zoomora-iframe");
+        if (mediaElement) {
+          if (mediaElement.classList.contains("zoomora-media") && !mediaElement.classList.contains("no-zoom")) {
+            this.toggleZoom();
+          }
+          return;
+        }
+        const videoContainer = e.target.closest(".zoomora-video-container");
+        if (videoContainer) {
+          if (e.target.closest(".zoomora-play-button")) {
+            return;
+          }
+          if (this.options.closeOnBackgroundClick) {
+            this.close();
+          }
+          return;
+        }
+        const clickedElement = e.target;
+        const isBackgroundElement = clickedElement.classList.contains("zoomora-content") || clickedElement.classList.contains("zoomora-slide-container") || clickedElement.classList.contains("zoomora-slide") || clickedElement.classList.contains("zoomora-slides-container") || clickedElement.id === "zoomoraContent" || clickedElement.id === "zoomoraSlidesContainer";
+        if (isBackgroundElement && this.options.closeOnBackgroundClick) {
+          this.close();
+          return;
+        }
+        if (this.options.closeOnBackgroundClick) {
+          this.close();
         }
       }
       /**
@@ -805,11 +851,6 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           img.classList.add("no-zoom");
         }
       }
-      /**
-       * Calculate zoom levels for an image
-       * @param {HTMLImageElement} img - Image element
-       * @returns {Object} Zoom configuration
-       */
       /**
        * Calculate zoom levels for an image
        * @param {HTMLImageElement} img - Image element
@@ -950,7 +991,6 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         if (!media || media.tagName !== "IMG") return;
         const zoomConfig = this.calculateZoomLevels(media);
         if (!zoomConfig.canZoom) {
-          console.log("Image cannot be zoomed (already at full size or larger)");
           return;
         }
         if (!media.dataset.zoomLevel) {
@@ -981,7 +1021,6 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           media.style.transform = `translate(0px, 0px) scale(${targetScale})`;
           media.style.cursor = "grab";
           media.classList.add("zoomed");
-          console.log(`Zoomed to level ${currentLevel}/${zoomConfig.levels.length - 1} (${(targetScale * 100).toFixed(0)}%)`);
         }
       }
       /**
@@ -1013,17 +1052,37 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
        */
       enterFullscreen() {
         const element = this.zoomora;
-        const requestFullscreen = element.requestFullscreen || element.webkitRequestFullscreen || element.mozRequestFullScreen || element.msRequestFullscreen;
-        if (requestFullscreen) {
-          requestFullscreen.call(element).then(() => {
+        try {
+          if (element.requestFullscreen) {
+            element.requestFullscreen().then(() => {
+              this.isFullscreen = true;
+              this.zoomora.classList.add("fullscreen");
+              this.updateButtons();
+            }).catch((err) => {
+              console.warn("Zoomora: Fullscreen request failed:", err.message);
+              this.fallbackFullscreen();
+            });
+          } else if (element.webkitRequestFullscreen) {
+            element.webkitRequestFullscreen();
             this.isFullscreen = true;
             this.zoomora.classList.add("fullscreen");
             this.updateButtons();
-          }).catch((err) => {
-            console.warn("Zoomora: Could not enter fullscreen:", err);
+          } else if (element.mozRequestFullScreen) {
+            element.mozRequestFullScreen();
+            this.isFullscreen = true;
+            this.zoomora.classList.add("fullscreen");
+            this.updateButtons();
+          } else if (element.msRequestFullscreen) {
+            element.msRequestFullscreen();
+            this.isFullscreen = true;
+            this.zoomora.classList.add("fullscreen");
+            this.updateButtons();
+          } else {
+            console.warn("Zoomora: Fullscreen API not supported, using CSS fallback");
             this.fallbackFullscreen();
-          });
-        } else {
+          }
+        } catch (error) {
+          console.error("Zoomora: Error entering fullscreen:", error);
           this.fallbackFullscreen();
         }
       }
@@ -1031,22 +1090,41 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
        * Exit fullscreen mode
        */
       exitFullscreen() {
-        const isInFullscreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
-        if (isInFullscreen) {
-          const exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
-          if (exitFullscreen) {
-            exitFullscreen.call(document).then(() => {
+        const isInFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
+        if (!isInFullscreen) {
+          this.fallbackExitFullscreen();
+          return;
+        }
+        try {
+          if (document.exitFullscreen) {
+            document.exitFullscreen().then(() => {
               this.isFullscreen = false;
               this.zoomora.classList.remove("fullscreen");
               this.updateButtons();
             }).catch((err) => {
-              console.warn("Zoomora: Could not exit fullscreen:", err);
+              console.warn("Zoomora: Exit fullscreen failed:", err.message);
               this.fallbackExitFullscreen();
             });
+          } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+            this.isFullscreen = false;
+            this.zoomora.classList.remove("fullscreen");
+            this.updateButtons();
+          } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+            this.isFullscreen = false;
+            this.zoomora.classList.remove("fullscreen");
+            this.updateButtons();
+          } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+            this.isFullscreen = false;
+            this.zoomora.classList.remove("fullscreen");
+            this.updateButtons();
           } else {
             this.fallbackExitFullscreen();
           }
-        } else {
+        } catch (error) {
+          console.error("Zoomora: Error exiting fullscreen:", error);
           this.fallbackExitFullscreen();
         }
       }