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

Some CSS work

Browse Source
This commit is contained in:
Janis Hutz
2025-10-22 08:40:03 +02:00
parent 11e99294c8
commit fde38a8869
5 changed files with 40 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
task_2_ts/ts/main.ts
View File

@@ -37,8 +37,8 @@ const headerList = listRef<string>(
[],
'table-header',
{
'type': 'td',
'cssClasses': [],
'type': 'th',
'cssClasses': [ 'sortable' ],
'children': []
}
);
@@ -75,6 +75,10 @@ columnDatatype.addConditionalElementBind( document.getElementById( 'title-column
columnDatatype.addConditionalElementBind( columnEntriesElement, stringOrNumberCheckPredicate );
columnDatatype.addConditionalElementBind( document.getElementById( 'title-column-entries' )!,
stringOrNumberCheckPredicate );
columnDatatype.addConditionalElementBind( document.getElementById( 'column-info' )!, val => val !== '' );
columnDatatype.addConditionalElementBind( document.getElementById( 'column-info-placeholder' )!, val => val === '' );
filename.addConditionalElementBind( document.getElementById( 'data-info' )!, val => val !== '' );
filename.addConditionalElementBind( document.getElementById( 'data-info-placeholder' )!, val => val === '' );

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

@@ -18,6 +18,11 @@ const renderList = <T extends StringIndexedObject>(
const renderer = <T extends StringIndexedObject>( data: T, template: RenderTemplate ): HTMLElement => {
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]! );
}
for ( let i = 0; i < template.children.length; i++ ) {
const element = template.children[i]!;

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

@@ -64,6 +64,7 @@ export const ref = <T>( elements: HTMLElement[], data: T ): Ref<T> => {
} );
conditionalClasses.forEach( el => {
// FIXME: Use add and remove!
el.element.classList.value = el.predicate( data ) ? el.onTrue : el.onFalse;
} );