75f90c9487
* Update index to make it clear what has hasn't updated to Next/React yet * Typescriptify events and experiments * Typescript the old JS for easier integration * Update release-notes.ts * Lint * Run npm i * Fix a few lint issues * Update airgap-links.ts * Update airgap-links.ts * Update set-next-env to ts * Update airgap-links.ts * Update package-lock.json * Update set-next-env.ts * Update package-lock.json * Revert "Update package-lock.json" This reverts commit b45e8250beeb700719d3b44e1092b0bbd093baba. * readd fsevents * Revert "readd fsevents" This reverts commit 419f3c35080ac4a9072f0b4e8e291e1712ce3639. * Update openapi-schema-check.yml * Revert "Update openapi-schema-check.yml" This reverts commit 5e9f4a29ea11ee343ca17291a40a751920c5b923. * Update package-lock.json * Update package-lock.json
40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
/*
|
|
* This utility component implement a list of items, some of which are hidden initially
|
|
* until user clicks "show more".
|
|
*
|
|
* Example:
|
|
*
|
|
* <div class="js-show-more-container">
|
|
* <div class="js-show-more-item">item</div>
|
|
* <div class="js-show-more-item d-none">hidden item</div>
|
|
* <div class="js-show-more-item d-none">hidden item</div>
|
|
* <button class="js-show-more-button" data-js-show-more-items="1">show one more item</button>
|
|
* </div>
|
|
*/
|
|
|
|
export default function showMore() {
|
|
const buttons = document.querySelectorAll('.js-show-more-button')
|
|
|
|
buttons.forEach((btn) => {
|
|
btn.addEventListener('click', (evt) => {
|
|
const target = evt.currentTarget as HTMLButtonElement
|
|
const container = target.closest('.js-show-more-container')
|
|
if (!container) return
|
|
const hiddenLinks = container.querySelectorAll('.js-show-more-item.d-none')
|
|
// get number of items to show more of, if not set, show all remaining items
|
|
const showMoreNum = target.dataset.jsShowMoreItems || hiddenLinks.length
|
|
let count = 0
|
|
for (const link of Array.from(hiddenLinks)) {
|
|
if (count++ >= showMoreNum) {
|
|
break
|
|
}
|
|
link.classList.remove('d-none')
|
|
}
|
|
// Remove the button if all items have been shown
|
|
if (container.querySelectorAll('.js-show-more-item.d-none').length === 0) {
|
|
target?.parentElement?.removeChild(target)
|
|
}
|
|
})
|
|
})
|
|
}
|