splitter-min.js

/* splitter.js by C. Mames is licensed under the GNU General Public License v3.0 https://github.com/cmames/splitter.js */function dragElement(e){const t=e.previousElementSibling,i=e.nextElementSibling;let s,o,n,l,d="splitH"===e.parentNode.className,h="splitV"===e.parentNode.className;function r(){document.body.style.cursor="default",document.removeEventListener("mousemove",f),document.removeEventListener("mouseup",r),t.removeChild(n),i.removeChild(l)}function f(o){var r=o.clientX-s.clientX,f=o.clientY-s.clientY;d&&(e.style.left=s.offsetLeft+r+"px",t.style.width=s.firstWidth+r+"px",i.style.width=window.innerWidth-e.offsetWidth-t.offsetWidth+"px"),h&&(e.style.top=s.offsetTop+f+"px",t.style.height=s.firstHeight+f+"px",i.style.height=window.innerHeight-e.offsetHeight-t.offsetHeight+"px"),n.textContent=t.offsetWidth+"x"+t.offsetHeight,l.textContent=i.offsetWidth+"x"+i.offsetHeight}Object.assign(e.style,{backgroundColor:"#A0A0A0",width:"100%",height:"100%",mozUserSelect:"none",msUserSelect:"none",userSelect:"none",backgroundRepeat:"no-repeat",backgroundPosition:"center"}),Object.assign(e.parentNode.style,{margin:"0px",padding:"0px",display:"flex",width:"100%",height:"100%"}),t.style.position="relative",i.style.position="relative",d&&(o="col-resize",t.style.minWidth="50px",i.style.minWidth="50px",t.style.minHeight="50px",i.style.minHeight="50px",e.style.minHeight="50px",e.style.width="5px",e.style.backgroundImage="url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='5' height='40'><path d='M2 0 V40' fill='none' stroke='black'/></svg>\")",e.parentNode.style.flexDirection="row"),h&&(o="row-resize",t.style.minHeight="50px",i.style.minHeight="50px",t.style.minWidth="50px",i.style.minWidth="50px",e.style.minWidth="50px",e.style.height="5px",e.style.backgroundImage="url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='5'><path d='M0 2 H40' fill='node' stroke='black'/></svg>\")",e.parentNode.style.flexDirection="column"),e.style.cursor=o,window.addEventListener("resize",(()=>{i.style.width=window.innerWidth-t.offsetWidth-e.offsetWidth+"px",i.style.height=window.innerHeight-t.offsetHeight-e.offsetHeight+"px"})),e.addEventListener("mousedown",(a=>{s={clientX:a.clientX,clientY:a.clientY,offsetLeft:e.offsetLeft,offsetTop:e.offsetTop,firstWidth:t.offsetWidth,secondWidth:i.offsetWidth,firstHeight:t.offsetHeight,secondHeight:i.offsetHeight},n=document.createElement("span"),l=document.createElement("span"),n.style.position="absolute",l.style.position="absolute",n.style.padding="5px",l.style.padding="5px",n.textContent=t.offsetWidth+"x"+t.offsetHeight,l.textContent=i.offsetWidth+"x"+i.offsetHeight,d&&(n.style.left="auto",n.style.right="0",l.style.left="0",n.style.top="0",l.style.top="0"),h&&(n.style.left="auto",n.style.right="0",n.style.top="auto",n.style.bottom="0",l.style.left="auto",l.style.right="0",l.style.top="0"),n.style.backgroundColor="rgba(0,0,0,0.5)",n.style.color="white",l.style.backgroundColor="rgba(0,0,0,0.5)",l.style.color="white",t.appendChild(n),i.appendChild(l),document.body.style.cursor=o,document.addEventListener("mousemove",f),document.addEventListener("mouseup",r)}))}document.querySelectorAll(".separator").forEach((e=>{dragElement(e)}));