zoomora 1.0.0 → 1.1.0

package/src/zoomora.js

@@ -1,5 +1,5 @@
 /*!
- * Zoomora Lightbox Plugin v1.0.0
+ * Zoomora Lightbox Plugin v1.1.0
  * A modern, responsive lightbox plugin with zoom, fullscreen, and gallery features
  *
  * Copyright (c) 2025 Faruk Ahmed (FrontTheme)
@@ -85,6 +85,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 +149,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 +165,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>
@@ -254,13 +261,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());
+      }
     }
 
     /**
@@ -362,8 +371,13 @@ import './styles/zoomora.scss';
      * @param {Event} e - Click event
      */
     handleContentClick(e) {
+      // Ignore click if we just finished dragging (within 200ms)
+      if (Date.now() - this.lastDragTime < 200) {
+        return;
+      }
+
       const media = e.target.closest('.zoomora-media');
-      if (media && !media.classList.contains('no-zoom') && !this.isDragging) {
+      if (media && !media.classList.contains('no-zoom')) {
         this.toggleZoom();
       }
     }
@@ -668,16 +682,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 +970,63 @@ import './styles/zoomora.scss';
       }
     }
 
+    /**
+     * 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
+     * @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 +1145,73 @@ 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) {
+        console.log('Image cannot be zoomed (already at full size or larger)');
+        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');
+
+        console.log(`Zoomed to level ${currentLevel}/${zoomConfig.levels.length - 1} (${(targetScale * 100).toFixed(0)}%)`);
+      }
+    }
+
+    /**
+     * 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)`;
       }
     }
 
@@ -1215,19 +1333,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 +1359,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);
 
-      media.style.transform = `scale(${scale}) translate(${constrainedX}px, ${constrainedY}px)`;
+      // Constrain drag to overflow boundaries
+      if (overflowX > 0) {
+        newX = Math.max(-overflowX, Math.min(overflowX, newX));
+      } else {
+        newX = 0; // Center horizontally if no overflow
+      }
+
+      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 +1411,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';
+        }
       }
     }