toastify-pro 1.2.0 → 1.3.0

package/src/toastify-pro.js

@@ -12,8 +12,11 @@
  * - Progress bar with shimmer effects
  * - Responsive design for mobile devices
  * - Framework agnostic (works with React, Vue, Angular, etc.)
+ * - Confirmation dialogs with customizable buttons and callbacks
+ * - Center position support for enhanced focus
+ * - Independent positioning for confirmations
  * 
- * @version 1.2.0
+ * @version 1.3.0
  * @author ToastifyPro Team
  * @license MIT
  */
@@ -21,7 +24,7 @@ class ToastifyPro {
   /**
    * Creates a new ToastifyPro instance
    * @param {Object} options - Configuration options
-   * @param {string} options.position - Toast position (top-left, top-right, bottom-left, bottom-right, top-center, bottom-center)
+   * @param {string} options.position - Toast position (top-left, top-right, bottom-left, bottom-right, top-center, bottom-center, center)
    * @param {number} options.timeout - Auto-dismiss timeout in milliseconds (0 to disable)
    * @param {boolean} options.allowClose - Whether to show close button
    * @param {number} options.maxLength - Maximum message length
@@ -35,14 +38,14 @@ class ToastifyPro {
 
     // Merge with default options
     this.defaultOptions = {
-      position: options.position || "bottom-center", // top-left, top-right, bottom-left, bottom-right, top-center, bottom-center
+      position: options.position || "bottom-center", // top-left, top-right, bottom-left, bottom-right, top-center, bottom-center, center
       timeout: options.timeout || 3000,
       allowClose: options.allowClose !== false, // default true
       maxLength: options.maxLength || 100,
     };
 
     // Validate position
-    const validPositions = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'];
+    const validPositions = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center', 'center'];
     if (!validPositions.includes(this.defaultOptions.position)) {
       console.warn(`ToastifyPro: Invalid position "${this.defaultOptions.position}". Using "bottom-center".`);
       this.defaultOptions.position = "bottom-center";
@@ -138,6 +141,7 @@ class ToastifyPro {
     .toastify-pro-container.bottom-right { bottom: 50px; right: 24px; align-items: flex-end; }
     .toastify-pro-container.top-center { top: 50px; left: 50%; transform: translateX(-50%); }
     .toastify-pro-container.bottom-center { bottom: 50px; left: 50%; transform: translateX(-50%); }
+    .toastify-pro-container.center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
 
     .toastify-pro {
       min-width: 280px;
@@ -476,6 +480,196 @@ class ToastifyPro {
       .toastify-pro-container.top-right,
       .toastify-pro-container.bottom-right { right: 16px; }
     }
+
+    /* Confirmation Toast Styles */
+    .toastify-pro.confirmation {
+      min-width: 320px;
+      max-width: 450px;
+      padding: 24px;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 20px;
+      position: relative;
+    }
+
+    /* Hide progress bar for confirmation toasts */
+    .toastify-pro.confirmation::after {
+      display: none;
+    }
+
+    /* Close button for confirmation dialogs */
+    .toastify-pro.confirmation .conf-close-btn {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      cursor: pointer;
+      font-size: 18px;
+      color: inherit;
+      opacity: 0.6;
+      padding: 4px;
+      border-radius: 50%;
+      transition: all 0.2s ease;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(10px);
+      font-weight: 300;
+      line-height: 1;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    
+    .toastify-pro.confirmation .conf-close-btn:hover { 
+      opacity: 1; 
+      background: rgba(255, 255, 255, 0.2);
+      transform: scale(1.1);
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+    
+    .toastify-pro.confirmation.light .conf-close-btn {
+      background: rgba(15, 23, 42, 0.08);
+      border-color: rgba(15, 23, 42, 0.1);
+    }
+    
+    .toastify-pro.confirmation.light .conf-close-btn:hover { 
+      background: rgba(15, 23, 42, 0.15);
+      border-color: rgba(15, 23, 42, 0.2);
+    }
+
+    .toastify-pro.confirmation .toast-content {
+      text-align: center;
+      margin-bottom: 8px;
+    }
+
+    .toastify-pro.confirmation .toast-message {
+      font-weight: 600;
+      font-size: 16px;
+      margin-bottom: 6px;
+    }
+
+    .toastify-pro.confirmation .toast-description {
+      font-size: 14px;
+      opacity: 0.9;
+      margin-top: 6px;
+    }
+
+    /* Fix text visibility for dark/light variants */
+    .toastify-pro.confirmation.dark .toast-message,
+    .toastify-pro.confirmation.dark .toast-description {
+      color: white;
+    }
+
+    .toastify-pro.confirmation.light .toast-message,
+    .toastify-pro.confirmation.light .toast-description {
+      color: #1e293b;
+    }
+
+    .toast-actions {
+      display: flex;
+      gap: 12px;
+      margin-top: 8px;
+    }
+
+    .toast-btn {
+      flex: 1;
+      padding: 10px 16px;
+      border: none;
+      border-radius: 8px;
+      font-weight: 600;
+      font-size: 14px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    .toast-btn:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    .toast-btn:active {
+      transform: translateY(0);
+    }
+
+    .toast-btn-cancel {
+      background: rgba(255, 255, 255, 0.1);
+      color: rgba(255, 255, 255, 0.8);
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      font-weight: 500;
+    }
+
+    .toast-btn-cancel:hover {
+      background: rgba(255, 255, 255, 0.15);
+      color: rgba(255, 255, 255, 0.9);
+      border-color: rgba(255, 255, 255, 0.4);
+    }
+
+    .toast-btn-confirm {
+      color: white;
+      font-weight: 700;
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+      position: relative;
+      overflow: hidden;
+      background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.9));
+      border-color: rgba(148, 163, 184, 0.5);
+    }
+
+    .toast-btn-confirm::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+      transition: left 0.5s;
+    }
+
+    .toast-btn-confirm:hover::before {
+      left: 100%;
+    }
+
+    .toast-btn-confirm:hover {
+      background: linear-gradient(135deg, rgba(15, 23, 42, 1), rgba(30, 41, 59, 1));
+      border-color: rgba(148, 163, 184, 0.7);
+      box-shadow: 0 6px 20px rgba(15, 23, 42, 0.4);
+    }
+
+    .toastify-pro.light .toast-btn-cancel {
+      background: rgba(15, 23, 42, 0.08);
+      color: rgba(15, 23, 42, 0.8);
+      border-color: rgba(15, 23, 42, 0.2);
+    }
+
+    .toastify-pro.light .toast-btn-cancel:hover {
+      background: rgba(15, 23, 42, 0.12);
+      color: rgba(15, 23, 42, 1);
+      border-color: rgba(15, 23, 42, 0.3);
+    }
+
+    /* Enhanced light theme confirm buttons */
+    .toastify-pro.light .toast-btn-confirm {
+      border-color: rgba(15, 23, 42, 0.3);
+      background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
+      color: #1e293b;
+    }
+
+    .toastify-pro.light .toast-btn-confirm:hover {
+      background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 1));
+      border-color: rgba(15, 23, 42, 0.4);
+      box-shadow: 0 6px 20px rgba(15, 23, 42, 0.2);
+    }
+
+    @media (max-width: 640px) {
+      .toastify-pro.confirmation {
+        min-width: 280px;
+        max-width: calc(100vw - 32px);
+      }
+    }
   `;
       document.head.appendChild(style);
     } catch (error) {
@@ -716,6 +910,212 @@ class ToastifyPro {
     }
     this.show(msg, "light", opts);
   }
+
+  /**
+   * Shows a confirmation toast with confirm/cancel buttons
+   * @param {string} message - Main confirmation question
+   * @param {string|Function|Object} descriptionOrCallback - Description text, callback function, or options object
+   * @param {Function} callback - Callback function (if description provided)
+   */
+  conf(message, descriptionOrCallback, callback) {
+    // Parse arguments to support multiple usage patterns
+    let description = '';
+    let options = {};
+    let resultCallback = null;
+
+    // Pattern 1: conf('message', callback)
+    if (typeof descriptionOrCallback === 'function' && !callback) {
+      resultCallback = descriptionOrCallback;
+    }
+    // Pattern 2: conf('message', 'description', callback)
+    else if (typeof descriptionOrCallback === 'string' && typeof callback === 'function') {
+      description = descriptionOrCallback;
+      resultCallback = callback;
+    }
+    // Pattern 3: conf('message', options) with onConfirm/onCancel
+    else if (typeof descriptionOrCallback === 'object' && descriptionOrCallback !== null) {
+      options = descriptionOrCallback;
+      description = options.description || '';
+      
+      // Use onConfirm/onCancel if provided, otherwise use callback parameter
+      if (options.onConfirm || options.onCancel) {
+        // Don't use the callback parameter if onConfirm/onCancel are provided
+        resultCallback = null;
+      } else if (typeof callback === 'function') {
+        resultCallback = callback;
+      }
+    }
+    // Pattern 4: conf('message', 'description', options) - legacy support
+    else if (typeof descriptionOrCallback === 'string' && typeof callback === 'object') {
+      description = descriptionOrCallback;
+      options = callback || {};
+      // In this case, no unified callback, rely on onConfirm/onCancel
+      resultCallback = null;
+    }
+
+    // Default options for confirmation
+    const confirmOptions = {
+      timeout: 0, // No auto-dismiss for confirmations
+      allowClose: false, // No close button, must choose
+      confirmText: options.confirmText || 'Confirm',
+      cancelText: options.cancelText || 'Cancel',
+      theme: options.theme || options.color || 'dark', // Support both theme and color for backward compatibility
+      position: options.position || 'center', // Default to center for confirmations
+      ...options
+    };
+
+    // Validate and set theme to only dark or light
+    if (confirmOptions.theme === 'light' || confirmOptions.theme === 'white') {
+      confirmOptions.theme = 'light';
+    } else {
+      confirmOptions.theme = 'dark'; // Default to dark for all other values
+    }
+
+    // Validate position for confirmation toast
+    const validPositions = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center', 'center'];
+    if (!validPositions.includes(confirmOptions.position)) {
+      console.warn(`ToastifyPro: Invalid confirmation position "${confirmOptions.position}". Using default position.`);
+      confirmOptions.position = this.defaultOptions.position;
+    }
+
+    // Get or create container for the specified position
+    let confirmContainer = document.querySelector(`.toastify-pro-container.${confirmOptions.position}`);
+    
+    if (!confirmContainer) {
+      try {
+        confirmContainer = document.createElement("div");
+        confirmContainer.className = `toastify-pro-container ${confirmOptions.position}`;
+        document.body.appendChild(confirmContainer);
+      } catch (error) {
+        console.warn('ToastifyPro: Failed to create confirmation container. Using default container.');
+        confirmContainer = this.container;
+      }
+    }
+
+    // Helper function to handle confirmation result
+    const handleConfirmation = (confirmed) => {
+      if (confirmed) {
+        // Call onConfirm if provided
+        if (options.onConfirm && typeof options.onConfirm === 'function') {
+          try {
+            options.onConfirm();
+          } catch (error) {
+            console.error('ToastifyPro: Error in onConfirm callback:', error);
+          }
+        }
+        // Call unified callback if provided
+        if (resultCallback && typeof resultCallback === 'function') {
+          try {
+            resultCallback(true);
+          } catch (error) {
+            console.error('ToastifyPro: Error in confirmation callback:', error);
+          }
+        }
+      } else {
+        // Call onCancel if provided
+        if (options.onCancel && typeof options.onCancel === 'function') {
+          try {
+            options.onCancel();
+          } catch (error) {
+            console.error('ToastifyPro: Error in onCancel callback:', error);
+          }
+        }
+        // Call unified callback if provided
+        if (resultCallback && typeof resultCallback === 'function') {
+          try {
+            resultCallback(false);
+          } catch (error) {
+            console.error('ToastifyPro: Error in confirmation callback:', error);
+          }
+        }
+      }
+    };
+
+    try {
+      // Create confirmation toast element
+      const toast = document.createElement("div");
+      toast.className = `toastify-pro confirmation ${confirmOptions.theme}`;
+
+      // Create close button for confirmation
+      const closeBtn = document.createElement("span");
+      closeBtn.className = "conf-close-btn";
+      closeBtn.innerHTML = "×";
+      closeBtn.setAttribute('aria-label', 'Cancel confirmation');
+      closeBtn.onclick = () => {
+        handleConfirmation(false);
+        this.removeToast(toast);
+      };
+      toast.appendChild(closeBtn);
+
+      // Create icon wrapper
+      const iconWrapper = document.createElement("div");
+      iconWrapper.className = "toast-icon";
+      iconWrapper.innerHTML = this.getIconSVG('info'); // Default to info icon
+      toast.appendChild(iconWrapper);
+
+      // Create content wrapper
+      const contentWrapper = document.createElement("div");
+      contentWrapper.className = "toast-content";
+      
+      // Main message
+      const messageElement = document.createElement("div");
+      messageElement.className = "toast-message";
+      messageElement.textContent = message.substring(0, this.defaultOptions.maxLength);
+      contentWrapper.appendChild(messageElement);
+      
+      // Optional description
+      if (description) {
+        const descriptionElement = document.createElement("div");
+        descriptionElement.className = "toast-description";
+        descriptionElement.textContent = description.substring(0, this.defaultOptions.maxLength * 2);
+        contentWrapper.appendChild(descriptionElement);
+      }
+      
+      toast.appendChild(contentWrapper);
+
+      // Create action buttons container
+      const actionsWrapper = document.createElement("div");
+      actionsWrapper.className = "toast-actions";
+
+      // Cancel button
+      const cancelBtn = document.createElement("button");
+      cancelBtn.className = "toast-btn toast-btn-cancel";
+      cancelBtn.textContent = confirmOptions.cancelText;
+      cancelBtn.onclick = () => {
+        handleConfirmation(false);
+        this.removeToast(toast);
+      };
+
+      // Confirm button
+      const confirmBtn = document.createElement("button");
+      confirmBtn.className = `toast-btn toast-btn-confirm`;
+      confirmBtn.textContent = confirmOptions.confirmText;
+      confirmBtn.onclick = () => {
+        handleConfirmation(true);
+        this.removeToast(toast);
+      };
+
+      actionsWrapper.appendChild(cancelBtn);
+      actionsWrapper.appendChild(confirmBtn);
+      toast.appendChild(actionsWrapper);
+
+      // Add toast to the specified container (not default container)
+      confirmContainer.appendChild(toast);
+
+      // Entrance animation
+      setTimeout(() => {
+        toast.classList.add("show");
+        const icon = toast.querySelector('.toast-icon');
+        if (icon) {
+          icon.style.animation = 'iconBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
+        }
+      }, 10);
+
+      return toast;
+    } catch (error) {
+      console.error('ToastifyPro: Failed to create confirmation toast:', error);
+    }
+  }
 }
 
 /**