source/screens/demo/examples/ui/table.liquid

@@ -12,9 +12,13 @@ tags:
 	<section>
 		<header class="io">
 			<nav>
-				<button title="Add entry">
-					<i class="bi bi-plus-circle"></i>
-				</button>
+				<div class="group-input">
+					<button id="addEntry" title="Add entry">
+						<i class="bi bi-plus-circle"></i>
+					</button>
+					<div class="group-input-wrap"><input id="setScroll" type="checkbox"></div>
+					<label for="setScroll">Scroll to new entry</label>
+				</div>
 				<button id="tglIndex" title="Toggle index column">
 					<i class="bi bi-hash"></i>
 				</button>
@@ -30,7 +34,7 @@ tags:
 			</nav>
 			<nav></nav>
 		</header>
-		<table>
+		<table id="content">
 			<thead>
 			<tr>
 				<th scope="col" title="Index">#</th>
@@ -43,12 +47,12 @@ tags:
 				<th scope="col"></th>
 			</tr>
 			</thead>
-			<tbody></tbody>
+			<tbody id="positions"></tbody>
 		</table>
 		{% render 'hippie/partials/frame-status.liquid' %}
 	</section>
 </main>
-<template id="default-row">
+<template id="rowDefault">
 	<tr>
 		<th scope="row"></th>
 		<td class="io">
@@ -111,11 +115,25 @@ tags:
 
 	const currencyEuro = new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'});
 
-	const table = document.querySelector('main.io section > table');
-	const rowDef = document.querySelector('#default-row');
+	const content = document.querySelector('main.io section > table');
+	// const content = document.getElementById('content');
+	const tbodyPosition = document.getElementById('positions');
+
+	tbodyPosition.addEventListener('click', (event) => {
+		const rows = tbodyPosition.querySelectorAll('tr');
+		const rowTarget = event.target.closest('tr');
+
+		if (rowTarget && event.button === 0) {
+			for (row of rows) {
+				row.classList.remove('active');
+			}
+
+			rowTarget.classList.add('active');
+		}
+	});
 
 	for (let i = 0; i < 256; i++) {
-		const clone = document.importNode(rowDef.content, true);
+		const clone = cloneRow();
 		const tr = clone.querySelector('tr');
 		const th = clone.querySelector('th');
 		const td = clone.querySelectorAll('td');
@@ -132,7 +150,7 @@ tags:
 		// td[5].textContent = randomIntFrom(1, i).toString();
 		td[5].textContent = currencyEuro.format(randomFloatFrom(1, 1000000, 2));
 
-		table.appendChild(clone);
+		tbodyPosition.appendChild(clone);
 	}
 
 	const selectNum = document.getElementById('sltNum');
@@ -140,7 +158,7 @@ tags:
 
 	buttonPosNum.addEventListener('click', () => {
 		const numType = selectNum.value;
-		const cells = document.querySelectorAll('td.pos-num');
+		const cells = tbodyPosition.querySelectorAll('td.pos-num');
 		let num = '';
 
 		for (let i = 0; i < cells.length; i++) {
@@ -162,7 +180,7 @@ tags:
 	const buttonIndex = document.getElementById('tglIndex');
 
 	buttonIndex.addEventListener('click', () => {
-		const cells = table.querySelectorAll('th:first-child');
+		const cells = content.querySelectorAll('th:first-child');
 		const isHidden = cells[0].classList.contains('di_none');
 
 		for (cell of cells) {
@@ -173,5 +191,42 @@ tags:
 			}
 		}
 	});
+
+	const buttonAdd = document.getElementById('addEntry');
+	const checkScroll = document.getElementById('setScroll');
+
+	buttonAdd.addEventListener('click', () => {
+		const clone = cloneRow();
+		const viewportHeight = window.innerHeight;
+		const elementActive = tbodyPosition.querySelector('tr.active');
+		let elementNew = undefined;
+		let elementBound = undefined;
+
+		if (elementActive) {
+			elementActive.after(clone);
+			elementNew = elementActive.nextElementSibling;
+		} else {
+			tbodyPosition.appendChild(clone);
+			elementNew = tbodyPosition.lastElementChild;
+		}
+
+		if (checkScroll.checked) {
+			elementBound = elementNew.getBoundingClientRect();
+
+			if (elementBound.bottom > viewportHeight || elementBound.top < 0) {
+				elementNew.scrollIntoView({behavior: 'smooth', block: 'nearest'});
+			}
+		}
+		// TODO: Neuen index bilden
+	});
+
+	function cloneRow(type = 'default') {
+		type = 'row' + capitalizeFirstLetter(type);
+
+		const rowFragment = document.getElementById(type).content;
+		// TODO: Datenübergabe ergänzen und direkt hier in die Node aufnehmen
+
+		return document.importNode(rowFragment, true);
+	}
 </script>
 {% endblock %}

source/style/hippie-style

@@ -1 +1 @@
-Subproject commit 295626eb6ee68fd535fdd5ae891e3b4192e18546
+Subproject commit 530748663f02ac15597c78843a12cd1f9973c4c9