From b10379782fffaccee01d21417a5b49f70159e20d Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 21 Feb 2026 09:28:50 +0100 Subject: [PATCH] feat: Add functionality to table screen - New templates for rows with different content - Rows can now be repositioned - Change of rows now causes a reindex --- source/screens/demo/examples/ui/table.liquid | 161 ++++++++++++++++++- 1 file changed, 156 insertions(+), 5 deletions(-) diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid index 23b84d0..c0887b7 100755 --- a/source/screens/demo/examples/ui/table.liquid +++ b/source/screens/demo/examples/ui/table.liquid @@ -19,6 +19,8 @@ tags:
+ + - - +
@@ -56,11 +58,101 @@ tags: + + + + {% render 'hippie/partials/frame-mode.liquid' %} {% endblock %} @@ -233,7 +326,55 @@ tags: elementNew.scrollIntoView({behavior: 'smooth', block: 'nearest'}); } } - // TODO: Neuen index bilden + + reindexRows(tbodyPosition); + }); + + let draggedRow = null; + + tbodyPosition.addEventListener('dragstart', (event) => { + const rowTarget = event.target.closest('tr[draggable="true"]'); + + if (rowTarget) { + draggedRow = rowTarget; + rowTarget.classList.add('dragging'); + event.dataTransfer.effectAllowed = 'move'; + + console.debug('Drag', rowTarget); + } + }); + + tbodyPosition.addEventListener('dragend', () => { + if (draggedRow) { + draggedRow.classList.remove('dragging'); + draggedRow = null; + } + }); + + tbodyPosition.addEventListener('dragover', (event) => { + event.preventDefault(); + event.dataTransfer.dropEffect = 'move'; + + const rowTarget = event.target.closest('tr'); + + if (rowTarget && rowTarget !== draggedRow) { + const rows = [...tbodyPosition.querySelectorAll('tr')]; + const draggedIndex = rows.indexOf(draggedRow); + const targetIndex = rows.indexOf(rowTarget); + + if (draggedIndex < targetIndex) { + rowTarget.parentNode.insertBefore(draggedRow, rowTarget.nextSibling); + } else { + rowTarget.parentNode.insertBefore(draggedRow, rowTarget); + } + } + }); + + tbodyPosition.addEventListener('drop', (event) => { + event.preventDefault(); + reindexRows(event.currentTarget); + + console.debug('Drop'); }); function cloneRow(type = 'default') { @@ -244,5 +385,15 @@ tags: return document.importNode(rowFragment, true); } + + function reindexRows(parent, selector = 'tr') { + const rows = parent.querySelectorAll(selector); + let th = undefined; + + for (let i = 0; i < rows.length; i++) { + th = rows[i].querySelector('th'); + th.textContent = i + 1; + } + } {% endblock %} \ No newline at end of file
#