1 line
5.7 KiB
JavaScript
1 line
5.7 KiB
JavaScript
|
(()=>{"use strict";class t{constructor(t,e,o){this.dropdownElement=null,this.selector=t,this.options=e,this.element=document.querySelector(this.selector),this.onClickItem=o.onClickItem,this.init()}init(){this.element&&(this.element.addEventListener("click",this.toggleDropdown.bind(this)),document.addEventListener("click",this.handleDocumentClick.bind(this)))}toggleDropdown(e){e.stopPropagation(),t.activeDropdown&&t.activeDropdown!==this&&t.activeDropdown.removeDropdown(),this.dropdownElement?this.removeDropdown():(this.createDropdown(),t.activeDropdown=this)}fadeIn(t,e){let o=0;const n=16.7/e,l=()=>{if(o+=n,o>=1)return o=1,void(t.style.opacity=String(o));t.style.opacity=String(o),requestAnimationFrame(l)};l()}fadeOut(t,e,o){let n=1;const l=16.7/e,i=t,d=()=>{if(i){if(n-=l,n<=0)return n=0,i.style.opacity=String(n),void o();i.style.opacity=String(n),requestAnimationFrame(d)}};d()}createDropdown(){this.dropdownElement=document.createElement("div"),this.dropdownElement.classList.add("dropdown-menu"),this.dropdownElement.style.opacity="0",this.options.forEach((t=>{const e=document.createElement("div");if(e.style.padding="8px 12px",e.style.color="var(--color-font-2)",e.style.borderRadius="var(--radius)",e.style.fontSize="13px",e.style.cursor="pointer",e.style.display="flex",e.style.alignItems="center",e.classList.add("dropdown-item"),t.icon){const o=document.createElement("span");o.innerHTML=t.icon,o.style.marginRight="8px",o.style.width="16px",o.style.height="16px",e.appendChild(o)}const o=document.createTextNode(String(t.label));e.appendChild(o),e.addEventListener("click",(()=>{var e;null===(e=this.onClickItem)||void 0===e||e.call(this,t.value),this.removeDropdown()})),e.addEventListener("mouseenter",(()=>{e.style.backgroundColor="var(--color-menu-hover)",e.style.color="var(--color-font)"})),e.addEventListener("mouseleave",(()=>{e.style.backgroundColor="",e.style.color="var(--color-font-2)"})),this.dropdownElement.appendChild(e)})),document.body.appendChild(this.dropdownElement);const t=this.element.getBoundingClientRect(),e=this.dropdownElement.offsetWidth,o=document.documentElement.clientWidth;this.dropdownElement.style.position="absolute",this.dropdownElement.style.top=`${t.bottom}px`,this.dropdownElement.style.minWidth="140px",this.dropdownElement.style.padding="6px 4px",this.dropdownElement.style.borderRadius="var(--radius)",this.dropdownElement.style.backdropFilter="var(--dropdown-bdf)",this.dropdownElement.style.background="var(--dropdown-bg)",this.dropdownElement.style.border="var(--dropdown-border)",this.dropdownElement.style.boxShadow="var(--dropdown-boxShadow)",this.dropdownElement.style.position="absolute",this.dropdownElement.style.top=`${t.top}px`,t.left+t.width/2<o/2?(this.dropdownElement.style.left=`${t.left}px`,this.dropdownElement.style.right="auto"):(this.dropdownElement.style.right=o-t.right+"px",this.dropdownElement.style.left="auto"),t.left+e>o?(this.dropdownElement.style.right=o-t.right+"px",this.dropdownElement.style.left="auto"):(this.dropdownElement.style.left=`${t.left}px`,this.dropdownElement.style.right="auto"),this.fadeIn(this.dropdownElement,150)}removeDropdown(){if(this.dropdownElement){const t=this.dropdownElement;this.fadeOut(t,150,(()=>{t.remove(),this.dropdownElement===t&&(this.dropdownElement=null)}))}}handleDocumentClick(){this.removeDropdown()}}t.activeDropdown=null,document.addEventListener("DOMContentLoaded",(()=>{const e=[{value:"all",label:window.i18n["tip-status-default"],icon:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle></svg>'},{value:"todo",label:window.i18n["tip-status-todo"],icon:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.56 3.69a9 9 0 0 0-2.92 1.95"></path><path d="M3.69 8.56A9 9 0 0 0 3 12"></path><path d="M3.69
|