zoomora 1.0.0 → 1.2.0

package/src/zoomora.js

@@ -1,8 +1,8 @@
 /*!
- * Zoomora Lightbox Plugin v1.0.0
+ * Zoomora Lightbox Plugin v1.2.0
  * 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
  */
 
@@ -46,6 +46,7 @@ import './styles/zoomora.scss';
         maxZoomScale: 3, // Maximum zoom scale
         zoomStep: 0.1, // 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, // Callback when lightbox closes
         onNext: null, // Callback when navigating to next item
@@ -85,6 +86,8 @@ import './styles/zoomora.scss';
       this.isControlsVisible = true;
       this.idleTimer = null;
 
+      this.lastDragTime = 0;
+
       // Bound methods for event listeners
       this.boundMethods = {
         handleDocumentClick: this.handleDocumentClick.bind(this),
@@ -147,6 +150,13 @@ import './styles/zoomora.scss';
         return;
       }
 
+      // Build auto-hide button conditionally
+      const autoHideButtonHTML = this.options.showAutoHideToggle ? `
+        <button class="zoomora-btn" id="zoomoraAutoHideBtn" title="Toggle Auto-Hide Controls">
+          <i class="zoomorai-controls-off"></i>
+        </button>
+      ` : '';
+
       const zoomoraHTML = `
         <div class="zoomora" id="zoomoraLightbox">
           <div class="zoomora-container">
@@ -156,9 +166,7 @@ import './styles/zoomora.scss';
                 <button class="zoomora-btn" id="zoomoraThumbnailBtn" title="Toggle Thumbnails">
                   <i class="zoomorai-thumbnails"></i>
                 </button>
-                <button class="zoomora-btn" id="zoomoraAutoHideBtn" title="Toggle Auto-Hide Controls">
-                  <i class="zoomorai-controls-off"></i>
-                </button>
+                ${autoHideButtonHTML}
                 <button class="zoomora-btn" id="zoomoraZoomBtn" title="Zoom">
                   <i class="zoomorai-zoom"></i>
                 </button>
@@ -240,7 +248,7 @@ import './styles/zoomora.scss';
       // Lightbox click to close
       this.addEventListener(this.zoomora, 'click', this.boundMethods.handleZoomoraClick);
 
-      // Content click for zoom toggle
+      // Content click for zoom toggle and background click
       this.addEventListener(this.content, 'click', this.boundMethods.handleContentClick);
 
       // Mouse drag events
@@ -254,13 +262,15 @@ import './styles/zoomora.scss';
       this.addEventListener(this.content, 'touchmove', this.boundMethods.handleTouchMove, {passive: false});
       this.addEventListener(this.content, 'touchend', this.boundMethods.handleTouchEnd);
 
-      // Add auto-hide toggle button handler
-      this.addEventListener(document.getElementById('zoomoraAutoHideBtn'), 'click', () => this.toggleAutoHide());
+      // Add auto-hide toggle button handler (only if enabled)
+      if (this.options.showAutoHideToggle) {
+        this.addEventListener(document.getElementById('zoomoraAutoHideBtn'), 'click', () => this.toggleAutoHide());
 
-      // Add mouse/touch activity listeners for auto-hide
-      this.addEventListener(this.zoomora, 'mousemove', () => this.handleUserActivity());
-      this.addEventListener(this.zoomora, 'touchstart', () => this.handleUserActivity());
-      this.addEventListener(this.zoomora, 'keydown', () => this.handleUserActivity());
+        // Add mouse/touch activity listeners for auto-hide
+        this.addEventListener(this.zoomora, 'mousemove', () => this.handleUserActivity());
+        this.addEventListener(this.zoomora, 'touchstart', () => this.handleUserActivity());
+        this.addEventListener(this.zoomora, 'keydown', () => this.handleUserActivity());
+      }
     }
 
     /**
@@ -335,16 +345,25 @@ import './styles/zoomora.scss';
      * Handle fullscreen change events
      */
     handleFullscreenChange() {
-      const isInFullscreen = document.fullscreenElement ||
+      const isInFullscreen = !!(
+        document.fullscreenElement ||
         document.webkitFullscreenElement ||
         document.mozFullScreenElement ||
-        document.msFullscreenElement;
+        document.msFullscreenElement
+      );
 
+      // Only update if state changed from fullscreen to not fullscreen
       if (!isInFullscreen && this.isFullscreen) {
         this.isFullscreen = false;
         this.zoomora.classList.remove('fullscreen');
         this.updateButtons();
       }
+      // Update if entering fullscreen
+      else if (isInFullscreen && !this.isFullscreen) {
+        this.isFullscreen = true;
+        this.zoomora.classList.add('fullscreen');
+        this.updateButtons();
+      }
     }
 
     /**
@@ -352,7 +371,7 @@ import './styles/zoomora.scss';
      * @param {Event} e - Click event
      */
     handleZoomoraClick(e) {
-      if (e.target === this.zoomora) {
+      if (e.target === this.zoomora && this.options.closeOnBackgroundClick) {
         this.close();
       }
     }
@@ -362,9 +381,65 @@ import './styles/zoomora.scss';
      * @param {Event} e - Click event
      */
     handleContentClick(e) {
-      const media = e.target.closest('.zoomora-media');
-      if (media && !media.classList.contains('no-zoom') && !this.isDragging) {
-        this.toggleZoom();
+      // Ignore click if we just finished dragging (within 200ms)
+      if (Date.now() - this.lastDragTime < 200) {
+        return;
+      }
+
+      // Don't close on header clicks
+      if (this.header && this.header.contains(e.target)) {
+        return;
+      }
+
+      // Don't close on button clicks
+      if (e.target.closest('button')) {
+        return;
+      }
+
+      // Check if click is directly on actual media element (img, video, iframe)
+      const mediaElement = e.target.closest('.zoomora-media, .zoomora-video, .zoomora-iframe');
+
+      if (mediaElement) {
+        // Only toggle zoom for images
+        if (mediaElement.classList.contains('zoomora-media') && !mediaElement.classList.contains('no-zoom')) {
+          this.toggleZoom();
+        }
+        return;
+      }
+
+      // Check if clicking inside video container but not on video itself
+      const videoContainer = e.target.closest('.zoomora-video-container');
+      if (videoContainer) {
+        // If clicking on the play button, don't close
+        if (e.target.closest('.zoomora-play-button')) {
+          return;
+        }
+        // If clicking on background area of video container, close
+        if (this.options.closeOnBackgroundClick) {
+          this.close();
+        }
+        return;
+      }
+
+      // Check if clicking on background elements (including when zoomed)
+      // This checks the actual target element, not just closest()
+      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 we reach here and no media was clicked, close
+      if (this.options.closeOnBackgroundClick) {
+        this.close();
       }
     }
 
@@ -668,16 +743,19 @@ import './styles/zoomora.scss';
         return;
       }
 
+      // Reset zoom state
+      this.isZoomed = false;
+      this.currentX = 0;
+      this.currentY = 0;
+      this.currentScale = 1;
+
       // Show loading spinner
       this.loading.style.display = 'block';
 
-      // Clear content but keep the loading reference intact
-      // Don't replace innerHTML, just clear the slides
       if (this.slidesContainer) {
         this.slidesContainer.innerHTML = '';
       }
 
-      // Add slight delay for smooth transition
       setTimeout(() => {
         this.renderContent(src, type, item);
       }, 100);
@@ -953,6 +1031,58 @@ import './styles/zoomora.scss';
       }
     }
 
+    /**
+     * Calculate zoom levels for an image
+     * @param {HTMLImageElement} img - Image element
+     * @returns {Object} Zoom configuration
+     */
+    calculateZoomLevels(img) {
+      if (!img || !img.naturalWidth || !img.naturalHeight) {
+        return {canZoom: false, levels: [], currentLevel: 0};
+      }
+
+      // Get CONTAINER size (not current displayed image size)
+      const container = this.content.getBoundingClientRect();
+      const containerWidth = container.width;
+      const containerHeight = container.height;
+
+      const naturalWidth = img.naturalWidth;
+      const naturalHeight = img.naturalHeight;
+
+      // Calculate what the ORIGINAL fit-to-screen scale would be
+      const scaleToFitWidth = containerWidth / naturalWidth;
+      const scaleToFitHeight = containerHeight / naturalHeight;
+      const fitScale = Math.min(scaleToFitWidth, scaleToFitHeight);
+
+      // If image naturally fits or is smaller than container, can't zoom
+      if (fitScale >= 0.95) {
+        return {canZoom: false, levels: [], currentLevel: 0};
+      }
+
+      // Calculate zoom levels based on FIT scale (not current scale)
+      const levels = [1]; // Start with fit-to-screen
+
+      // Add progressive levels: 1.5x, 2x, 3x
+      if (fitScale * 1.5 <= 1) levels.push(1.5);
+      if (fitScale * 2 <= 1) levels.push(2);
+      if (fitScale * 3 <= 1) levels.push(3);
+
+      // Add actual size (100%) as final level
+      const actualSizeScale = 1 / fitScale;
+      if (actualSizeScale > levels[levels.length - 1]) {
+        levels.push(actualSizeScale);
+      }
+
+      return {
+        canZoom: levels.length > 1,
+        levels: levels,
+        currentLevel: 0,
+        baseScale: fitScale,
+        naturalWidth: naturalWidth,
+        naturalHeight: naturalHeight
+      };
+    }
+
     /**
      * Update counter display
      */
@@ -1071,29 +1201,70 @@ import './styles/zoomora.scss';
      */
     toggleZoom() {
       const media = this.content.querySelector('.zoomora-media');
-      if (!media || media.tagName !== 'IMG' || media.classList.contains('no-zoom')) return;
+      if (!media || media.tagName !== 'IMG') return;
 
-      this.isZoomed = !this.isZoomed;
-      media.classList.toggle('zoomed', this.isZoomed);
+      // Calculate zoom levels
+      const zoomConfig = this.calculateZoomLevels(media);
 
-      if (this.isZoomed) {
-        const zoomRatio = parseFloat(media.dataset.zoomRatio) || 2;
-        let zoomScale = Math.min(zoomRatio, this.options.maxZoomScale);
+      if (!zoomConfig.canZoom) {
+        return;
+      }
 
-        if (zoomRatio > 2.5) {
-          zoomScale = Math.min(zoomRatio * 0.7, 2.5);
-        }
+      // Get or initialize current zoom level
+      if (!media.dataset.zoomLevel) {
+        media.dataset.zoomLevel = '0';
+      }
 
-        media.style.transform = `scale(${zoomScale})`;
-        media.style.cursor = 'grab';
-        media.dataset.currentZoomScale = zoomScale;
-        this.currentScale = zoomScale;
-      } else {
+      let currentLevel = parseInt(media.dataset.zoomLevel) || 0;
+
+      // Cycle to next level
+      currentLevel++;
+      if (currentLevel >= zoomConfig.levels.length) {
+        // Reset to fit-to-screen
+        currentLevel = 0;
+      }
+
+      const targetScale = zoomConfig.levels[currentLevel];
+      media.dataset.zoomLevel = currentLevel.toString();
+
+      if (currentLevel === 0) {
+        // Back to fit-to-screen
+        this.isZoomed = false;
+        this.isDragging = false;
+        media.classList.remove('dragging');
         media.style.transform = '';
-        media.style.cursor = '';
+        media.style.cursor = 'pointer';
+        media.classList.remove('zoomed');
         this.currentX = 0;
         this.currentY = 0;
         this.currentScale = 1;
+      } else {
+        // Zoom in - reset position to center
+        this.isZoomed = true;
+        this.currentScale = targetScale;
+        this.currentX = 0; // Always reset to center on zoom change
+        this.currentY = 0;
+
+        media.style.transform = `translate(0px, 0px) scale(${targetScale})`;
+        media.style.cursor = 'grab';
+        media.classList.add('zoomed');
+      }
+    }
+
+    /**
+     * Update image transform based on current state
+     * @param {HTMLElement} media - Media element
+     */
+    updateImageTransform(media) {
+      if (!media) return;
+
+      if (this.currentScale === 1) {
+        media.style.transform = '';
+      } else {
+        // IMPORTANT: translate in scaled space, so divide by scale
+        const translateX = this.currentX / this.currentScale;
+        const translateY = this.currentY / this.currentScale;
+        media.style.transform = `scale(${this.currentScale}) translate(${translateX}px, ${translateY}px)`;
       }
     }
 
@@ -1113,21 +1284,50 @@ import './styles/zoomora.scss';
      */
     enterFullscreen() {
       const element = this.zoomora;
-      const requestFullscreen = element.requestFullscreen ||
-        element.webkitRequestFullscreen ||
-        element.mozRequestFullScreen ||
-        element.msRequestFullscreen;
 
-      if (requestFullscreen) {
-        requestFullscreen.call(element).then(() => {
+      try {
+        // Try standard API first
+        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();
+            });
+        }
+        // Try webkit (Safari, older Chrome)
+        else if (element.webkitRequestFullscreen) {
+          element.webkitRequestFullscreen();
+          // Webkit doesn't return a promise, so set state immediately
+          this.isFullscreen = true;
+          this.zoomora.classList.add('fullscreen');
+          this.updateButtons();
+        }
+        // Try moz (Firefox)
+        else if (element.mozRequestFullScreen) {
+          element.mozRequestFullScreen();
           this.isFullscreen = true;
           this.zoomora.classList.add('fullscreen');
           this.updateButtons();
-        }).catch(err => {
-          console.warn('Zoomora: Could not enter fullscreen:', err);
+        }
+        // Try ms (IE11)
+        else if (element.msRequestFullscreen) {
+          element.msRequestFullscreen();
+          this.isFullscreen = true;
+          this.zoomora.classList.add('fullscreen');
+          this.updateButtons();
+        }
+        // Fallback to CSS fullscreen
+        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();
       }
     }
@@ -1136,30 +1336,61 @@ import './styles/zoomora.scss';
      * Exit fullscreen mode
      */
     exitFullscreen() {
-      const isInFullscreen = document.fullscreenElement ||
+      // First check if we're actually in fullscreen
+      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(() => {
-            this.isFullscreen = false;
-            this.zoomora.classList.remove('fullscreen');
-            this.updateButtons();
-          }).catch(err => {
-            console.warn('Zoomora: Could not exit fullscreen:', err);
-            this.fallbackExitFullscreen();
-          });
-        } else {
+        document.msFullscreenElement
+      );
+
+      if (!isInFullscreen) {
+        // Not in real fullscreen, just exit CSS fullscreen
+        this.fallbackExitFullscreen();
+        return;
+      }
+
+      try {
+        // Try standard API first
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+            .then(() => {
+              this.isFullscreen = false;
+              this.zoomora.classList.remove('fullscreen');
+              this.updateButtons();
+            })
+            .catch(err => {
+              console.warn('Zoomora: Exit fullscreen failed:', err.message);
+              this.fallbackExitFullscreen();
+            });
+        }
+        // Try webkit
+        else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+          this.isFullscreen = false;
+          this.zoomora.classList.remove('fullscreen');
+          this.updateButtons();
+        }
+        // Try moz
+        else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+          this.isFullscreen = false;
+          this.zoomora.classList.remove('fullscreen');
+          this.updateButtons();
+        }
+        // Try ms
+        else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+          this.isFullscreen = false;
+          this.zoomora.classList.remove('fullscreen');
+          this.updateButtons();
+        }
+        // Fallback
+        else {
           this.fallbackExitFullscreen();
         }
-      } else {
+      } catch (error) {
+        console.error('Zoomora: Error exiting fullscreen:', error);
         this.fallbackExitFullscreen();
       }
     }
@@ -1215,19 +1446,22 @@ import './styles/zoomora.scss';
       if (!media || !this.isZoomed) return;
 
       this.isDragging = true;
+      media.classList.add('dragging');
       media.style.cursor = 'grabbing';
 
       this.startX = e.clientX || (e.touches && e.touches[0].clientX) || 0;
       this.startY = e.clientY || (e.touches && e.touches[0].clientY) || 0;
 
-      // Parse current transform
-      const transform = media.style.transform;
-      const scaleMatch = transform.match(/scale\(([^)]+)\)/);
-      const translateMatch = transform.match(/translate\(([^,]+),\s*([^)]+)\)/);
-
-      this.currentScale = scaleMatch ? parseFloat(scaleMatch[1]) : 1;
-      this.currentX = translateMatch ? parseFloat(translateMatch[1]) : 0;
-      this.currentY = translateMatch ? parseFloat(translateMatch[2]) : 0;
+      // Read current position from transform
+      const transform = window.getComputedStyle(media).transform;
+      if (transform && transform !== 'none') {
+        const matrix = new DOMMatrix(transform);
+        this.currentX = matrix.m41;
+        this.currentY = matrix.m42;
+      } else {
+        this.currentX = 0;
+        this.currentY = 0;
+      }
 
       e.preventDefault();
     }
@@ -1238,29 +1472,49 @@ import './styles/zoomora.scss';
      */
     drag(e) {
       if (!this.isDragging) return;
-
       e.preventDefault();
+
+      const media = this.content.querySelector('.zoomora-media');
+      if (!media) return;
+
       const clientX = e.clientX || (e.touches && e.touches[0].clientX) || 0;
       const clientY = e.clientY || (e.touches && e.touches[0].clientY) || 0;
 
       const deltaX = clientX - this.startX;
       const deltaY = clientY - this.startY;
 
-      const newX = this.currentX + deltaX;
-      const newY = this.currentY + deltaY;
-
-      const media = this.content.querySelector('.zoomora-media');
-      if (!media) return;
+      let newX = this.currentX + deltaX;
+      let newY = this.currentY + deltaY;
 
+      // Calculate boundaries for BOTH width AND height
+      const container = this.content.getBoundingClientRect();
       const mediaRect = media.getBoundingClientRect();
-      const scale = this.currentScale;
-      const maxX = (mediaRect.width * (scale - 1)) / 2;
-      const maxY = (mediaRect.height * (scale - 1)) / 2;
 
-      const constrainedX = Math.max(-maxX, Math.min(maxX, newX));
-      const constrainedY = Math.max(-maxY, Math.min(maxY, newY));
+      // How much the scaled image overflows the container
+      const overflowX = Math.max(0, (mediaRect.width - container.width) / 2);
+      const overflowY = Math.max(0, (mediaRect.height - container.height) / 2);
+
+      // Constrain drag to overflow boundaries
+      if (overflowX > 0) {
+        newX = Math.max(-overflowX, Math.min(overflowX, newX));
+      } else {
+        newX = 0; // Center horizontally if no overflow
+      }
 
-      media.style.transform = `scale(${scale}) translate(${constrainedX}px, ${constrainedY}px)`;
+      if (overflowY > 0) {
+        newY = Math.max(-overflowY, Math.min(overflowY, newY));
+      } else {
+        newY = 0; // Center vertically if no overflow
+      }
+
+      // Apply transform
+      media.style.transform = `translate(${newX}px, ${newY}px) scale(${this.currentScale})`;
+
+      // Update for next frame
+      this.startX = clientX;
+      this.startY = clientY;
+      this.currentX = newX;
+      this.currentY = newY;
     }
 
     /**
@@ -1270,9 +1524,14 @@ import './styles/zoomora.scss';
       if (!this.isDragging) return;
 
       this.isDragging = false;
+      this.lastDragTime = Date.now();
+
       const media = this.content.querySelector('.zoomora-media');
-      if (media && this.isZoomed) {
-        media.style.cursor = 'grab';
+      if (media) {
+        media.classList.remove('dragging');
+        if (this.isZoomed) {
+          media.style.cursor = 'grab';
+        }
       }
     }