eth-janishutz/fundamentals-of-webengineering
1
0
Fork 0
mirror of https://github.com/janishutz/fundamentals-of-webengineering.git synced 2025-11-25 13:54:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Probably finish up

Browse Source
This commit is contained in:
Janis Hutz
2025-10-22 10:43:56 +02:00
parent fde38a8869
commit 166e9896b5
9 changed files with 117 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
task_2_ts/ts/rendering/list-renderer.ts
View File

@@ -19,7 +19,6 @@ const renderer = <T extends StringIndexedObject>( data: T, template: RenderTempl
const parent = document.createElement( template.type );
for ( let i = 0; i < template.cssClasses.length; i++ ) {
console.log( 'Adding css class', template.cssClasses[i]! );
parent.classList.add( template.cssClasses[i]! );
}

18
task_2_ts/ts/rendering/list.ts
View File

@@ -9,7 +9,7 @@ export const listRef = <T>( parent: HTMLElement, data: T[], name: string, templa
let list: T[] = data; // contains all values passed in
const nodes: HTMLElement[] = [];
const rendered: boolean[] = []; // Mask for
const rendered: boolean[] = []; // Mask for rendering
const onChangeFunctions: ( () => Promise<void> )[] = [];
/**
@@ -75,6 +75,21 @@ export const listRef = <T>( parent: HTMLElement, data: T[], name: string, templa
} );
};
/** Reset the sorting */
const resetSort = (): void => {
const children = [ ...parent.children ];
children.sort( ( elA, elB ) => {
const a = parseInt( elA.id.split( '--' )[1]! );
const b = parseInt( elB.id.split( '--' )[1]! );
return a - b;
} );
children.forEach( el => {
parent.appendChild( el );
} );
};
/**
* Filter elements. More performant than doing it with set operation, as it is cheaper to reverse.
@@ -118,6 +133,7 @@ export const listRef = <T>( parent: HTMLElement, data: T[], name: string, templa
get,
set,
sort,
resetSort,
filter,
setTemplate,
onChange

54
task_2_ts/ts/rendering/primitives.ts
View File

@@ -9,8 +9,8 @@ interface ConditionalElement<T> {
interface ConditionalClass<T> {
'element': HTMLElement,
'onTrue': string,
'onFalse': string,
'onTrue': string[],
'onFalse': string[],
'predicate': ( value: T ) => boolean;
}
@@ -50,31 +50,37 @@ export const ref = <T>( elements: HTMLElement[], data: T ): Ref<T> => {
* @param data - The new value of the
*/
const set = ( data: T ): void => {
value = data;
if ( value !== data ) {
value = data;
// Update normal ref elements
elements.forEach( el => {
el.textContent = String( data );
} );
// Update normal ref elements
elements.forEach( el => {
el.textContent = String( data );
} );
// Update conditional elements
conditionalElements.forEach( el => {
// Update conditional elements
conditionalElements.forEach( el => {
// convert to boolean (explicitly)
el.element.hidden = !el.predicate( data );
} );
el.element.hidden = !el.predicate( data );
} );
conditionalClasses.forEach( el => {
// FIXME: Use add and remove!
el.element.classList.value = el.predicate( data ) ? el.onTrue : el.onFalse;
} );
conditionalClasses.forEach( el => {
if ( el.predicate( data ) ) {
el.element.classList.remove( ...el.onFalse );
el.element.classList.add( ...el.onTrue );
} else {
el.element.classList.remove( ...el.onTrue );
el.element.classList.add( ...el.onFalse );
}
} );
// Update boundElements
boundElements.forEach( el => {
el.value = String( value );
} );
// Update boundElements
boundElements.forEach( el => {
el.value = String( value );
} );
for ( let i = 0; i < onChangeFunctions.length; i++ ) {
onChangeFunctions[ i ]!();
for ( let i = 0; i < onChangeFunctions.length; i++ ) {
onChangeFunctions[ i ]!();
}
}
};
@@ -120,8 +126,8 @@ export const ref = <T>( elements: HTMLElement[], data: T ): Ref<T> => {
const addConditionalClasses = (
element: HTMLElement,
predicate: ( value: T ) => boolean,
onTrue: string,
onFalse: string
onTrue: string[],
onFalse: string[]
) => {
conditionalClasses.push( {
'element': element,

3
task_2_ts/ts/rendering/rendering.d.ts vendored
View File

@@ -4,7 +4,7 @@ export interface Ref<T> {
'addAdditionalElement': ( elements: HTMLElement, predicate: ( value: T ) => boolean ) => void;
'addConditionalElementBind': ( elements: HTMLElement, predicate: ( value: T ) => boolean ) => void;
'addConditionalClasses': (
element: HTMLElement, predicate: ( value: T ) => boolean, onTrue: string, onFalse: string ) => void;
element: HTMLElement, predicate: ( value: T ) => boolean, onTrue: string[], onFalse: string[] ) => void;
'resetConditionalClasses': () => void;
'resetConditionalElementBinds': () => void;
'bind': ( element: HTMLInputElement, castFunction: ( val: string ) => T ) => void;
@@ -15,6 +15,7 @@ export interface ListRef<T> {
'set': ( data: T[] ) => void;
'get': () => T[];
'sort': ( compare: ( a: T, b: T ) => number ) => void;
'resetSort': () => void;
'filter': ( predicate: ( value: T ) => boolean ) => void;
'setTemplate': ( newTemplate: RenderTemplate ) => void;
'onChange': ( callback: () => void ) => void;