three
Version:
JavaScript 3D library
76 lines (48 loc) • 1.55 kB
JavaScript
export class List {
constructor( ...headers ) {
this.headers = headers;
this.children = [];
this.domElement = document.createElement( 'div' );
this.domElement.className = 'list-container';
this.domElement.style.padding = '10px';
this.id = `list-${Math.random().toString( 36 ).substr( 2, 9 )}`;
this.domElement.dataset.listId = this.id;
this.gridStyleElement = document.createElement( 'style' );
this.domElement.appendChild( this.gridStyleElement );
const headerRow = document.createElement( 'div' );
headerRow.className = 'list-header';
this.headers.forEach( headerText => {
const headerCell = document.createElement( 'div' );
headerCell.className = 'list-header-cell';
headerCell.textContent = headerText;
headerRow.appendChild( headerCell );
} );
this.domElement.appendChild( headerRow );
}
setGridStyle( gridTemplate ) {
this.gridStyleElement.textContent = `
[data-list-id="${this.id}"] > .list-header,
[data-list-id="${this.id}"] .list-item-row {
grid-template-columns: ${gridTemplate};
}
`;
}
add( item ) {
if ( item.parent !== null ) {
item.parent.remove( item );
}
item.domElement.classList.add( 'header-wrapper', 'section-start' );
item.parent = this;
this.children.push( item );
this.domElement.appendChild( item.domElement );
}
remove( item ) {
const index = this.children.indexOf( item );
if ( index !== - 1 ) {
this.children.splice( index, 1 );
this.domElement.removeChild( item.domElement );
item.parent = null;
}
return this;
}
}