split-pane-vue3
Version:
2 lines (1 loc) • 5.99 kB
JavaScript
(function(s,C){typeof exports=="object"&&typeof module<"u"?module.exports=C(require("vue")):typeof define=="function"&&define.amd?define(["vue"],C):(s=typeof globalThis<"u"?globalThis:s||self,s.PageSplit=C(s.Vue))})(this,function(s){"use strict";const C="",$=(e,t)=>{const i=e.__vccOpts||e;for(const[o,n]of t)i[o]=n;return i},L={data(){return{resizeLinePaneId:`resize-line-pane-${this.geneRamdId()}`,resizeLineId:`resize-line-${this.geneRamdId()}`,pane1stId:`pane-1st-${this.geneRamdId()}`,pane2ndId:`pane-2nd-${this.geneRamdId()}`,resizeTimeout:null,interval:500}},props:{distribute:{type:Number,default:.5,validator:function(e){return e>0&&e<1}},isVertical:{type:Boolean,default:!0},lineThickness:{type:Number,default:2,validator:function(e){return e>=1}},hasLineTip:{type:Boolean,default:!0},backgroundColor:{type:String,default:"#a0cfff"},hoverColor:{type:String,default:"#409eff"},hasBoxShadow:{type:Boolean,default:!0},firstMinValue:{type:Number,default:0,validator:function(e){return e>=0}},secondMinValue:{type:Number,default:0,validator:function(e){return e>=0}},isFirstComponentMasked:{type:Boolean,default:!1},isSecondComponentMasked:{type:Boolean,default:!1}},watch:{isVertical:function(){this.init()},distribute:function(){this.init()}},mounted(){this.init(),window.addEventListener("resize",this.$_eventCallback,!1)},unmounted(){window.removeEventListener("resize",this.$_eventCallback)},methods:{init(){const e=document.getElementById(this.resizeLinePaneId),t=document.getElementById(this.resizeLineId),i=document.getElementById(this.pane1stId),o=document.getElementById(this.pane2ndId);if(t.style.backgroundColor=this.backgroundColor,this.hasBoxShadow&&(t.style.boxShadow="0px 0px 1px inset"),this.hasLineTip){let l=t.getElementsByClassName("tip")[0].getElementsByClassName("line");for(const I of l)I.style.backgroundColor=this.hoverColor}let n=this.isVertical?e.offsetWidth:e.offsetHeight,r=this.lineThickness/n,p=0,z=0;this.firstMinValue>0&&(p=this.firstMinValue/n),this.secondMinValue>0&&(z=this.secondMinValue/n);let y=r/2,d=this.distribute-y,a=1-this.distribute-y;p>d?(d=p,a=1-d-r):z>a&&(a=z,d=1-a-r);let V=d*100,M=a*100;this.isVertical?(i.style.width=V+"%",o.style.width=M+"%",t.style.width=this.lineThickness+"px",i.style.height=null,o.style.height=null,t.style.height=null):(i.style.height=V+"%",o.style.height=M+"%",t.style.height=this.lineThickness+"px",i.style.width=null,o.style.width=null,t.style.width=null);let k=this.firstMinValue,v=this.secondMinValue,h=this.isVertical,S,_,g;t.onmousedown=l=>{this.$emit("resizeLineStartMove");let I,b,N,E;if(n=h?e.offsetWidth:e.offsetHeight,this.isFirstComponentMasked){let{maskNode:c,originPosition:u}=this.$_addMask(i);I=c,N=u}if(this.isSecondComponentMasked){let{maskNode:c,originPosition:u}=this.$_addMask(o);b=c,E=u}return l=l||window.event,S=h?l.clientX:l.clientY,_=i[h?"offsetWidth":"offsetHeight"],g=o[h?"offsetWidth":"offsetHeight"],document.onmousemove=c=>{this.$emit("resizeLineMove",c);let u=h?c.clientX:c.clientY,m=_+(u-S);if(_===k&&m<k)return;let f=g+(S-u);if(g===v&&f<v)return;m<k?(m=k,f=g+(_-m)):f<v&&(f=v,m=_+(g-f));let H=m/n*100,O=f/n*100;i.style[h?"width":"height"]=H+"%",o.style[h?"width":"height"]=O+"%"},document.onmouseup=()=>{this.$emit("resizeLineEndMove"),this.isFirstComponentMasked&&this.$_removeMask(i,I,N),this.isSecondComponentMasked&&this.$_removeMask(o,b,E),document.onmousemove=null,document.onmouseup=null,t.releaseCapture&&t.releaseCapture()},t.setCapture&&t.setCapture(),!1},t.onmouseenter=l=>{this.$_addClass(t,"resize-hover"),l.target.style.backgroundColor=this.hoverColor},t.onmouseleave=l=>{this.$_removeClass(t,"resize-hover"),l.target.style.backgroundColor=this.backgroundColor}},$_handleWindowResize(){let e=document.getElementById(this.resizeLinePaneId);document.getElementById(this.resizeLineId);const t=document.getElementById(this.pane1stId),i=document.getElementById(this.pane2ndId);let o=this.isVertical?e.offsetWidth:e.offsetHeight,n=(this.isVertical?t.style.width:t.style.height).slice(0,-1),r=(this.isVertical?i.style.width:i.style.height).slice(0,-1),p=100-n-r,y=this.lineThickness/o*100-p,d=n-y/2,a=r-y/2;this.isVertical?(t.style.width=d+"%",i.style.width=a+"%"):(t.style.height=d+"%",i.style.height=a+"%")},$_addClass(e,t){e.className.indexOf(t)<0&&(e.className=e.className+" "+t)},$_removeClass(e,t){e.className=e.className.replace(t,"").trim()},$_addMask(e){let t=e.style.position;e.style.position="relative";let i=document.createElement("div");return i.style.backgroundColor="transparent",i.style.position="absolute",i.style.width="100%",i.style.height="100%",i.style.top="0",i.style.left="0",e.appendChild(i),{maskNode:i,originPosition:t}},$_removeMask(e,t,i){e.removeChild(t),e.style.position=i},$_eventCallback(){this.resizeTimeout||(this.resizeTimeout=setTimeout(()=>{this.resizeTimeout=null,this.$_handleWindowResize()},this.interval))},geneRamdId(){return Number.parseInt(Math.random()*1e5)}}},w=e=>(s.pushScopeId("data-v-b8b77c6f"),e=e(),s.popScopeId(),e),P=["id"],B=["id"],R=["id"],T=[w(()=>s.createElementVNode("div",{class:"line"},null,-1)),w(()=>s.createElementVNode("div",{class:"line"},null,-1)),w(()=>s.createElementVNode("div",{class:"line"},null,-1))],x=["id"];function W(e,t,i,o,n,r){return s.openBlock(),s.createElementBlock("div",{id:n.resizeLinePaneId,class:s.normalizeClass(["resize-line-pane",i.isVertical?"pane-vertical":"pane-horizontal"])},[s.createElementVNode("div",{id:n.pane1stId,class:"pane pane-1st"},[s.renderSlot(e.$slots,"first",{},void 0,!0)],8,B),s.createElementVNode("div",{id:n.resizeLineId,class:s.normalizeClass(["resize-line",i.isVertical?"resize-vertical":"resize-horizontal"])},[s.createElementVNode("div",{class:s.normalizeClass(["tip",i.isVertical?"vertical":"horizontal"])},T,2)],10,R),s.createElementVNode("div",{id:n.pane2ndId,class:"pane pane-2nd"},[s.renderSlot(e.$slots,"second",{},void 0,!0)],8,x),s.renderSlot(e.$slots,"default",{},void 0,!0)],10,P)}return $(L,[["render",W],["__scopeId","data-v-b8b77c6f"]])});