clipxjs 1.1.1 → 1.2.0

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024  [Mr Akshay Shinde](https://github.com/MrAkshayAS)
+Copyright (c) 2024  [Mr Akshay Shinde](https://github.com/mraxays)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/clipx.min.js

@@ -1,8 +1,8 @@
 /* 
     ClipX JS
     https://clipx.dzr.app
-    Version: 1.1.0
+    Version: 1.2.0
     Copyright (c) 2024 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,o=t.getAttribute("data-clipx-target"),i=t.getAttribute("data-clipx-text"),a=t.hasAttribute("data-clipx-cut"),s=t.getAttribute("data-clipx-msg"),r=t.hasAttribute("data-clipx-toast"),n=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(o){var u=document.querySelector(o);u&&(e=a?this.cutFromElement(u):this.copyFromElement(u))}else i&&(e=a?this.cutText(i):this.copyText(i));e&&e.then(()=>this.onSuccess(t,s,r,n,c,l,p)).catch(e=>this.onError(t,e)).finally(()=>{this.isProcessing=!1})}}.bind(this))}.bind(this))},e.prototype.onSuccess=function(t,e,o,i,a,s,r){var n=t.textContent,c=e||"Copied !",l="top"===s?"clipx-toast top":"clipx-toast bottom";if(o||i||this.disable.msg||(t.textContent=c),a||this.disable.toast)setTimeout(function(){this.disable.msg||(t.textContent=n)}.bind(this),r);else{var p=document.createElement("div");p.className=l,p.textContent=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),o||i||this.disable.msg||(t.textContent=n)}.bind(this),r)}},e.prototype.onError=function(t,e){console.error("Failed to cut/copy text: ",e);var o=document.createElement("div");o.className="clipx-toast error",o.textContent="Failed to copy!",o.setAttribute("role","alert"),o.setAttribute("aria-live","assertive"),o.style.cssText=this.customStyles.toast||"",document.body.appendChild(o),setTimeout(()=>{o.style.opacity=0,setTimeout(()=>document.body.removeChild(o),500)},1500)},e.prototype.setCustomStyles=function(t){this.customStyles=t},t.clipx=e;var o=document.createElement("style");o.textContent=" .clipx-toast{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;position:fixed;left:50%;transform:translateX(-50%);background-color:#fff;color:#363636;padding:8px 10px;border-radius:8px;z-index:9999;box-shadow:0 3px 10px rgb(0 0 0 / .1),0 3px 3px rgb(0 0 0 / .05);font-size:14px;text-align:center;opacity:0;animation:fadeIn 0.5s ease forwards;transition:opacity 0.5s ease;max-width:90%;width:auto}.clipx-toast.top{top:20px;bottom:auto}.clipx-toast.bottom{bottom:20px}.clipx-toast.error{background-color:#f8d7da;color:#721c24}@keyframes fadeIn{from{opacity:0;transform:translateY(10px) translateX(-50%)}to{opacity:1;transform:translateY(0) translateX(-50%)}}@keyframes fadeOut{from{opacity:1;transform:translateY(0) translateX(-50%)}to{opacity:0;transform:translateY(10px) translateX(-50%)}}",document.head.appendChild(o)})(this);
+(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.1.1",
+  "version": "1.2.0",
   "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": {

package/src/clipx.js

@@ -147,7 +147,9 @@
     if (!disableToast && !this.disable.toast) {
       var toast = document.createElement("div");
       toast.className = toastClass;
-      toast.textContent = customMessage;
+      // Insert the success SVG icon along with the custom message
+      var successSVG = `<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>`;
+      toast.innerHTML = successSVG + customMessage;
       toast.setAttribute("role", "alert");
       toast.setAttribute("aria-live", "assertive");
       toast.style.cssText = this.customStyles.toast || ""; // Apply custom styles if any
@@ -186,7 +188,9 @@
     console.error("Failed to cut/copy text: ", err);
     var toast = document.createElement("div");
     toast.className = "clipx-toast error";
-    toast.textContent = "Failed to copy!";
+    // Insert the error SVG icon along with the error message
+    var errorSVG = `<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>`;
+    toast.innerHTML = errorSVG + "Failed to copy!";
     toast.setAttribute("role", "alert");
     toast.setAttribute("aria-live", "assertive");
     toast.style.cssText = this.customStyles.toast || "";
@@ -227,6 +231,9 @@
     transition: opacity 0.5s ease;
     max-width: 90%; /* Ensure it fits well on smaller screens */
     width: auto; /* Ensure the width adjusts based on content */
+    display: flex;
+    align-items: center;
+    gap: 5px;
 }
 
 .clipx-toast.top {
@@ -265,4 +272,4 @@
     }
 }`;
   document.head.appendChild(style);
-})(this);
+})(this);