vicowa-web-components/dist/vicowa-hierarchical-palette/vicowa-hierarchical-palette.js

Various web components

import{WebComponentBaseClass as t}from"/third_party/web-component-base-class/dist/web-component-base-class.js";import"../vicowa-string/vicowa-string.js";import"../vicowa-icon/vicowa-icon.js";import"../vicowa-resize-detector/vicowa-resize-detector.js";const e=Symbol("itemData");window.customElements.define("vicowa-hierarchical-palette",class VicowaHierarchicalPalette extends t{#t;constructor(){super(),this.getData=null,this.factory=null,this.#t={activePaletteRoot:null,pageSize:10,items:{items:[],totalItemCount:0},path:[],fillSequenceIndex:0}}static get properties(){return{paletteSize:{type:Number,value:50,reflectToAttribute:!0,observer:t=>t.#e()},itemSize:{type:Number,value:50,reflectToAttribute:!0,observer:t=>t.#e()},horizontal:{type:Boolean,value:!1,reflectToAttribute:!0,observer:t=>t.#e()}}}attached(){const t=this.#t;this.$.resizeDetector.addObserver((()=>{this.#i()}),this);this.addAutoEventListener(this.$.moveToStart,"mousedown",(()=>{this.horizontal?this.$.itemsContainer.scrollLeft-=10:this.$.itemsContainer.scrollTop-=10;const t=setInterval((()=>{this.horizontal?this.$.itemsContainer.scrollLeft-=10:this.$.itemsContainer.scrollTop-=10,this.#i()}),100),e=()=>{window.removeEventListener("mouseup",e),clearInterval(t)};window.addEventListener("mouseup",e,!0)})),this.addAutoEventListener(this.$.moveToEnd,"mousedown",(()=>{this.horizontal?this.$.itemsContainer.scrollLeft+=10:this.$.itemsContainer.scrollTop+=10;const t=setInterval((()=>{this.horizontal?this.$.itemsContainer.scrollLeft+=10:this.$.itemsContainer.scrollTop+=10,this.#i()}),100),e=()=>{window.removeEventListener("mouseup",e),clearInterval(t)};window.addEventListener("mouseup",e,!0)})),this.addAutoEventListener(this.$.itemsContainer,"wheel",(t=>{this.horizontal?this.$.itemsContainer.scrollLeft+=t.deltaY:this.$.itemsContainer.scrollTop+=t.deltaY,this.#i()})),this.addAutoEventListener(this.$.back,"click",(async()=>{t.activePaletteRoot=this.$.back.getAttribute("target");const e=this.$.prevItemsContainer;await this.#e(e),this.$.containersContainer.classList.add("animate");const i=t.path.pop();this.horizontal?(e.scrollLeft=i.scrollOffset,this.$.containersContainer.style.top=0):(e.scrollTop=i.scrollOffset,this.$.containersContainer.style.left=0),this.$.back.setAttribute("target",(t.path[t.path.length-1]||{target:""}).target)})),this.$.containersContainer.addEventListener("transitionend",(()=>{if(this.$.containersContainer.classList.remove("animate"),this.$.itemsContainer.innerHTML="",this.horizontal){const t="0px"===this.$.containersContainer.style.top?this.$.prevItemsContainer:this.$.nextItemsContainer,e=t.scrollLeft;Array.from(t.children).forEach((t=>{this.$.itemsContainer.appendChild(t)})),this.$.containersContainer.style.top=-this.paletteSize+"px",this.$.itemsContainer.scrollLeft=e}else{const t="0px"===this.$.containersContainer.style.left?this.$.prevItemsContainer:this.$.nextItemsContainer,e=t.scrollTop;Array.from(t.children).forEach((t=>{this.$.itemsContainer.appendChild(t)})),this.$.containersContainer.style.left=-this.paletteSize+"px",this.$.itemsContainer.scrollTop=e}this.$.prevItemsContainer.innerHTML="",this.$.nextItemsContainer.innerHTML="";const e=new RegExp(`^item-slot-${t.fillSequenceIndex}`);Array.from(this.querySelectorAll('[slot^="item-slot-"]')).filter((t=>!e.test(t.slot))).forEach((t=>this.removeChild(t))),this.#i()}))}initialize(t){this.#t.settings=Object.assign({topLevel:null},t),this.#t.activePaletteRoot=this.#t.settings.topLevel,this.#e()}#i(){const t=this.#t,e=this.horizontal?this.$.container.offsetWidth:this.$.container.offsetHeight;t.pageSize=Math.floor(e/this.itemSize),this.$.moveToStart.classList.toggle("disabled",this.horizontal?0===this.$.itemsContainer.scrollLeft:0===this.$.itemsContainer.scrollTop),this.$.moveToEnd.classList.toggle("disabled",this.horizontal?this.$.itemsContainer.scrollLeft>=this.$.itemsContainer.scrollWidth-this.$.itemsContainer.offsetWidth:this.$.itemsContainer.scrollTop>=this.$.itemsContainer.scrollHeight-this.$.itemsContainer.offsetHeight),this.$.back.classList.toggle("disabled",0===t.path.length)}async#e(t){if(t=t||this.$.itemsContainer,this.getData){this.horizontal?(this.style.height=`${this.paletteSize}px`,this.$.containersContainer.style.height=3*this.paletteSize+"px",this.$.containersContainer.style.top=-this.paletteSize+"px"):(this.style.width=`${this.paletteSize}px`,this.$.containersContainer.style.width=3*this.paletteSize+"px",this.$.containersContainer.style.left=-this.paletteSize+"px");const i=this.horizontal?this.$.container.offsetWidth:this.$.container.offsetHeight,n=this.#t;for(n.fillSequenceIndex++,this.itemSize=Math.max(this.itemSize,10),n.pageSize=Math.ceil(i/this.itemSize)+6,n.items=await this.getData("root"!==n.activePaletteRoot?n.activePaletteRoot:null,0,100);n.items.items.length<n.items.totalItemCount;){const t=await this.getData("root"!==n.activePaletteRoot?n.activePaletteRoot:null,n.items.items.length,100);n.items.items=n.items.items.concat(t.items)}t.innerHTML="",Array.from(this.querySelectorAll(`[slot^="item-slot-${n.fillSequenceIndex}-"]`)).forEach((t=>this.removeChild(t))),n.items.items.forEach(((i,o)=>{const s=document.importNode(this.$.itemTemplate.content,!0).querySelector('div[name="item-container"]');s[e]=i,s.style.width=this.horizontal?`${this.itemSize}px`:"",s.style.height=this.horizontal?"":`${this.itemSize}px`,i.subLevel&&s.classList.add("sub-level");const a=this.factory(i),r=s.querySelector("slot");r.name=`item-slot-${n.fillSequenceIndex}-${o}`,a.slot=r.name,this.appendChild(a),t.appendChild(s),s.addEventListener("click",(async()=>{i.subLevel?(this.$.back.setAttribute("target",n.activePaletteRoot||"root"),n.path.push({target:n.activePaletteRoot||"root",scrollOffset:this.horizontal?this.$.itemsContainer.scrollLeft:this.$.itemsContainer.scrollTop}),n.activePaletteRoot=i.path,await this.#e(this.$.nextItemsContainer),this.$.containersContainer.classList.add("animate"),this.$.nextItemsContainer.scrollLeft=this.$.nextItemsContainer.scrollTop=0,this.horizontal?this.$.containersContainer.style.top=2*-this.paletteSize+"px":this.$.containersContainer.style.left=2*-this.paletteSize+"px"):this.onClick&&this.onClick(i)}))}))}this.#i()}static get template(){return'\n\t\t\t<style>\n\t\t\t\t:host {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t}\n\t\t\n\t\t\t\t#container {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t}\n\t\t\n\t\t\t\t#container,\n\t\t\t\t#containers-container,\n\t\t\t\t.items-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t\talign-items: stretch;\n\t\t\t\t}\n\t\t\n\t\t\t\t#containers-container {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: row;\n\t\t\t\t\talign-items: stretch;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t}\n\n\t\t\t\t.items-container {\n\t\t\t\t\tflex: 0 0 33%;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([horizontal]) #containers-container {\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([horizontal]) #container,\n\t\t\t\t:host([horizontal]) .items-container {\n\t\t\t\t\tflex-direction: row;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t}\n\t\t\t\t#move-to-start,\n\t\t\t\t#move-to-end {\n\t\t\t\t\tflex: 0 0 auto;\n\t\t\t\t}\n\n\t\t\t\t:host(:not([horizontal])) #move-to-start slot > div,\n\t\t\t\t:host(:not([horizontal])) #move-to-end slot > div {\n\t\t\t\t\ttransform: rotate(90deg);\n\t\t\t\t}\n\n\t\t\t\tdiv[name="item-container"] {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tflex: 0 0 auto;\n\t\t\t\t\tuser-select: none;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t}\n\n\t\t\t\t.button {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tborder-bottom: var(--vicowa-hierarchical-palette-button-border, 1px solid grey);\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tuser-select: none;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t}\n\n\t\t\t\t:host([horizontal]) .button {\n\t\t\t\t\tborder-bottom: 0;\n\t\t\t\t\tborder-top: 0;\n\t\t\t\t\tborder-right: var(--vicowa-hierarchical-palette-button-border, 1px solid grey);\n\t\t\t\t}\n\n\t\t\t\t.button:last-child {\n\t\t\t\t\tborder-top: var(--vicowa-hierarchical-palette-button-border, 1px solid grey);\n\t\t\t\t\tborder-bottom: 0;\n\t\t\t\t}\n\t\t\t\t:host([horizontal]) .button:last-child {\n\t\t\t\t\tborder-left: var(--vicowa-hierarchical-palette-button-border, 1px solid grey);\n\t\t\t\t\tborder-right: 0;\n\t\t\t\t}\n\n\t\t\t\t:host(:not([search])) #search {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\n\t\t\t\tdiv[name="item-container"]:hover {\n\t\t\t\t\tbackground: var(--vicowa-hierarchical-palette-hover-background, #8888ff);\n\t\t\t\t\tcolor: var(--vicowa-hierarchical-palette-hover-color, white);\n\t\t\t\t}\n\t\t\t\tdiv[name="item-container"].active {\n\t\t\t\t\tbackground: var(--vicowa-hierarchical-palette-active-background, #8888ff);\n\t\t\t\t\tcolor: var(--vicowa-hierarchical-palette-active-color, white);\n\t\t\t\t}\n\t\t\n\t\t\t\t#containers-container.animate {\n\t\t\t\t\ttransition: left var(--vicowa-hierarchical-palette-transition-time, .5s), top var(--vicowa-hierarchical-palette-transition-time, .5s);\n\t\t\t\t}\n\t\t\n\t\t\t\t.button.disabled {\n\t\t\t\t\topacity: 0.5;\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t}\n\t\t\n\t\t\t\t#move-to-end:not(.disabled) {\n\t\t\t\t\tbox-shadow: 0 -2px 4px grey;\n\t\t\t\t}\n\t\t\t\t#move-to-start:not(.disabled) {\n\t\t\t\t\tbox-shadow: 0 2px 4px grey;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([horizontal]) #move-to-end:not(.disabled) {\n\t\t\t\t\tbox-shadow: -2px 0 4px grey;\n\t\t\t\t}\n\t\t\t\t:host([horizontal]) #move-to-start:not(.disabled) {\n\t\t\t\t\tbox-shadow: 2px 0 4px grey;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<template id="item-template">\n\t\t\t\t<div name="item-container"><slot></slot></div>\n\t\t\t</template>\n\t\t\t<div id="container">\n\t\t\t\t<vicowa-resize-detector id="resize-detector"></vicowa-resize-detector>\n\t\t\t\t<div class="button" id="search">Search<vicowa-input id="search"></vicowa-input></div>\n\t\t\t\t<div class="button" id="back"><slot name="back-button"><div>Back</div></slot></div>\n\t\t\t\t<div class="button" id="move-to-start"><slot name="move-to-start"><div>&lt;</div></slot></div>\n\t\t\t\t<div id="containers-container"><div class="items-container" id="prev-items-container"></div><div class="items-container" id="items-container"></div><div class="items-container" id="next-items-container"></div></div>\n\t\t\t\t<div class="button" id="move-to-end"><slot name="move-to-end"><div>&gt;</div></slot></div>\n\t\t\t</div>\n\t\t'}});
//# sourceMappingURL=vicowa-hierarchical-palette.js.map