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

Improve bindings in library

Browse Source
This commit is contained in:
Janis Hutz
2025-10-21 17:18:27 +02:00
parent eec6dc6b8b
commit a9299fdd5b
2 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,10 +7,11 @@ interface ConditionalElement<T> {
'predicate': ( value: T ) => boolean; 'predicate': ( value: T ) => boolean;
} }
interface ConditionalClass { interface ConditionalClass<T> {
'element': HTMLElement, 'element': HTMLElement,
'onTrue': string, 'onTrue': string,
'onFalse': string 'onFalse': string,
'predicate': ( value: T ) => boolean;
} }
/** /**
@@ -22,11 +23,12 @@ interface ConditionalClass {
export const ref = <T>( elements: HTMLElement[], data: T ): Ref<T> => { export const ref = <T>( elements: HTMLElement[], data: T ): Ref<T> => {
let value: T = data; let value: T = data;
const conditionalElements: ConditionalElement<T>[] = [];
const onChangeFunctions: ( () => Promise<void> )[] = []; const onChangeFunctions: ( () => Promise<void> )[] = [];
const conditionalClasses: ConditionalClass[] = [];
const boundElements: HTMLInputElement[] = []; const boundElements: HTMLInputElement[] = [];
let conditionalElements: ConditionalElement<T>[] = [];
let conditionalClasses: ConditionalClass<T>[] = [];
/** /**
* Bind to a further element (DOM text is updated for it) * Bind to a further element (DOM text is updated for it)
@@ -62,7 +64,7 @@ export const ref = <T>( elements: HTMLElement[], data: T ): Ref<T> => {
} ); } );
conditionalClasses.forEach( el => { conditionalClasses.forEach( el => {
el.element.classList.value = data ? el.onTrue : el.onFalse; el.element.classList.value = el.predicate( data ) ? el.onTrue : el.onFalse;
} ); } );
// Update boundElements // Update boundElements
@@ -103,24 +105,35 @@ export const ref = <T>( elements: HTMLElement[], data: T ): Ref<T> => {
element.hidden = !predicate( value ); element.hidden = !predicate( value );
}; };
const resetConditionalElementBinds = () => {
conditionalElements = [];
};
/** /**
* @param element - The element to do the operation on * @param element - The element to do the operation on
* @param predicate - The predicate to evaluate when value is changed
* @param onTrue - The classes (as strings) to set if true(ish) * @param onTrue - The classes (as strings) to set if true(ish)
* @param onFalse - The classes to set on false(ish) * @param onFalse - The classes to set on false(ish)
*/ */
const addConditionalClasses = ( const addConditionalClasses = (
element: HTMLElement, element: HTMLElement,
predicate: ( value: T ) => boolean,
onTrue: string, onTrue: string,
onFalse: string onFalse: string
) => { ) => {
conditionalClasses.push( { conditionalClasses.push( {
'element': element, 'element': element,
'onTrue': onTrue, 'onTrue': onTrue,
'onFalse': onFalse 'onFalse': onFalse,
'predicate': predicate
} ); } );
}; };
const resetConditionalClasses = () => {
conditionalClasses = [];
};
/** /**
* Connect to change event * Connect to change event
@@ -139,7 +152,9 @@ export const ref = <T>( elements: HTMLElement[], data: T ): Ref<T> => {
get, get,
addAdditionalElement, addAdditionalElement,
addConditionalElementBind, addConditionalElementBind,
resetConditionalElementBinds,
addConditionalClasses, addConditionalClasses,
resetConditionalClasses,
bind, bind,
onChange onChange
}; };

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

@@ -3,7 +3,10 @@ export interface Ref<T> {
'get': () => T; 'get': () => T;
'addAdditionalElement': ( elements: HTMLElement, predicate: ( value: T ) => boolean ) => void; 'addAdditionalElement': ( elements: HTMLElement, predicate: ( value: T ) => boolean ) => void;
'addConditionalElementBind': ( elements: HTMLElement, predicate: ( value: T ) => boolean ) => void; 'addConditionalElementBind': ( elements: HTMLElement, predicate: ( value: T ) => boolean ) => void;
'addConditionalClasses': ( element: HTMLElement, onTrue: string, onFalse: string ) => void; 'addConditionalClasses': (
element: HTMLElement, predicate: ( value: T ) => boolean, onTrue: string, onFalse: string ) => void;
'resetConditionalClasses': () => void;
'resetConditionalElementBinds': () => void;
'bind': ( element: HTMLInputElement, castFunction: ( val: string ) => T ) => void; 'bind': ( element: HTMLInputElement, castFunction: ( val: string ) => T ) => void;
'onChange': ( callback: () => void ) => void; 'onChange': ( callback: () => void ) => void;
} }