1 line
6.7 KiB
JavaScript
1 line
6.7 KiB
JavaScript
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}\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 top: 100%;\n padding: 0.3rem;\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: var(--background, rgba(var(--background-color), 1));\n border-radius: var(--border-radius, 0.5rem);\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 (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 <slot name="icon">\n <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>\n </slot>\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.handleClick=this.handleClick.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:"translateY(-1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animOptions).onfinish=(()=>{this.isOpen=!0,this.icon.classList.add("focused"),document.addEventListener("mousedown",this.handleClickOutside);const n=this.optionList.firstElementChild.assignedElements().find(n=>"MENU-OPTION"===n.tagName);n&&n.focus()}))}collapse(){this.isOpen&&(this.optionList.animate([{transform:"none",opacity:"1"},{transform:"translateY(-1rem)",opacity:"0"}],this.animOptions).onfinish=(()=>{this.isOpen=!1,this.icon.classList.remove("focused"),this.optionList.classList.add("hide"),document.removeEventListener("mousedown",this.handleClickOutside)}))}toggle(){this.isOpen?this.collapse():this.expand()}handleClick(n){n.target===this?this.toggle():this.collapse()}handleKeyDown(n){n.target===this?"ArrowDown"===n.key?(n.preventDefault(),this.availableOptions[0].focus()):" "===n.key&&(n.preventDefault(),this.toggle()):"ArrowUp"===n.key?(n.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===n.key?(n.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus()):"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),n.target.click(),this.collapse(),this.menu.focus())}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.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),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 box-sizing: border-box;\n} \n:host{\n display: flex;\n border-radius: var(--border-radius,0.3rem);\n overflow: hidden;\n}\n.option{\n display: flex;\n min-width: 100%;\n padding: var(--padding, 0.6rem 1rem);\n cursor: pointer;\n overflow-wrap: break-word;\n white-space: nowrap;\n outline: none;\n user-select: none;\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 .option{\n transition: background-color 0.2s;\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.setAttribute("tabindex","0"),this.addEventListener("keyup",n=>{"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),this.click())})}}); |