feat: Update table screen

- Move logic for rows to cloneRow function
- Add random selection of type to loop
- Refine row types
- Add event for group toggle

source/code/hippie/app.js

@@ -69,7 +69,7 @@ function HippieFade(toggleElement, initState) {
 	const fragment = document.createDocumentFragment();
 	const overlay = document.createElement('div');
 
-	overlay.id = 'mouse-overlay';
+	overlay.id = 'mouse_overlay';
 
 	if (initState) {
 		overlay.classList.add('active');

source/screens/demo/components.liquid

@@ -190,11 +190,11 @@ order: 3
 		<pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
 		<h2>&lt;table&gt;</h2>
 		<h4>Varianten</h4>
-		<pre class="pre_code"><code>table.width_full.fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
+		<pre class="pre_code"><code>table.width_full.fix>(thead>tr>th.pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.pre+td*3</code></pre>
 		<table class="width_full fix">
 			<thead>
 			<tr>
-				<th class="cell_pre" scope="col"></th>
+				<th class="pre" scope="col"></th>
 				<th scope="col">Kopfzeile</th>
 				<th scope="col">A</th>
 				<th scope="col">B</th>
@@ -202,27 +202,27 @@ order: 3
 			</thead>
 			<tbody>
 			<tr>
-				<td class="cell_pre">Vorspalte</td>
+				<td class="pre">Vorspalte</td>
 				<td>Eine</td>
 				<td></td>
 				<td></td>
 			</tr>
 			<tr>
-				<td class="cell_pre">1</td>
+				<td class="pre">1</td>
 				<td></td>
 				<td>erweiterte</td>
 				<td></td>
 			</tr>
 			<tr>
-				<td class="cell_pre">2</td>
+				<td class="pre">2</td>
 				<td></td>
 				<td></td>
 				<td>Tabelle</td>
 			</tr>
 			</tbody>
 		</table>
-		<pre class="pre_code"><code>table.width_full.stripe.fix.free>tr>td*3</code></pre>
+		<pre class="pre_code"><code>table.width_full.striped.fix.free>tr>td*3</code></pre>
-		<table class="width_full stripe fix free">
+		<table class="width_full striped fix free">
 			<tr>
 				<td>Tabelle</td>
 				<td></td>
@@ -244,7 +244,7 @@ order: 3
 				<td>Streifen</td>
 			</tr>
 		</table>
-		<pre class="pre_code"><code>table.width_full.fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
+		<pre class="pre_code"><code>table>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
 		<table>
 			<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
 			<thead>
@@ -278,6 +278,22 @@ order: 3
 			</tr>
 			</tfoot>
 		</table>
+		<pre class="pre_code"><code>table.width_full.fix>tr>td+td.ellipsis+td[style="width: 50%"]</code></pre>
+		<table class="width_full fix">
+			<tr>
+				<td>Index</td>
+				<td class="ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
+				<td style="width: 50%">Zelle mit Angabe der Breite.</td>
+			</tr>
+		</table>
+		<pre class="pre_code"><code>table.flexible>tr>td+td.truncate.ellipsis+td</code></pre>
+		<table class="flexible">
+			<tr>
+				<td>Index</td>
+				<td class="truncate ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
+				<td>Zelle mit Angabe der Breite.</td>
+			</tr>
+		</table>
 	</article>
 	<article>
 		<h1 id="forms">Formulare</h1>

source/screens/demo/examples/game/intro.liquid

@@ -39,7 +39,7 @@ tags:
 	<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
 </div>
 <div id="idle" class="step op_hide">
-	<div class="mouse-overlay"></div>
+	<div class="mouse_overlay"></div>
 	<div class="hello">Hello World!</div>
 	<p class="hello">Only left mouse click or any key</p>
 </div>

source/screens/demo/examples/start.liquid

@@ -9,7 +9,7 @@ tags:
 
 {% block body %}
 <main>
-	<form id="www-search" class="flex inline" action="https://duckduckgo.com/">
+	<form id="www_search" class="flex inline" action="https://duckduckgo.com/">
 		<input id="qrySearch" class="input_io" name="q" placeholder="Suchbegriff" type="text" required/>
 		<input class="button_io" value="Suchen" type="submit"/>
 	</form>
@@ -65,7 +65,7 @@ tags:
 		return base + '?' + params.toString();
 	}
 
-	document.getElementById('www-search').addEventListener('submit', function (e) {
+	document.getElementById('www_search').addEventListener('submit', function (e) {
 		e.preventDefault();
 		const query = document.getElementById('qrySearch').value.trim();
 

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

@@ -62,12 +62,13 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
+				<input class="input_io" name="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
 		<td class="pos-num"></td>
-		<td class="rigid"></td>
+		<td><input class="input_io" name="number" type="text"></td>
-		<td></td>
+		<td><input class="input_io" name="name" type="text"></td>
 		{% comment %}<td class="ellipsis"></td>{% endcomment %}
 		<td>
 			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
@@ -80,7 +81,7 @@ tags:
 				<option value="hour">Hour(s)</option>
 			</select>
 		</td>
-		<td class="unit"></td>
+		<td><input class="input_io" name="price" type="text"></td>
 		<td class="unit"></td>
 		<td class="io">
 			<nav>
@@ -96,13 +97,13 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
+				<input class="input_io" name="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
 		<td class="pos-num"></td>
 		<td class="rigid"></td>
 		<td></td>
-		{% comment %}<td class="ellipsis"></td>{% endcomment %}
 		<td>
 			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
 		</td>
@@ -130,14 +131,44 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
+				<input class="input_io" name="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
 		<td class="pos-num"></td>
-		<td class="rigid"></td>
+		<td colspan="7">
-		<td colspan="6">
 			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
 		</td>
+		<td class="io">
+			<nav>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
+	</tr>
+</template>
+<template id="rowGroup">
+	<tr draggable="true" class="header">
+		<th scope="row"></th>
+		<td class="io">
+			<nav>
+				<input class="input_io" name="active" type="checkbox">
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
+				<button name="group" title="Expand"><i class="bi bi-arrows-expand"></i></button>
+			</nav>
+		</td>
+		<td class="pos-num"></td>
+		<td colspan="7">Group</td>
+		<td class="io">
+			<nav>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
+	</tr>
+	<tr>
+		<th scope="row"></th>
+		<td></td>
+		<td class="pos-num"></td>
+		<td colspan="7">Content</td>
 		<td class="io">
 			<nav>
 				<button title="Event"><i class="bi bi-calendar-event"></i></button>
@@ -146,40 +177,11 @@ tags:
 			</nav>
 		</td>
 	</tr>
-</template>
+	<tr class="footer">
-<template id="rowGroup">
-	<tr draggable="true">
 		<th scope="row"></th>
-		<td class="io">
-			<nav>
-				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
-				<button title="Expand"><i class="bi bi-arrows-expand"></i></button>
-			</nav>
-		</td>
-		<td class="pos-num"></td>
-		<td class="rigid"></td>
 		<td></td>
-		{% comment %}<td class="ellipsis"></td>{% endcomment %}
+		<td class="pos-num"></td>
-		<td>
+		<td colspan="8">End</td>
-			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
-		</td>
-		<td><input name="amount" type="number"></td>
-		<td>
-			<select name="units">
-				<option value="">None</option>
-				<option value="piece">Piece(s)</option>
-				<option value="hour">Hour(s)</option>
-			</select>
-		</td>
-		<td class="unit"></td>
-		<td class="unit"></td>
-		<td class="io">
-			<nav>
-				<button title="Event"><i class="bi bi-calendar-event"></i></button>
-				<button title="Note"><i class="bi bi-journal"></i></button>
-				<button title="Delete"><i class="bi bi-trash"></i></button>
-			</nav>
-		</td>
 	</tr>
 </template>
 
@@ -226,6 +228,7 @@ tags:
 	tbodyPosition.addEventListener('click', (event) => {
 		const rows = tbodyPosition.querySelectorAll('tr');
 		const rowTarget = event.target.closest('tr');
+		const groupTarget = event.target.closest('[name="group"]');
 
 		if (rowTarget && event.button === 0) {
 			for (row of rows) {
@@ -234,32 +237,33 @@ tags:
 
 			rowTarget.classList.add('active');
 		}
+
+		if (groupTarget && event.button === 0) {
+			console.log('group');
+			let currentRow = groupTarget.closest('tr').nextElementSibling;
+
+			while (currentRow && !currentRow.classList.contains('footer')) {
+				currentRow.classList.toggle('di_none');
+				currentRow = currentRow.nextElementSibling;
+			}
+		}
 	});
 
 	for (let i = 0; i < 256; i++) {
-		const clone = cloneRow();
+		const t = Math.random();
-		const tr = clone.querySelector('tr');
+		let type = undefined;
-		const th = clone.querySelector('th');
-		const td = clone.querySelectorAll('td');
 
-		const j = i % placeholderNames.length;
+		if (t < .2) {
-		const k = randomIntFrom(0, placeholderContents.length - 1);
+			type = 'default';
-		const amount = randomIntFrom(1, 100);
+		} else if (t >= .2 && t < .4) {
-		const price = randomFloatFrom(1, 10000, 2);
+			type = 'text';
-		const sum = amount * price;
+		} else if (t >= .4 && t < .5) {
+			type = 'group';
+		} else {
+			type = 'article';
+		}
 
-		tr.setAttribute('data-id', i);
+		tbodyPosition.appendChild(cloneRow(i, type));
-		th.textContent = i + 1;
-		td[2].textContent = getRandomFormattedString();
-		td[3].textContent = placeholderNames[j];
-		// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
-		td[4].firstElementChild.textContent = placeholderContents[k];
-		td[5].firstElementChild.value = amount;
-		td[5].firstElementChild.style.width = '4em';
-		td[7].textContent = currencyEuro.format(price);
-		td[8].textContent = currencyEuro.format(sum);
-
-		tbodyPosition.appendChild(clone);
 	}
 
 	const selectNum = document.getElementById('sltNum');
@@ -377,11 +381,51 @@ tags:
 		console.debug('Drop');
 	});
 
-	function cloneRow(type = 'default') {
+	function cloneRow(index, type = 'article') {
-		type = 'row' + capitalizeFirstLetter(type);
+		const id = 'row' + capitalizeFirstLetter(type);
 
-		const rowFragment = document.getElementById(type).content;
+		const rowFragment = document.getElementById(id).content;
-		// TODO: Datenübergabe ergänzen und direkt hier in die Node aufnehmen
+		const tr = rowFragment.querySelector('tr');
+		const th = rowFragment.querySelector('th');
+		const td = rowFragment.querySelectorAll('td');
+
+		const j = index % placeholderNames.length;
+		const k = randomIntFrom(0, placeholderContents.length - 1);
+		const l = Math.random() > .2;
+		const amount = randomIntFrom(1, 100);
+		const price = randomFloatFrom(1, 10000, 2);
+		const sum = amount * price;
+
+		tr.setAttribute('data-id', index);
+		th.textContent = index + 1;
+		td[0].querySelector('[name="active"]').checked = l;
+		// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
+
+		switch (type) {
+			case 'default':
+				td[2].firstElementChild.style.width = '9ch';
+				td[3].firstElementChild.style.width = '6ch';
+				td[4].firstElementChild.textContent = placeholderContents[k];
+				td[5].firstElementChild.value = amount;
+				td[5].firstElementChild.style.width = '4em';
+				td[7].firstElementChild.style.width = '8ch';
+				td[8].textContent = currencyEuro.format(sum);
+				break;
+			case 'article':
+				td[2].textContent = getRandomFormattedString();
+				td[3].textContent = placeholderNames[j];
+				td[4].firstElementChild.textContent = placeholderContents[k];
+				td[5].firstElementChild.value = amount;
+				td[5].firstElementChild.style.width = '4em';
+				td[7].textContent = currencyEuro.format(price);
+				td[8].textContent = currencyEuro.format(sum);
+				break;
+			case 'text':
+				td[2].firstElementChild.textContent = placeholderContents[k];
+				break;
+			default:
+				console.debug('No matching type found.');
+		}
 
 		return document.importNode(rowFragment, true);
 	}
@@ -395,5 +439,22 @@ tags:
 			th.textContent = i + 1;
 		}
 	}
+
+	function toggleGroup(headerRow) {
+		// Get the toggle icon
+		const icon = headerRow.querySelector('.toggle-icon');
+
+		// Get all rows after this header
+		let currentRow = headerRow.nextElementSibling;
+
+		// Toggle visibility of group rows until next header
+		while (currentRow && !currentRow.classList.contains('group-header')) {
+			currentRow.classList.toggle('hidden');
+			currentRow = currentRow.nextElementSibling;
+		}
+
+		// Toggle the icon rotation
+		icon.classList.toggle('collapsed');
+	}
 </script>
 {% endblock %}

source/style/hippie-style

@@ -1 +1 @@
-Subproject commit b4c56320060548dacde62639876c6aee72b297ea
+Subproject commit b42c8cdd7e29aff34a108266a72a1be603145984

source/style/modules/_start.scss

@@ -5,7 +5,7 @@
 		@extend .sec_main_center;
 	}
 
-	#www-search {
+	#www_search {
 		input[type="text"] {
 			flex: 1;
 			padding: hippie.$padding_basic;

source/style/modules/ui/_frame_module.scss

@@ -9,7 +9,7 @@
 }
 
 .body_frame {
-	@extend %flex-column;
+	@extend %flex_column;
 
 	background-color: hippie.$color_back_basic;
 
@@ -27,7 +27,7 @@
 	}
 
 	main {
-		@extend %flex-row;
+		@extend %flex_row;
 
 		flex: 1;
 
@@ -53,7 +53,7 @@
 		}
 
 		section {
-			@extend %flex-column;
+			@extend %flex_column;
 			gap: 0;
 		}
 	}
@@ -66,12 +66,12 @@
 }
 
 #cli {
-	@extend %flex-column;
+	@extend %flex_column;
 
 	background-color: black;
 
 	#line {
-		@extend %flex-row;
+		@extend %flex_row;
 	}
 
 	#prompt {

source/style/modules/ui/_new_module.scss

@@ -6,7 +6,7 @@ $module_top_height: 32px;
 $body_top_space: $module_top_height + hippie.$space_basic;
 
 .body_new {
-	@extend %flex-column;
+	@extend %flex_column;
 	padding: $body_top_space hippie.$space_basic hippie.$space_basic;
 }
 

source/style/ui.scss

@@ -178,7 +178,7 @@ $space_gui_half: hippie.$space_half;
 		background-color: hippie.$color_back_basic;
 		transition: background-color 4s;
 
-		&:hover > .mouse-overlay {
+		&:hover > .mouse_overlay {
 			background-color: transparent !important;
 			transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
 		}