diff --git a/task_2_ts/ts/rendering/primitives.ts b/task_2_ts/ts/rendering/primitives.ts index 3619a79..4d68ba1 100644 --- a/task_2_ts/ts/rendering/primitives.ts +++ b/task_2_ts/ts/rendering/primitives.ts @@ -7,10 +7,11 @@ interface ConditionalElement { 'predicate': ( value: T ) => boolean; } -interface ConditionalClass { +interface ConditionalClass { 'element': HTMLElement, 'onTrue': string, - 'onFalse': string + 'onFalse': string, + 'predicate': ( value: T ) => boolean; } /** @@ -22,11 +23,12 @@ interface ConditionalClass { export const ref = ( elements: HTMLElement[], data: T ): Ref => { let value: T = data; - const conditionalElements: ConditionalElement[] = []; const onChangeFunctions: ( () => Promise )[] = []; - const conditionalClasses: ConditionalClass[] = []; const boundElements: HTMLInputElement[] = []; + let conditionalElements: ConditionalElement[] = []; + let conditionalClasses: ConditionalClass[] = []; + /** * Bind to a further element (DOM text is updated for it) @@ -62,7 +64,7 @@ export const ref = ( elements: HTMLElement[], data: T ): Ref => { } ); 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 @@ -103,24 +105,35 @@ export const ref = ( elements: HTMLElement[], data: T ): Ref => { element.hidden = !predicate( value ); }; + const resetConditionalElementBinds = () => { + conditionalElements = []; + }; + /** * @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 onFalse - The classes to set on false(ish) */ const addConditionalClasses = ( element: HTMLElement, + predicate: ( value: T ) => boolean, onTrue: string, onFalse: string ) => { conditionalClasses.push( { 'element': element, 'onTrue': onTrue, - 'onFalse': onFalse + 'onFalse': onFalse, + 'predicate': predicate } ); }; + const resetConditionalClasses = () => { + conditionalClasses = []; + }; + /** * Connect to change event @@ -139,7 +152,9 @@ export const ref = ( elements: HTMLElement[], data: T ): Ref => { get, addAdditionalElement, addConditionalElementBind, + resetConditionalElementBinds, addConditionalClasses, + resetConditionalClasses, bind, onChange }; diff --git a/task_2_ts/ts/rendering/rendering.d.ts b/task_2_ts/ts/rendering/rendering.d.ts index c2dde49..0ad87ee 100644 --- a/task_2_ts/ts/rendering/rendering.d.ts +++ b/task_2_ts/ts/rendering/rendering.d.ts @@ -3,7 +3,10 @@ export interface Ref { 'get': () => T; 'addAdditionalElement': ( 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; 'onChange': ( callback: () => void ) => void; }