clipxjs 1.2.0 → 1.2.1

package/README.md

@@ -3,15 +3,16 @@
 
 # ClipX.js -Maximize Clipboard Power with Minimal Size
 
-
-ClipX.js is an ultra-light JavaScript library that simplifies clipboard tasks and enriches user feedback. It offers straightforward `copy, cut, and paste` capabilities,  and `built-in toast notifications` that you can easily customize, providing a quick and efficient way to handle clipboard and notification needs. ——— The Smarter Clipboard Solution.
+ClipX.js is an ultra-light JavaScript library that simplifies clipboard tasks and enriches user feedback. It offers straightforward `copy, cut, and paste` capabilities, and `built-in toast notifications` that you can easily customize, providing a quick and efficient way to handle clipboard and notification needs. ——— The Smarter Clipboard Solution.
 
 ---
+
 ## Official Website
 
 For more information about this project, please visit our official website: [ClipX](https://clipx.dzr.app/)
 
 ---
+
 ## Table of Contents 📑
 
 1. [Why Choose ClipX.js?](#why-choose-clipxjs)
@@ -43,19 +44,29 @@ For more information about this project, please visit our official website: [Cli
 7. [Demo](#demo--get-start-code)
 
 ---
+
 ## Why Choose ClipX.js?
 
 ### Lightweight & Fast
+
 - At only 2KB, ClipX.js is smaller and faster than most clipboard libraries.
+
 ### Built-in Feedback
+
 - Includes customizable toast notifications for clipboard actions—no need for additional UI libraries.
+
 ### Flexible Customization
+
 - Easily style toasts, control message display, and integrate seamlessly with your app's design.
+
 ### Easy Integration
+
 - Simple API with minimal setup, ensuring broad compatibility across modern and older browsers.
+
 ### Robust Error Handling
+
 - Provides clear, customizable error feedback to enhance user experience and simplify debugging.
-  
+
 ---
 
 ## Installation
@@ -65,7 +76,8 @@ For more information about this project, please visit our official website: [Cli
 ```bash
 npm i clipxjs
 ```
-### Via CDN 
+
+### Via CDN
 
 Use only one `CDN`
 
@@ -82,7 +94,9 @@ Use only one `CDN`
 ```html
 <script src="https://unpkg.com/clipxjs/dist/clipx.min.js"></script>
 ```
+
 ---
+
 ## Initializing ClipX.js
 
 To get started with ClipX.js, follow these steps to set up and configure the library according to your needs:
@@ -118,10 +132,21 @@ Customize the appearance of toast notifications by providing CSS styles. For exa
 
 ```javascript
 clipx.setCustomStyles({
-    toast: "background-color: #333; color: #fff; padding: 12px; border-radius: 5px;"
+  toast:
+    "background-color: #333; color: #fff; padding: 12px; border-radius: 5px;",
 });
 ```
 
+### 4. Hide SVG Icon
+
+To hide Svg Icon from toast
+
+```css
+.clipx-js-svg-icon {
+  display: none;
+}
+```
+
 ## Attaching ClipX Functionality
 
 To bind ClipX.js functionality to elements, use the `attach` method with appropriate selectors. This method will enable clipboard operations on elements with the specified attributes or classes.
@@ -131,7 +156,7 @@ To bind ClipX.js functionality to elements, use the `attach` method with appropr
 Apply ClipX.js to elements with `data-clipx-text` or `data-clipx-target` attributes.
 
 ```javascript
-clipx.attach('[data-clipx-text], [data-clipx-target]');
+clipx.attach("[data-clipx-text], [data-clipx-target]");
 ```
 
 ### Example: Using Class Names
@@ -139,14 +164,15 @@ clipx.attach('[data-clipx-text], [data-clipx-target]');
 Alternatively, apply ClipX.js to elements with specific classes.
 
 ```javascript
-clipx.attach('.clipx, .copy-btn, .your-class');
+clipx.attach(".clipx, .copy-btn, .your-class");
 ```
 
-
 ---
+
 ## Attributes Overview
 
 ### This All Are Attributes
+
 - **`data-clipx-target`**: Element selector for text source.
 - **`data-clipx-text`**: Static text to copy or cut.
 - **`data-clipx-cut`**: Toggle cut operation.
@@ -159,14 +185,14 @@ clipx.attach('.clipx, .copy-btn, .your-class');
 
 ---
 
-
-## Example 
+## Example
 
 ### `data-clipx-target`
 
 **Description:** Specifies the target element whose text will be copied to the clipboard when the button is clicked.
 
 **Example:**
+
 ```html
 <button class="copy-btn" data-clipx-target="#text-to-copy">Copy Text</button>
 <p id="text-to-copy">This is the text to be copied.</p>
@@ -177,8 +203,11 @@ clipx.attach('.clipx, .copy-btn, .your-class');
 **Description:** Defines a static text string that will be copied to the clipboard when the button is clicked.
 
 **Example:**
+
 ```html
-<button class="copy-btn" data-clipx-text="Static text to copy">Copy Static Text</button>
+<button class="copy-btn" data-clipx-text="Static text to copy">
+  Copy Static Text
+</button>
 ```
 
 ### `data-clipx-cut`
@@ -186,9 +215,12 @@ clipx.attach('.clipx, .copy-btn, .your-class');
 **Description:** Cuts the text from the specified element, copying it to the clipboard and clearing the element's content.
 
 **Example:**
+
 ```html
 <textarea id="text-to-cut">This text will be cut.</textarea>
-<button class="copy-btn" data-clipx-target="#text-to-cut" data-clipx-cut>Cut Text</button>
+<button class="copy-btn" data-clipx-target="#text-to-cut" data-clipx-cut>
+  Cut Text
+</button>
 ```
 
 ### `data-clipx-msg`
@@ -196,8 +228,15 @@ clipx.attach('.clipx, .copy-btn, .your-class');
 **Description:** Copies the specified text to the clipboard and shows a toast notification with a custom message.
 
 **Example:**
+
 ```html
-<button class="copy-btn" data-clipx-text="Another static text" data-clipx-msg="Text copied successfully!">Copy with Custom Message</button>
+<button
+  class="copy-btn"
+  data-clipx-text="Another static text"
+  data-clipx-msg="Text copied successfully!"
+>
+  Copy with Custom Message
+</button>
 ```
 
 ### `data-clipx-toast`
@@ -205,8 +244,11 @@ clipx.attach('.clipx, .copy-btn, .your-class');
 **Description:** Displays a toast notification with the copied text. The button text remains unchanged.
 
 **Example:**
+
 ```html
-<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-toast>Copy with Toast Only</button>
+<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-toast>
+  Copy with Toast Only
+</button>
 ```
 
 ### `data-clipx-disable-msg`
@@ -214,17 +256,28 @@ clipx.attach('.clipx, .copy-btn, .your-class');
 **Description:** Shows a toast notification without changing the button's text content.
 
 **Example:**
+
 ```html
-<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-disable-msg>Copy with Toast Only, No Text Change</button>
+<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-disable-msg>
+  Copy with Toast Only, No Text Change
+</button>
 ```
 
-###  `USE data-clipx-disable-toast & data-clipx-disable-msg`
+### `USE data-clipx-disable-toast & data-clipx-disable-msg`
 
 **Description:** Copies the specified text to the clipboard without showing a toast notification And Changing Text Contents.
 
 **Example:**
+
 ```html
-<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-disable-toast data-clipx-disable-msg>Copy without Toast & with Change Text</button>
+<button
+  class="copy-btn"
+  data-clipx-text="Text to copy"
+  data-clipx-disable-toast
+  data-clipx-disable-msg
+>
+  Copy without Toast & with Change Text
+</button>
 ```
 
 ### `data-clipx-disable-toast`
@@ -232,8 +285,15 @@ clipx.attach('.clipx, .copy-btn, .your-class');
 **Description:** Copies the specified text to the clipboard without showing a toast notification.
 
 **Example:**
+
 ```html
-<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-disable-toast>Copy without Toast</button>
+<button
+  class="copy-btn"
+  data-clipx-text="Text to copy"
+  data-clipx-disable-toast
+>
+  Copy without Toast
+</button>
 ```
 
 ### `data-clipx-toast-position`
@@ -241,9 +301,24 @@ clipx.attach('.clipx, .copy-btn, .your-class');
 **Description:** Defines the position of the toast notification (top or bottom).
 
 **Example:**
+
 ```html
-<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-toast data-clipx-toast-position="top">Copy with Toast on Top</button>
-<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-toast data-clipx-toast-position="bottom">Copy with Toast on Bottom</button>
+<button
+  class="copy-btn"
+  data-clipx-text="Text to copy"
+  data-clipx-toast
+  data-clipx-toast-position="top"
+>
+  Copy with Toast on Top
+</button>
+<button
+  class="copy-btn"
+  data-clipx-text="Text to copy"
+  data-clipx-toast
+  data-clipx-toast-position="bottom"
+>
+  Copy with Toast on Bottom
+</button>
 ```
 
 ### `data-clipx-duration`
@@ -251,43 +326,85 @@ clipx.attach('.clipx, .copy-btn, .your-class');
 **Description:** Sets the duration (in milliseconds) for which the toast notification is visible before it fades out.
 
 **Example:**
+
 ```html
-<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-toast data-clipx-duration="3000">Copy with 3 Seconds Toast</button>
-<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-duration="3000">Copy with 3 Seconds Toast & Content Change</button>
-<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-disable-toast data-clipx-duration="3000">Copy 3 sec Content Change</button>
+<button
+  class="copy-btn"
+  data-clipx-text="Text to copy"
+  data-clipx-toast
+  data-clipx-duration="3000"
+>
+  Copy with 3 Seconds Toast
+</button>
+<button
+  class="copy-btn"
+  data-clipx-text="Text to copy"
+  data-clipx-duration="3000"
+>
+  Copy with 3 Seconds Toast & Content Change
+</button>
+<button
+  class="copy-btn"
+  data-clipx-text="Text to copy"
+  data-clipx-disable-toast
+  data-clipx-duration="3000"
+>
+  Copy 3 sec Content Change
+</button>
 ```
+
 ---
 
 ## Demo || Get Start Code
 
 ```html
-
 <h1>ClipX.js Demo</h1>
 
-<button class="copy-btn" data-clipx-text="Static text to copy" data-clipx-msg="Static text copied!">Copy Static Text</button>
-
-<button class="copy-btn" data-clipx-target="#text-to-copy" data-clipx-cut>Cut Text</button>
+<button
+  class="copy-btn"
+  data-clipx-text="Static text to copy"
+  data-clipx-msg="Static text copied!"
+>
+  Copy Static Text
+</button>
+
+<button class="copy-btn" data-clipx-target="#text-to-copy" data-clipx-cut>
+  Cut Text
+</button>
 <button class="copy-btn" data-clipx-target="#text-to-copy">Copy Text</button>
 
 <p id="text-to-copy">This text will be cut and copied to the clipboard.</p>
 
-<button class="copy-btn" data-clipx-text="Another static text" data-clipx-toast data-clipx-toast-position="bottom">Copy with Toast Only</button>
-
-<button class="copy-btn" data-clipx-text="Text with 5 seconds toast" data-clipx-toast data-clipx-duration="5000">Copy with 5 Seconds Toast</button>
-
+<button
+  class="copy-btn"
+  data-clipx-text="Another static text"
+  data-clipx-toast
+  data-clipx-toast-position="bottom"
+>
+  Copy with Toast Only
+</button>
+
+<button
+  class="copy-btn"
+  data-clipx-text="Text with 5 seconds toast"
+  data-clipx-toast
+  data-clipx-duration="5000"
+>
+  Copy with 5 Seconds Toast
+</button>
 
 <script src="https://cdn.jsdelivr.net/npm/clipxjs/dist/clipx.min.js"></script>
 <script>
-    // Initialize ClipX.js instance
-    var clipx = new clipx();
+  // Initialize ClipX.js instance
+  var clipx = new clipx();
 
-    // Optional: Set custom styles for toast notifications
-    clipx.setCustomStyles({
-        toast: "background-color: #333; color: #fff; padding: 12px; border-radius: 5px;"
-    });
+  // Optional: Set custom styles for toast notifications
+  clipx.setCustomStyles({
+    toast:
+      "background-color: #333; color: #fff; padding: 12px; border-radius: 5px;",
+  });
 
-    // Attach ClipX.js functionality to elements
-    clipx.attach('[data-clipx-text], [data-clipx-target]');
+  // Attach ClipX.js functionality to elements
+  clipx.attach("[data-clipx-text], [data-clipx-target]");
 </script>
-
 ```

package/dist/clipx.min.js

@@ -1,8 +1,9 @@
 /* 
     ClipX JS
     https://clipx.dzr.app
-    Version: 1.2.0
-    Copyright (c) 2024 Mr Akshay Shinde
+    GitHub: https://github.com/mraxays/clipxjs
+    Version: 1.2.1
+    Copyright (c) 2025 Mr Akshay Shinde
     Licensed under the MIT license
 */
 (function(t){function e(){this.attach=this.attach.bind(this),this.isProcessing=!1,this.disable={msg:!1,toast:!1},this.customStyles={}}e.prototype.copyText=function(t){if(navigator.clipboard)return navigator.clipboard.writeText(t);if(navigator.permissions)return navigator.permissions.query({name:"clipboard-write"}).then(function(e){if("granted"===e.state||"prompt"===e.state)return navigator.clipboard.writeText(t);throw new Error("Clipboard write permission denied.")});var e=document.createElement("textarea");return e.value=t,document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e),Promise.resolve()},e.prototype.cutText=function(t,e){return this.copyText(t).then(function(){e&&(e.value="",e.textContent="")})},e.prototype.copyFromElement=function(t){var e=t.value||t.textContent;return this.copyText(e)},e.prototype.cutFromElement=function(t){var e=t.value||t.textContent;return this.cutText(e,t)},e.prototype.attach=function(t){var e=document.querySelectorAll(t);e.forEach(function(t){t.addEventListener("click",function(){if(!this.isProcessing){this.isProcessing=!0;var e,n=t.getAttribute("data-clipx-target"),o=t.getAttribute("data-clipx-text"),i=t.hasAttribute("data-clipx-cut"),s=t.getAttribute("data-clipx-msg"),a=t.hasAttribute("data-clipx-toast"),r=t.hasAttribute("data-clipx-disable-msg"),c=t.hasAttribute("data-clipx-disable-toast"),l=t.getAttribute("data-clipx-toast-position")||"bottom",p=parseInt(t.getAttribute("data-clipx-duration"),10)||1500;if(n){var d=document.querySelector(n);d&&(e=i?this.cutFromElement(d):this.copyFromElement(d))}else o&&(e=i?this.cutText(o):this.copyText(o));e&&e.then(()=>this.onSuccess(t,s,a,r,c,l,p)).catch(e=>this.onError(t,e)).finally(()=>{this.isProcessing=!1})}}.bind(this))}.bind(this))},e.prototype.onSuccess=function(t,e,n,o,i,s,a){var r=t.textContent,c=e||"Copied !",l="top"===s?"clipx-toast top":"clipx-toast bottom";if(n||o||this.disable.msg||(t.textContent=c),i||this.disable.toast)setTimeout(function(){this.disable.msg||(t.textContent=r)}.bind(this),a);else{var p=document.createElement("div");p.className=l;var d='<svg class="clipx-js-svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="rgba(0,210,65,1)" fill="currentColor"><path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM17.4571 9.45711L16.0429 8.04289L11 13.0858L8.20711 10.2929L6.79289 11.7071L11 15.9142L17.4571 9.45711Z"></path></svg>';p.innerHTML=d+c,p.setAttribute("role","alert"),p.setAttribute("aria-live","assertive"),p.style.cssText=this.customStyles.toast||"",document.body.appendChild(p),p.style.opacity=0,setTimeout(()=>p.style.opacity=1,0),setTimeout(function(){p.style.opacity=0,setTimeout(()=>document.body.removeChild(p),500),n||o||this.disable.msg||(t.textContent=r)}.bind(this),a)}},e.prototype.onError=function(t,e){console.error("Failed to cut/copy text: ",e);var n=document.createElement("div");n.className="clipx-toast error";var o='<svg xmlns="http://www.w3.org/2000/svg" class="clipx-js-svg-icon" viewBox="0 0 24 24" width="16" height="16" fill="rgba(231,0,0,1)" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"></path></svg>';n.innerHTML=o+"Failed to copy!",n.setAttribute("role","alert"),n.setAttribute("aria-live","assertive"),n.style.cssText=this.customStyles.toast||"",document.body.appendChild(n),setTimeout(()=>{n.style.opacity=0,setTimeout(()=>document.body.removeChild(n),500)},1500)},e.prototype.setCustomStyles=function(t){this.customStyles=t},t.clipx=e;var n=document.createElement("style");n.textContent="\n        .clipx-toast {\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n    position: fixed;\n    left: 50%;\n    transform: translateX(-50%);\n    background-color: #fff;\n    color: #363636;\n    padding: 8px 10px;\n    border-radius: 8px;\n    z-index: 9999;\n    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);\n    font-size: 14px;\n    text-align: center;\n    opacity: 0;\n    animation: fadeIn 0.5s ease forwards;\n    transition: opacity 0.5s ease;\n    max-width: 90%; /* Ensure it fits well on smaller screens */\n    width: auto; /* Ensure the width adjusts based on content */\n    display: flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.clipx-toast.top {\n    top: 20px;\n    bottom: auto;\n}\n\n.clipx-toast.bottom {\n    bottom: 20px;\n}\n\n.clipx-toast.error {\n    background-color: #f8d7da;\n    color: #721c24;\n}\n\n@keyframes fadeIn {\n    from {\n        opacity: 0;\n        transform: translateY(10px) translateX(-50%);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0) translateX(-50%);\n    }\n}\n\n@keyframes fadeOut {\n    from {\n        opacity: 1;\n        transform: translateY(0) translateX(-50%);\n    }\n    to {\n        opacity: 0;\n        transform: translateY(10px) translateX(-50%);\n    }\n}",document.head.appendChild(n)})(this);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clipxjs",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "ClipX.js is an ultra-light JavaScript library that simplifies clipboard tasks and enriches user feedback. It offers straightforward copy, cut, and paste capabilities, and built-in toast notifications that you can easily customize, providing a quick and efficient way to handle clipboard and notification needs. ——— The Smarter Clipboard Solution.",
   "main": "src/clipx.js",
   "scripts": {