Skip to content

Commit

Permalink
docs(overflowElements): 📚️ add docstring for sticky header functions
Browse files Browse the repository at this point in the history
  • Loading branch information
alistair3149 committed Dec 20, 2024
1 parent dfdb2e6 commit aaed71e
Showing 1 changed file with 22 additions and 1 deletion.
23 changes: 22 additions & 1 deletion resources/skins.citizen.scripts/overflowElements.js
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,11 @@ class OverflowElement {
}
}

/**
* Sync table columns width between sticky header with original table columns.
*
* @return {void}
*/
syncStickyHeaderColumns() {
const stickyCols = this.colgroup.querySelectorAll( 'col' );

Expand All @@ -194,6 +199,11 @@ class OverflowElement {
} );
}

/**
* Creates a sticky header for a table element.
*
* @return {void}
*/
getStickyHeaderForTable() {
// If overflow content is a table, we need to create a proper table element
// for the sticky header, so that the styles are applied correctly
Expand Down Expand Up @@ -222,9 +232,20 @@ class OverflowElement {
return stickyHeader;
}

/**
* Creates a sticky header for a non-table element.
*
* @return {void}
*/
getStickyHeader() {
const stickyHeader = document.createElement( 'div' );
stickyHeader.append( this.headerToSticky.cloneNode( true ) );
return stickyHeader;
}

setupStickyHeader() {
const isTable = this.element instanceof HTMLTableElement;
this.stickyHeader = isTable ? this.getStickyHeaderForTable() : document.createElement( 'div' );
this.stickyHeader = isTable ? this.getStickyHeaderForTable() : this.getStickyHeader();
this.stickyHeader.classList.add( 'citizen-overflow-content-sticky-header' );
this.stickyHeader.setAttribute( 'aria-hidden', 'true' ); // this is not useful for screen reader
this.content.insertBefore( this.stickyHeader, this.element );
Expand Down

0 comments on commit aaed71e

Please sign in to comment.