2 lines
1.1 KiB
JavaScript
2 lines
1.1 KiB
JavaScript
|
globalThis.Component.register("Resizer",e=>{e.isVertical=e.hasAttribute("vertical");const t=parseInt(e.getAttribute("min"))||10,i=parseInt(e.getAttribute("max"))||1e3,s=()=>e.target||e.previousElementSibling;e.addEventListener("bind",t=>{void 0!==t.detail&&null!==t.detail&&(s().style[e.isVertical?"height":"width"]=t.detail+"px")});const n=(s,n,l)=>{const r=s+(e.isVertical?l:n);return r<t?t:r>i?i:r};e.addEventListener("mousedown",t=>{const i=s(),l=e.isVertical?i.offsetHeight:i.offsetWidth;globalThis.MouseMover.start(t,{onmousemove:({w:t,h:s})=>{const r=n(l,t,s);i.style[e.isVertical?"height":"width"]=r+"px",e.dispatchEvent(new CustomEvent("resizing",{detail:{oldSize:l,newSize:r},bubbles:!1}))},onmouseup:({w:t,h:i})=>{const s=n(l,t,i);e.dispatchEvent(new CustomEvent("resize",{detail:{oldSize:l,newSize:s},bubbles:!1})),e.dispatchEvent(new CustomEvent("change",{detail:s,bubbles:!1}))}})})},globalThis.Util.makeDom("\n<div $class=\"border-${this.isVertical?'top':'start'} flex-shrink-0\" $style=\"${this.isVertical?'height':'width'}:3px;${!this.isVertical?'height':'width'}:100%;cursor:${this.isVertical?'row-resize':'col-resize'}\"></div>\n"));
|