7 lines
34 KiB
JavaScript
7 lines
34 KiB
JavaScript
const smButton=document.createElement("template");smButton.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-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --padding: 0.6rem 1.2rem;\n --border-radius: 0.3rem;\n --background: rgba(var(--text-color), 0.1);\n}\n:host([variant='primary']) .button{\n background: var(--accent-color);\n color: rgba(var(--background-color), 1);\n}\n:host([variant='outlined']) .button{\n -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n background: transparent; \n color: var(--accent-color);\n}\n:host([variant='no-outline']) .button{\n background: rgba(var(--background-color), 1); \n color: var(--accent-color);\n}\n.button {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n padding: var(--padding);\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n border-radius: var(--border-radius); \n -webkit-box-pack: center; \n -ms-flex-pack: center; \n justify-content: center;\n transition: box-shadow 0.3s, background-color 0.3s;\n font-family: inherit;\n font-size: 0.9rem;\n font-weight: 500;\n background-color: var(--background); \n -webkit-tap-highlight-color: transparent;\n outline: none;\n overflow: hidden;\n border: none;\n color: inherit;\n align-items: center;\n}\n:host([disabled]) .button{\n cursor: not-allowed;\n opacity: 0.6;\n color: rgba(var(--text-color), 1);\n background-color: rgba(var(--text-color), 0.3);\n}\n@media (hover: hover){\n :host(:not([disabled])) .button:hover{\n -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n }\n :host([variant='outlined']) .button:hover{\n -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);\n box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);\n }\n}\n@media (hover: none){\n :host(:not([disabled])) .button:active{\n -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n }\n :host([variant='outlined']) .button:active{\n -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);\n box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);\n }\n}\n</style>\n<div part=\"button\" class=\"button\">\n <slot></slot> \n</div>",customElements.define("sm-button",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smButton.content.cloneNode(!0))}static get observedAttributes(){return["disabled"]}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}handleKeyDown(e){this.hasAttribute("disabled")||"Enter"!==e.key&&"Space"!==e.code||(e.preventDefault(),this.click())}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","button"),this.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(e,t,n){"disabled"===e?(this.removeAttribute("tabindex"),this.setAttribute("aria-disabled","true")):(this.setAttribute("tabindex","0"),this.setAttribute("aria-disabled","false"))}});
|
|
const hamburgerMenu=document.createElement("template");hamburgerMenu.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 width: 100%;\n height: 100%;\n overflow-y: auto;\n scrollbar-width: thin;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --padding: 0 0 3rem 0;\n --backdrop-color: rgba(0,0,0,0.5);\n}\n.backdrop{\n position: fixed;\n}\n.side-nav{\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n.hide{\n display: none !important;\n}\n@media screen and (max-width: 640px){\n :host{\n position: fixed;\n z-index: 10;\n }\n .side-nav{\n height: 100%;\n overflow-y: auto; \n width: calc(100% - 4rem);\n transition: transform 0.3s;\n background-color: rgba(var(--background-color), 1);\n box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1);\n z-index: 1;\n }\n .side-nav:not(.reveal){\n transform: translateX(-100%);\n }\n .reveal{\n transform: none;\n }\n .backdrop{\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: var(--backdrop-color);\n -webkit-transition: opacity 0.3s;\n -o-transition: opacity 0.3s;\n transition: opacity 0.3s;\n }\n}\n@media screen and (min-width: 640px){\n .backdrop{\n pointer-events: none;\n }\n}\n@media (any-hover: hover){\n ::-webkit-scrollbar{\n width: 0.5rem;\n }\n ::-webkit-scrollbar-thumb{\n border-radius: 1rem;\n background: rgba(var(--text-color), 0.3);\n &:hover{\n background: rgba(var(--text-color), 0.5);\n }\n }\n}\n</style>\n<section class="backdrop hide"></section>\n<nav class="side-nav">\n <slot></slot>\n</nav>\n';class HamburgerMenu extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(hamburgerMenu.content.cloneNode(!0)),this.resumeScrolling=this.resumeScrolling.bind(this),this.open=this.open.bind(this),this.close=this.close.bind(this),this.sideNav=this.shadowRoot.querySelector(".side-nav"),this.backdrop=this.shadowRoot.querySelector(".backdrop"),this.isOpen=!1,this.animeOptions={duration:300,easing:"ease"}}static get observedAttributes(){return["open"]}resumeScrolling(){const n=document.body.style.top;window.scrollTo(0,-1*parseInt(n||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}open(){this.isOpen||(document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.classList.remove("hide"),this.sideNav.classList.add("reveal"),this.backdrop.classList.remove("hide"),this.backdrop.animate([{opacity:0},{opacity:1}],this.animeOptions).onfinish=(()=>{this.isOpen=!0,this.setAttribute("open","")}))}close(){this.isOpen&&(this.sideNav.classList.remove("reveal"),this.backdrop.animate([{opacity:1},{opacity:0}],this.animeOptions).onfinish=(()=>{this.backdrop.classList.add("hide"),this.classList.add("hide"),this.isOpen=!1,this.removeAttribute("open")}))}connectedCallback(){this.backdrop.addEventListener("click",this.close);const n=new ResizeObserver(n=>{window.innerWidth<640&&this.isOpen?this.classList.remove("hide"):this.classList.add("hide"),window.innerWidth>640&&this.classList.remove("hide")});n.observe(this)}disconnectedCallback(){this.backdrop.removeEventListener("click",this.close)}attributeChangedCallback(n,e,t){"open"===n&&this.hasAttribute("open")&&this.open()}}window.customElements.define("hamburger-menu",HamburgerMenu);
|
|
const smMenu=document.createElement("template");smMenu.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-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.menu{\n display: -ms-grid;\n display: grid;\n place-items: center;\n height: 2rem;\n width: 2rem;\n outline: none;\n}\n.icon {\n position: absolute;\n fill: rgba(var(--text-color), 0.7);\n height: 2.4rem;\n width: 2.4rem;\n padding: 0.5rem;\n border-radius: 2rem;\n -webkit-transition: background 0.3s;\n -o-transition: background 0.3s;\n transition: background 0.3s;\n} \n.select{\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n cursor: pointer;\n width: 100%;\n -webkit-tap-highlight-color: transparent;\n}\n.menu:focus .icon,\n.focused{\n background: rgba(var(--text-color), 0.1); \n}\n:host([align-options="left"]) .options{\n left: 0;\n}\n:host([align-options="right"]) .options{\n right: 0;\n}\n.options{\n padding: 0.5rem 0;\n overflow: hidden auto;\n position: absolute;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n min-width: -webkit-max-content;\n min-width: -moz-max-content;\n min-width: max-content;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n background: rgba(var(--background-color), 1);\n border-radius: 0.3rem;\n z-index: 1;\n -webkit-box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);\n box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);\n bottom: auto;\n}\n.hide{\n display: none;\n}\n@media screen and (max-width: 640px){\n .options{\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: auto;\n border-radius: 0.5rem 0.5rem 0 0;\n }\n}\n@media (hover: hover){\n .menu:hover .icon{\n background: rgba(var(--text-color), 0.1); \n }\n}\n</style>\n<div class="select">\n <div class="menu" tabindex="0">\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 3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-7c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>\n </div>\n <div class="options hide">\n <slot></slot> \n </div>\n</div>',customElements.define("sm-menu",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smMenu.content.cloneNode(!0)),this.isOpen=!1,this.availableOptions,this.containerDimensions,this.animOptions={duration:200,easing:"ease"},this.optionList=this.shadowRoot.querySelector(".options"),this.menu=this.shadowRoot.querySelector(".menu"),this.icon=this.shadowRoot.querySelector(".icon"),this.expand=this.expand.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClickoutSide=this.handleClickoutSide.bind(this)}static get observedAttributes(){return["value"]}get value(){return this.getAttribute("value")}set value(n){this.setAttribute("value",n)}expand(){this.isOpen||(this.optionList.classList.remove("hide"),this.optionList.animate([{transform:window.innerWidth<640?"translateY(1.5rem)":"translateY(-1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animOptions).onfinish=(()=>{this.isOpen=!0,this.icon.classList.add("focused")}))}collapse(){this.isOpen&&(this.optionList.animate([{transform:"none",opacity:"1"},{transform:window.innerWidth<640?"translateY(1.5rem)":"translateY(-1rem)",opacity:"0"}],this.animOptions).onfinish=(()=>{this.isOpen=!1,this.icon.classList.remove("focused"),this.optionList.classList.add("hide")}))}toggle(){this.isOpen?this.collapse():this.expand()}handleKeyDown(n){n.target===this?"ArrowDown"===n.code?(n.preventDefault(),this.availableOptions[0].focus()):"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),this.toggle()):"ArrowUp"===n.code?(n.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===n.code?(n.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus()):"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),n.target.click())}handleClickoutSide(n){this.contains(n.target)||2===n.button||this.collapse()}connectedCallback(){this.setAttribute("role","listbox"),this.setAttribute("aria-label","dropdown menu");const n=this.shadowRoot.querySelector(".options slot");n.addEventListener("slotchange",n=>{this.availableOptions=n.target.assignedElements(),this.containerDimensions=this.optionList.getBoundingClientRect()}),this.addEventListener("click",this.toggle),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("mousedown",this.handleClickoutSide)}disconnectedCallback(){this.removeEventListener("click",this.toggle),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("mousedown",this.handleClickoutSide)}});const menuOption=document.createElement("template");menuOption.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 --padding: 0.6rem 1.6rem;\n}\n.option{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n min-width: 100%;\n padding: var(--padding);\n cursor: pointer;\n overflow-wrap: break-word;\n white-space: nowrap;\n outline: none;\n font-size: 1rem;\n user-select: none;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n:host(:focus){\n outline: none;\n background: rgba(var(--text-color), 0.1);\n}\n@media (any-hover: hover){\n :host{\n --padding: 0.8rem 1.6rem;\n }\n .option:hover{\n background: rgba(var(--text-color), 0.1);\n }\n}\n</style>\n<div class="option">\n <slot></slot> \n</div>',customElements.define("menu-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(menuOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option"),this.addEventListener("keyup",n=>{"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),this.click())})}});
|
|
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})}});
|
|
const smPopup=document.createElement("template");smPopup.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 position: fixed;\n display: -ms-grid;\n display: grid;\n z-index: 10;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --width: 100%;\n --height: auto;\n --min-width: auto;\n --min-height: auto;\n --body-padding: 1.5rem;\n --backdrop-background: rgba(0, 0, 0, 0.6);\n --border-radius: 0.8rem 0.8rem 0 0;\n}\n.popup-container{\n display: -ms-grid;\n display: grid;\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n place-items: center;\n background: var(--backdrop-background);\n -webkit-transition: opacity 0.3s;\n -o-transition: opacity 0.3s;\n transition: opacity 0.3s;\n z-index: 10;\n touch-action: none;\n}\n:host(.stacked) .popup{\n -webkit-transform: scale(0.9) translateY(-2rem) !important;\n transform: scale(0.9) translateY(-2rem) !important;\n}\n.popup{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n flex-direction: column;\n position: relative;\n -ms-flex-item-align: end;\n align-self: flex-end;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n width: var(--width);\n min-width: var(--min-width);\n height: var(--height);\n min-height: var(--min-height);\n max-height: 90vh;\n border-radius: var(--border-radius);\n -webkit-transform: scale(1) translateY(100%);\n transform: scale(1) translateY(100%);\n -webkit-transition: -webkit-transform 0.3s;\n transition: -webkit-transform 0.3s;\n -o-transition: transform 0.3s;\n transition: transform 0.3s, -webkit-transform 0.3s;\n transition: transform 0.3s;\n background: rgba(var(--background-color), 1);\n -webkit-box-shadow: 0 -1rem 2rem #00000020;\n box-shadow: 0 -1rem 2rem #00000020;\n content-visibility: auto;\n}\n.container-header{\n display: -webkit-box;\n display: flex;\n width: 100%;\n touch-action: none;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.popup-top{\n display: -webkit-box;\n display: flex;\n width: 100%;\n}\n.popup-body{\n display: -webkit-box;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n width: 100%;\n padding: var(--body-padding);\n overflow-y: auto;\n}\n.hide{\n opacity: 0;\n pointer-events: none;\n visiblity: none;\n}\n@media screen and (min-width: 640px){\n :host{\n --border-radius: 0.4rem;\n }\n .popup{\n -ms-flex-item-align: center;\n -ms-grid-row-align: center;\n align-self: center;\n border-radius: var(--border-radius);\n height: var(--height);\n -webkit-transform: scale(1) translateY(3rem);\n transform: scale(1) translateY(3rem);\n -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;\n box-shadow: 0 3rem 2rem -0.5rem #00000040;\n }\n}\n@media screen and (max-width: 640px){\n .popup-top{\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n flex-direction: column;\n -webkit-box-align: center;\n align-items: center;\n }\n .handle{\n height: 0.3rem;\n width: 2rem;\n background: rgba(var(--text-color), .4);\n border-radius: 1rem;\n margin: 0.5rem 0;\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}\n</style>\n<div part="background" class="popup-container hide" role="dialog">\n <div part="popup" class="popup">\n <div part="popup-header" class="popup-top">\n <div class="handle"></div>\n <slot name="header"></slot>\n </div>\n <div part="popup-body" class="popup-body">\n <slot></slot>\n </div>\n </div>\n</div>\n',customElements.define("sm-popup",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smPopup.content.cloneNode(!0)),this.allowClosing=!1,this.isOpen=!1,this.pinned=!1,this.popupStack,this.offset,this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimataion,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),this.popup=this.shadowRoot.querySelector(".popup"),this.popupBodySlot=this.shadowRoot.querySelector(".popup-body slot"),this.popupHeader=this.shadowRoot.querySelector(".popup-top"),this.resumeScrolling=this.resumeScrolling.bind(this),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.handleTouchStart=this.handleTouchStart.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.handleTouchEnd=this.handleTouchEnd.bind(this),this.movePopup=this.movePopup.bind(this)}static get observedAttributes(){return["open"]}get open(){return this.isOpen}resumeScrolling(){const t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}show(t={}){const{pinned:e=!1,popupStack:n}=t;return n&&(this.popupStack=n),this.popupStack&&!this.hasAttribute("open")&&(this.popupStack.push({popup:this,permission:e}),this.popupStack.items.length>1&&this.popupStack.items[this.popupStack.items.length-2].popup.classList.add("stacked"),this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.setAttribute("open",""),this.pinned=e,this.isOpen=!0),this.popupContainer.classList.remove("hide"),this.popup.style.transform="none",document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.popupStack}hide(){window.innerWidth<640?this.popup.style.transform="translateY(100%)":this.popup.style.transform="translateY(3rem)",this.popupContainer.classList.add("hide"),this.removeAttribute("open"),void 0!==this.popupStack?(this.popupStack.pop(),this.popupStack.items.length?this.popupStack.items[this.popupStack.items.length-1].popup.classList.remove("stacked"):this.resumeScrolling()):this.resumeScrolling(),this.forms.length&&setTimeout(()=>{this.forms.forEach(t=>t.reset())},300),setTimeout(()=>{this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.isOpen=!1},300)}handleTouchStart(t){this.touchStartY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.1s",this.touchStartTime=t.timeStamp}handleTouchMove(t){this.touchStartY<t.changedTouches[0].clientY&&(this.offset=t.changedTouches[0].clientY-this.touchStartY,this.touchEndAnimataion=window.requestAnimationFrame(()=>this.movePopup()))}handleTouchEnd(t){if(this.touchEndTime=t.timeStamp,cancelAnimationFrame(this.touchEndAnimataion),this.touchEndY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.3s",this.threshold=.3*this.popup.getBoundingClientRect().height,this.touchEndTime-this.touchStartTime>200)if(this.touchEndY-this.touchStartY>this.threshold){if(this.pinned)return void this.show();this.hide()}else this.show();else if(this.touchEndY>this.touchStartY){if(this.pinned)return void this.show();this.hide()}}movePopup(){this.popup.style.transform=`translateY(${this.offset}px)`}connectedCallback(){this.popupBodySlot.addEventListener("slotchange",()=>{this.forms=this.querySelectorAll("sm-form")}),this.popupContainer.addEventListener("mousedown",t=>{t.target!==this.popupContainer||this.pinned||(this.pinned?this.show():this.hide())});const t=new ResizeObserver(t=>{for(let e of t)if(e.contentBoxSize){Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize;this.threshold=.3*e.blockSize.height}else this.threshold=.3*e.contentRect.height});t.observe(this),this.popupHeader.addEventListener("touchstart",t=>{this.handleTouchStart(t)},{passive:!0}),this.popupHeader.addEventListener("touchmove",t=>{this.handleTouchMove(t)},{passive:!0}),this.popupHeader.addEventListener("touchend",t=>{this.handleTouchEnd(t)},{passive:!0})}disconnectedCallback(){this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.popupHeader.removeEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.removeEventListener("touchend",this.handleTouchEnd,{passive:!0}),resizeObserver.unobserve()}attributeChangedCallback(t,e,n){"open"===t&&this.hasAttribute("open")&&this.show()}});
|
|
const themeToggle=document.createElement("template");themeToggle.innerHTML='\n <style>\n *{\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n }\n :host{\n cursor: pointer;\n --height: 2.5rem;\n --width: 2.5rem;\n }\n .theme-toggle {\n display: flex;\n position: relative;\n width: 1.4rem;\n height: 1.4rem;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n .theme-toggle::after{\n content: \'\';\n position: absolute;\n height: var(--height);\n width: var(--width);\n top: 50%;\n left: 50%;\n opacity: 0;\n border-radius: 50%;\n pointer-events: none;\n transition: transform 0.3s, opacity 0.3s;\n transform: translate(-50%, -50%) scale(1.2);\n background-color: rgba(var(--text-color), 0.12);\n }\n :host(:focus-within) .theme-toggle{\n outline: none;\n }\n :host(:focus-within) .theme-toggle::after{\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n .icon {\n position: absolute;\n height: 100%;\n width: 100%;\n fill: rgba(var(--text-color), 1);\n transition: transform 0.6s;\n }\n \n .theme-switcher__checkbox {\n display: none;\n }\n :host([checked]) .moon-icon {\n transform: scale(0) rotate(90deg);\n }\n :host(:not([checked])) .sun-icon {\n transform: scale(0) rotate(-90deg);\n }\n </style>\n <label class="theme-toggle" title="Change theme" tabindex="0">\n <slot name="light-mode-icon">\n <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"\n height="24">\n <path fill="none" d="M0 0h24v24H0z" />\n <path\n d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z" />\n </svg>\n </slot>\n <slot name="dark-mode-icon">\n <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">\n <path fill="none" d="M0 0h24v24H0z" />\n <path\n d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" />\n </svg>\n </slot>\n </label>\n';class ThemeToggle extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(themeToggle.content.cloneNode(!0)),this.isChecked=!1,this.hasTheme="light",this.toggleState=this.toggleState.bind(this),this.fireEvent=this.fireEvent.bind(this),this.handleThemeChange=this.handleThemeChange.bind(this)}static get observedAttributes(){return["checked"]}daylight(){this.hasTheme="light",document.body.dataset.theme="light",this.setAttribute("aria-checked","false")}nightlight(){this.hasTheme="dark",document.body.dataset.theme="dark",this.setAttribute("aria-checked","true")}toggleState(){this.toggleAttribute("checked"),this.fireEvent()}handleKeyDown(e){"Space"===e.code&&this.toggleState()}handleThemeChange(e){e.detail.theme!==this.hasTheme&&("dark"===e.detail.theme?this.setAttribute("checked",""):this.removeAttribute("checked"))}fireEvent(){this.dispatchEvent(new CustomEvent("themechange",{bubbles:!0,composed:!0,detail:{theme:this.hasTheme}}))}connectedCallback(){this.setAttribute("role","switch"),this.setAttribute("aria-label","theme toggle"),"dark"===localStorage.theme?(this.nightlight(),this.setAttribute("checked","")):"light"===localStorage.theme?(this.daylight(),this.removeAttribute("checked")):window.matchMedia("(prefers-color-scheme: dark)").matches?(this.nightlight(),this.setAttribute("checked","")):(this.daylight(),this.removeAttribute("checked")),this.addEventListener("click",this.toggleState),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("themechange",this.handleThemeChange)}disconnectedCallback(){this.removeEventListener("click",this.toggleState),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("themechange",this.handleThemeChange)}attributeChangedCallback(e,t,n){"checked"===e&&(this.hasAttribute("checked")?(this.nightlight(),localStorage.setItem("theme","dark")):(this.daylight(),localStorage.setItem("theme","light")))}}window.customElements.define("theme-toggle",ThemeToggle);
|