@tsirosgeorge/toastnotification 5.0.1 → 5.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/css/toast.css +1 -1
- package/assets/css/toast.min.css +1 -1
- package/package.json +1 -1
- package/toast.js +2 -1
- package/toast.min.js +1 -1
package/assets/css/toast.css
CHANGED
package/assets/css/toast.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ts-toast-container{position:fixed;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;width:fit-content;max-width:calc(100% - 2rem)}.ts-toast-container>:not(:last-child){margin-bottom:0!important}.ts-toast-container.top-right{top:1rem;right:1rem;align-items:flex-end}.ts-toast-container.top-left{top:1rem;left:1rem;align-items:flex-start}.ts-toast-container.top-center{top:1rem;left:50%;transform:translateX(-50%);align-items:center}.ts-toast-container.bottom-right{bottom:1rem;right:1rem;align-items:flex-end}.ts-toast-container.bottom-left{bottom:1rem;left:1rem;align-items:flex-start}.ts-toast-container.bottom-center{bottom:1rem;left:50%;transform:translateX(-50%);align-items:center}.ts-toast-container .ts-toast{display:flex;align-items:center;gap:.75rem;background-color:var(--toast-bg,#fff);color:var(--toast-color,#000);padding:.75rem 1rem;border-radius:8px;border:1px solid var(--toast-border,#e5e7eb);box-shadow:var(--toast-shadow,0 10px 15px -3px rgba(0,0,0,.1));font-family:sans-serif;font-size:.95rem;pointer-events:all;position:relative;opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;width:
|
|
1
|
+
.ts-toast-container{position:fixed;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;width:fit-content;max-width:calc(100% - 2rem)}.ts-toast-container>:not(:last-child){margin-bottom:0!important}.ts-toast-container.top-right{top:1rem;right:1rem;align-items:flex-end}.ts-toast-container.top-left{top:1rem;left:1rem;align-items:flex-start}.ts-toast-container.top-center{top:1rem;left:50%;transform:translateX(-50%);align-items:center}.ts-toast-container.bottom-right{bottom:1rem;right:1rem;align-items:flex-end}.ts-toast-container.bottom-left{bottom:1rem;left:1rem;align-items:flex-start}.ts-toast-container.bottom-center{bottom:1rem;left:50%;transform:translateX(-50%);align-items:center}.ts-toast-container .ts-toast{display:flex;align-items:center;gap:.75rem;background-color:var(--toast-bg,#fff);color:var(--toast-color,#000);padding:.75rem 1rem;border-radius:8px;border:1px solid var(--toast-border,#e5e7eb);box-shadow:var(--toast-shadow,0 10px 15px -3px rgba(0,0,0,.1));font-family:sans-serif;font-size:.95rem;pointer-events:all;position:relative;opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;width:auto!important}.ts-toast-container .ts-toast.show{opacity:1;transform:translateY(0)}@keyframes slide-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slide-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slide-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slide-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes zoom-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes flip{from{transform:rotateY(90deg)}to{transform:rotateY(0)}}.ts-toast-container .ts-toast-icon{font-size:1.2rem}.ts-toast-container .ts-toast-success .ts-toast-icon{color:var(--toast-success-color,#66ee78)}.ts-toast-container .ts-toast-error .ts-toast-icon{color:var(--toast-error-color,#ef4444)}.ts-toast-container .ts-toast-loader{width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid var(--toast-loader-color,#66ee78);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.ts-toast-container .ts-toast-loader.done{animation:none;opacity:0;transition:opacity .5s ease}.ts-toast-container .ts-toast-icon{font-size:1.2rem;opacity:0;transition:opacity .5s ease}.ts-toast-container .ts-toast.show .ts-toast-icon{opacity:1}@keyframes progress-bar{0%{width:0%}100%{width:100%}}@keyframes slide-top-reverse{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes slide-bottom-reverse{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slide-left-reverse{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes slide-right-reverse{from{transform:translateX(0)}to{transform:translateX(100%)}}.ts-toast-container .ts-toast.slide-out{animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}
|
package/package.json
CHANGED
package/toast.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
// Dynamically load the external CSS file
|
|
5
5
|
const link = document.createElement("link");
|
|
6
6
|
link.rel = "stylesheet";
|
|
7
|
-
link.href = "https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.0.
|
|
7
|
+
link.href = "https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.0.2/assets/css/toast.min.css";// Update path as needed
|
|
8
8
|
document.head.appendChild(link);
|
|
9
9
|
|
|
10
10
|
const toast = function (message, options = {}) {
|
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
iconElement.textContent = icon;
|
|
35
35
|
} else {
|
|
36
36
|
const img = document.createElement('img');
|
|
37
|
+
img.src = '';
|
|
37
38
|
img.style.width = '30px';
|
|
38
39
|
img.style.height = '30px';
|
|
39
40
|
img.style.objectFit = 'contain';
|
package/toast.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(){"use strict";const e=document.createElement("link");e.rel="stylesheet",e.href="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.0.
|
|
1
|
+
!function(){"use strict";const e=document.createElement("link");e.rel="stylesheet",e.href="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.0.2/assets/css/toast.min.css",document.head.appendChild(e);const t=function(e,t={}){const{position:s="top-right",animation:o="slide-right",type:n="info",duration:i=3e3,icon:a=null,showLoader:l=!1,onClick:r=null,onShow:c=null,onDismiss:d=null}=t,m=document.createElement("div");m.className=`ts-toast ts-toast-${n}`,m.style.animation=`${o} 0.5s ease`,m.style.flexDirection="row-reverse",m.style.justifyContent="flex-end";const u=document.createElement("span");if(u.className="ts-toast-icon",a)u.textContent=a;else{const e=document.createElement("img");e.src="",e.style.width="30px",e.style.height="30px",e.style.objectFit="contain","success"===n?e.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@latest/assets/img/success.gif":"error"===n?e.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@latest/assets/img/error.gif":"info"===n?e.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@latest/assets/img/info.gif":"warning"===n&&(e.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@latest/assets/img/warning.gif"),u.appendChild(e)}const p=document.createElement("div");p.className="ts-toast-body",p.innerHTML=e,m.appendChild(p);let h=null;l&&(h=document.createElement("div"),h.className="ts-toast-loader",m.appendChild(h));let g=document.querySelector(`.ts-toast-container.${s}`);g||(g=document.createElement("div"),g.className=`ts-toast-container ${s}`,document.body.appendChild(g)),g.appendChild(m),c&&"function"==typeof c&&c(m),setTimeout((()=>{m.classList.add("show")}),100),l&&h&&setTimeout((()=>{h.classList.add("done"),h.remove(),m.querySelector(".ts-toast-icon img")||m.appendChild(u)}),2e3),l||m.appendChild(u);const f=setTimeout((()=>{const e=m.style.animation||"";let t="";e.includes("slide-top")?t="slide-top-reverse":e.includes("slide-bottom")?t="slide-bottom-reverse":e.includes("slide-left")?t="slide-left-reverse":e.includes("slide-right")?t="slide-right-reverse":e.includes("zoom-in")&&(t="zoom-out"),m.classList.add("slide-out"),m.style.animation=`${t} 0.5s ease`,setTimeout((()=>{m.classList.remove("show","slide-out"),m.style.animation="",m.parentNode&&m.parentNode.removeChild(m),d&&"function"==typeof d&&d(m)}),500)}),i);m._autoRemove=f,m.addEventListener("click",(()=>{clearTimeout(m._autoRemove),m.classList.remove("show"),setTimeout((()=>{m.parentNode&&m.parentNode.removeChild(m)}),500),r&&"function"==typeof r&&r(m)}));let v=0,y=0;return m.addEventListener("touchstart",(e=>{v=e.changedTouches[0].screenX})),m.addEventListener("touchend",(e=>{y=e.changedTouches[0].screenX,Math.abs(v-y)>50&&(clearTimeout(m._autoRemove),m.classList.remove("show"),setTimeout((()=>{m.parentNode&&m.parentNode.removeChild(m)}),500),d&&"function"==typeof d&&d(m))})),m};t.success=function(e,s){t(e,{...s,type:"success"})},t.error=function(e,s){t(e,{...s,type:"error"})},t.update=function(e,t,s={}){const{type:o=null,icon:n=null,showLoader:i=!1,duration:a=3e3,position:l="top-right",onClick:r=null,onShow:c=null,onDismiss:d=null}=s,m=e.querySelector(".ts-toast-loader"),u=e.querySelector(".ts-toast-icon");m&&m.remove(),e.className=`toast toast-${o} show ${l}`;const p=e.querySelector(".ts-toast-body");p&&(p.innerHTML=t),u&&u.remove();const h=document.createElement("span");if(h.className="toast-icon",n)h.textContent=n;else{const e=document.createElement("img");e.style.width="30px",e.style.height="30px",e.style.objectFit="contain","success"===o?e.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@latest/assets/img/success.gif":"error"===o?e.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@latest/assets/img/error.gif":"info"===o?e.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@latest/assets/img/info.gif":"warning"===o&&(e.src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@latest/assets/img/warning.gif"),h.appendChild(e)}if(e.appendChild(h),i){const t=document.createElement("div");t.className="toast-loader",e.appendChild(t),setTimeout((()=>{t.classList.add("done")}),2e3)}e._autoRemove&&clearTimeout(e._autoRemove);const g=setTimeout((()=>{const t=e.style.animation||"";let s="";t.includes("slide-top")?s="slide-top-reverse":t.includes("slide-bottom")?s="slide-bottom-reverse":t.includes("slide-left")?s="slide-left-reverse":t.includes("slide-right")?s="slide-right-reverse":t.includes("zoom-in")&&(s="zoom-out"),e.classList.add("slide-out"),e.style.animation=`${s} 0.5s ease`,setTimeout((()=>{e.classList.remove("show","slide-out"),e.style.animation="",e.parentNode&&e.parentNode.removeChild(e),d&&"function"==typeof d&&d(e)}),500)}),a);e._autoRemove=g},t.loading=function(e,s={}){const o=t(e,{...s,type:s.type||"info",duration:1e3,showLoader:!0,icon:null});requestAnimationFrame((()=>{o.classList.add("show")}));const n=o.querySelector(".ts-toast-loader");let i=o.querySelector(".ts-toast-icon");return i||(i=document.createElement("span"),i.className="ts-toast-icon",o.appendChild(i)),n&&setTimeout((()=>{n.classList.add("done")}),2e3),{update:(e,s={})=>{t.update(o,e,{...s,showLoader:!1})},close:()=>{o.classList.remove("show"),setTimeout((()=>{o.parentNode&&o.parentNode.removeChild(o)}),500)}}},window.toast=t}();
|