alert90s 1.0.6 → 1.0.8
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/README.md +48 -0
- package/dist/alert90s.min.js +1 -1
- package/package.json +1 -1
- package/src/index.js +85 -0
- package/src/styles.css +130 -0
package/README.md
CHANGED
|
@@ -122,6 +122,54 @@ Alert90s.fire({
|
|
|
122
122
|
});
|
|
123
123
|
```
|
|
124
124
|
|
|
125
|
+
## CSS-only Buttons
|
|
126
|
+
|
|
127
|
+
Alert90s also ships with a standalone CSS button library. Just add the classes to your own `<button>` or `<a>` elements for an instant neo-brutalist feel!
|
|
128
|
+
|
|
129
|
+
```html
|
|
130
|
+
<!-- Base Button -->
|
|
131
|
+
<button class="btn90s">Base Button</button>
|
|
132
|
+
|
|
133
|
+
<!-- Color Variants -->
|
|
134
|
+
<button class="btn90s primary">Primary</button>
|
|
135
|
+
<button class="btn90s success">Success</button>
|
|
136
|
+
<button class="btn90s warning">Warning</button>
|
|
137
|
+
<button class="btn90s danger">Danger</button>
|
|
138
|
+
<button class="btn90s dark">Dark</button>
|
|
139
|
+
|
|
140
|
+
<!-- Sizes -->
|
|
141
|
+
<button class="btn90s sm primary">Small</button>
|
|
142
|
+
<button class="btn90s lg danger">Large</button>
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
## Tooltips / Popovers
|
|
146
|
+
|
|
147
|
+
Alert90s includes a lightweight, built-in tooltip library that styles any element with a `data-alert90s-tooltip` attribute.
|
|
148
|
+
|
|
149
|
+
```html
|
|
150
|
+
<!-- Basic (Top default) -->
|
|
151
|
+
<button data-alert90s-tooltip="I appear on top!">Hover Me</button>
|
|
152
|
+
|
|
153
|
+
<!-- Positions (top, bottom, left, right) -->
|
|
154
|
+
<button data-alert90s-tooltip="Bottom side!" data-alert90s-position="bottom">
|
|
155
|
+
Hover
|
|
156
|
+
</button>
|
|
157
|
+
|
|
158
|
+
<!-- Colors (yellow, cyan, pink, base, dark) -->
|
|
159
|
+
<button data-alert90s-tooltip="Cyan Tooltip" data-alert90s-color="cyan">
|
|
160
|
+
Hover
|
|
161
|
+
</button>
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
**Note:** Tooltips initialize automatically on `DOMContentLoaded`. If you load dynamic content later, call `Alert90s.initTooltips()` to initialize them.
|
|
165
|
+
|
|
166
|
+
## Support
|
|
167
|
+
|
|
168
|
+
If you find this project useful, you can support its development:
|
|
169
|
+
|
|
170
|
+
- [Saweria](https://saweria.co/adewanggar)
|
|
171
|
+
- [Ko-fi](https://ko-fi.com/adewanggar)
|
|
172
|
+
|
|
125
173
|
## Advanced Options
|
|
126
174
|
|
|
127
175
|
| Option | Type | Default | Description |
|
package/dist/alert90s.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Alert90s=t()}(this,function(){"use strict";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}('.alert90s-overlay{animation:alert90s-fade-in .2s ease-out forwards;backdrop-filter:blur(4px);background-color:rgba(0,0,0,.6);box-sizing:border-box;display:flex;font-family:inherit;inset:0;padding:1rem;position:fixed;z-index:99999}.alert90s-overlay.alert90s-pos-center{align-items:center;justify-content:center}.alert90s-overlay.alert90s-pos-top{align-items:flex-start;justify-content:center}.alert90s-overlay.alert90s-pos-top-start{align-items:flex-start;justify-content:flex-start}.alert90s-overlay.alert90s-pos-top-end{align-items:flex-start;justify-content:flex-end}.alert90s-overlay.alert90s-pos-bottom{align-items:flex-end;justify-content:center}.alert90s-overlay.alert90s-pos-bottom-start{align-items:flex-end;justify-content:flex-start}.alert90s-overlay.alert90s-pos-bottom-end{align-items:flex-end;justify-content:flex-end}.alert90s-overlay.alert90s-pos-center-start{align-items:center;justify-content:flex-start}.alert90s-overlay.alert90s-pos-center-end{align-items:center;justify-content:flex-end}.alert90s-overlay *{box-sizing:border-box}.alert90s-box{align-items:center;animation:alert90s-pop-in .3s cubic-bezier(.175,.885,.32,1.275) forwards;background-color:#fff;border:4px solid #000;box-shadow:12px 12px 0 0 #000;display:flex;flex-direction:column;max-height:95vh;max-width:28rem;position:relative;text-align:center;width:100%}.alert90s-box[dir=rtl]{text-align:right}.alert90s-box.is-draggable{position:absolute}.alert90s-body{align-items:center;display:flex;flex-direction:column;overflow-y:auto;padding:3rem 2rem 2rem;scrollbar-width:none;width:100%}.alert90s-body::-webkit-scrollbar{display:none}.alert90s-header{align-items:center;background-color:#e2e8f0;border-bottom:4px solid #000;display:flex;height:2rem;justify-content:space-between;left:0;padding:0 .5rem;position:absolute;top:0;width:100%;z-index:10}.alert90s-header.draggable{cursor:grab}.alert90s-header.draggable:active{cursor:grabbing}.alert90s-header-left{display:flex;gap:.25rem}.alert90s-box[dir=rtl] .alert90s-header{flex-direction:row-reverse}.alert90s-header-dot{background-color:#fff;border:2px solid #000;height:.75rem;width:.75rem}.alert90s-header-right{align-items:center;display:flex;gap:.5rem;z-index:11}.alert90s-box[dir=rtl] .alert90s-header-right{flex-direction:row-reverse}.alert90s-header-title{font-size:10px;font-weight:700;letter-spacing:.1em;pointer-events:none;text-transform:uppercase}.alert90s-close-btn{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.25rem;justify-content:center;margin:0;padding:0;transition:transform .1s,background-color .1s;width:1.25rem}.alert90s-close-btn:hover{background-color:#f87171;transform:scale(1.1)}.alert90s-close-btn span{color:#000;font-size:14px;font-weight:700;line-height:1}.alert90s-image-container{align-items:center;background:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;display:flex;justify-content:center;margin-bottom:1rem;overflow:hidden;width:100%}.alert90s-image-container img{display:block;height:auto;max-width:100%}.alert90s-icon{align-items:center;border:4px solid #000;border-radius:9999px;box-shadow:4px 4px 0 0 #000;display:flex;flex-shrink:0;height:4rem;justify-content:center;margin-bottom:1rem;width:4rem}.alert90s-icon img,.alert90s-icon svg{height:2rem;width:2rem}.alert90s-icon-custom{font-size:2.25rem;font-weight:700;line-height:1}.alert90s-icon.warning{background-color:#facc15}.alert90s-icon.danger,.alert90s-icon.error{background-color:#ef4444;color:#fff}.alert90s-icon.info,.alert90s-icon.question{background-color:#60a5fa}.alert90s-icon.success{background-color:#4ade80}.alert90s-title{color:#1a1a1a;font-size:1.5rem;font-weight:900;letter-spacing:.1em;line-height:1.2;margin:0 0 .5rem;text-transform:uppercase}.alert90s-message{color:#475569;font-weight:700}.alert90s-html,.alert90s-message{font-size:.875rem;margin:0 0 1.5rem;max-width:100%}.alert90s-html{color:#1a1a1a;line-height:1.5}.alert90s-box[dir=rtl] .alert90s-html{text-align:right}.alert90s-html a{color:#2563eb;font-weight:700;text-decoration:underline;text-decoration-thickness:2px}.alert90s-html a:hover{background-color:#bfdbfe}.alert90s-html b,.alert90s-html strong{font-weight:900}.alert90s-input-container{margin-bottom:1.5rem;width:100%}.alert90s-input{background-color:#f8fafc;border:4px solid #000;box-shadow:inset 4px 4px 0 0 rgba(0,0,0,.05);font-family:inherit;font-size:1rem;font-weight:700;outline:none;padding:.75rem;transition:background-color .2s;width:100%}.alert90s-input:focus{background-color:#fff;border-color:#2563eb}textarea.alert90s-input{min-height:100px;resize:vertical}.alert90s-validation-message{background-color:#fef2f2;border:4px solid #000;border-left:8px solid #ef4444;color:#ef4444;display:none;font-size:.875rem;font-weight:700;margin-bottom:1.5rem;padding:.75rem;text-align:left;width:100%}.alert90s-box[dir=rtl] .alert90s-validation-message{border-left-color:#000;border-left-width:4px;border-right-color:#ef4444;border-right-width:8px;text-align:right}.alert90s-actions{display:flex;flex-direction:column;gap:1rem;justify-content:center;width:100%}@media (min-width:640px){.alert90s-actions{flex-direction:row}}.alert90s-button{align-items:center;background-color:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;cursor:pointer;display:flex;font-family:inherit;font-size:.875rem;font-weight:900;gap:.5rem;justify-content:center;letter-spacing:.1em;margin:0;padding:.75rem 1rem;text-transform:uppercase;transition:background-color .1s;width:100%}@media (min-width:640px){.alert90s-button{flex:1;min-width:100px;width:auto}}.alert90s-button:active{box-shadow:0 0 0 0 #000;transform:translate(4px,4px)}.alert90s-button:focus{outline:2px dashed #000;outline-offset:4px}.alert90s-button.cancel{background-color:#f87171}.alert90s-button.cancel:hover{background-color:#fca5a5}.alert90s-button.deny{background-color:#fb923c}.alert90s-button.deny:hover{background-color:#fdba74}.alert90s-button.confirm{background-color:#4ade80}.alert90s-button.confirm:hover{background-color:#86efac}.alert90s-footer{border-top:4px solid #000;color:#475569;font-size:.75rem;font-weight:700;margin-top:1.5rem;padding-top:1rem;width:100%}.alert90s-footer a{color:#2563eb;text-decoration:underline;text-decoration-thickness:2px}.alert90s-footer a:hover{background-color:#bfdbfe}.alert90s-progress-bar{animation:alert90s-progress linear forwards;background-color:#000;bottom:0;height:6px;left:0;position:absolute;width:100%}.alert90s-loader{display:flex;padding:1rem 0}.alert90s-loader,.alert90s-spinner{align-items:center;justify-content:center}.alert90s-spinner{display:inline-flex}.alert90s-spinner.hourglass{animation:alert90s-hourglass 2s ease-in-out infinite;font-size:2.5rem;line-height:1}.alert90s-spinner.ascii{font-family:monospace;font-size:2rem;font-weight:700}.alert90s-spinner.ascii:after{animation:alert90s-ascii .5s steps(4) infinite;content:"|"}.alert90s-spinner.blinking{font-family:monospace;font-size:1.5rem;font-weight:700;letter-spacing:.1em}.alert90s-spinner.blinking .cursor{animation:alert90s-blink 1s step-end infinite}.alert90s-spinner.progress{background-color:#cbd5e1;border:2px solid #000;box-shadow:inset 2px 2px 0 0 #64748b,inset -2px -2px 0 0 #f8fafc;height:24px;overflow:hidden;padding:2px;position:relative;width:200px}.alert90s-spinner.progress:before{animation:alert90s-marquee 1.5s linear infinite;background-color:#1d4ed8;background-image:repeating-linear-gradient(90deg,#1d4ed8,#1d4ed8 10px,transparent 0,transparent 12px);content:"";height:calc(100% - 4px);left:0;position:absolute;top:2px;width:40%}@keyframes alert90s-hourglass{0%{transform:rotate(0)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(1turn)}to{transform:rotate(1turn)}}@keyframes alert90s-ascii{0%{content:"|"}25%{content:"/"}50%{content:"-"}75%{content:"\\\\"}to{content:"|"}}@keyframes alert90s-blink{50%{opacity:0}}@keyframes alert90s-marquee{0%{transform:translateX(-100%)}to{transform:translateX(250px)}}@keyframes alert90s-progress{0%{width:100%}to{width:0}}@keyframes alert90s-fade-in{0%{opacity:0}to{opacity:1}}@keyframes alert90s-pop-in{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes alert90s-fade-out{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(10px)}}.alert90s-overlay.toast-overlay{backdrop-filter:none!important;background-color:transparent!important;pointer-events:none}.alert90s-box.alert90s-toast{align-items:stretch;box-shadow:6px 6px 0 0 #000;flex-direction:row;max-width:100%;min-width:250px;padding:0;pointer-events:auto;width:auto}.alert90s-toast .alert90s-header{display:none}.alert90s-toast .alert90s-body{align-items:center;flex-direction:row;gap:1rem;padding:1rem 1.5rem}.alert90s-toast .alert90s-icon{height:2.5rem;margin-bottom:0;width:2.5rem}.alert90s-toast .alert90s-icon img,.alert90s-toast .alert90s-icon svg{height:1.25rem;width:1.25rem}.alert90s-content-wrapper{align-items:center;display:flex;flex-direction:column;width:100%}.alert90s-toast .alert90s-content-wrapper{align-items:flex-start;text-align:left}.alert90s-box.alert90s-toast[dir=rtl] .alert90s-content-wrapper{align-items:flex-end;text-align:right}.alert90s-toast .alert90s-title{font-size:1rem;margin-bottom:.25rem}.alert90s-toast .alert90s-html,.alert90s-toast .alert90s-message{font-size:.875rem;margin-bottom:0}.alert90s-toast-close{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.5rem;justify-content:center;margin:0;margin-inline-start:auto;padding:0;transition:transform .1s,background-color .1s;width:1.5rem}.alert90s-toast-close span{color:#000;display:block;font-size:10px;font-weight:700;line-height:1}.alert90s-toast-close:hover{background-color:#f87171;transform:scale(1.1)}');class e{static getOptions(){return this.currentOptions||{}}static getPopup(){return this.currentPopup||null}static getTimerLeft(){if(!this.timerEnd)return;const e=this.timerEnd-Date.now();return e>0?e:0}static isLoading(){const e=this.getPopup();if(!e)return!1;const t=e.querySelector(".alert90s-actions"),o=e.querySelector(".alert90s-loader");return t&&"none"===t.style.display||!!o}static showLoading(){const t=this.getPopup();if(t){const o=t.querySelector(".alert90s-actions");o&&(o.style.display="none");let r=t.querySelector(".alert90s-loader");if(!r){r=document.createElement("div"),r.className="alert90s-loader";const n=e.currentOptions&&e.currentOptions.loaderType||"hourglass";r.innerHTML="ascii"===n?'<div class="alert90s-spinner ascii"></div>':"blinking"===n?'<div class="alert90s-spinner blinking">LOADING<span class="cursor">_</span></div>':"progress"===n?'<div class="alert90s-spinner progress"></div>':'<div class="alert90s-spinner hourglass">⏳</div>',o&&o.parentNode?o.parentNode.insertBefore(r,o):t.querySelector(".alert90s-body").appendChild(r)}}}static hideLoading(){const e=this.getPopup();if(e){const t=e.querySelector(".alert90s-actions");t&&(t.style.display="");const o=e.querySelector(".alert90s-loader");o&&o.remove()}}static showValidationMessage(e){const t=this.getPopup();if(t){let o=t.querySelector(".alert90s-validation-message");if(!o){o=document.createElement("div"),o.className="alert90s-validation-message";const e=t.querySelector(".alert90s-actions");e&&e.parentNode?e.parentNode.insertBefore(o,e):t.querySelector(".alert90s-body").appendChild(o)}o.innerHTML=e,o.style.display="block"}}static resetValidationMessage(){const e=this.getPopup();if(e){const t=e.querySelector(".alert90s-validation-message");t&&(t.style.display="none")}}static fire(e={}){return this.show(e)}static show(t={}){return new Promise(o=>{"string"==typeof t&&(t={title:t}),this.currentOptions=t;const r={title:void 0!==t.title?t.title:"",text:t.message||t.text||"",html:t.html||"",icon:t.type||t.icon||"",iconHtml:t.iconHtml||"",showConfirmButton:!1!==t.showConfirmButton,showCancelButton:t.showCancelButton||!1,showDenyButton:t.showDenyButton||!1,showCloseButton:void 0===t.showCloseButton||t.showCloseButton,loaderType:t.loaderType||"hourglass",confirmButtonText:t.confirmText||t.confirmButtonText||"OK",cancelButtonText:t.cancelText||t.cancelButtonText||"Cancel",denyButtonText:t.denyText||t.denyButtonText||"No",confirmButtonColor:t.confirmButtonColor||"",cancelButtonColor:t.cancelButtonColor||"",denyButtonColor:t.denyButtonColor||"",background:t.background||"",color:t.color||"",titleColor:t.titleColor||"",iconColor:t.iconColor||"",confirmButtonAriaLabel:t.confirmButtonAriaLabel||"",cancelButtonAriaLabel:t.cancelButtonAriaLabel||"",denyButtonAriaLabel:t.denyButtonAriaLabel||"",focusConfirm:!1!==t.focusConfirm,footer:t.footer||"",imageUrl:t.imageUrl||"",imageWidth:t.imageWidth||null,imageHeight:t.imageHeight||null,imageAlt:t.imageAlt||"",input:t.input||null,inputAttributes:t.inputAttributes||{},showLoaderOnConfirm:t.showLoaderOnConfirm||!1,preConfirm:t.preConfirm||null,toast:t.toast||!1,draggable:t.draggable||!1,position:t.position||(t.toast?"top-end":"center"),allowOutsideClick:void 0===t.allowOutsideClick||t.allowOutsideClick,dir:t.dir||"auto",showClass:t.showClass||{popup:"alert90s-pop-in"},hideClass:t.hideClass||{popup:"alert90s-fade-out"},timer:t.timer||null,timerProgressBar:t.timerProgressBar||!1,didOpen:t.didOpen||null,willClose:t.willClose||null},n=document.createElement("div");n.className=`alert90s-overlay alert90s-pos-${r.position}`,r.toast&&n.classList.add("toast-overlay"),n.addEventListener("mousedown",e=>{if(e.target===n){("function"==typeof r.allowOutsideClick?r.allowOutsideClick():r.allowOutsideClick)&&g({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"backdrop"})}});const i=document.createElement("div");i.className="alert90s-box",r.toast&&i.classList.add("alert90s-toast"),"rtl"===document.dir||"rtl"===r.dir||r.position.includes("start")?i.setAttribute("dir","auto"===r.dir?document.dir||"ltr":r.dir):i.setAttribute("dir",r.dir),r.showClass.popup&&"alert90s-pop-in"!==r.showClass.popup&&(i.style.animation="none",i.className=`alert90s-box ${r.showClass.popup}`),r.background&&(i.style.backgroundColor=r.background),r.color&&(i.style.color=r.color),r.draggable&&i.classList.add("is-draggable"),this.currentPopup=i;const s=document.createElement("div");s.className="alert90s-body";const a=document.createElement("div");a.className="alert90s-header",r.draggable&&a.classList.add("draggable");let l="";if(r.showCloseButton&&(l='\n <button class="alert90s-close-btn" id="alert90s-close" aria-label="Close">\n <span>✕</span>\n </button>\n '),a.innerHTML=`\n <div class="alert90s-header-left">\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n </div>\n <div class="alert90s-header-right">\n <span class="alert90s-header-title">SYS.REQ</span>\n ${l}\n </div>\n `,r.draggable){let e,t,o,r,n=!1;a.addEventListener("mousedown",s=>{if(s.target.closest("#alert90s-close"))return;n=!0,e=s.clientX,t=s.clientY;const a=i.getBoundingClientRect();i.style.transform="none",i.style.animation="none",o=a.left,r=a.top,i.style.left=o+"px",i.style.top=r+"px",i.style.margin="0",document.body.style.userSelect="none"}),document.addEventListener("mousemove",s=>{n&&(i.style.left=o+(s.clientX-e)+"px",i.style.top=r+(s.clientY-t)+"px")}),document.addEventListener("mouseup",()=>{n&&(n=!1,document.body.style.userSelect="")})}let c=null;if(r.timer&&r.timerProgressBar&&(c=document.createElement("div"),c.className="alert90s-progress-bar",c.style.animationDuration=`${r.timer}ms`,i.appendChild(c)),r.imageUrl){const e=document.createElement("div");e.className="alert90s-image-container";const t=document.createElement("img");t.src=r.imageUrl,r.imageAlt&&(t.alt=r.imageAlt);let o="";r.imageWidth&&(o+=`width: ${r.imageWidth}px; max-width: 100%; `),r.imageHeight&&(o+=`height: ${r.imageHeight}px; `),o&&e.setAttribute("style",o),e.appendChild(t),s.appendChild(e)}if(r.icon){const e=document.createElement("div"),t="error"===r.icon?"danger":r.icon;e.className=`alert90s-icon ${t}`;let o="";if(r.iconHtml?o=`<div class="alert90s-icon-custom">${r.iconHtml}</div>`:"warning"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>':"danger"===r.icon||"error"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>':"info"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>':"success"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>':"question"===r.icon&&(o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>'),e.innerHTML=o,r.iconColor&&(e.style.color=r.iconColor,e.style.borderColor=r.iconColor,!r.iconHtml)){const t=e.querySelector("svg");t&&(t.style.stroke=r.iconColor)}o&&s.appendChild(e)}const d=document.createElement("div");if(d.className="alert90s-content-wrapper",r.title){const e=document.createElement("h2");e.className="alert90s-title",e.innerHTML=r.title,r.titleColor&&(e.style.color=r.titleColor),d.appendChild(e)}if(r.html){const e=document.createElement("div");e.className="alert90s-html",e.innerHTML=r.html,r.color&&(e.style.color=r.color),d.appendChild(e)}else if(r.text){const e=document.createElement("p");e.className="alert90s-message",e.textContent=r.text,r.color&&(e.style.color=r.color),d.appendChild(e)}if((r.title||r.html||r.text)&&s.appendChild(d),r.toast&&r.showCloseButton){const e=document.createElement("button");e.className="alert90s-toast-close",e.innerHTML="<span>✕</span>",e.onclick=()=>g({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}),s.appendChild(e)}let m=null;if(r.input){const e=document.createElement("div");if(e.className="alert90s-input-container","textarea"===r.input?m=document.createElement("textarea"):(m=document.createElement("input"),m.type=r.input),m.className="alert90s-input",r.inputAttributes)for(const[e,t]of Object.entries(r.inputAttributes))m.setAttribute(e,t);e.appendChild(m),s.appendChild(e)}const p=document.createElement("div");p.className="alert90s-actions";let u=null,f=null;const g=e=>{f&&clearTimeout(f),r.willClose&&r.willClose(),i.style.animation="none","alert90s-fade-out"===r.hideClass.popup?(i.style.animation="alert90s-fade-out 0.2s forwards",n.style.transition="opacity 0.2s",n.style.opacity="0"):i.className=`alert90s-box ${r.hideClass.popup}`,setTimeout(()=>{document.body.contains(n)&&document.body.removeChild(n),o(e)},200)},h=async()=>{let t=!0;if(m&&(t=m.value),r.preConfirm){e.resetValidationMessage(),r.showLoaderOnConfirm&&e.showLoading();try{const o=await Promise.resolve(r.preConfirm(t));if(!1===o)return void e.hideLoading();void 0!==o&&o!==t&&(t=o);const n=i.querySelector(".alert90s-validation-message");if(n&&"block"===n.style.display)return void e.hideLoading()}catch(t){return e.showValidationMessage(`Request failed: ${t}`),void e.hideLoading()}}g({isConfirmed:!0,isDenied:!1,isDismissed:!1,value:t})};if(r.showCancelButton){const e=document.createElement("button");e.className="alert90s-button cancel",e.innerHTML=r.cancelButtonText,r.cancelButtonAriaLabel&&e.setAttribute("aria-label",r.cancelButtonAriaLabel),r.cancelButtonColor&&(e.style.backgroundColor=r.cancelButtonColor),e.onclick=()=>g({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"cancel"}),p.appendChild(e)}if(r.showDenyButton){const e=document.createElement("button");e.className="alert90s-button deny",e.innerHTML=r.denyButtonText,r.denyButtonAriaLabel&&e.setAttribute("aria-label",r.denyButtonAriaLabel),r.denyButtonColor&&(e.style.backgroundColor=r.denyButtonColor),e.onclick=()=>g({isConfirmed:!1,isDenied:!0,isDismissed:!1}),p.appendChild(e)}if(r.showConfirmButton){const e=document.createElement("button");e.className="alert90s-button confirm",e.innerHTML=r.confirmButtonText,r.confirmButtonAriaLabel&&e.setAttribute("aria-label",r.confirmButtonAriaLabel),r.confirmButtonColor&&(e.style.backgroundColor=r.confirmButtonColor),e.onclick=h,p.appendChild(e),u=e}if((r.showCancelButton||r.showDenyButton||r.showConfirmButton)&&s.appendChild(p),r.footer){const e=document.createElement("div");e.className="alert90s-footer",e.innerHTML=r.footer,s.appendChild(e)}if(i.appendChild(a),i.appendChild(s),n.appendChild(i),r.showCloseButton){const e=a.querySelector("#alert90s-close");e&&(e.onclick=()=>g({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}))}document.body.appendChild(n),r.focusConfirm&&u&&setTimeout(()=>{m?m.focus():u.focus()},50),r.didOpen&&setTimeout(()=>{r.didOpen()},0),r.timer&&(this.timerEnd=Date.now()+r.timer,f=setTimeout(()=>{g({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"timer"})},r.timer))})}}return"undefined"!=typeof window&&(window.Alert90s=e),e});
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Alert90s=t()}(this,function(){"use strict";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}('.alert90s-overlay{animation:alert90s-fade-in .2s ease-out forwards;backdrop-filter:blur(4px);background-color:rgba(0,0,0,.6);box-sizing:border-box;display:flex;font-family:inherit;inset:0;padding:1rem;position:fixed;z-index:99999}.alert90s-overlay.alert90s-pos-center{align-items:center;justify-content:center}.alert90s-overlay.alert90s-pos-top{align-items:flex-start;justify-content:center}.alert90s-overlay.alert90s-pos-top-start{align-items:flex-start;justify-content:flex-start}.alert90s-overlay.alert90s-pos-top-end{align-items:flex-start;justify-content:flex-end}.alert90s-overlay.alert90s-pos-bottom{align-items:flex-end;justify-content:center}.alert90s-overlay.alert90s-pos-bottom-start{align-items:flex-end;justify-content:flex-start}.alert90s-overlay.alert90s-pos-bottom-end{align-items:flex-end;justify-content:flex-end}.alert90s-overlay.alert90s-pos-center-start{align-items:center;justify-content:flex-start}.alert90s-overlay.alert90s-pos-center-end{align-items:center;justify-content:flex-end}.alert90s-overlay *{box-sizing:border-box}.alert90s-box{align-items:center;animation:alert90s-pop-in .3s cubic-bezier(.175,.885,.32,1.275) forwards;background-color:#fff;border:4px solid #000;box-shadow:12px 12px 0 0 #000;display:flex;flex-direction:column;max-height:95vh;max-width:28rem;position:relative;text-align:center;width:100%}.alert90s-box[dir=rtl]{text-align:right}.alert90s-box.is-draggable{position:absolute}.alert90s-body{align-items:center;display:flex;flex-direction:column;overflow-y:auto;padding:3rem 2rem 2rem;scrollbar-width:none;width:100%}.alert90s-body::-webkit-scrollbar{display:none}.alert90s-header{align-items:center;background-color:#e2e8f0;border-bottom:4px solid #000;display:flex;height:2rem;justify-content:space-between;left:0;padding:0 .5rem;position:absolute;top:0;width:100%;z-index:10}.alert90s-header.draggable{cursor:grab}.alert90s-header.draggable:active{cursor:grabbing}.alert90s-header-left{display:flex;gap:.25rem}.alert90s-box[dir=rtl] .alert90s-header{flex-direction:row-reverse}.alert90s-header-dot{background-color:#fff;border:2px solid #000;height:.75rem;width:.75rem}.alert90s-header-right{align-items:center;display:flex;gap:.5rem;z-index:11}.alert90s-box[dir=rtl] .alert90s-header-right{flex-direction:row-reverse}.alert90s-header-title{font-size:10px;font-weight:700;letter-spacing:.1em;pointer-events:none;text-transform:uppercase}.alert90s-close-btn{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.25rem;justify-content:center;margin:0;padding:0;transition:transform .1s,background-color .1s;width:1.25rem}.alert90s-close-btn:hover{background-color:#f87171;transform:scale(1.1)}.alert90s-close-btn span{color:#000;font-size:14px;font-weight:700;line-height:1}.alert90s-image-container{align-items:center;background:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;display:flex;justify-content:center;margin-bottom:1rem;overflow:hidden;width:100%}.alert90s-image-container img{display:block;height:auto;max-width:100%}.alert90s-icon{align-items:center;border:4px solid #000;border-radius:9999px;box-shadow:4px 4px 0 0 #000;display:flex;flex-shrink:0;height:4rem;justify-content:center;margin-bottom:1rem;width:4rem}.alert90s-icon img,.alert90s-icon svg{height:2rem;width:2rem}.alert90s-icon-custom{font-size:2.25rem;font-weight:700;line-height:1}.alert90s-icon.warning{background-color:#facc15}.alert90s-icon.danger,.alert90s-icon.error{background-color:#ef4444;color:#fff}.alert90s-icon.info,.alert90s-icon.question{background-color:#60a5fa}.alert90s-icon.success{background-color:#4ade80}.alert90s-title{color:#1a1a1a;font-size:1.5rem;font-weight:900;letter-spacing:.1em;line-height:1.2;margin:0 0 .5rem;text-transform:uppercase}.alert90s-message{color:#475569;font-weight:700}.alert90s-html,.alert90s-message{font-size:.875rem;margin:0 0 1.5rem;max-width:100%}.alert90s-html{color:#1a1a1a;line-height:1.5}.alert90s-box[dir=rtl] .alert90s-html{text-align:right}.alert90s-html a{color:#2563eb;font-weight:700;text-decoration:underline;text-decoration-thickness:2px}.alert90s-html a:hover{background-color:#bfdbfe}.alert90s-html b,.alert90s-html strong{font-weight:900}.alert90s-input-container{margin-bottom:1.5rem;width:100%}.alert90s-input{background-color:#f8fafc;border:4px solid #000;box-shadow:inset 4px 4px 0 0 rgba(0,0,0,.05);font-family:inherit;font-size:1rem;font-weight:700;outline:none;padding:.75rem;transition:background-color .2s;width:100%}.alert90s-input:focus{background-color:#fff;border-color:#2563eb}textarea.alert90s-input{min-height:100px;resize:vertical}.alert90s-validation-message{background-color:#fef2f2;border:4px solid #000;border-left:8px solid #ef4444;color:#ef4444;display:none;font-size:.875rem;font-weight:700;margin-bottom:1.5rem;padding:.75rem;text-align:left;width:100%}.alert90s-box[dir=rtl] .alert90s-validation-message{border-left-color:#000;border-left-width:4px;border-right-color:#ef4444;border-right-width:8px;text-align:right}.alert90s-actions{display:flex;flex-direction:column;gap:1rem;justify-content:center;width:100%}@media (min-width:640px){.alert90s-actions{flex-direction:row}}.alert90s-button{align-items:center;background-color:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;cursor:pointer;display:flex;font-family:inherit;font-size:.875rem;font-weight:900;gap:.5rem;justify-content:center;letter-spacing:.1em;margin:0;padding:.75rem 1rem;text-transform:uppercase;transition:background-color .1s;width:100%}@media (min-width:640px){.alert90s-button{flex:1;min-width:100px;width:auto}}.alert90s-button:active{box-shadow:0 0 0 0 #000;transform:translate(4px,4px)}.alert90s-button:focus{outline:2px dashed #000;outline-offset:4px}.alert90s-button.cancel{background-color:#f87171}.alert90s-button.cancel:hover{background-color:#fca5a5}.alert90s-button.deny{background-color:#fb923c}.alert90s-button.deny:hover{background-color:#fdba74}.alert90s-button.confirm{background-color:#4ade80}.alert90s-button.confirm:hover{background-color:#86efac}.alert90s-footer{border-top:4px solid #000;color:#475569;font-size:.75rem;font-weight:700;margin-top:1.5rem;padding-top:1rem;width:100%}.alert90s-footer a{color:#2563eb;text-decoration:underline;text-decoration-thickness:2px}.alert90s-footer a:hover{background-color:#bfdbfe}.alert90s-progress-bar{animation:alert90s-progress linear forwards;background-color:#000;bottom:0;height:6px;left:0;position:absolute;width:100%}.alert90s-loader{display:flex;padding:1rem 0}.alert90s-loader,.alert90s-spinner{align-items:center;justify-content:center}.alert90s-spinner{display:inline-flex}.alert90s-spinner.hourglass{animation:alert90s-hourglass 2s ease-in-out infinite;font-size:2.5rem;line-height:1}.alert90s-spinner.ascii{font-family:monospace;font-size:2rem;font-weight:700}.alert90s-spinner.ascii:after{animation:alert90s-ascii .5s steps(4) infinite;content:"|"}.alert90s-spinner.blinking{font-family:monospace;font-size:1.5rem;font-weight:700;letter-spacing:.1em}.alert90s-spinner.blinking .cursor{animation:alert90s-blink 1s step-end infinite}.alert90s-spinner.progress{background-color:#cbd5e1;border:2px solid #000;box-shadow:inset 2px 2px 0 0 #64748b,inset -2px -2px 0 0 #f8fafc;height:24px;overflow:hidden;padding:2px;position:relative;width:200px}.alert90s-spinner.progress:before{animation:alert90s-marquee 1.5s linear infinite;background-color:#1d4ed8;background-image:repeating-linear-gradient(90deg,#1d4ed8,#1d4ed8 10px,transparent 0,transparent 12px);content:"";height:calc(100% - 4px);left:0;position:absolute;top:2px;width:40%}@keyframes alert90s-hourglass{0%{transform:rotate(0)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(1turn)}to{transform:rotate(1turn)}}@keyframes alert90s-ascii{0%{content:"|"}25%{content:"/"}50%{content:"-"}75%{content:"\\\\"}to{content:"|"}}@keyframes alert90s-blink{50%{opacity:0}}@keyframes alert90s-marquee{0%{transform:translateX(-100%)}to{transform:translateX(250px)}}@keyframes alert90s-progress{0%{width:100%}to{width:0}}@keyframes alert90s-fade-in{0%{opacity:0}to{opacity:1}}@keyframes alert90s-pop-in{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes alert90s-fade-out{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(10px)}}.alert90s-overlay.toast-overlay{backdrop-filter:none!important;background-color:transparent!important;pointer-events:none}.alert90s-box.alert90s-toast{align-items:stretch;box-shadow:6px 6px 0 0 #000;flex-direction:row;max-width:100%;min-width:250px;padding:0;pointer-events:auto;width:auto}.alert90s-toast .alert90s-header{display:none}.alert90s-toast .alert90s-body{align-items:center;flex-direction:row;gap:1rem;padding:1rem 1.5rem}.alert90s-toast .alert90s-icon{height:2.5rem;margin-bottom:0;width:2.5rem}.alert90s-toast .alert90s-icon img,.alert90s-toast .alert90s-icon svg{height:1.25rem;width:1.25rem}.alert90s-content-wrapper{align-items:center;display:flex;flex-direction:column;width:100%}.alert90s-toast .alert90s-content-wrapper{align-items:flex-start;text-align:left}.alert90s-box.alert90s-toast[dir=rtl] .alert90s-content-wrapper{align-items:flex-end;text-align:right}.alert90s-toast .alert90s-title{font-size:1rem;margin-bottom:.25rem}.alert90s-toast .alert90s-html,.alert90s-toast .alert90s-message{font-size:.875rem;margin-bottom:0}.alert90s-toast-close{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.5rem;justify-content:center;margin:0;margin-inline-start:auto;padding:0;transition:transform .1s,background-color .1s;width:1.5rem}.alert90s-toast-close span{color:#000;display:block;font-size:10px;font-weight:700;line-height:1}.alert90s-toast-close:hover{background-color:#f87171;transform:scale(1.1)}.btn90s{align-items:center;background-color:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;cursor:pointer;display:inline-flex;font-family:inherit;font-size:1rem;font-weight:900;justify-content:center;letter-spacing:.05em;margin:.25rem;padding:.75rem 1.5rem;text-decoration:none;text-transform:uppercase;transition:transform .1s,box-shadow .1s,background-color .1s}.btn90s:active{box-shadow:0 0 0 0 #000;transform:translate(4px,4px)}.btn90s:focus-visible{outline:2px dashed #000;outline-offset:4px}.btn90s.primary{background-color:#00f0ff}.btn90s.primary:hover{background-color:#66f6ff}.btn90s.success{background-color:#4ade80}.btn90s.success:hover{background-color:#86efac}.btn90s.warning{background-color:#ffc900}.btn90s.warning:hover{background-color:#ffe066}.btn90s.danger{background-color:#ff90e8}.btn90s.danger:hover{background-color:#ffbaf0}.btn90s.dark{background-color:#000;border-color:#000;color:#fff}.btn90s.dark:hover{background-color:#333}.btn90s.sm{border-width:3px;box-shadow:3px 3px 0 0 #000;font-size:.875rem;padding:.5rem 1rem}.btn90s.sm:active{transform:translate(3px,3px)}.btn90s.lg{border-width:5px;box-shadow:6px 6px 0 0 #000;font-size:1.25rem;padding:1rem 2rem}.btn90s.lg:active{transform:translate(6px,6px)}.alert90s-tooltip{animation:tooltip-pop .15s cubic-bezier(.175,.885,.32,1.275) forwards;background-color:#fff;border:3px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;display:none;font-family:inherit;font-size:.875rem;font-weight:700;max-width:300px;padding:.5rem 1rem;pointer-events:none;position:absolute;white-space:pre-wrap;z-index:100000}.alert90s-tooltip.show{display:block}.alert90s-tooltip.c-yellow{background-color:#fef08a}.alert90s-tooltip.c-cyan{background-color:#00f0ff}.alert90s-tooltip.c-pink{background-color:#ff90e8}.alert90s-tooltip.c-base{background-color:#fff}.alert90s-tooltip.c-dark{background-color:#000;color:#fff}.alert90s-tooltip:after{border-style:solid;content:"";height:0;position:absolute;width:0}.alert90s-tooltip.pos-top:after{border-color:#000 transparent transparent;border-width:8px 8px 0;bottom:-8px;left:50%;margin-left:-8px}.alert90s-tooltip.pos-bottom:after{border-color:transparent transparent #000;border-width:0 8px 8px;left:50%;margin-left:-8px;top:-8px}.alert90s-tooltip.pos-left:after{border-color:transparent transparent transparent #000;border-width:8px 0 8px 8px;margin-top:-8px;right:-8px;top:50%}.alert90s-tooltip.pos-right:after{border-color:transparent #000 transparent transparent;border-width:8px 8px 8px 0;left:-8px;margin-top:-8px;top:50%}@keyframes tooltip-pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}');class e{static getOptions(){return this.currentOptions||{}}static getPopup(){return this.currentPopup||null}static getTimerLeft(){if(!this.timerEnd)return;const e=this.timerEnd-Date.now();return e>0?e:0}static isLoading(){const e=this.getPopup();if(!e)return!1;const t=e.querySelector(".alert90s-actions"),o=e.querySelector(".alert90s-loader");return t&&"none"===t.style.display||!!o}static showLoading(){const t=this.getPopup();if(t){const o=t.querySelector(".alert90s-actions");o&&(o.style.display="none");let r=t.querySelector(".alert90s-loader");if(!r){r=document.createElement("div"),r.className="alert90s-loader";const n=e.currentOptions&&e.currentOptions.loaderType||"hourglass";r.innerHTML="ascii"===n?'<div class="alert90s-spinner ascii"></div>':"blinking"===n?'<div class="alert90s-spinner blinking">LOADING<span class="cursor">_</span></div>':"progress"===n?'<div class="alert90s-spinner progress"></div>':'<div class="alert90s-spinner hourglass">⏳</div>',o&&o.parentNode?o.parentNode.insertBefore(r,o):t.querySelector(".alert90s-body").appendChild(r)}}}static hideLoading(){const e=this.getPopup();if(e){const t=e.querySelector(".alert90s-actions");t&&(t.style.display="");const o=e.querySelector(".alert90s-loader");o&&o.remove()}}static showValidationMessage(e){const t=this.getPopup();if(t){let o=t.querySelector(".alert90s-validation-message");if(!o){o=document.createElement("div"),o.className="alert90s-validation-message";const e=t.querySelector(".alert90s-actions");e&&e.parentNode?e.parentNode.insertBefore(o,e):t.querySelector(".alert90s-body").appendChild(o)}o.innerHTML=e,o.style.display="block"}}static resetValidationMessage(){const e=this.getPopup();if(e){const t=e.querySelector(".alert90s-validation-message");t&&(t.style.display="none")}}static fire(e={}){return this.show(e)}static show(t={}){return new Promise(o=>{"string"==typeof t&&(t={title:t}),this.currentOptions=t;const r={title:void 0!==t.title?t.title:"",text:t.message||t.text||"",html:t.html||"",icon:t.type||t.icon||"",iconHtml:t.iconHtml||"",showConfirmButton:!1!==t.showConfirmButton,showCancelButton:t.showCancelButton||!1,showDenyButton:t.showDenyButton||!1,showCloseButton:void 0===t.showCloseButton||t.showCloseButton,loaderType:t.loaderType||"hourglass",confirmButtonText:t.confirmText||t.confirmButtonText||"OK",cancelButtonText:t.cancelText||t.cancelButtonText||"Cancel",denyButtonText:t.denyText||t.denyButtonText||"No",confirmButtonColor:t.confirmButtonColor||"",cancelButtonColor:t.cancelButtonColor||"",denyButtonColor:t.denyButtonColor||"",background:t.background||"",color:t.color||"",titleColor:t.titleColor||"",iconColor:t.iconColor||"",confirmButtonAriaLabel:t.confirmButtonAriaLabel||"",cancelButtonAriaLabel:t.cancelButtonAriaLabel||"",denyButtonAriaLabel:t.denyButtonAriaLabel||"",focusConfirm:!1!==t.focusConfirm,footer:t.footer||"",imageUrl:t.imageUrl||"",imageWidth:t.imageWidth||null,imageHeight:t.imageHeight||null,imageAlt:t.imageAlt||"",input:t.input||null,inputAttributes:t.inputAttributes||{},showLoaderOnConfirm:t.showLoaderOnConfirm||!1,preConfirm:t.preConfirm||null,toast:t.toast||!1,draggable:t.draggable||!1,position:t.position||(t.toast?"top-end":"center"),allowOutsideClick:void 0===t.allowOutsideClick||t.allowOutsideClick,dir:t.dir||"auto",showClass:t.showClass||{popup:"alert90s-pop-in"},hideClass:t.hideClass||{popup:"alert90s-fade-out"},timer:t.timer||null,timerProgressBar:t.timerProgressBar||!1,didOpen:t.didOpen||null,willClose:t.willClose||null},n=document.createElement("div");n.className=`alert90s-overlay alert90s-pos-${r.position}`,r.toast&&n.classList.add("toast-overlay"),n.addEventListener("mousedown",e=>{if(e.target===n){("function"==typeof r.allowOutsideClick?r.allowOutsideClick():r.allowOutsideClick)&&h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"backdrop"})}});const i=document.createElement("div");i.className="alert90s-box",r.toast&&i.classList.add("alert90s-toast"),"rtl"===document.dir||"rtl"===r.dir||r.position.includes("start")?i.setAttribute("dir","auto"===r.dir?document.dir||"ltr":r.dir):i.setAttribute("dir",r.dir),r.showClass.popup&&"alert90s-pop-in"!==r.showClass.popup&&(i.style.animation="none",i.className=`alert90s-box ${r.showClass.popup}`),r.background&&(i.style.backgroundColor=r.background),r.color&&(i.style.color=r.color),r.draggable&&i.classList.add("is-draggable"),this.currentPopup=i;const s=document.createElement("div");s.className="alert90s-body";const a=document.createElement("div");a.className="alert90s-header",r.draggable&&a.classList.add("draggable");let l="";if(r.showCloseButton&&(l='\n <button class="alert90s-close-btn" id="alert90s-close" aria-label="Close">\n <span>✕</span>\n </button>\n '),a.innerHTML=`\n <div class="alert90s-header-left">\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n </div>\n <div class="alert90s-header-right">\n <span class="alert90s-header-title">SYS.REQ</span>\n ${l}\n </div>\n `,r.draggable){let e,t,o,r,n=!1;a.addEventListener("mousedown",s=>{if(s.target.closest("#alert90s-close"))return;n=!0,e=s.clientX,t=s.clientY;const a=i.getBoundingClientRect();i.style.transform="none",i.style.animation="none",o=a.left,r=a.top,i.style.left=o+"px",i.style.top=r+"px",i.style.margin="0",document.body.style.userSelect="none"}),document.addEventListener("mousemove",s=>{n&&(i.style.left=o+(s.clientX-e)+"px",i.style.top=r+(s.clientY-t)+"px")}),document.addEventListener("mouseup",()=>{n&&(n=!1,document.body.style.userSelect="")})}let d=null;if(r.timer&&r.timerProgressBar&&(d=document.createElement("div"),d.className="alert90s-progress-bar",d.style.animationDuration=`${r.timer}ms`,i.appendChild(d)),r.imageUrl){const e=document.createElement("div");e.className="alert90s-image-container";const t=document.createElement("img");t.src=r.imageUrl,r.imageAlt&&(t.alt=r.imageAlt);let o="";r.imageWidth&&(o+=`width: ${r.imageWidth}px; max-width: 100%; `),r.imageHeight&&(o+=`height: ${r.imageHeight}px; `),o&&e.setAttribute("style",o),e.appendChild(t),s.appendChild(e)}if(r.icon){const e=document.createElement("div"),t="error"===r.icon?"danger":r.icon;e.className=`alert90s-icon ${t}`;let o="";if(r.iconHtml?o=`<div class="alert90s-icon-custom">${r.iconHtml}</div>`:"warning"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>':"danger"===r.icon||"error"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>':"info"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>':"success"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>':"question"===r.icon&&(o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>'),e.innerHTML=o,r.iconColor&&(e.style.color=r.iconColor,e.style.borderColor=r.iconColor,!r.iconHtml)){const t=e.querySelector("svg");t&&(t.style.stroke=r.iconColor)}o&&s.appendChild(e)}const c=document.createElement("div");if(c.className="alert90s-content-wrapper",r.title){const e=document.createElement("h2");e.className="alert90s-title",e.innerHTML=r.title,r.titleColor&&(e.style.color=r.titleColor),c.appendChild(e)}if(r.html){const e=document.createElement("div");e.className="alert90s-html",e.innerHTML=r.html,r.color&&(e.style.color=r.color),c.appendChild(e)}else if(r.text){const e=document.createElement("p");e.className="alert90s-message",e.textContent=r.text,r.color&&(e.style.color=r.color),c.appendChild(e)}if((r.title||r.html||r.text)&&s.appendChild(c),r.toast&&r.showCloseButton){const e=document.createElement("button");e.className="alert90s-toast-close",e.innerHTML="<span>✕</span>",e.onclick=()=>h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}),s.appendChild(e)}let p=null;if(r.input){const e=document.createElement("div");if(e.className="alert90s-input-container","textarea"===r.input?p=document.createElement("textarea"):(p=document.createElement("input"),p.type=r.input),p.className="alert90s-input",r.inputAttributes)for(const[e,t]of Object.entries(r.inputAttributes))p.setAttribute(e,t);e.appendChild(p),s.appendChild(e)}const m=document.createElement("div");m.className="alert90s-actions";let u=null,f=null;const h=e=>{f&&clearTimeout(f),r.willClose&&r.willClose(),i.style.animation="none","alert90s-fade-out"===r.hideClass.popup?(i.style.animation="alert90s-fade-out 0.2s forwards",n.style.transition="opacity 0.2s",n.style.opacity="0"):i.className=`alert90s-box ${r.hideClass.popup}`,setTimeout(()=>{document.body.contains(n)&&document.body.removeChild(n),o(e)},200)},g=async()=>{let t=!0;if(p&&(t=p.value),r.preConfirm){e.resetValidationMessage(),r.showLoaderOnConfirm&&e.showLoading();try{const o=await Promise.resolve(r.preConfirm(t));if(!1===o)return void e.hideLoading();void 0!==o&&o!==t&&(t=o);const n=i.querySelector(".alert90s-validation-message");if(n&&"block"===n.style.display)return void e.hideLoading()}catch(t){return e.showValidationMessage(`Request failed: ${t}`),void e.hideLoading()}}h({isConfirmed:!0,isDenied:!1,isDismissed:!1,value:t})};if(r.showCancelButton){const e=document.createElement("button");e.className="alert90s-button cancel",e.innerHTML=r.cancelButtonText,r.cancelButtonAriaLabel&&e.setAttribute("aria-label",r.cancelButtonAriaLabel),r.cancelButtonColor&&(e.style.backgroundColor=r.cancelButtonColor),e.onclick=()=>h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"cancel"}),m.appendChild(e)}if(r.showDenyButton){const e=document.createElement("button");e.className="alert90s-button deny",e.innerHTML=r.denyButtonText,r.denyButtonAriaLabel&&e.setAttribute("aria-label",r.denyButtonAriaLabel),r.denyButtonColor&&(e.style.backgroundColor=r.denyButtonColor),e.onclick=()=>h({isConfirmed:!1,isDenied:!0,isDismissed:!1}),m.appendChild(e)}if(r.showConfirmButton){const e=document.createElement("button");e.className="alert90s-button confirm",e.innerHTML=r.confirmButtonText,r.confirmButtonAriaLabel&&e.setAttribute("aria-label",r.confirmButtonAriaLabel),r.confirmButtonColor&&(e.style.backgroundColor=r.confirmButtonColor),e.onclick=g,m.appendChild(e),u=e}if((r.showCancelButton||r.showDenyButton||r.showConfirmButton)&&s.appendChild(m),r.footer){const e=document.createElement("div");e.className="alert90s-footer",e.innerHTML=r.footer,s.appendChild(e)}if(i.appendChild(a),i.appendChild(s),n.appendChild(i),r.showCloseButton){const e=a.querySelector("#alert90s-close");e&&(e.onclick=()=>h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}))}document.body.appendChild(n),r.focusConfirm&&u&&setTimeout(()=>{p?p.focus():u.focus()},50),r.didOpen&&setTimeout(()=>{r.didOpen()},0),r.timer&&(this.timerEnd=Date.now()+r.timer,f=setTimeout(()=>{h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"timer"})},r.timer))})}static initTooltips(){this._tooltipsInitialized||(this._tooltipsInitialized=!0,this._tooltipEl=document.createElement("div"),this._tooltipEl.className="alert90s-tooltip",document.body.appendChild(this._tooltipEl),document.addEventListener("mouseover",this._handleTooltipMouseOver.bind(this)),document.addEventListener("mouseout",this._handleTooltipMouseOut.bind(this)),document.addEventListener("focusin",this._handleTooltipMouseOver.bind(this)),document.addEventListener("focusout",this._handleTooltipMouseOut.bind(this)))}static _handleTooltipMouseOver(e){const t=e.target.closest("[data-alert90s-tooltip]");if(!t)return;const o=t.getAttribute("data-alert90s-tooltip");if(!o)return;const r=t.getAttribute("data-alert90s-position")||"top",n=t.getAttribute("data-alert90s-color")||"yellow";this._tooltipEl.innerHTML=o,this._tooltipEl.className=`alert90s-tooltip pos-${r} c-${n} show`;const i=t.getBoundingClientRect(),s=this._tooltipEl.getBoundingClientRect(),a=10;let l=0,d=0;switch(r){case"top":l=i.top-s.height-a,d=i.left+i.width/2-s.width/2;break;case"bottom":l=i.bottom+a,d=i.left+i.width/2-s.width/2;break;case"left":l=i.top+i.height/2-s.height/2,d=i.left-s.width-a;break;case"right":l=i.top+i.height/2-s.height/2,d=i.right+a}d<a&&(d=a),l<a&&(l=a),d+s.width>window.innerWidth-a&&(d=window.innerWidth-s.width-a),this._tooltipEl.style.top=`${l+window.scrollY}px`,this._tooltipEl.style.left=`${d+window.scrollX}px`}static _handleTooltipMouseOut(e){const t=e.target.closest("[data-alert90s-tooltip]");t&&setTimeout(()=>{this._tooltipEl.matches(":hover")||t.matches(":hover")||t.contains(document.activeElement)||this._tooltipEl.classList.remove("show")},10)}}return"undefined"!=typeof window&&(window.Alert90s=e,document.addEventListener("DOMContentLoaded",()=>{e.initTooltips()})),e});
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -555,10 +555,95 @@ class Alert90s {
|
|
|
555
555
|
}
|
|
556
556
|
});
|
|
557
557
|
}
|
|
558
|
+
|
|
559
|
+
// --- Tooltip / Popover Management ---
|
|
560
|
+
static initTooltips() {
|
|
561
|
+
if (this._tooltipsInitialized) return;
|
|
562
|
+
this._tooltipsInitialized = true;
|
|
563
|
+
|
|
564
|
+
this._tooltipEl = document.createElement('div');
|
|
565
|
+
this._tooltipEl.className = 'alert90s-tooltip';
|
|
566
|
+
document.body.appendChild(this._tooltipEl);
|
|
567
|
+
|
|
568
|
+
document.addEventListener('mouseover', this._handleTooltipMouseOver.bind(this));
|
|
569
|
+
document.addEventListener('mouseout', this._handleTooltipMouseOut.bind(this));
|
|
570
|
+
|
|
571
|
+
// Support focus for accessibility / keyboard navigation
|
|
572
|
+
document.addEventListener('focusin', this._handleTooltipMouseOver.bind(this));
|
|
573
|
+
document.addEventListener('focusout', this._handleTooltipMouseOut.bind(this));
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
static _handleTooltipMouseOver(e) {
|
|
577
|
+
const target = e.target.closest('[data-alert90s-tooltip]');
|
|
578
|
+
if (!target) return;
|
|
579
|
+
|
|
580
|
+
const message = target.getAttribute('data-alert90s-tooltip');
|
|
581
|
+
if (!message) return;
|
|
582
|
+
|
|
583
|
+
const position = target.getAttribute('data-alert90s-position') || 'top';
|
|
584
|
+
const colorClass = target.getAttribute('data-alert90s-color') || 'yellow'; // yellow, cyan, pink, base
|
|
585
|
+
|
|
586
|
+
this._tooltipEl.innerHTML = message;
|
|
587
|
+
|
|
588
|
+
// Reset classes
|
|
589
|
+
this._tooltipEl.className = `alert90s-tooltip pos-${position} c-${colorClass} show`;
|
|
590
|
+
|
|
591
|
+
const targetRect = target.getBoundingClientRect();
|
|
592
|
+
const tooltipRect = this._tooltipEl.getBoundingClientRect();
|
|
593
|
+
const offset = 10; // Distance from element
|
|
594
|
+
|
|
595
|
+
let top = 0;
|
|
596
|
+
let left = 0;
|
|
597
|
+
|
|
598
|
+
switch (position) {
|
|
599
|
+
case 'top':
|
|
600
|
+
top = targetRect.top - tooltipRect.height - offset;
|
|
601
|
+
left = targetRect.left + (targetRect.width / 2) - (tooltipRect.width / 2);
|
|
602
|
+
break;
|
|
603
|
+
case 'bottom':
|
|
604
|
+
top = targetRect.bottom + offset;
|
|
605
|
+
left = targetRect.left + (targetRect.width / 2) - (tooltipRect.width / 2);
|
|
606
|
+
break;
|
|
607
|
+
case 'left':
|
|
608
|
+
top = targetRect.top + (targetRect.height / 2) - (tooltipRect.height / 2);
|
|
609
|
+
left = targetRect.left - tooltipRect.width - offset;
|
|
610
|
+
break;
|
|
611
|
+
case 'right':
|
|
612
|
+
top = targetRect.top + (targetRect.height / 2) - (tooltipRect.height / 2);
|
|
613
|
+
left = targetRect.right + offset;
|
|
614
|
+
break;
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
// Boundary constraints (prevent off-screen)
|
|
618
|
+
if (left < offset) left = offset;
|
|
619
|
+
if (top < offset) top = offset;
|
|
620
|
+
if (left + tooltipRect.width > window.innerWidth - offset) {
|
|
621
|
+
left = window.innerWidth - tooltipRect.width - offset;
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
this._tooltipEl.style.top = `${top + window.scrollY}px`;
|
|
625
|
+
this._tooltipEl.style.left = `${left + window.scrollX}px`;
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
static _handleTooltipMouseOut(e) {
|
|
629
|
+
const target = e.target.closest('[data-alert90s-tooltip]');
|
|
630
|
+
if (!target) return;
|
|
631
|
+
|
|
632
|
+
// Small delay to prevent flickering if moving inside the element
|
|
633
|
+
setTimeout(() => {
|
|
634
|
+
if (!this._tooltipEl.matches(':hover') && !target.matches(':hover') && !target.contains(document.activeElement)) {
|
|
635
|
+
this._tooltipEl.classList.remove('show');
|
|
636
|
+
}
|
|
637
|
+
}, 10);
|
|
638
|
+
}
|
|
558
639
|
}
|
|
559
640
|
|
|
560
641
|
export default Alert90s;
|
|
561
642
|
// Make it globally available on window if not using module bundler
|
|
562
643
|
if (typeof window !== 'undefined') {
|
|
563
644
|
window.Alert90s = Alert90s;
|
|
645
|
+
// Auto-init tooltips on DOM load for drop-in usage
|
|
646
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
647
|
+
Alert90s.initTooltips();
|
|
648
|
+
});
|
|
564
649
|
}
|
package/src/styles.css
CHANGED
|
@@ -511,3 +511,133 @@ textarea.alert90s-input {
|
|
|
511
511
|
background-color: #f87171;
|
|
512
512
|
transform: scale(1.1);
|
|
513
513
|
}
|
|
514
|
+
|
|
515
|
+
/* --- Alert90s Standalone Button Library --- */
|
|
516
|
+
.btn90s {
|
|
517
|
+
display: inline-flex;
|
|
518
|
+
align-items: center;
|
|
519
|
+
justify-content: center;
|
|
520
|
+
padding: 0.75rem 1.5rem;
|
|
521
|
+
font-family: inherit;
|
|
522
|
+
font-size: 1rem;
|
|
523
|
+
font-weight: 900;
|
|
524
|
+
text-transform: uppercase;
|
|
525
|
+
text-decoration: none;
|
|
526
|
+
letter-spacing: 0.05em;
|
|
527
|
+
color: #000;
|
|
528
|
+
background-color: #fff;
|
|
529
|
+
border: 4px solid #000;
|
|
530
|
+
box-shadow: 4px 4px 0 0 #000;
|
|
531
|
+
cursor: pointer;
|
|
532
|
+
transition: transform 0.1s, box-shadow 0.1s, background-color 0.1s;
|
|
533
|
+
margin: 0.25rem;
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
.btn90s:active {
|
|
537
|
+
transform: translate(4px, 4px);
|
|
538
|
+
box-shadow: 0 0 0 0 #000;
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
.btn90s:focus-visible {
|
|
542
|
+
outline: 2px dashed #000;
|
|
543
|
+
outline-offset: 4px;
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
/* Button Variants */
|
|
547
|
+
.btn90s.primary { background-color: #00f0ff; }
|
|
548
|
+
.btn90s.primary:hover { background-color: #66f6ff; }
|
|
549
|
+
|
|
550
|
+
.btn90s.success { background-color: #4ade80; }
|
|
551
|
+
.btn90s.success:hover { background-color: #86efac; }
|
|
552
|
+
|
|
553
|
+
.btn90s.warning { background-color: #ffc900; }
|
|
554
|
+
.btn90s.warning:hover { background-color: #ffe066; }
|
|
555
|
+
|
|
556
|
+
.btn90s.danger { background-color: #ff90e8; }
|
|
557
|
+
.btn90s.danger:hover { background-color: #ffbaf0; }
|
|
558
|
+
|
|
559
|
+
.btn90s.dark { background-color: #000; color: #fff; border-color: #000; }
|
|
560
|
+
.btn90s.dark:hover { background-color: #333; }
|
|
561
|
+
|
|
562
|
+
/* Button Sizes */
|
|
563
|
+
.btn90s.sm { padding: 0.5rem 1rem; font-size: 0.875rem; border-width: 3px; box-shadow: 3px 3px 0 0 #000; }
|
|
564
|
+
.btn90s.sm:active { transform: translate(3px, 3px); }
|
|
565
|
+
|
|
566
|
+
.btn90s.lg { padding: 1rem 2rem; font-size: 1.25rem; border-width: 5px; box-shadow: 6px 6px 0 0 #000; }
|
|
567
|
+
.btn90s.lg:active { transform: translate(6px, 6px); }
|
|
568
|
+
|
|
569
|
+
/* --- Tooltip / Popover --- */
|
|
570
|
+
.alert90s-tooltip {
|
|
571
|
+
position: absolute;
|
|
572
|
+
z-index: 100000;
|
|
573
|
+
display: none;
|
|
574
|
+
padding: 0.5rem 1rem;
|
|
575
|
+
font-family: inherit;
|
|
576
|
+
font-size: 0.875rem;
|
|
577
|
+
font-weight: bold;
|
|
578
|
+
color: #000;
|
|
579
|
+
background-color: #fff;
|
|
580
|
+
border: 3px solid #000;
|
|
581
|
+
box-shadow: 4px 4px 0 0 #000;
|
|
582
|
+
white-space: pre-wrap;
|
|
583
|
+
max-width: 300px;
|
|
584
|
+
pointer-events: none; /* Let pointer pass through to element below */
|
|
585
|
+
animation: tooltip-pop 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
.alert90s-tooltip.show {
|
|
589
|
+
display: block;
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
/* Tooltip Colors */
|
|
593
|
+
.alert90s-tooltip.c-yellow { background-color: #fef08a; }
|
|
594
|
+
.alert90s-tooltip.c-cyan { background-color: #00f0ff; }
|
|
595
|
+
.alert90s-tooltip.c-pink { background-color: #ff90e8; }
|
|
596
|
+
.alert90s-tooltip.c-base { background-color: #fff; }
|
|
597
|
+
.alert90s-tooltip.c-dark { background-color: #000; color: #fff; }
|
|
598
|
+
|
|
599
|
+
/* Positions via pseudo elements to look like comic speech bubbles */
|
|
600
|
+
.alert90s-tooltip::after {
|
|
601
|
+
content: '';
|
|
602
|
+
position: absolute;
|
|
603
|
+
width: 0;
|
|
604
|
+
height: 0;
|
|
605
|
+
border-style: solid;
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
.alert90s-tooltip.pos-top::after {
|
|
609
|
+
bottom: -8px;
|
|
610
|
+
left: 50%;
|
|
611
|
+
margin-left: -8px;
|
|
612
|
+
border-width: 8px 8px 0 8px;
|
|
613
|
+
border-color: #000 transparent transparent transparent;
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
.alert90s-tooltip.pos-bottom::after {
|
|
617
|
+
top: -8px;
|
|
618
|
+
left: 50%;
|
|
619
|
+
margin-left: -8px;
|
|
620
|
+
border-width: 0 8px 8px 8px;
|
|
621
|
+
border-color: transparent transparent #000 transparent;
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
.alert90s-tooltip.pos-left::after {
|
|
625
|
+
right: -8px;
|
|
626
|
+
top: 50%;
|
|
627
|
+
margin-top: -8px;
|
|
628
|
+
border-width: 8px 0 8px 8px;
|
|
629
|
+
border-color: transparent transparent transparent #000;
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
.alert90s-tooltip.pos-right::after {
|
|
633
|
+
left: -8px;
|
|
634
|
+
top: 50%;
|
|
635
|
+
margin-top: -8px;
|
|
636
|
+
border-width: 8px 8px 8px 0;
|
|
637
|
+
border-color: transparent #000 transparent transparent;
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
@keyframes tooltip-pop {
|
|
641
|
+
0% { opacity: 0; transform: scale(0.9); }
|
|
642
|
+
100% { opacity: 1; transform: scale(1); }
|
|
643
|
+
}
|