1 line
11 KiB
JavaScript
1 line
11 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: flex;\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: min(26rem, 100%);\n gap: 0.5rem;\n position: fixed;\n left: 0;\n top: 0;\n z-index: 100;\n max-height: 100%;\n padding: 1rem;\n overflow: hidden auto;\n overscroll-behavior: contain;\n touch-action: none;\n }\n .notification-panel:empty{\n display:none;\n }\n .notification{\n display: flex;\n position: relative;\n border-radius: 0.5rem;\n background: rgba(var(--foreground-color, (255,255,255)), 1);\n overflow: hidden;\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-word;\n padding: max(1rem,1.5vw);\n align-items: center;\n box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.14);\n touch-action: none;\n }\n .notification:not(.pinned)::before{\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n height: 0.2rem;\n width: 100%;\n background-color: var(--accent-color, teal);\n animation: loading var(--timeout, 5000ms) linear forwards;\n transform-origin: left;\n }\n @keyframes loading{\n to{\n transform: scaleX(0);\n }\n }\n .icon-container:not(:empty){\n margin-right: 0.5rem;\n height: var(--icon-height);\n width: var(--icon-width);\n flex-shrink: 0;\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, (17,17,17)), 0.7);\n }\n .icon--success {\n fill: var(--green);\n }\n .icon--failure,\n .icon--error {\n fill: var(--danger-color);\n }\n output{\n width: 100%;\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 flex-shrink: 0;\n }\n .close:active{\n transform: scale(0.9);\n }\n .action{\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0.5rem 0.8rem;\n border-radius: 0.2rem;\n border: none;\n background-color: rgba(var(--text-color, (17,17,17)), 0.03);\n font-family: inherit;\n font-size: inherit;\n color: var(--accent-color, teal);\n font-weight: 500;\n cursor: pointer;\n }\n @media screen and (max-width: 640px){\n .close{\n display: none;\n }\n .notification-panel:not(:empty){\n padding-bottom: 3rem;\n }\n }\n @media screen and (min-width: 640px){\n .notification-panel{\n top: auto;\n bottom: 0;\n max-width: max-content;\n }\n .notification{\n width: auto;\n max-width: max-content; \n border: solid 1px rgba(var(--text-color, (17,17,17)), 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, (17,17,17)), 0.3);\n border-radius: 1rem;\n &:hover{\n background: rgba(var(--text-color, (17,17,17)), 0.5);\n }\n }\n .close:hover{\n background-color: rgba(var(--text-color, (17,17,17)), 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),this.remove=this.remove.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.startX=0,this.currentX=0,this.endX=0,this.swipeDistance=0,this.swipeDirection="",this.swipeThreshold=0,this.startTime=0,this.swipeTime=0,this.swipeTimeThreshold=200,this.currentTarget=null,this.notificationTimeout=5e3,this.mediaQuery=window.matchMedia("(min-width: 640px)"),this.handleOrientationChange=this.handleOrientationChange.bind(this),this.isBigViewport=!1}set timeout(value){isNaN(value)||(this.notificationTimeout=value)}randString(length){let result="";const characters="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";for(let i=0;i<length;i++)result+=characters.charAt(Math.floor(52*Math.random()));return result}createNotification(message,options={}){const{pinned:pinned=!1,icon:icon,action:action,timeout:timeout=this.notificationTimeout}=options,notification=document.createElement("div");return notification.id=this.randString(8),notification.className="notification "+(pinned?"pinned":""),notification.style.setProperty("--timeout",`${timeout}ms`),notification.innerHTML=`\n ${icon?`<div class="icon-container">${icon}</div>`:""}\n <output>${message}</output>\n ${action?`<button class="action">${action.label}</button>`:""}\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 `,action&¬ification.querySelector(".action").addEventListener("click",action.callback),notification.querySelector(".close").addEventListener("click",(()=>{this.removeNotification(notification)})),pinned||setTimeout((()=>{this.removeNotification(notification,this.isBigViewport?"left":"top")}),timeout),notification}push(message,options={}){const notification=this.createNotification(message,options);return this.isBigViewport?this.notificationPanel.append(notification):this.notificationPanel.prepend(notification),notification.scrollIntoView({behavior:"smooth"}),this.notificationPanel.animate([{transform:`translateY(${this.isBigViewport?"":"-"}${notification.clientHeight}px)`},{transform:"none"}],this.animationOptions),notification.animate([{transform:"translateY(-1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions).onfinish=e=>{e.target.commitStyles(),e.target.cancel()},notification.id}removeNotification(notification,direction="left"){if(!notification)return;const sign="left"===direction||"top"===direction?"-":"+";this.isBigViewport||"top"!==direction?notification.animate([{transform:this.currentX?`translateX(${this.currentX}px)`:"none",opacity:"1"},{transform:`translateX(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`,opacity:"0"}],this.animationOptions).onfinish=()=>{notification.remove()}:notification.animate([{transform:this.currentX?`translateY(${this.currentX}px)`:"none",opacity:"1"},{transform:`translateY(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`,opacity:"0"}],this.animationOptions).onfinish=()=>{notification.remove()}}remove(id){const notification=this.notificationPanel.querySelector(`#${id}`);notification&&this.removeNotification(notification)}clearAll(){Array.from(this.notificationPanel.children).forEach((child=>{this.removeNotification(child)}))}handleTouchMove(e){this.currentX=e.touches[0].clientX-this.startX,this.currentTarget.style.transform=`translateX(${this.currentX}px)`}handleOrientationChange(e){this.isBigViewport=e.matches,e.matches}connectedCallback(){this.handleOrientationChange(this.mediaQuery),this.mediaQuery.addEventListener("change",this.handleOrientationChange),this.notificationPanel.addEventListener("touchstart",(e=>{e.target.closest(".close")?this.removeNotification(e.target.closest(".notification")):e.target.closest(".notification")&&(this.swipeThreshold=e.target.closest(".notification").getBoundingClientRect().width/2,this.currentTarget=e.target.closest(".notification"),this.startTime=Date.now(),this.startX=e.touches[0].clientX,this.startY=e.touches[0].clientY,this.notificationPanel.addEventListener("touchmove",this.handleTouchMove,{passive:!0}))}),{passive:!0}),this.notificationPanel.addEventListener("touchend",(e=>{this.endX=e.changedTouches[0].clientX,this.endY=e.changedTouches[0].clientY,this.swipeDistance=Math.abs(this.endX-this.startX),this.swipeTime=Date.now()-this.startTime,this.endX>this.startX?this.swipeDirection="right":this.swipeDirection="left",this.swipeTime<this.swipeTimeThreshold?this.swipeDistance>50&&this.removeNotification(this.currentTarget,this.swipeDirection):this.swipeDistance>this.swipeThreshold?this.removeNotification(this.currentTarget,this.swipeDirection):this.currentTarget.animate([{transform:`translateX(${this.currentX}px)`},{transform:"none"}],this.animationOptions).onfinish=e=>{e.target.commitStyles(),e.target.cancel()},this.notificationPanel.removeEventListener("touchmove",this.handleTouchMove),this.currentX=0}))}disconnectedCallback(){mediaQueryList.removeEventListener("change",handleOrientationChange)}}); |