a-multilayout-splitter/dist/utils/SplitUtils.js

A React package designed to facilitate the division of your views into distinct sections, offering effortless resizing and support for intricate layouts.

import LayoutHelper from"../helper/LayoutHelper";import ManageHandleBar from"../helper/ManageHandleBar";import SplitSessionStorage from"./SplitSessionStorage";class SplitUtils{static setWrapper(e,t="horizontal",i,l=!1){this.wrapper=e,this.mode=t,this.modeWrapper=Object.assign(Object.assign({},this.modeWrapper),{[t]:e}),this.userSession=new SplitSessionStorage,this.enableSessionStorage[t]=l,this.cachedMappedSplitPanePosition[t]=null,LayoutHelper.mapElementPosition(null,this.modeWrapper,t,this.cachedMappedSplitPanePosition),this.layoutCallback=Object.assign(Object.assign({},this.layoutCallback),i)}static fixClass(){return this.FIX_CLASS+" "+this.FIX_HELPER_CLASS}static setSplitPaneInstance(e){this.splitPaneInstance?this.splitPaneInstance=Object.assign(Object.assign({},this.splitPaneInstance),e):this.splitPaneInstance=Object.assign({},e)}static getSplitPaneInstance(){return this.splitPaneInstance}static getHandlebarPosition(e){return e<1?(console.error("Section index must be greater than or equal to 1."),-1):2*e-1}static percentageToPixel(e,t){return t&&t.includes("vw")?e/100*window.innerWidth*(parseFloat(t.replace("vw",""))/100):t&&t.includes("vh")?e/100*window.innerHeight*(parseFloat(t.replace("vh",""))/100):t&&t.includes("%")?e/100*parseFloat(t.replace("%","")):e/100*parseFloat(t.replace("px",""))}static pixelToPercentage(e,t){return t.includes("vw")?e/window.innerWidth*100:t.includes("vh")?e/window.innerHeight*100:t.includes("px")?e/parseFloat(t.replace("px",""))*100:e/parseFloat(t.replace("%",""))*100}static isSectionOpen(e,t,i){if(this.modeWrapper[i]){var l=(null==e?void 0:e.children)||(null==(l=this.modeWrapper[i])?void 0:l.children);if(LayoutHelper.mapElementPosition(e,this.modeWrapper,i,this.cachedMappedSplitPanePosition,!0),l&&0<t&&l.length>=t){e=LayoutHelper.getSection(this.cachedMappedSplitPanePosition,i,t);if(null==e||void 0===e)return void console.error(`Section number ${e}. Provide correct section number.`);if(null!=e)return!l[e].classList.contains(this.SECTION_CLASS_HIDE)}}else console.error("Wrapper not set. Call setWrapper before using isSectionOpen.");return!1}static reCheckPaneOpening(i,l){var e;if(!this.modeWrapper[l])return console.error("Wrapper not set. Call setWrapper before using totalHandleCount."),-1;var r=(null==i?void 0:i.children)||(null==(e=this.modeWrapper[l])?void 0:e.children);if(LayoutHelper.mapElementPosition(i,this.modeWrapper,l,this.cachedMappedSplitPanePosition,!0),r&&0<r.length){var o=this.totalPaneCount(i,l);let t=0;for(let e=1;e<=o;e++)this.isSectionOpen(i,e,l)?++t:t;if(t===o)for(let e=1;e<=o;e++){var s=LayoutHelper.getSection(this.cachedMappedSplitPanePosition,l,e);if(null==s||void 0===s)return console.error(`Section number ${s}. Provide correct section number.`),-1;"1"===r[s].style.flexGrow&&r[s].style.removeProperty("flex-grow")}}}static invokeLayoutCallback(e=null,t,i,l="unknown",r=null){var o;e||this.modeWrapper[i]?this.layoutCallback&&!this.layoutCallback[e.getAttribute("id")]||(e?(e=e.getAttribute("id"))&&null!=(o=this.layoutCallback)&&o[e](t,e,l,r):(e=null==(o=this.modeWrapper[i])?void 0:o.getAttribute("id"))&&null!=(i=this.layoutCallback)&&i[e](t,e,l,r)):console.error("Missing instance.")}static closeSplitter(e=null,t,i,l="close",r=null){var o,s,a,n,p=i||this.mode;this.modeWrapper[i]||e?(n=(null==e?void 0:e.children)||(null==(n=this.modeWrapper[i])?void 0:n.children),LayoutHelper.mapElementPosition(e,this.modeWrapper,i,this.cachedMappedSplitPanePosition,!0),n&&0<t&&n.length>=t&&(null==(o=LayoutHelper.getSection(this.cachedMappedSplitPanePosition,i,t))||void 0===o?console.error(`Section number ${o}. Provide correct section number.`):null!=o&&void 0!==o&&(s=n[o],a=n[o-2],n=n[o+2],p===this.HORIZONTAL&&s?(s.style.flexGrow="0",s.classList.add(this.SECTION_CLASS_HIDE),s.classList.contains(this.FIX_CLASS)&&s.classList.remove(this.FIX_CLASS),r===this.RIGHT?a.style.flexGrow="1":r===this.LEFT||n?n.style.flexGrow="1":a&&(a.style.flexGrow="1"),ManageHandleBar.removeHandleIconOnClose(e,t,this.modeWrapper,this.cachedMappedSplitPanePosition,"horizontal"),this.saveSizesToLocalStorage(this.HORIZONTAL)):p===this.VERTICAL&&s&&(s.style.flexGrow="0",s.classList.add(this.SECTION_CLASS_HIDE),s.classList.contains(this.FIX_CLASS)&&s.classList.remove(this.FIX_CLASS),r===this.BOTTOM?a.style.flexGrow="1":r===this.TOP||n?n.style.flexGrow="1":a&&(a.style.flexGrow="1"),ManageHandleBar.removeHandleIconOnClose(e,t,this.modeWrapper,this.cachedMappedSplitPanePosition,"vertical"),this.saveSizesToLocalStorage(this.VERTICAL)),this.invokeLayoutCallback(e,t,i,l,r)))):console.error("Wrapper not set. Call setWrapper before using closeSplitter.")}static openSplitter(i=null,e,l,r="open",o=null){var s=l||this.mode;if(this.modeWrapper[l]||i){var a=(null==i?void 0:i.children)||(null==(a=this.modeWrapper[l])?void 0:a.children);if(LayoutHelper.mapElementPosition(i,this.modeWrapper,l,this.cachedMappedSplitPanePosition,!0),a&&0<e&&a.length>=e){var n=LayoutHelper.getSection(this.cachedMappedSplitPanePosition,l,e);if(null==n)console.error(`Section number ${n}. Provide correct section number.`);else if(null!=n){var p=a[n],c=a[n-2],n=a[n+2],h=(a.length+1)/2;let t=0;for(let e=0;e<h;e++)this.isSectionOpen(i,e+1,l)&&t++;s===this.HORIZONTAL&&p?(p.style.removeProperty("flex-grow"),p.classList.remove(this.SECTION_CLASS_HIDE),p.classList.contains(this.FIX_HELPER_CLASS)&&!p.classList.contains(this.FIX_CLASS)&&p.classList.add(this.FIX_CLASS),o===this.RIGHT?1!==t?(n.style.removeProperty("flex-grow"),c&&c.style.removeProperty("flex-grow")):n.style.flexGrow="1":o===this.LEFT?1!==t?(c.style.removeProperty("flex-grow"),n&&n.style.removeProperty("flex-grow")):c.style.flexGrow="1":n?1!==t?(n.style.removeProperty("flex-grow"),c&&c.style.removeProperty("flex-grow")):n.style.flexGrow="1":c&&(1!==t?(c.style.removeProperty("flex-grow"),n&&n.style.removeProperty("flex-grow")):c.style.flexGrow="1"),this.reCheckPaneOpening(i,this.HORIZONTAL),ManageHandleBar.showHandleIconOnOpen(i,e,this.modeWrapper,this.cachedMappedSplitPanePosition,"horizontal"),this.saveSizesToLocalStorage(s)):s===this.VERTICAL&&p&&(p.style.removeProperty("flex-grow"),p.classList.remove(this.SECTION_CLASS_HIDE),o===this.BOTTOM?1!==t?n.style.removeProperty("flex-grow"):n.style.flexGrow="1":o===this.TOP?1!==t?c.style.removeProperty("flex-grow"):c.style.flexGrow="1":n?1!==t?n.style.removeProperty("flex-grow"):n.style.flexGrow="1":c&&(1!==t?c.style.removeProperty("flex-grow"):c.style.flexGrow="1"),this.reCheckPaneOpening(i,this.VERTICAL),ManageHandleBar.showHandleIconOnOpen(i,e,this.modeWrapper,this.cachedMappedSplitPanePosition,"vertical"),this.saveSizesToLocalStorage(s)),this.invokeLayoutCallback(i,e,l,r,o)}}}else console.error("Wrapper not set. Call setWrapper before using openSplitter.")}static setPaneSize(e=null,t,i){var l,r=i||this.mode;if(this.modeWrapper[i]||e){var o=(null==e?void 0:e.children)||(null==(l=this.modeWrapper[i])?void 0:l.children);if(LayoutHelper.mapElementPosition(e,this.modeWrapper,i,this.cachedMappedSplitPanePosition,!0),o&&t&&0<Object.keys(t).length){var s=String("horizontal"===r?(null==e?void 0:e.getBoundingClientRect().width)||(null==(l=this.modeWrapper.horizontal)?void 0:l.getBoundingClientRect().width):(null==e?void 0:e.getBoundingClientRect().height)||(null==(r=this.modeWrapper.vertical)?void 0:r.getBoundingClientRect().height)),a=Object.keys(t);for(let e=0;e<a.length;e++){var n=LayoutHelper.getSection(this.cachedMappedSplitPanePosition,i,parseInt(a[e]));if(null==n)return void console.error(`Section number ${n}. Provide correct section number.`);null!=n&&((n=o[n]).style.flexBasis.includes("px")?n.style.flexBasis=SplitUtils.percentageToPixel(t[parseInt(a[e])],s)+"px":n.style.flexBasis=t[parseInt(a[e])]+"%")}}}else console.error("Wrapper not set. Call setWrapper before using setPaneSize.")}static totalPaneCount(e,t){return this.modeWrapper[t]||e?(t=(null==e?void 0:e.children)||(null==(e=this.modeWrapper[t])?void 0:e.children))?(t.length+1)/2:-1:(console.error("Wrapper not set. Call setWrapper before using totalPaneCount."),-1)}static totalHandleCount(e,t){return this.modeWrapper[t]||e?(t=(null==e?void 0:e.children)||(null==(e=this.modeWrapper[t])?void 0:e.children))?Math.abs((t.length+1)/2-t.length):-1:(console.error("Wrapper not set. Call setWrapper before using totalHandleCount."),-1)}static saveSizesToLocalStorage(e="horizontal",t=!1){var i,l=e||this.mode;if(this.modeWrapper[e]){var r=null==(i=this.modeWrapper[l])?void 0:i.children;if(r&&this.enableSessionStorage[e]){var o=[];for(let t=0;t<r.length;t+=2){let e={};var s=r[t];e="0"===s.style.flexGrow||"1"===s.style.flexGrow?Object.assign(Object.assign({},e),{flexGrow:s.style.flexGrow,flexBasis:s.style.flexBasis}):Object.assign(Object.assign({},e),{flexBasis:s.style.flexBasis,flexGrow:"-1"}),o.push(e)}return this.userSession.SetSession(o,"horizontal"===l?"horizontal":"vertical",t),!0}}else console.error("Wrapper not set. Call setWrapper before using saveSizesToLocalStorage.");return!1}static saveHorizontalSizesToLocalStorage(){this.saveSizesToLocalStorage("horizontal")}static saveVerticalSizesToLocalStorage(){this.saveSizesToLocalStorage("vertical")}static resetLocalStorageOnPaneAddOrRemove(e){this.userSession.removeStoredSession(e)}}SplitUtils.TOP="top",SplitUtils.BOTTOM="bottom",SplitUtils.LEFT="left",SplitUtils.RIGHT="right",SplitUtils.HORIZONTAL="horizontal",SplitUtils.VERTICAL="vertical",SplitUtils.SECTION_CLASS_HIDE="a-split-hidden",SplitUtils.FIX_CLASS="a-split-pane-fix",SplitUtils.FIX_HELPER_CLASS="a-split-pane-helper-fix",SplitUtils.layoutCallback={},SplitUtils.wrapper=null,SplitUtils.mode="horizontal",SplitUtils.modeWrapper={horizontal:null,vertical:null},SplitUtils.enableSessionStorage={horizontal:!1,vertical:!1},SplitUtils.cachedMappedSplitPanePosition={horizontal:null,vertical:null},SplitUtils.splitPaneInstance=null;export default SplitUtils;