hide and show panes

Author: crosshj

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@fiug/layout",
-	"version": "0.0.16",
+	"version": "0.1.0",
 	"description": "page layout for browser applications",
 	"main": "dist/layout.js",
 		"exports": {

src/index.js

@@ -45,13 +45,15 @@ class Layout {
 			const { tab, pane } = args;
 			const file = UrlParams(tab.getAttribute("source")).get("file");
 			this.tabbed.closeTab(pane, tab);
-			this.onClose({ pane: pane.id, file })
+			this.onClose({ pane: pane.id, file });
 			this.onChange();
 		};
 		this.closePane = (args) => {
 			state.closePane(this)(args);
 			this.onChange();
 		};
+		this.hidePane = (args) =>state.hidePane(this)(args);
+		this.showPane = (args) =>state.showPane(this)(args);
 
 		this.dom = dom.createDom(this);
 		if(!this.dom) return console.error('layout creation failed');

src/removePane.js

@@ -19,13 +19,13 @@ const removePaneConfig = ({ layout, pane }) => {
 
 	if(paneConfig.fixed)
 		return { error: "pane is fixed, cannot be closed" }
-	
+
 	const parentConfig = getConfigNode(
 		config,
 		(node) => node.children && node.children
 			.find(c => c.id === pane)
 	);
-	
+
 	if(parentConfig.children.length === parentConfig.minChildren)
 		return { error: "cannot close pane, parent has reached minimum children limit" };
 	if(!parentConfig)

src/splitting.js

@@ -15,12 +15,18 @@ const halfDim = (dim) => {
 export const setSize = (container, config) => {
 	if(config.orient === "column"){
 		container.style.gridTemplateColumns = config.children
-			.map(x=>x.width || '1fr')
+			.map(x => {
+				if(x.hidden) return '0px';
+				return x.width || '1fr';
+			})
 			.join(' 0px ');
 		return;
 	}
 	container.style.gridTemplateRows = config.children
-		.map(x=>x.height || '1fr')
+		.map(x => {
+			if(x.hidden) return '0px';
+			return x.height || '1fr';
+		})
 		.join(' 0px ');
 };
 

src/state.js

@@ -305,3 +305,21 @@ export const onResize = (layout) => (sizer, i, x, y) => {
 };
 
 export const closePane = removePane;
+
+
+const setPaneHidden = ({ layout, name, hidden }) => {
+	const { config, dom } = layout;
+	if(!config || !dom) return console.log('config and/or dom not found');
+	const paneConfig = getConfigNode(config, x => x.name === name);
+	const parentConfig = getConfigNode(
+		config,
+		(node) => node.children && node.children
+			.find(c => c.id === paneConfig.id)
+	);
+	const parentDom = document.querySelector('#'+parentConfig.id);
+	paneConfig.hidden = hidden;
+	layout.splitting.setSize(parentDom,parentConfig);
+	layout.onChange();
+};
+export const hidePane = (layout) => ({ name }) => setPaneHidden({ layout, name, hidden: true });
+export const showPane = (layout) => ({ name }) => setPaneHidden({ layout, name, hidden: false });