@coderundebug/ui-web/ui-drawer.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import{UiTools as o}from"./ui-tools.js";export default class r extends HTMLElement{static _uiDrawerList=[];constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=r.uiHtml,this.shadowRoot.adoptedStyleSheets=[r.uiCssStyleSheet],this.o=this.shadowRoot.querySelector("dialog"),this.t=this.shadowRoot.querySelector(".modal"),this.i=this.i.bind(this),this.l=this.l.bind(this),this.m=this.m.bind(this)}connectedCallback(){r.h(this)}disconnectedCallback(){r.u(this)}i(o){const r=this.t.getBoundingClientRect();(o.clientY<r.top||o.clientY>r.top+r.height||o.clientX<r.left||o.clientX>r.left+r.width)&&this.p()}static open(o){r.v="";for(let e=0;e<r._uiDrawerList.length;e++){const t=r._uiDrawerList[e];if(!1!==t.hasAttribute("name")&&t.getAttribute("name")===o)return void t.k()}r.v=o}static close(o){r.v="";for(let e=0;e<r._uiDrawerList.length;e++){const t=r._uiDrawerList[e];!1!==t.hasAttribute("name")&&(t.getAttribute("name")===o&&t.p())}}k(){this.o.addEventListener("click",this.i),this.o.addEventListener("cancel",this.l),this.o.showModal()}p(){!0!==this._&&(this._=!0,this.o.addEventListener("animationend",this.m),this.o.classList.add("closing"))}m(){this.o.removeEventListener("animationend",this.m),this.o.classList.remove("closing"),this.D()}D(){this.o.removeEventListener("click",this.i),this.o.removeEventListener("cancel",this.l),this.o.close(),this._=!1}l(o){this.p(),o.preventDefault()}static h(o){r._uiDrawerList.push(o),!0===o.hasAttribute("name")&&o.getAttribute("name")===r.v&&(r.v="",o.k())}static u(o){if(r._uiDrawerList)for(let e=0;e<r._uiDrawerList.length;e++){if(r._uiDrawerList[e]===o)return void r._uiDrawerList.splice(e,1)}}}r.uiCss=" dialog{position:fixed;inset:0;margin:0;max-height:100%;max-width:100%;height:100%;width:100%;background-color:transparent;padding:0;border:none;outline:none;overflow:auto;display:none;}dialog[open]{display:grid;}.modal{margin:0;box-sizing:border-box;background-color:var(--ui-drawer-background, var(--ui-module-background, hsl(0 0% 97% / 1)));color:var(--ui-drawer-foreground, var(--ui-module-foreground, hsl(0 0% 18% / 1)));box-shadow:var(--ui-drawer-box-shadow, var(--ui-module-shadow, 0 1px 4px 0 rgb(from hsl(0 0% 18% / 1) r g b / 50%)));border:none;outline:none;}:host(:not([right]):not([top]):not([bottom])) .modal, :host([left]) .modal{justify-self:start;align-self:stretch;border-inline-end-style:var(--ui-drawer-border-style, var(--ui-module-border-style, none));border-inline-end-width:var(--ui-drawer-border-width, var(--ui-module-border-width, 0));border-inline-end-color:var(--ui-drawer-border-color, var(--ui-module-border-color, transparent));}:host([right]) .modal{justify-self:end;align-self:stretch;border-inline-start-style:var(--ui-drawer-border-style, var(--ui-module-border-style, none));border-inline-start-width:var(--ui-drawer-border-width, var(--ui-module-border-width, 0));border-inline-start-color:var(--ui-drawer-border-color, var(--ui-module-border-color, transparent));}:host([top]) .modal{justify-self:stretch;align-self:start;border-block-end-style:var(--ui-drawer-border-style, var(--ui-module-border-style, none));border-block-end-width:var(--ui-drawer-border-width, var(--ui-module-border-width, 0));border-block-end-color:var(--ui-drawer-border-color, var(--ui-module-border-color, transparent));}:host([bottom]) .modal{justify-self:stretch;align-self:end;border-block-start-style:var(--ui-drawer-border-style, var(--ui-module-border-style, none));border-block-start-width:var(--ui-drawer-border-width, var(--ui-module-border-width, 0));border-block-start-color:var(--ui-drawer-border-color, var(--ui-module-border-color, transparent));}dialog::backdrop{background-color:var(--ui-drawer-backdrop, var(--ui-module-backdrop, hsla(0, 0%, 97%, 0.25)));user-select:none;-webkit-user-select:none;transition:background-color var(--ui-animation-duration-default, 200ms) linear;}dialog::-webkit-scrollbar{display:none;}dialog[open] .modal{animation-name:left-open;animation-duration:var(--ui-animation-duration-default, 200ms);animation-timing-function:ease-out;}:host([right]) dialog[open] .modal{animation-name:right-open;}:host([top]) dialog[open] .modal{animation-name:top-open;}:host([bottom]) dialog[open] .modal{animation-name:bottom-open;}@keyframes left-open{0%{transform:translateX(-100%);}} @keyframes right-open{0%{transform:translateX(100%);}} @keyframes top-open{0%{transform:translateY(-100%);}} @keyframes bottom-open{0%{transform:translateY(100%);}} ::slotted(*:not(:defined)){display:none;}dialog[open].closing .modal{animation-name:left-close;animation-duration:var(--ui-animation-duration-default, 200ms);animation-timing-function:ease-in;}:host([right]) dialog[open].closing .modal{animation-name:right-close;}:host([top]) dialog[open].closing .modal{animation-name:top-close;}:host([bottom]) dialog[open].closing .modal{animation-name:bottom-close;}@keyframes left-close{100%{transform:translateX(-100%);}} @keyframes right-close{100%{transform:translateX(100%);}} @keyframes top-close{100%{transform:translateY(-100%);}} @keyframes bottom-close{100%{transform:translateY(100%);}} @media (forced-colors:active) or (prefers-contrast:more){.modal{border:none !important;border-style:solid !important;border-width:2px !important;border-color:var(--ui-foreground, hsl(0 0% 18% / 1)) !important;box-shadow:none !important;}} @media (prefers-reduced-motion){dialog[open].closing .modal{animation-duration:2ms;}}",r.uiHtml='<dialog><div class="modal"><slot></slot></div></dialog>',o.createUi(r,"ui-drawer",import.meta.url);