svelte-split-pane
Version:
Split Pane Splitter Both for Horizontal and Vertial written in Svelte
3 lines (2 loc) • 13.7 kB
JavaScript
var app=function(){"use strict";function e(){}function t(e){return e()}function n(){return Object.create(null)}function o(e){e.forEach(t)}function i(e){return"function"==typeof e}function s(e,t){return e!=e?t==t:e!==t||e&&"object"==typeof e||"function"==typeof e}function r(e,t,n,o){if(e){const i=l(e,t,n,o);return e[0](i)}}function l(e,t,n,o){return e[1]&&o?function(e,t){for(const n in t)e[n]=t[n];return e}(n.ctx.slice(),e[1](o(t))):n.ctx}function u(e,t,n,o,i,s,r){const u=function(e,t,n,o){if(e[2]&&o){const i=e[2](o(n));if(void 0===t.dirty)return i;if("object"==typeof i){const e=[],n=Math.max(t.dirty.length,i.length);for(let o=0;o<n;o+=1)e[o]=t.dirty[o]|i[o];return e}return t.dirty|i}return t.dirty}(t,o,i,s);if(u){const i=l(t,n,o,r);e.p(i,u)}}function c(e,t){e.appendChild(t)}function a(e,t,n){e.insertBefore(t,n||null)}function d(e){e.parentNode.removeChild(e)}function f(e){return document.createElement(e)}function p(){return e=" ",document.createTextNode(e);var e}function h(e,t,n,o){return e.addEventListener(t,n,o),()=>e.removeEventListener(t,n,o)}function m(e,t,n){null==n?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n)}function $(e,t,n,o){e.style.setProperty(t,n,o?"important":"")}let v;function w(e){v=e}function g(){if(!v)throw new Error("Function called outside component initialization");return v}function b(e){g().$$.on_mount.push(e)}function y(e){g().$$.on_destroy.push(e)}const z=[],x=[],P=[],S=[],L=Promise.resolve();let C=!1;function E(e){P.push(e)}let k=!1;const _=new Set;function D(){if(!k){k=!0;do{for(let e=0;e<z.length;e+=1){const t=z[e];w(t),q(t.$$)}for(w(null),z.length=0;x.length;)x.pop()();for(let e=0;e<P.length;e+=1){const t=P[e];_.has(t)||(_.add(t),t())}P.length=0}while(z.length);for(;S.length;)S.pop()();C=!1,k=!1,_.clear()}}function q(e){if(null!==e.fragment){e.update(),o(e.before_update);const t=e.dirty;e.dirty=[-1],e.fragment&&e.fragment.p(e.ctx,t),e.after_update.forEach(E)}}const T=new Set;function H(e,t){e&&e.i&&(T.delete(e),e.i(t))}function A(e,t,n,o){if(e&&e.o){if(T.has(e))return;T.add(e),undefined.c.push((()=>{T.delete(e),o&&(n&&e.d(1),o())})),e.o(t)}}function R(e){e&&e.c()}function W(e,n,s){const{fragment:r,on_mount:l,on_destroy:u,after_update:c}=e.$$;r&&r.m(n,s),E((()=>{const n=l.map(t).filter(i);u?u.push(...n):o(n),e.$$.on_mount=[]})),c.forEach(E)}function M(e,t){const n=e.$$;null!==n.fragment&&(o(n.on_destroy),n.fragment&&n.fragment.d(t),n.on_destroy=n.fragment=null,n.ctx=[])}function j(e,t){-1===e.$$.dirty[0]&&(z.push(e),C||(C=!0,L.then(D)),e.$$.dirty.fill(0)),e.$$.dirty[t/31|0]|=1<<t%31}function X(t,i,s,r,l,u,c=[-1]){const a=v;w(t);const f=t.$$={fragment:null,ctx:null,props:u,update:e,not_equal:l,bound:n(),on_mount:[],on_destroy:[],before_update:[],after_update:[],context:new Map(a?a.$$.context:[]),callbacks:n(),dirty:c,skip_bound:!1};let p=!1;if(f.ctx=s?s(t,i.props||{},((e,n,...o)=>{const i=o.length?o[0]:n;return f.ctx&&l(f.ctx[e],f.ctx[e]=i)&&(!f.skip_bound&&f.bound[e]&&f.bound[e](i),p&&j(t,e)),n})):[],f.update(),p=!0,o(f.before_update),f.fragment=!!r&&r(f.ctx),i.target){if(i.hydrate){const e=function(e){return Array.from(e.childNodes)}(i.target);f.fragment&&f.fragment.l(e),e.forEach(d)}else f.fragment&&f.fragment.c();i.intro&&H(t.$$.fragment),W(t,i.target,i.anchor),D()}w(a)}class Y{$destroy(){M(this,1),this.$destroy=e}$on(e,t){const n=this.$$.callbacks[e]||(this.$$.callbacks[e]=[]);return n.push(t),()=>{const e=n.indexOf(t);-1!==e&&n.splice(e,1)}}$set(e){var t;this.$$set&&(t=e,0!==Object.keys(t).length)&&(this.$$.skip_bound=!0,this.$$set(e),this.$$.skip_bound=!1)}}const N=e=>({}),O=e=>({}),V=e=>({}),U=e=>({});function B(e){let t,n,i,s,l,v,w,g,b;const y=e[10].left,z=r(y,e,e[9],U),x=z||function(e){let t;return{c(){t=f("div"),t.textContent="Left Contents goes here...",$(t,"background-color","red")},m(e,n){a(e,t,n)},d(e){e&&d(t)}}}(),P=e[10].right,S=r(P,e,e[9],O),L=S||function(e){let t;return{c(){t=f("div"),t.textContent="Right Contents goes here...",$(t,"background-color","yellow")},m(e,n){a(e,t,n)},d(e){e&&d(t)}}}();return{c(){t=f("div"),n=f("div"),x&&x.c(),i=p(),s=f("div"),l=p(),v=f("div"),L&&L.c(),m(n,"class","left svelte-1lddsds"),m(s,"class","separator svelte-1lddsds"),m(v,"class","right svelte-1lddsds"),m(t,"class","wrapper svelte-1lddsds"),$(t,"--left-panel-size",e[0]),$(t,"--right-panel-size",e[1]),$(t,"--min-left-panel-size",e[2]),$(t,"--min-right-panel-size",e[3])},m(o,r){a(o,t,r),c(t,n),x&&x.m(n,null),e[11](n),c(t,i),c(t,s),e[12](s),c(t,l),c(t,v),L&&L.m(v,null),e[13](v),w=!0,g||(b=[h(s,"mousedown",e[7]),h(s,"touchstart",e[7])],g=!0)},p(e,[n]){z&&z.p&&512&n&&u(z,y,e,e[9],n,V,U),S&&S.p&&512&n&&u(S,P,e,e[9],n,N,O),(!w||1&n)&&$(t,"--left-panel-size",e[0]),(!w||2&n)&&$(t,"--right-panel-size",e[1]),(!w||4&n)&&$(t,"--min-left-panel-size",e[2]),(!w||8&n)&&$(t,"--min-right-panel-size",e[3])},i(e){w||(H(x,e),H(L,e),w=!0)},o(e){A(x,e),A(L,e),w=!1},d(n){n&&d(t),x&&x.d(n),e[11](null),e[12](null),L&&L.d(n),e[13](null),g=!1,o(b)}}}function F(e,t,n){let o,i,{$$slots:s={},$$scope:r}=t,{updateCallback:l=(()=>{})}=t;const u=e=>{if(e.preventDefault(),0===e.button){var t={x:e.clientX-i.e.clientX,y:e.clientY-i.e.clientY};t.x=Math.min(Math.max(t.x,-i.firstWidth),i.secondWidth),n(4,o.style.left=i.offsetLeft+t.x+"px",o),n(5,f.style.width=i.firstWidth+t.x+"px",f),n(6,p.style.width=i.secondWidth-t.x+"px",p),l()}},c=e=>{e&&(e.preventDefault(),0!==e.button)||(l(),window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",c),window.removeEventListener("touchmove",u),window.removeEventListener("touchend",c))};function a(){f&&f.removeAttribute("style"),p&&p.removeAttribute("style"),o&&o.removeAttribute("style")}function d(){c(),a()}let f,p;b((()=>{window.addEventListener("resize",d)})),y((()=>{window.removeEventListener("resize",d)}));let{leftPaneSize:h="50%"}=t,{rightPaneSize:m="50%"}=t,{minLeftPaneSize:$="0"}=t,{minRightPaneSize:v="0"}=t;return e.$$set=e=>{"updateCallback"in e&&n(8,l=e.updateCallback),"leftPaneSize"in e&&n(0,h=e.leftPaneSize),"rightPaneSize"in e&&n(1,m=e.rightPaneSize),"minLeftPaneSize"in e&&n(2,$=e.minLeftPaneSize),"minRightPaneSize"in e&&n(3,v=e.minRightPaneSize),"$$scope"in e&&n(9,r=e.$$scope)},e.$$.update=()=>{1&e.$$.dirty&&h&&a(),2&e.$$.dirty&&m&&a()},[h,m,$,v,o,f,p,e=>{e.preventDefault(),0===e.button&&(i={e:e,offsetLeft:o.offsetLeft,offsetTop:o.offsetTop,firstWidth:f.offsetWidth,secondWidth:p.offsetWidth},window.addEventListener("mousemove",u),window.addEventListener("mouseup",c),window.addEventListener("touchmove",u),window.addEventListener("touchend",c))},l,r,s,function(e){x[e?"unshift":"push"]((()=>{f=e,n(5,f)}))},function(e){x[e?"unshift":"push"]((()=>{o=e,n(4,o)}))},function(e){x[e?"unshift":"push"]((()=>{p=e,n(6,p)}))}]}class G extends Y{constructor(e){super(),X(this,e,F,B,s,{updateCallback:8,leftPaneSize:0,rightPaneSize:1,minLeftPaneSize:2,minRightPaneSize:3})}}const I=e=>({}),J=e=>({}),K=e=>({}),Q=e=>({});function Z(e){let t,n,i,s,l,v,w,g,b;const y=e[10].top,z=r(y,e,e[9],Q),x=z||function(e){let t;return{c(){t=f("div"),t.textContent="Top Contents goes here...",$(t,"background-color","red")},m(e,n){a(e,t,n)},d(e){e&&d(t)}}}(),P=e[10].down,S=r(P,e,e[9],J),L=S||function(e){let t;return{c(){t=f("div"),t.textContent="Down Contents goes here...",$(t,"background-color","yellow")},m(e,n){a(e,t,n)},d(e){e&&d(t)}}}();return{c(){t=f("div"),n=f("div"),x&&x.c(),i=p(),s=f("div"),l=p(),v=f("div"),L&&L.c(),m(n,"class","top svelte-1uzebfl"),m(s,"class","separator svelte-1uzebfl"),m(v,"class","down svelte-1uzebfl"),m(t,"class","wrapper svelte-1uzebfl"),$(t,"--top-panel-size",e[0]),$(t,"--down-panel-size",e[1]),$(t,"--min-top-panel-size",e[2]),$(t,"--min-down-panel-size",e[3])},m(o,r){a(o,t,r),c(t,n),x&&x.m(n,null),e[11](n),c(t,i),c(t,s),e[12](s),c(t,l),c(t,v),L&&L.m(v,null),e[13](v),w=!0,g||(b=[h(s,"mousedown",e[7]),h(s,"touchstart",e[7])],g=!0)},p(e,[n]){z&&z.p&&512&n&&u(z,y,e,e[9],n,K,Q),S&&S.p&&512&n&&u(S,P,e,e[9],n,I,J),(!w||1&n)&&$(t,"--top-panel-size",e[0]),(!w||2&n)&&$(t,"--down-panel-size",e[1]),(!w||4&n)&&$(t,"--min-top-panel-size",e[2]),(!w||8&n)&&$(t,"--min-down-panel-size",e[3])},i(e){w||(H(x,e),H(L,e),w=!0)},o(e){A(x,e),A(L,e),w=!1},d(n){n&&d(t),x&&x.d(n),e[11](null),e[12](null),L&&L.d(n),e[13](null),g=!1,o(b)}}}function ee(e,t,n){let o,i,{$$slots:s={},$$scope:r}=t,{updateCallback:l=(()=>{})}=t;const u=e=>{if(e.preventDefault(),0===e.button){var t={x:e.clientX-i.e.clientX,y:e.clientY-i.e.clientY};t.y=Math.min(Math.max(t.y,-i.firstHeight),i.secondHeight),n(4,o.style.top=i.offsetTop+t.y+"px",o),n(5,f.style.height=i.firstHeight+t.y+"px",f),n(6,p.style.height=i.secondHeight-t.y+"px",p),l()}},c=e=>{e&&(e.preventDefault(),0!==e.button)||(l(),window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",c),window.removeEventListener("touchmove",u),window.removeEventListener("touchend",c))};function a(){f&&f.removeAttribute("style"),p&&p.removeAttribute("style"),o&&o.removeAttribute("style")}function d(){c(),a()}let f,p;b((()=>{window.addEventListener("resize",d)})),y((()=>{window.removeEventListener("resize",d)}));let{topPanelSize:h="50%"}=t,{downPanelSize:m="50%"}=t,{minTopPaneSize:$="0"}=t,{minDownPaneSize:v="0"}=t;return e.$$set=e=>{"updateCallback"in e&&n(8,l=e.updateCallback),"topPanelSize"in e&&n(0,h=e.topPanelSize),"downPanelSize"in e&&n(1,m=e.downPanelSize),"minTopPaneSize"in e&&n(2,$=e.minTopPaneSize),"minDownPaneSize"in e&&n(3,v=e.minDownPaneSize),"$$scope"in e&&n(9,r=e.$$scope)},e.$$.update=()=>{1&e.$$.dirty&&h&&a(),2&e.$$.dirty&&m&&a()},[h,m,$,v,o,f,p,e=>{e.preventDefault(),0===e.button&&(i={e:e,offsetLeft:o.offsetLeft,offsetTop:o.offsetTop,firstHeight:f.offsetHeight,secondHeight:p.offsetHeight},window.addEventListener("mousemove",u),window.addEventListener("mouseup",c),window.addEventListener("touchmove",u),window.addEventListener("touchend",c))},l,r,s,function(e){x[e?"unshift":"push"]((()=>{f=e,n(5,f)}))},function(e){x[e?"unshift":"push"]((()=>{o=e,n(4,o)}))},function(e){x[e?"unshift":"push"]((()=>{p=e,n(6,p)}))}]}class te extends Y{constructor(e){super(),X(this,e,ee,Z,s,{updateCallback:8,topPanelSize:0,downPanelSize:1,minTopPaneSize:2,minDownPaneSize:3})}}function ne(e){let t;return{c(){t=f("left"),t.textContent="Left Pane",m(t,"slot","left"),m(t,"class","svelte-1uhyqbb")},m(e,n){a(e,t,n)},d(e){e&&d(t)}}}function oe(e){let t;return{c(){t=f("right"),t.textContent="Right Pane",m(t,"slot","right"),m(t,"class","svelte-1uhyqbb")},m(e,n){a(e,t,n)},d(e){e&&d(t)}}}function ie(t){let n;return{c(){n=p()},m(e,t){a(e,n,t)},p:e,d(e){e&&d(n)}}}function se(e){let t;return{c(){t=f("top"),t.textContent="Top Pane",m(t,"slot","top"),m(t,"class","svelte-1uhyqbb")},m(e,n){a(e,t,n)},d(e){e&&d(t)}}}function re(e){let t;return{c(){t=f("down"),t.textContent="Down Pane",m(t,"slot","down"),m(t,"class","svelte-1uhyqbb")},m(e,n){a(e,t,n)},d(e){e&&d(t)}}}function le(t){let n;return{c(){n=p()},m(e,t){a(e,n,t)},p:e,d(e){e&&d(n)}}}function ue(e){let t;return{c(){t=f("left"),t.textContent="Left Pane",m(t,"slot","left"),m(t,"class","svelte-1uhyqbb")},m(e,n){a(e,t,n)},d(e){e&&d(t)}}}function ce(e){let t;return{c(){t=f("right"),t.textContent="Right Pane",m(t,"slot","right"),m(t,"class","svelte-1uhyqbb")},m(e,n){a(e,t,n)},d(e){e&&d(t)}}}function ae(t){let n;return{c(){n=p()},m(e,t){a(e,n,t)},p:e,d(e){e&&d(n)}}}function de(e){let t;return{c(){t=f("top"),t.textContent="Top Pane",m(t,"slot","top"),m(t,"class","svelte-1uhyqbb")},m(e,n){a(e,t,n)},d(e){e&&d(t)}}}function fe(e){let t;return{c(){t=f("down"),t.textContent="Down Pane",m(t,"slot","down"),m(t,"class","svelte-1uhyqbb")},m(e,n){a(e,t,n)},d(e){e&&d(t)}}}function pe(t){let n;return{c(){n=p()},m(e,t){a(e,n,t)},p:e,d(e){e&&d(n)}}}function he(e){let t,n,o,i,s,r,l,u,h,$,v,w,g,b,y,z,x,P,S,L,C;return s=new G({props:{updateCallback:e[0],$$slots:{default:[ie],right:[oe],left:[ne]},$$scope:{ctx:e}}}),$=new te({props:{updateCallback:e[1],$$slots:{default:[le],down:[re],top:[se]},$$scope:{ctx:e}}}),y=new G({props:{leftPaneSize:"75%",rightPaneSize:"25%",minLeftPaneSize:"50px",minRightPaneSize:"50px",$$slots:{default:[ae],right:[ce],left:[ue]},$$scope:{ctx:e}}}),L=new te({props:{topPanelSize:"75%",downPanelSize:"25%",minTopPaneSize:"50px",minDownPaneSize:"50px",$$slots:{default:[pe],down:[fe],top:[de]},$$scope:{ctx:e}}}),{c(){t=f("main"),n=f("h1"),n.textContent="H Splite Pane Default",o=p(),i=f("div"),R(s.$$.fragment),r=p(),l=f("h1"),l.textContent="V Splite Pane Default",u=p(),h=f("div"),R($.$$.fragment),v=p(),w=f("h1"),w.textContent='H Splite Pane 75% : 25% with minSize "50px"',g=p(),b=f("div"),R(y.$$.fragment),z=p(),x=f("h1"),x.textContent='V Splite Pane 75% : 25% with minSize "50px"',P=p(),S=f("div"),R(L.$$.fragment),m(i,"class","wrapper svelte-1uhyqbb"),m(h,"class","wrapper svelte-1uhyqbb"),m(b,"class","wrapper svelte-1uhyqbb"),m(S,"class","wrapper svelte-1uhyqbb"),m(t,"class","svelte-1uhyqbb")},m(e,d){a(e,t,d),c(t,n),c(t,o),c(t,i),W(s,i,null),c(t,r),c(t,l),c(t,u),c(t,h),W($,h,null),c(t,v),c(t,w),c(t,g),c(t,b),W(y,b,null),c(t,z),c(t,x),c(t,P),c(t,S),W(L,S,null),C=!0},p(e,[t]){const n={};4&t&&(n.$$scope={dirty:t,ctx:e}),s.$set(n);const o={};4&t&&(o.$$scope={dirty:t,ctx:e}),$.$set(o);const i={};4&t&&(i.$$scope={dirty:t,ctx:e}),y.$set(i);const r={};4&t&&(r.$$scope={dirty:t,ctx:e}),L.$set(r)},i(e){C||(H(s.$$.fragment,e),H($.$$.fragment,e),H(y.$$.fragment,e),H(L.$$.fragment,e),C=!0)},o(e){A(s.$$.fragment,e),A($.$$.fragment,e),A(y.$$.fragment,e),A(L.$$.fragment,e),C=!1},d(e){e&&d(t),M(s),M($),M(y),M(L)}}}function me(e){return[()=>{console.log("HSplitPane Updated!")},()=>{console.log("VSplitPane Updated!")}]}return new class extends Y{constructor(e){super(),X(this,e,me,he,s,{})}}({target:document.body,props:{}})}();
//# sourceMappingURL=bundle.js.map