1 line
5.9 KiB
JavaScript
1 line
5.9 KiB
JavaScript
const smNotifications=document.createElement("template");smNotifications.innerHTML='\n<style>\n *{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n } \n :host{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --danger-color: red;\n --icon-height: 1.5rem;\n --icon-width: 1.5rem;\n }\n .hide{\n opacity: 0 !important;\n pointer-events: none !important;\n }\n .notification-panel{\n display: grid;\n width: 100%;\n gap: 0.5rem;\n position: fixed;\n left: 0;\n bottom: 0;\n z-index: 100;\n max-height: 100%;\n padding: 1rem;\n overflow: hidden auto;\n -ms-scroll-chaining: none;\n overscroll-behavior: contain;\n }\n .notification-panel:empty{\n display:none;\n }\n .notification{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n border-radius: 0.3rem;\n background: rgba(var(--background-color), 1);\n overflow: hidden;\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-all;\n word-break: break-word;\n -ms-hyphens: auto;\n -webkit-hyphens: auto;\n hyphens: auto;\n max-width: 100%;\n padding: 1rem;\n align-items: center;\n }\n .icon-container:not(:empty){\n margin-right: 0.5rem;\n height: var(--icon-height);\n width: var(--icon-width);\n }\n h4:first-letter,\n p:first-letter{\n text-transform: uppercase;\n }\n h4{\n font-weight: 400;\n }\n p{\n line-height: 1.6;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n color: rgba(var(--text-color), 0.9);\n overflow-wrap: break-word;\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-all;\n word-break: break-word;\n -ms-hyphens: auto;\n -webkit-hyphens: auto;\n hyphens: auto;\n max-width: 100%;\n }\n .notification:last-of-type{\n margin-bottom: 0;\n }\n .icon {\n height: 100%;\n width: 100%;\n fill: rgba(var(--text-color), 0.7);\n }\n .close{\n height: 2rem;\n width: 2rem;\n border: none;\n cursor: pointer;\n margin-left: 1rem;\n border-radius: 50%;\n padding: 0.3rem;\n transition: background-color 0.3s, transform 0.3s;\n background-color: transparent;\n }\n .close:active{\n transform: scale(0.9);\n }\n @media screen and (min-width: 640px){\n .notification-panel{\n max-width: 28rem;\n width: max-content;\n }\n .notification{\n width: auto;\n border: solid 1px rgba(var(--text-color), 0.2);\n }\n }\n @media (any-hover: hover){\n ::-webkit-scrollbar{\n width: 0.5rem;\n }\n \n ::-webkit-scrollbar-thumb{\n background: rgba(var(--text-color), 0.3);\n border-radius: 1rem;\n &:hover{\n background: rgba(var(--text-color), 0.5);\n }\n }\n .close:hover{\n background-color: rgba(var(--text-color), 0.1);\n }\n }\n</style>\n<div class="notification-panel"></div>\n',customElements.define("sm-notifications",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smNotifications.content.cloneNode(!0)),this.notificationPanel=this.shadowRoot.querySelector(".notification-panel"),this.animationOptions={duration:300,fill:"forwards",easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)"},this.push=this.push.bind(this),this.createNotification=this.createNotification.bind(this),this.removeNotification=this.removeNotification.bind(this),this.clearAll=this.clearAll.bind(this)}randString(n){let t="";const i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let o=0;o<n;o++)t+=i.charAt(Math.floor(Math.random()*i.length));return t}createNotification(n,t){const{pinned:i=!1,icon:o=""}=t,e=document.createElement("div");e.id=this.randString(8),e.classList.add("notification");let a="";return a+=`\n <div class="icon-container">${o}</div>\n <p>${n}</p>\n `,i&&(e.classList.add("pinned"),a+='\n <button class="close">\n <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>\n </button>\n '),e.innerHTML=a,e}push(n,t={}){const i=this.createNotification(n,t);return this.notificationPanel.append(i),i.animate([{transform:"translateY(1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions),i.id}removeNotification(n){n.animate([{transform:"none",opacity:"1"},{transform:"translateY(0.5rem)",opacity:"0"}],this.animationOptions).onfinish=(()=>{n.remove()})}clearAll(){Array.from(this.notificationPanel.children).forEach(n=>{this.removeNotification(n)})}connectedCallback(){this.notificationPanel.addEventListener("click",n=>{n.target.closest(".close")&&this.removeNotification(n.target.closest(".notification"))});const n=new MutationObserver(n=>{n.forEach(n=>{"childList"===n.type&&n.addedNodes.length&&!n.addedNodes[0].classList.contains("pinned")&&setTimeout(()=>{this.removeNotification(n.addedNodes[0])},5e3)})});n.observe(this.notificationPanel,{childList:!0})}}); |