-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor
show-more.jslogic & update documentation.
This commit updates the show-more js file which can be used for multiple components that require a fold in/ fold out functionality. The refactor aims to keep the existing funtionality aswell as add to it. This includes - Make it possible to select whether the list-button show be visible or not after expanding a list. - Determine how many list items show be initially shown, with a fallback of the amount of list-elements if not specified. - Automatically hide the button if there are no more elements to show than specified through the - Automatically handle aria-control linking between list/button. - Moved some data-attributes to other elements as well as renaming some variables. If you see any improvements to something or another feature that would be nice feel free to comment. Currently it is only possible to use this, if the button/list exists in the same wrapper. This could be change later if relevant but currently it isn't. Updated .md file also to reflect these changes. DDFFORM-69
- Loading branch information
1 parent
3b14277
commit d819330
Showing
2 changed files
with
91 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,73 @@ | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| const lists = document.querySelectorAll("[data-show-more-list]"); | ||
| const listWrappers = document.querySelectorAll( | ||
| "[data-show-more-list-wrapper]" | ||
| ); | ||
|
|
||
| lists.forEach((list) => { | ||
| const uid = Math.floor(Math.random() * 1000000); | ||
| list.setAttribute("id", `category-list-${uid}`); | ||
| listWrappers.forEach((listWrapper) => { | ||
| const list = listWrapper.querySelector("[data-show-more-list]"); | ||
| const listId = list.getAttribute("data-show-more-list-id"); | ||
| const listElements = list.querySelectorAll("[data-show-more-item]"); | ||
| const amountOfListElements = parseInt(listElements.length, 10); | ||
| const listShowMoreButton = listWrapper.querySelector( | ||
| "[data-show-more-button]" | ||
| ); | ||
|
|
||
| const categories = list.querySelectorAll("[data-show-more-item]"); | ||
| const toggleButton = list.querySelector("[data-show-more-button]"); | ||
| toggleButton.setAttribute("id", `category-toggle-${uid}`); | ||
| if (!list || !listShowMoreButton || !listElements || !listId) { | ||
| const missingElements = []; | ||
| if (!list) missingElements.push("list"); | ||
| if (!listShowMoreButton) missingElements.push("listShowMoreButton"); | ||
| if (!listElements.length) missingElements.push("listElements"); | ||
| if (!listId) missingElements.push("listId"); | ||
|
|
||
| // eslint-disable-next-line no-console | ||
| console.debug( | ||
| `show-more.js: Missing required elements: ${missingElements.join(", ")}` | ||
| ); | ||
| return; | ||
| } | ||
|
|
||
| // Add listId & aria attributes to list and buttons | ||
| list.setAttribute("id", `list-id-${listId}`); | ||
| listShowMoreButton.setAttribute("aria-controls", `list-id-${listId}`); | ||
|
|
||
| const initialVisibleItems = | ||
| list.getAttribute("data-show-more-initial-visible-items") || 2; // default to 2 if not set | ||
| list.getAttribute("data-initial-visible-items") || amountOfListElements; | ||
|
|
||
| // if there are no categories or only one category, hide the toggle button | ||
| // or if there are less categories than the initial visible items, hide the toggle button | ||
| if (!categories.length || categories.length <= initialVisibleItems) { | ||
| toggleButton.classList.add("show-more__hidden"); | ||
| // Hide button if there are less items than the initial visible items | ||
| if (initialVisibleItems >= amountOfListElements) { | ||
| listShowMoreButton.classList.add("show-more__hidden"); | ||
| return; | ||
| } | ||
|
|
||
| const showMoreText = | ||
| toggleButton.getAttribute("data-show-more-text") || "+"; | ||
| const hideMoreText = | ||
| toggleButton.getAttribute("data-show-more-hide-text") || "-"; | ||
| const visibleItems = initialVisibleItems - 1; | ||
|
|
||
| categories.forEach((item, index) => { | ||
| if (index > visibleItems) item.classList.add("show-more__hidden"); | ||
| // Hide items beyond the initial visible items | ||
| listElements.forEach((listItem, index) => { | ||
| if (index > initialVisibleItems - 1) | ||
| listItem.classList.add("show-more__hidden"); | ||
| }); | ||
|
|
||
| toggleButton.addEventListener("click", () => { | ||
| const isExpanded = toggleButton.getAttribute("aria-expanded") === "true"; | ||
| categories.forEach((item, index) => { | ||
| if (index > visibleItems) item.classList.toggle("show-more__hidden"); | ||
| const showMoreText = listShowMoreButton.getAttribute("data-show-more-text"); | ||
| const showLessText = listShowMoreButton.getAttribute("data-show-less-text"); | ||
| const hideListButtonAfterExpand = list.getAttribute( | ||
| "data-hide-list-button-after-expand" | ||
| ); | ||
|
|
||
| listShowMoreButton.addEventListener("click", () => { | ||
| listElements.forEach((listItem, index) => { | ||
| if (index > initialVisibleItems - 1) | ||
| listItem.classList.toggle("show-more__hidden"); | ||
| }); | ||
| toggleButton.innerText = isExpanded ? showMoreText : hideMoreText; | ||
| toggleButton.setAttribute("aria-expanded", !isExpanded); | ||
|
|
||
| const isAriaExpanded = | ||
| listShowMoreButton.getAttribute("aria-expanded") === "true"; | ||
| listShowMoreButton.setAttribute("aria-expanded", !isAriaExpanded); | ||
|
|
||
| listShowMoreButton.innerText = isAriaExpanded | ||
| ? showMoreText | ||
| : showLessText; | ||
|
|
||
| if (hideListButtonAfterExpand === "true" && !isAriaExpanded) { | ||
| listShowMoreButton.classList.add("show-more__hidden"); | ||
| } | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters