vicowa-web-components/dist/vicowa-sidebar/vicowa-sidebar.js

Various web components

import{WebComponentBaseClass as t}from"/third_party/web-component-base-class/dist/web-component-base-class.js";window.customElements.define("vicowa-sidebar",class VicowaSideBar extends t{constructor(){super()}static get properties(){return{location:{type:String,value:"left",reflectToAttribute:!0},expanded:{type:Boolean,value:!0,reflectToAttribute:!0},resizeable:{type:Boolean,value:!1,reflectToAttribute:!0},floating:{type:Boolean,value:!1,reflectToAttribute:!0},forceNonFloating:{type:Boolean,value:!1,reflectToAttribute:!0}}}attached(){let t=0,n=0,o=!1,e=1,i=0;const s=s=>{const a=o?s.clientY:s.clientX,l=n-e*(t-a);if(this.$.sideContent.style.flexBasis=`${Math.min(i,Math.max(0,l))}px`,o){const t=this.$.resizeHandle.getBoundingClientRect().height;this.$.innerContainer.style.minHeight=`${Math.min(i,Math.max(0,l-t))}px`,this.$.sideContent.style.height=`${Math.min(i,Math.max(0,l))}px`}else{const t=this.$.resizeHandle.getBoundingClientRect().width;this.$.innerContainer.style.minWidth=`${Math.min(i,Math.max(0,l-t))}px`,this.$.sideContent.style.width=`${Math.min(i,Math.max(0,l))}px`}},a=t=>{t.clientX=t.touches[0].clientX,t.clientY=t.touches[0].clientY,s(t)},l=()=>{this.classList.toggle("resizing",!1),this.removeAutoEventListener(window,"mouseup",l),this.removeAutoEventListener(window,"touchend",l),this.removeAutoEventListener(window,"mousemove",s),this.removeAutoEventListener(window,"touchmove",a)},c=c=>{o="top"===this.location||"bottom"===this.location,e="bottom"===this.location||"right"===this.location?-1:1,i=o?this.$.main.getBoundingClientRect().height:this.getBoundingClientRect().width,n=o?this.$.sideContent.getBoundingClientRect().height:this.$.sideContent.getBoundingClientRect().width,this.addAutoEventListener(window,"mouseup",l),this.addAutoEventListener(window,"touchend",l),this.addAutoEventListener(window,"mousemove",s),this.addAutoEventListener(window,"touchmove",a),this.classList.toggle("resizing",!0),t=o?c.clientY:c.clientX,console.log(`start ${t}`)};this.addAutoEventListener(this.$.resizeHandle,"mousedown",c),this.addAutoEventListener(this.$.resizeHandle,"touchstart",(t=>{t.clientX=t.touches[0].clientX,t.clientY=t.touches[0].clientY,c(t)}))}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}\n\t\t\n\t\t\t\t#main {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\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\talign-content: stretch;\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([location="top"]) #main,\n\t\t\t\t:host([location="bottom"]) #main,\n\t\t\t\t:host([location="top"]) #side-content,\n\t\t\t\t:host([location="bottom"]) #side-content {\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t}\n\t\t\n\t\t\t\t#side-content {\n\t\t\t\t\tposition: relative;\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\talign-content: stretch;\n\t\t\t\t\tjustify-content: flex-end;\n\t\t\t\t\tflex: 0 0 var(--vicowa-sidebar-size, 300px);\n\t\t\t\t\torder: 0;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([location="right"]) #side-content,\n\t\t\t\t:host([location="bottom"]) #side-content {\n\t\t\t\t\tjustify-content: flex-start;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([location="left"]) #side-content,\n\t\t\t\t:host([location="right"]) #side-content {\n\t\t\t\t\theight: 100%;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([location="top"]) #side-content,\n\t\t\t\t:host([location="bottom"]) #side-content {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([expanded][location="left"]) #side-content,\n\t\t\t\t:host([expanded][location="right"]) #side-content {\n\t\t\t\t\tmax-width: 100%;\n\t\t\t\t\twidth: var(--vicowa-sidebar-size, 300px);\n\t\t\t\t\ttransition: max-width 0.5s cubic-bezier(1,0,1,0);\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([expanded][location="top"]) #side-content,\n\t\t\t\t:host([expanded][location="bottom"]) #side-content {\n\t\t\t\t\ttransition: max-height 0.5s cubic-bezier(1,0,1,0);\n\t\t\t\t\theight: var(--vicowa-sidebar-size, 300px);\n\t\t\t\t\tmax-height: 100%;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([location="left"]) #side-content,\n\t\t\t\t:host([location="right"]) #side-content {\n\t\t\t\t\ttransition: max-width 0.75s cubic-bezier(0,1,0,1);\n\t\t\t\t\tmax-width: 0;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([location="top"]) #side-content,\n\t\t\t\t:host([location="bottom"]) #side-content {\n\t\t\t\t\ttransition: max-height 0.75s cubic-bezier(0,1,0,1);\n\t\t\t\t\tmax-height: 0;\n\t\t\t\t}\n\t\t\n\t\t\t\t#innerContainer {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tmin-width: calc(var(--vicowa-sidebar-size, 300px) - var(--vicowa-sidebar-resizer-size, 5px));\n\t\t\t\t\theight: 100%;\n\t\t\t\t\torder: 1;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([location="top"]) #innerContainer,\n\t\t\t\t:host([location="bottom"]) #innerContainer {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: calc(var(--vicowa-sidebar-size, 300px) - var(--vicowa-sidebar-resizer-size, 5px));\n\t\t\t\t}\n\t\t\n\t\t\t\t#main-content {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\torder: 2;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([location="right"]) #side-content,\n\t\t\t\t:host([location="bottom"]) #side-content {\n\t\t\t\t\torder: 2;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([location="right"]) #resize-handle,\n\t\t\t\t:host([location="bottom"]) #resize-handle {\n\t\t\t\t\torder: 0;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([location="right"]) #main-content,\n\t\t\t\t:host([location="bottom"]) #main-content {\n\t\t\t\t\torder: 0;\n\t\t\t\t}\n\t\t\n\t\t\t\t#resize-handle {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tdisplay: none;\n\t\t\t\t\tcursor: col-resize;\n\t\t\t\t\tflex: 0 0 var(--vicowa-sidebar-resizer-size, 5px);\n\t\t\t\t\torder: 2;\n\t\t\t\t\tbackground: white;\n\t\t\t\t\toverflow: visible;\n\t\t\t\t}\n\t\t\n\t\t\t\t#hitarea {\n\t\t\t\t\tbackground: transparent;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\twidth: var(--vicowa-sidebar-min-hit-area, 7px);\n\t\t\t\t\tleft: var(--vicowa-sidebar-min-hit-area-start, -3px);\n\t\t\t\t\ttop: 0;\n\t\t\t\t\theight: 100%;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([location="top"]) #hitarea,\n\t\t\t\t:host([location="bottom"]) #hitarea {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\ttop: var(--vicowa-sidebar-min-hit-area-start, -3px);\n\t\t\t\t\theight: var(--vicowa-sidebar-min-hit-area, 7px);\n\t\t\t\t}\n\t\t\n\t\t\t\t.dragarea {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t\tposition: fixed;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tright: 0;\n\t\t\t\t\tbottom: 0;\n\t\t\t\t\tbackground: transparent;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host(.resizing) .dragarea {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tz-index: 10;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([location="top"]) #resize-handle,\n\t\t\t\t:host([location="bottom"]) #resize-handle {\n\t\t\t\t\tcursor: row-resize;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([resizeable]) #resize-handle {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([floating]) main {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([floating]) #side-content {\n\t\t\t\t\tbox-shadow: 0 0 12px gray;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([floating][location="left"]) #side-content {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tleft: 0;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([floating][location="top"]) #side-content {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\ttop: 0;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([floating][location="right"]) #side-content {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tright: 0;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([floating][location="bottom"]) #side-content {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tbottom: 0;\n\t\t\t\t}\n\t\t\n\t\t\t\t@media screen and (max-width: 600px) {\n\t\t\t\t\t:host(:not([force-non-floating])[location="left"]) #side-content,\n\t\t\t\t\t:host(:not([force-non-floating])[location="right"]) #side-content {\n\t\t\t\t\t\tbox-shadow: 0 0 12px gray;\n\t\t\t\t\t}\n\t\t\t\n\t\t\t\t\t:host(:not([force-non-floating])[location="left"]) main,\n\t\t\t\t\t:host(:not([force-non-floating])[location="right"]) main {\n\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t}\n\t\t\t\n\t\t\t\t\t:host(:not([force-non-floating])[location="left"]) #side-content {\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\tleft: 0;\n\t\t\t\t\t}\n\t\t\t\n\t\t\t\t\t:host(:not([force-non-floating])[location="right"]) #side-content {\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\tright: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@media screen and (max-height: 500px) {\n\t\t\t\t\t:host(:not([force-non-floating])[location="top"]) #side-content,\n\t\t\t\t\t:host(:not([force-non-floating])[location="bottom"]) #side-content {\n\t\t\t\t\t\tbox-shadow: 0 0 12px gray;\n\t\t\t\t\t}\n\t\t\t\n\t\t\t\t\t:host(:not([force-non-floating])[location="top"]) main,\n\t\t\t\t\t:host(:not([force-non-floating])[location="bottom"]) main {\n\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t}\n\t\t\t\n\t\t\t\t\t:host(:not([force-non-floating])[location="top"]) #side-content {\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\ttop: 0;\n\t\t\t\t\t}\n\t\t\t\n\t\t\t\t\t:host(:not([force-non-floating])[location="bottom"]) #side-content {\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\tbottom: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<div id="main">\n\t\t\t\t<div id="main-content"><slot name="main-content"></slot></div>\n\t\t\t\t<div id="side-content"><div id="innerContainer"><slot name="side-content"></slot></div><div id="resize-handle"><div id="hitarea"></div><slot name="hitarea-content"></slot><div class="dragarea"></div></div></div>\n\t\t\t</div>\n\t\t'}});
//# sourceMappingURL=vicowa-sidebar.js.map