interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Content and interaction for table screen

Browse source 
- Add getRandomFormattedString(), toggleColumn() and convertToRomanNumeral() to app
- Update hippie styles
- Add button to toggle index column
- Add select group to autofill numbering
This commit is contained in:
sthag 2026-02-14 13:26:06 +01:00
parent b1c7f4100e
commit 15a9b83e80
3 changed files with 126 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

60
source/code/hippie/app.js
View file

@ -459,6 +459,66 @@ function getRandomColor() {
return color;
}
function getRandomFormattedString(chars = 2, digits = 6, separator = '-') {
const getRandomUppercase = () => String.fromCharCode(Math.floor(Math.random() * 26) + 65);
const getRandomDigit = () => Math.floor(Math.random() * 10);
let string = '';
for (let i = 0; i < chars; i++) {
string += getRandomUppercase();
}
string += separator;
for (let i = 0; i < digits; i++) {
string += getRandomDigit();
}
return string;
}
function toggleColumn(table, index) {
const rows = table.rows;
const isHidden = rows[0].cells[index].classList.contains('di_none');
for (let i = 0; i < rows.length; i++) {
const cell = rows[i].cells[index];
if (isHidden) {
cell.classList.remove('di_none');
} else {
cell.classList.add('di_none');
}
}
}
function convertToRomanNumeral(num) {
const romanNumeralMap = [
{value: 1000, numeral: 'M'},
{value: 900, numeral: 'CM'},
{value: 500, numeral: 'D'},
{value: 400, numeral: 'CD'},
{value: 100, numeral: 'C'},
{value: 90, numeral: 'XC'},
{value: 50, numeral: 'L'},
{value: 40, numeral: 'XL'},
{value: 10, numeral: 'X'},
{value: 9, numeral: 'IX'},
{value: 5, numeral: 'V'},
{value: 4, numeral: 'IV'},
{value: 1, numeral: 'I'}
];
let result = '';
for (let i = 0; i < romanNumeralMap.length; i++) {
while (num >= romanNumeralMap[i].value) {
result += romanNumeralMap[i].numeral;
num -= romanNumeralMap[i].value;
}
}
return result;
}
// CONCEPTS
// NOTE: Benutzt private Zuweisungen

78
source/screens/demo/examples/ui/table.liquid
View file

@ -12,9 +12,21 @@ tags:
<section>
<header class="io">
<nav>
<button title="add">
<button title="Add entry">
<i class="bi bi-plus-circle"></i>
</button>
<button id="tglIndex" title="Toggle index column">
<i class="bi bi-hash"></i>
</button>
<div class="group-input">
<select id="sltNum" name="position-number">
<option value="" selected>None</option>
<option value="numeric">123</option>
<option value="latin">ABC</option>
<option value="roman">IVX</option>
</select>
<button id="setPosNum" title="Set numbering" type="button"><i class="bi bi-list-ol"></i></button>
</div>
</nav>
<nav></nav>
</header>
@ -41,12 +53,12 @@ tags:
<th scope="row"></th>
<td class="io">
<nav>
<button title="drag"><i class="bi bi-grip-horizontal"></i></button>
<button title="expand"><i class="bi bi-arrows-expand-vertical"></i></button>
<button title="Drag"><i class="bi bi-grip-horizontal"></i></button>
<button title="Expand"><i class="bi bi-arrows-expand"></i></button>
</nav>
</td>
<td></td>
<td></td>
<td class="pos-num"></td>
<td class="rigid"></td>
<td></td>
{% comment %}<td class="ellipsis"></td>{% endcomment %}
<td>
@ -55,9 +67,9 @@ tags:
<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>
<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>
@ -97,13 +109,13 @@ tags:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum facilisis condimentum quam, bibendum tristique odio.'
];
const tbody = document.querySelector('main.io section > table');
const template = document.querySelector('#default-row');
const currencyEuro = new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'});
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');
for (let i = 0; i < 256; i++) {
const clone = document.importNode(template.content, true);
const clone = document.importNode(rowDef.content, true);
const tr = clone.querySelector('tr');
const th = clone.querySelector('th');
const td = clone.querySelectorAll('td');
@ -113,13 +125,53 @@ tags:
tr.setAttribute('data-id', i);
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].textContent = randomIntFrom(1, i).toString();
td[5].textContent = currencyEuro.format(randomFloatFrom(1, 1000000, 2));
tbody.appendChild(clone);
table.appendChild(clone);
}
const selectNum = document.getElementById('sltNum');
const buttonPosNum = document.getElementById('setPosNum');
buttonPosNum.addEventListener('click', () => {
const numType = selectNum.value;
const cells = document.querySelectorAll('td.pos-num');
let num = '';
for (let i = 0; i < cells.length; i++) {
switch (numType) {
case 'numeric':
num = (i + 1).toString();
break;
case 'roman':
num = convertToRomanNumeral((i + 1)).toString();
break;
case '':
default:
}
cells[i].textContent = num;
}
});
const buttonIndex = document.getElementById('tglIndex');
buttonIndex.addEventListener('click', () => {
const cells = table.querySelectorAll('th:first-child');
const isHidden = cells[0].classList.contains('di_none');
for (cell of cells) {
if (isHidden) {
cell.classList.remove('di_none');
} else {
cell.classList.add('di_none');
}
}
});
</script>
{% endblock %}

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit 0623e818a49176ca7516a88943e07a882ba5262d
Subproject commit 295626eb6ee68fd535fdd5ae891e3b4192e18546