version 0.0.0-3

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@fiug/layout",
-	"version": "0.0.0-2",
+	"version": "0.0.0-3",
 	"description": "page layout for browser applications",
 	"main": "dist/layout.js",
 	"scripts": {

src/index.js

@@ -1,6 +1,7 @@
 /*
-system colors:
 https://blog.jim-nielsen.com/2021/css-system-colors/
+
+https://css-tricks.com/snippets/css/complete-guide-grid/
 */
 
 const style = `
@@ -18,16 +19,16 @@ const style = `
 		cursor: ew-resize;
 	}
 	.sizer:hover {
-		background: ButtonFace;
+		background: #48e;
 	}
 `;
 
-const pointerDown = (sizer, resize) => (e) => {
+const pointerDown = (sizer, index, resize) => (e) => {
 	let { x: startX, y: startY } = e;
 	sizer.setPointerCapture(e.pointerId);
 
 	const pointerMove = (e) => {
-		resize(sizer, e.x - startX, e.y - startY);
+		resize(sizer, index, e.x - startX, e.y - startY);
 		startX = e.x;
 		startY = e.y;
 	};
@@ -41,8 +42,8 @@ const pointerDown = (sizer, resize) => (e) => {
 	document.addEventListener('pointercancel', pointerUp);
 };
 
-const attachResizeListener = (sizer, resize) => {
-	sizer.addEventListener('pointerdown', pointerDown(sizer, resize));
+const attachResizeListener = (sizer, index, resize) => {
+	sizer.addEventListener('pointerdown', pointerDown(sizer, index, resize));
 };
 
 const createDom = (layout) => {
@@ -61,15 +62,11 @@ const createDom = (layout) => {
 	`);
 
 	const sizers = layoutDom.querySelectorAll(':scope > .sizer');
-	for(const sizer of Array.from(sizers)){
+	for(const [index, sizer] of Array.from(sizers).entries()){
 		sizer.id = Math.random().toString(16).replace('0.','');
-		attachResizeListener(sizer, onResize);
+		attachResizeListener(sizer, index, onResize);
 	}
 
-	layoutDom.style.gridTemplateColumns = children
-		.map(x=>x.width || '1fr')
-		.join(' 3px ');
-
 	return layoutDom;
 };
 
@@ -84,14 +81,20 @@ class Layout {
 		parent.append(this.dom);
 		this.setSize();
 	}
-	onResize(sizer, x, y){
-		console.log(sizer.id, x, y);
-		//TODO: figure out which elements to size
+	onResize(sizer, i, x, y){
+		const prev = this.config.children[i];
+		const next = this.config.children[i+1];
 		//TODO: figure out how to size them (px, %, 1fr)
-		//NOTE: for now this is hard-coded to resize first element
-		this.config.children[0].width = Number(
-			this.config.children[0].width.replace('px','')
-		) + x + 'px';
+		if(prev.width && prev.width.includes('px')){
+			prev.width = Number(
+				prev.width.replace('px','')
+			) + x + 'px';
+		}
+		if(next.width && next.width.includes('px')){
+			next.width = Number(
+				next.width.replace('px','')
+			) - x + 'px';
+		}
 		this.setSize();
 	}
 	setSize(){

test/editor.html

@@ -7,7 +7,7 @@
 		margin: 0;
 	}
 	.hidden { display: none; }
-	.tabs { height: 25px; background: #3334; display: flex; }
+	.tabs { height: 25px; background: #333; display: flex; }
 	.tab { padding: 5px 15px; cursor: pointer; }
 	.tab + .tab { margin-left: 1px; }
 	.editor { flex: 1; }
@@ -17,7 +17,7 @@
 	.dropped { background: blue; }
 	.mouse { position: absolute; bottom: 5px; right: 5px; }
 	iframe { border: 0; width: 100%; height: 100%; }
-	.active, .open { background: #1c3d3f; }
+	.active, .open { background: #1a1a1a; }
 	.drag-target {
 		position: absolute;
 		left: 0;
@@ -72,6 +72,15 @@
 		tabs.innerHTML += `<div class="tab active" file="${data}">${data}</div>`;
 	}
 
+	function openDoc({ name }){
+		upsertTab(name);
+		editor.innerHTML = `
+			<iframe src="./document.html" ondragover="dragover(event)"></iframe>
+		`;
+		editor.querySelector('iframe').contentWindow.ondragover = dragover;
+		editor.classList.add('open');
+	}
+
 	const dragover = (ev) => {
 		dragTarget.classList.remove('hidden');
 		ev.preventDefault();
@@ -103,12 +112,8 @@
 		ev.preventDefault();
 		editor.classList.add('open');
 		//depending on hover class, will do different things here
-		editor.innerHTML = `
-			<iframe src="./document.html" ondragover="dragover(event)"></iframe>
-		`;
-		editor.querySelector('iframe').contentWindow.ondragover = dragover;
 		const data = ev.dataTransfer.getData("text");
-		upsertTab(data);
+		openDoc({ name: data });
 		//document.body.classList.remove('drag-hover');
 		dragTarget.classList.add('hidden');
 		mouse.innerHTML = '';
@@ -123,4 +128,6 @@
 		hoverClassWait = undefined;
 		//document.body.classList.remove('drag-hover');
 	};
+
+	openDoc({ name: 'six.html' });
 </script>

test/index.html

@@ -14,15 +14,15 @@
 	<body></body>
 
 	<script type="module">
-		import Layout from "https://unpkg.com/@fiug/[email protected]2";
-		//import Layout from "../src/index.js";
+		//import Layout from "https://unpkg.com/@fiug/[email protected]3";
+		import Layout from "../src/index.js";
 
 		const layoutConfig = {
 			parent: document.body,
 			children: [
 				{ iframe: "tree.html", width: "200px" },
 				{ iframe: "editor.html" },
-				{ iframe: "terminal.html", width: "30%" },
+				{ iframe: "terminal.html", width: "300px" },
 			]
 		};
 		new Layout(layoutConfig);