snap-dialog-js - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/snap-dialog.js

@@ -13,3 +13,3 @@ (function(global) {
         confirmText: 'OK',
-        enableConfirm : false ,
+        enableConfirm : true ,
         onConfirm: function() {},
@@ -25,2 +25,3 @@
 
+        OutsideClose : false ,
         clickToClose : false ,
@@ -32,4 +33,2 @@ autoClose : false,
         isDark : false,
-
-        position : 'top left',
         animation : 'slide',
@@ -59,4 +58,9 @@ input : null,
         "xl" : "snapDialog-xl" ,
+        "2xl" : "snapDialog-2xl",
+        "3xl" : "snapDialog-2xl",
+        "4xl" : "snapDialog-4xl",
     };
 
+    var sizesx = ['sm','md','lg','xl',"2xl","3xl","4xl"];
+
     var positions = {
@@ -103,3 +107,7 @@ "top" : "snapDialog-slide-center" ,
 
+            if(settings.size && sizesx.includes(settings.size) ){
+                modal.classList.add(sizes[settings.size]);
+            }
 
+
             var overlay = document.createElement('div');
@@ -199,3 +207,3 @@ overlay.classList.add('snapDialog-overlay', key);
 
-            overlay?.addEventListener('click', () => {
+            settings.OutsideClose == true && overlay?.addEventListener('click', () => {
                 closeAndRemove();
@@ -202,0 +210,0 @@ });

dist/snap-dialog.min.js

@@ -1,5 +0,5 @@
-!function(a){var l={rtl:!1,type:null,title:"Default Title",message:"This is a default message",icon:null,customIcon:null,confirmText:"OK",enableConfirm:!1,onConfirm:function(){},onCancel:function(){},enableCancel:!1,cancelText:"Cancel",enableCloseHandler:!1,onClose:function(){},clickToClose:!1,autoClose:!1,duration:3e3,preogressBar:!1,isDark:!1,position:"top left",animation:"slide",input:null,inputPlcaeholder:"",inputMask:null,size:null};let n=a=>Array.from({length:a},()=>Math.random().toString(36).charAt(2)).join("");var e=["question","success","info","warning","error"],i={success:"bx-check",warning:"bx-bell",error:"bx-error",info:"bx-info-circle"},s={sm:"snapDialog-sm",md:"snapDialog-md",lg:"snapDialog-lg",xl:"snapDialog-xl"},o=null;a.SnapDialog=function a(){let t=(a=null)=>{o=a?Object.assign({},l,a):null},c=(a=null,t=null,c=null,r={})=>{settings=Object.assign({},o||l,r),a&&"html"!=a?settings.type=a:"html"==a&&(settings.type=a,settings.code=t),settings.title=t,settings.message=c;var d=!0;let p="dialog-key-"+n(6),u=document.createElement("div");u.classList.add("snapDialog-item","snapDialog-"+settings.type,p),u.classList.add("snapDialog-animation-"+settings.animation),!0==settings.rtl&&u.classList.add("snapDialog-rtl"),!0==settings.clickToClose&&u.classList.add("snapDialog-clickable"),!0==settings.isDark&&u.classList.add("snapDialog-dark"),!1==settings.preogressBar&&u.classList.add("progress-hide"),null!=settings.size==!1&&s[settings.size];var g=document.createElement("div");g.classList.add("snapDialog-overlay",p),document.body.appendChild(g),g=document.querySelector(".snapDialog-overlay"),setTimeout(()=>{g.classList.add("snapDialog-overlay-fade-in")},100),"html"!=settings.type&&(u.innerHTML=`
+!function(a){var l={rtl:!1,type:null,title:"Default Title",message:"This is a default message",icon:null,customIcon:null,confirmText:"OK",enableConfirm:!0,onConfirm:function(){},onCancel:function(){},enableCancel:!1,cancelText:"Cancel",enableCloseHandler:!1,onClose:function(){},OutsideClose:!1,clickToClose:!1,autoClose:!1,duration:3e3,preogressBar:!1,isDark:!1,animation:"slide",input:null,inputPlcaeholder:"",inputMask:null,size:null};let n=a=>Array.from({length:a},()=>Math.random().toString(36).charAt(2)).join("");var s=["question","success","info","warning","error"],e={success:"bx-check",warning:"bx-bell",error:"bx-error",info:"bx-info-circle"},i={sm:"snapDialog-sm",md:"snapDialog-md",lg:"snapDialog-lg",xl:"snapDialog-xl","2xl":"snapDialog-2xl","3xl":"snapDialog-2xl","4xl":"snapDialog-4xl"},o=["sm","md","lg","xl","2xl","3xl","4xl"],t=null;a.SnapDialog=function a(){let c=(a=null)=>{t=a?Object.assign({},l,a):null},r=(a=null,c=null,r=null,d={})=>{settings=Object.assign({},t||l,d),a&&"html"!=a?settings.type=a:"html"==a&&(settings.type=a,settings.code=c),settings.title=c,settings.message=r;var p=!0;let u="dialog-key-"+n(6),g=document.createElement("div");g.classList.add("snapDialog-item","snapDialog-"+settings.type,u),g.classList.add("snapDialog-animation-"+settings.animation),!0==settings.rtl&&g.classList.add("snapDialog-rtl"),!0==settings.clickToClose&&g.classList.add("snapDialog-clickable"),!0==settings.isDark&&g.classList.add("snapDialog-dark"),!1==settings.preogressBar&&g.classList.add("progress-hide"),null!=settings.size==!1&&i[settings.size],settings.size&&o.includes(settings.size)&&g.classList.add(i[settings.size]);var m=document.createElement("div");m.classList.add("snapDialog-overlay",u),document.body.appendChild(m),m=document.querySelector(".snapDialog-overlay"),setTimeout(()=>{m.classList.add("snapDialog-overlay-fade-in")},100),"html"!=settings.type&&(g.innerHTML=`
                 <div class="snapDialog-main">
                     <button class="snapDialog-close" snap-alert-close><i class='bx bx-x'></i></button>
-                    ${e.includes(settings.type)||settings.icon?'<div class="snapDialog-icon">'+(settings.customIcon?settings.customIcon:'<i class="bx '+(settings.icon??i[settings.type])+'"></i>')+" </div>":""}
+                    ${s.includes(settings.type)||settings.icon?'<div class="snapDialog-icon">'+(settings.customIcon?settings.customIcon:'<i class="bx '+(settings.icon??e[settings.type])+'"></i>')+" </div>":""}
                     <div>
@@ -16,3 +16,3 @@ ${settings.title?'<div class="snapDialog-title">'+settings.title+"</div>":""}
                 ${!0==settings.preogressBar?"<div style='--snapDialog-progress-duration:"+settings.duration/1e3+"s' class='snapDialog-progress-bar'></div>":"<br>"}
-            `),"html"==settings.type&&(u.innerHTML=`
+            `),"html"==settings.type&&(g.innerHTML=`
                 <div class="snapDialog-main snapDialog-html">
@@ -22,2 +22,2 @@ <button class="snapDialog-close" snap-alert-close><i class='bx bx-x'></i></button>
                 </div>
-            `),document.body.appendChild(u);let m=document.querySelector("."+p+" .snapDialog-input");var D=null;function v(){u.classList.remove("snapDialog-"+settings.animation+"-in"),u.classList.add("snapDialog-"+settings.animation+"-out"),g.classList.remove("snapDialog-overlay-fade-in"),g.classList.add("snapDialog-overlay-fade-out"),setTimeout(()=>{u.remove(),g.remove()},"slide"==settings.animation?300:200),settings.enableCloseHandler&&d&&setTimeout(()=>{d=!1,settings.onClose()},50)}m&&m.addEventListener("input",()=>{D=m.value}),setTimeout(()=>{u.classList.add("snapDialog-"+settings.animation+"-in")},100),!0==settings.autoClose&&setTimeout(()=>{v()},settings.duration),u.querySelector("[snap-alert-confirm]")?.addEventListener("click",()=>{settings.onConfirm(D),v()}),u.querySelector("[snap-alert-cancel]")?.addEventListener("click",()=>{settings.onCancel(D),v()}),u.querySelector("[snap-alert-close] , .snapDialog-clickable")?.addEventListener("click",()=>{v()}),u.querySelector(".snapDialog-clickable")?.addEventListener("click",()=>{v()}),g?.addEventListener("click",()=>{v()})};return{success:(a,l,n)=>c("success",a,l,n),error:(a,l,n)=>c("error",a,l,n),warning:(a,l,n)=>c("warning",a,l,n),info:(a,l,n)=>c("info",a,l,n),alert:(a,l,n)=>c(null,a,l,n),html:(a,l)=>c("html",a,null,l),clearAll:()=>(function a(){let l=document.querySelectorAll(".snapDialog-container > div");l.forEach((a,l)=>{console.log("Key : "+2*l),setTimeout(()=>{a.classList.remove("snapDialog-"+settings.animation+"-in"),a.classList.add("snapDialog-"+settings.animation+"-out")},20*l),setTimeout(()=>{a.remove()},300+20*l)});let n=document.querySelectorAll(".snapDialog-container");n.forEach((a,l)=>{setTimeout(()=>{a.hasChildNodes()||a.remove()},2e3)})})(),SnapDialogOptions:a=>t(a)}}}(window);
+            `),document.body.appendChild(g);let D=document.querySelector("."+u+" .snapDialog-input");var v=null;function b(){g.classList.remove("snapDialog-"+settings.animation+"-in"),g.classList.add("snapDialog-"+settings.animation+"-out"),m.classList.remove("snapDialog-overlay-fade-in"),m.classList.add("snapDialog-overlay-fade-out"),setTimeout(()=>{g.remove(),m.remove()},"slide"==settings.animation?300:200),settings.enableCloseHandler&&p&&setTimeout(()=>{p=!1,settings.onClose()},50)}D&&D.addEventListener("input",()=>{v=D.value}),setTimeout(()=>{g.classList.add("snapDialog-"+settings.animation+"-in")},100),!0==settings.autoClose&&setTimeout(()=>{b()},settings.duration),g.querySelector("[snap-alert-confirm]")?.addEventListener("click",()=>{settings.onConfirm(v),b()}),g.querySelector("[snap-alert-cancel]")?.addEventListener("click",()=>{settings.onCancel(v),b()}),g.querySelector("[snap-alert-close] , .snapDialog-clickable")?.addEventListener("click",()=>{b()}),g.querySelector(".snapDialog-clickable")?.addEventListener("click",()=>{b()}),!0==settings.OutsideClose&&m?.addEventListener("click",()=>{b()})};return{success:(a,l,n)=>r("success",a,l,n),error:(a,l,n)=>r("error",a,l,n),warning:(a,l,n)=>r("warning",a,l,n),info:(a,l,n)=>r("info",a,l,n),alert:(a,l,n)=>r(null,a,l,n),html:(a,l)=>r("html",a,null,l),clearAll:()=>(function a(){let l=document.querySelectorAll(".snapDialog-container > div");l.forEach((a,l)=>{console.log("Key : "+2*l),setTimeout(()=>{a.classList.remove("snapDialog-"+settings.animation+"-in"),a.classList.add("snapDialog-"+settings.animation+"-out")},20*l),setTimeout(()=>{a.remove()},300+20*l)});let n=document.querySelectorAll(".snapDialog-container");n.forEach((a,l)=>{setTimeout(()=>{a.hasChildNodes()||a.remove()},2e3)})})(),SnapDialogOptions:a=>c(a)}}}(window);

package.json

 {
   "name": "snap-dialog-js",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "SnapDialog is a versatile JavaScript plugin offering customizable prompt boxes and notification alerts. Capture user input or deliver dynamic notifications with ease. Its intuitive API and flexible options ensure smooth integration, enhancing user interaction while combining simplicity with power.",
@@ -5,0 +5,0 @@ "homepage": "https://zain.picker.sd",

README.md

@@ -1,7 +0,17 @@
-# SnapAlert for Javascript
+# SnapAlert Plugin Documentation
 
-**SnapAlert** is a lightweight and customizable Javascript plugin designed for adding stylish alert notifications to your app. This plugin allows you to easily display alerts, confirmations, prompts, and even custom HTML notifications in a user-friendly way.
+## Overview
+SnapAlert is a lightweight notification plugin for creating customizable alerts and dialogs within a web application. The plugin supports various notification types, animations, and features such as auto-close, progress bars, input fields, and more.
 
+## Features
+- **Customizable notification types**: `success`, `error`, `warning`, `info`, `html`
+- **Input field support**: Allows input within dialogs
+- **Progress bar support**: Option to include a progress bar that tracks the duration before auto-close
+- **RTL support**: Right-to-left text support
+- **Dark mode**: Option to toggle between light and dark modes
+- **Sizing options**: Multiple Size for displaying dialog
+- **Animation options**: Various animations for notification appearance
+- **Event handlers**: Custom actions for confirm, cancel, and close events
+- **Custom icons**: Ability to define custom icons for each notification type
 
-
 ## Installation
@@ -17,5 +27,5 @@
 <head>
-  <link rel="stylesheet" href="snapAlert.css">
+  <link rel="stylesheet" href="snap-dialog.css">
   <!-- Or -->
-  <link rel="stylesheet" href="snapAlert.min.css">
+  <link rel="stylesheet" href="snap-dialog.min.css">
 </head>
@@ -29,6 +39,6 @@ ```
   <link rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/snap-alert-js@latest/dist/snapAlert.css">
+  href="https://cdn.jsdelivr.net/npm/snap-dialog-js@latest/dist/snap-dialog.css">
   <!-- Or -->
   <link rel="stylesheet"
-  href="https://unpkg.com/snap-alert-js@latest/dist/snapAlert.min.css">
+  href="https://unpkg.com/snap-dialog-js@latest/dist/snap-dialog.min.css">
 </head>
@@ -42,5 +52,5 @@ ```
 ```html
-  <script src="/snap-alert.js">
+  <script src="/snap-dialog.js">
   <!-- Or -->
-  <script src="/snap-alert.min.js"></script>
+  <script src="/snap-dialog.min.js"></script>
 ```
@@ -51,140 +61,109 @@
 ```html
-  <script src="https://cdn.jsdelivr.net/npm/snap-alert-js@latest/dist/snap-alert.js">
+  <script src="https://cdn.jsdelivr.net/npm/snap-dialog-js@latest/dist/snap-dialog.js">
   <!-- Or -->
-  <script src="https://unpkg.com/snap-alert-js@latest/dist/snap-alert.min.js"></script>
+  <script src="https://unpkg.com/snap-dialog-js@latest/dist/snap-dialog.min.js"></script>
 ```
+`
 
 ## Usage
 
-You can now use SnapAlert to display different types of alerts. Here are some examples:
-
-#### Basic Alert
-
+### Basic Notification
 ```javascript
-SnapAlert.alert('Alert Title', 'This is a basic alert.');
+SnapDialog().success('Success Title', 'This is a success message.');
 ```
 
-#### Success Alert
-
+### Error Notification
 ```javascript
-SnapAlert.success('Success', 'Your operation was successful!');
+SnapDialog().error('Error Title', 'This is an error message.');
 ```
 
-#### Info Alert
-
+### Info Notification
 ```javascript
-SnapAlert.info('Info', 'Be Notice!');
+SnapDialog().info('Info Title', 'This is an information message.');
 ```
 
-
-#### Error Alert
-
+### Warning Notification
 ```javascript
-SnapAlert.error('Error', 'Something went wrong.');
+SnapDialog().warning('Warning Title', 'This is a warning message.');
 ```
 
-#### Confirmation Alert with Actions
-
+### Custom HTML Content
 ```javascript
-SnapAlert.warning('Are you sure?', 'This action cannot be undone.', {
-  enableConfirm: true,
-  enableCancel: true,
-  onConfirm: () => {
-    console.log('Confirmed!');
-  },
-  onCancel: () => {
-    console.log('Cancelled!');
-  }
-});
+SnapDialog().html('<div><h3>Custom HTML</h3><p>This is a custom HTML dialog.</p></div>');
 ```
 
-### Step 3: Customizing Alerts
-
-You can customize the options for each alert. For example:
-
+### Configuring Options
+You can configure global options for the plugin:
 ```javascript
-SnapAlert.info('Information', 'This is an info alert.', {
-  position: 'top right',
-  duration: 5000,
-  icon: 'custom-icon-class', // Replace with a Boxicons class name (https://boxicons.com)
-  isDark: true
+SnapDialog().SnapDialogOptions({
+    rtl: true,
+    isDark: true,
+    autoClose : true,
+    duration: 5000
 });
 ```
 
-### 4. Displaying HTML Alerts
-
-You can display various types of alerts using the provided methods. Below is an example of how to show a custom HTML alert:
-
+### Confirm and Cancel Example
+You can handle confirm and cancel actions within a dialog:
 ```javascript
-SnapAlert.html(`<img src="https://placehold.co/600x400" />`, {
-        position: 'top right',
-        duration: 5000,
+SnapDialog().alert('Confirm Action', 'Are you sure?', {
+    enableConfirm: true,
+    onConfirm: function() {
+        console.log('Confirmed');
+    },
+    enableCancel: true,
+    onCancel: function() {
+        console.log('Cancelled');
     }
-);
-```
-
-
-### Step 5: Set Global Options with `SnapOptions`
-
-You can use the `SnapOptions` method to set global default options for all alerts. This is particularly useful if you want to maintain consistency across multiple alerts.
-
-```javascript
-SnapAlert.SnapOptions({
-  duration: 5000,
-  isDark: true,
-  position: 'bottom right'
 });
 ```
 
-#### Example of Using Global Options
-
-After setting global options, all subsequent alerts will use the specified default settings unless overridden by individual alert options:
-
+### Custom Input
+You can create dialogs that include input fields:
 ```javascript
-// Set global options
-SnapAlert.SnapOptions({
-  duration: 4000,
-  isDark: false,
+SnapDialog().alert('Input Dialog', 'Please enter your name:', {
+    input: 'text',
+    inputPlcaeholder: 'Your name',
+    enableConfirm: true,
+    onConfirm: function(inputValue) {
+        console.log('Input value:', inputValue);
+    }
 });
-
-// Now all alerts will have these default settings
-SnapAlert.success('Global Success', 'This alert will use global options.');
-SnapAlert.error('Global Error', 'This alert will also use global options.');
 ```
 
-
-### `clearAll`
-
-The `clearAll` method is used to remove all active alerts from the screen. This can be useful in scenarios where you want to clear multiple notifications at once, such as when navigating away from a page, or after performing a certain action where notifications are no longer relevant.
-
+### Clear All Notifications
 ```javascript
-SnapAlert.clearAll();
+SnapDialog().clearAll();
 ```
 
-This will instantly clear all alerts, including success, error, warning, info, and custom HTML alerts, if any are currently visible.
+## Available Options
+| Option             | Type      | Default        | Description                                                 |
+|--------------------|-----------|----------------|-------------------------------------------------------------|
+| `rtl`              | `boolean` | `false`        | Enables right-to-left text alignment.                        |
+| `type`             | `string`  | `null`         | Notification type (`success`, `error`, `warning`, `info`).   |
+| `title`            | `string`  | `'Default Title'` | Title for the notification.                                  |
+| `message`          | `string`  | `'This is a default message'` | Message for the notification.                               |
+| `icon`             | `string`  | `null`         | Icon to display.                                             |
+| `customIcon`       | `string`  | `null`         | Custom icon in HTML format.                                  |
+| `confirmText`      | `string`  | `'OK'`         | Text for the confirm button.                                 |
+| `enableConfirm`    | `boolean` | `true`        | Enables confirm button.                                      |
+| `onConfirm`        | `function`| `function() {}`| Callback function when confirm is clicked.                   |
+| `onCancel`         | `function`| `function() {}`| Callback function when cancel is clicked.                    |
+| `enableCancel`     | `boolean` | `false`        | Enables cancel button.                                       |
+| `cancelText`       | `string`  | `'Cancel'`     | Text for the cancel button.                                  |
+| `enableCloseHandler` | `boolean` | `false`      | Enables a custom close handler when the dialog is closed.    |
+| `onClose`          | `function`| `function() {}`| Callback function when the dialog is closed.                 |
+| `clickToClose`     | `boolean` | `false`        | Allows clicking "close button" to close it.              |
+| `OutsideClose`     | `boolean` | `false`        | Allows clicking outside the dialog to close it.              |
+| `autoClose`        | `boolean` | `false`        | Automatically closes the dialog after the specified duration.|
+| `duration`         | `number`  | `3000`         | Duration before auto-close (in milliseconds).                |
+| `preogressBar`     | `boolean` | `false`        | Shows a progress bar for the duration.                       |
+| `isDark`           | `boolean` | `false`        | Enables dark mode for the dialog.                            |
+| `animation`        | `string`  | `'slide'`      | Animation style (`slide`, `fade`, `zoom`).                     |
+| `input`            | `string`  | `null`         | Type of input field (`text`, `number`, `email`, etc.).                |
+| `inputPlcaeholder` | `string`  | `''`           | Placeholder for the input field.                             |
+| `inputMask`        | `string`  | `null`         | Mask for the input field.                                    |
+| `size`             | `string`  | `null`         | Dialog size (`sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`).                        |
 
-
-### Available Options
-
-- **rtl**: `false` (Enable/disable right-to-left support)
-- **type**: `'info'`, `'success'`, `'error'`, `'warning'`
-- **title**: The title of the alert
-- **message**: The message of the alert
-- **position**: `'top left'`, `'top right'`, `'bottom left'`, `'bottom right'`, `'top center'`, `'bottom center'`.
-- **duration**: Time before auto-close (in milliseconds, default is 3000)
-- **autoClose**: Automatically close the alert (default is `true`)
-- **enableConfirm**: Show confirm button (default is `false`)
-- **onConfirm**: Function to execute when confirmed
-- **enableCancel**: Show cancel button (default is `false`)
-- **onCancel**: Function to execute when cancelled
-- **isDark**: Dark mode for the alert (default is `false`)
-- **icon**: Custom icon (default icons are provided)
-
-### License
-
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
-
-## Author
-
-**Zainalabdeen Radwan**  
-[Website](https://picker.sd) | [Email](mailto:[e-mail])
+## License
+This plugin is open-source and available under the MIT License.

No alert changes

Improved metrics

Total package byte prevSize

39986

increased by8.15%

Lines of code

543

increased by5.85%

Worsened metrics

Number of lines in readme file

165

decreased by-11.29%

No dependency changes