https://www.elle.cz/js/modules/listingDescriptionToggle.js

1import {setAriaExpanded} from '../core/aria.js';
2import {createRafScheduler} from '../core/rafScheduler.js';
3
4export function initListingDescriptionToggle() {
5  const listingHeaders = document.querySelectorAll('[data-listing-description]');
6
7  listingHeaders.forEach((headerElement) => {
8    const descriptionElement = headerElement.querySelector('[data-listing-description-content]');
9    const toggleButton = headerElement.querySelector('[data-listing-description-toggle]');
10
11    if (!(descriptionElement instanceof HTMLElement) || !(toggleButton instanceof HTMLButtonElement)) {
12      return;
13    }
14
15    const expandedClassName = 'article-listing-header--expanded';
16
17    const updateToggleVisibility = () => {
18      const wasExpanded = headerElement.classList.contains(expandedClassName);
19
20      if (wasExpanded) {
21        headerElement.classList.remove(expandedClassName);
22      }
23
24      const isExpandable = descriptionElement.scrollHeight > descriptionElement.clientHeight + 1;
25      toggleButton.hidden = !isExpandable;
26
27      if (isExpandable && wasExpanded) {
28        headerElement.classList.add(expandedClassName);
29        setAriaExpanded(toggleButton, true);
30      }
31
32      if (!isExpandable) {
33        headerElement.classList.remove(expandedClassName);
34        setAriaExpanded(toggleButton, false);
35      }
36    };
37
38    const visibilityScheduler = createRafScheduler(updateToggleVisibility);
39
40    updateToggleVisibility();
41
42    if (document.fonts) {
43      document.fonts.ready.then(visibilityScheduler.schedule);
44    }
45
46    window.addEventListener('resize', visibilityScheduler.schedule);
47
48    toggleButton.addEventListener('click', () => {
49      const isExpanded = headerElement.classList.toggle(expandedClassName);
50      setAriaExpanded(toggleButton, isExpanded);
51    });
52  });
53}