https://docu.ilias.de/components/ILIAS/COPage/PC/Tabs/js/presentation.js?_v=11_4

1/**
2 * This file is part of ILIAS, a powerful learning management system
3 * published by ILIAS open source e-Learning e.V.
4 *
5 * ILIAS is licensed with the GPL-3.0,
6 * see https://www.gnu.org/licenses/gpl-3.0.en.html
7 * You should have received a copy of said license along with the
8 * source code, too.
9 *
10 * If this is not the case or you just want to try ILIAS, you'll find
11 * us at:
12 * https://www.ilias.de
13 * https://github.com/ILIAS-eLearning
14 *
15 ******************************************************************** */
16
17const presentation = (function () {
18  // used for slides container
19  function adjustHeight(container) {
20    let maxHeight = 0;
21    Array.from(container.children).forEach((child) => {
22      const originalDisplay = child.style.display;
23      if (window.getComputedStyle(child).display === 'none') {
24        child.style.display = 'block'; // Set to block to measure height
25      }
26      maxHeight = Math.max(maxHeight, child.offsetHeight);
27      child.style.display = originalDisplay;
28    });
29    container.style.height = `${maxHeight}px`;
30  }
31
32  function hideAllTabs(tabsContainer, contentClass, activeHeadClass) {
33    tabsContainer.querySelectorAll(`.${contentClass}`).forEach((content) => {
34      content.classList.add('ilAccHideContent');
35    });
36    tabsContainer.querySelectorAll(`.${activeHeadClass}`).forEach((head) => {
37      head.classList.remove(activeHeadClass);
38    });
39  }
40
41  function showTab(toggler, contentNode, activeHeadClass) {
42    contentNode.classList.remove('ilAccHideContent');
43    toggler.querySelector('[role="button"]').classList.add(activeHeadClass);
44    rerenderContent(contentNode);
45  }
46
47  function clickHandler(e, toggler, contentClass, toggleClass, toggleActClass, activeHeadClass) {
48    const togglerParent = toggler.parentNode;
49    const tabsContainer = togglerParent.parentNode;
50    const contentNode = togglerParent.querySelector(`.${contentClass}`);
51
52    e.preventDefault();
53
54    if (contentNode.classList.contains('ilAccHideContent')) {
55      // tab was hidden
56      // hide all
57      hideAllTabs(tabsContainer, contentClass, activeHeadClass);
58      showTab(toggler, contentNode, activeHeadClass);
59    } else {
60      hideAllTabs(tabsContainer, contentClass, activeHeadClass);
61    }
62  }
63
64  function rerenderContent(contentElement) {
65    // rerender mathjax
66    // eslint-disable-next-line no-undef
67    if (typeof MathJax !== 'undefined' && typeof MathJax.Hub !== 'undefined') {
68      // eslint-disable-next-line no-undef
69      MathJax.Hub.Queue(['Reprocess', MathJax.Hub, contentElement[0]]);
70    }
71    // see http://docs.mathjax.org/en/latest/typeset.html
72
73    // rerender google maps
74    if (typeof ilMapRerender !== 'undefined') {
75      // eslint-disable-next-line no-undef
76      ilMapRerender(contentElement);
77    }
78
79    // see https://mantis.ilias.de/view.php?id=25301
80    // see https://mantis.ilias.de/view.php?id=34329
81    // previously we removed/re-added the player
82    // in ilCOPagePres which led to #34329
83    window.dispatchEvent(new Event('resize'));
84  }
85
86  function init(node) {
87    node.querySelectorAll('[data-copg-tabs-type]').forEach((tabContainer) => {
88      const type = tabContainer.dataset.copgTabsType;
89      if (type === 'Carousel') {
90        // +
91        // carousel
92        // +
93        let displayDuration = tabContainer.dataset.copgTabsAutoAnimWait;
94        if (displayDuration === '' || displayDuration === 'NaN') {
95          displayDuration = 5000;
96        }
97        // const randomStart = tabContainer.dataset.copgTabsRandomStart;
98        const slides = tabContainer.querySelectorAll('& > div');
99        const totalSlides = slides.length;
100        let currentIndex = 0;
101
102        // fix height of container
103        adjustHeight(tabContainer);
104        window.addEventListener('resize', () => {
105          adjustHeight(tabContainer);
106        });
107
108        const showSlide = (index) => {
109          const slide = slides[index];
110          slide.style.display = 'block';
111          // force reflow
112          slide.getBoundingClientRect();
113          // start
114          slide.classList.add('active');
115          setTimeout(() => {
116            slide.classList.remove('active');
117            // Nach Abschluss der Ausblendung 'display: none' setzen und nächstes DIV anzeigen
118            slide.addEventListener('transitionend', function handler(event) {
119              if (event.propertyName === 'opacity') {
120                slide.style.display = 'none';
121                slide.removeEventListener('transitionend', handler);
122                // Nächstes Slide anzeigen
123                currentIndex = (currentIndex + 1) % totalSlides;
124                showSlide(currentIndex);
125              }
126            });
127          }, displayDuration);
128        };
129        // start slide show
130        showSlide(currentIndex);
131      } else {
132        // +
133        // accordions
134        // +
135
136        const toggleClass = tabContainer.dataset.copgTabsToggleClass;
137        const toggleActClass = tabContainer.dataset.copgTabsToggleActClass;
138        const contentClass = tabContainer.dataset.copgTabsContentClass;
139        const behaviour = tabContainer.dataset.copgTabsBehaviour;
140        const activeHeadClass = tabContainer.dataset.copgTabsActiveHeadClass;
141
142        // register click handler (if not all opened is forced)
143        if (behaviour !== 'ForceAllOpen') {
144          tabContainer.querySelectorAll(`.${toggleClass}`).forEach((toggler) => {
145            if (toggler.dataset.isInitialised) {
146              return;
147            }
148            toggler.querySelectorAll('a').forEach((aInToggler) => {
149              aInToggler.addEventListener('click', (e) => {
150                e.stopPropagation(); // enable links inside of accordion header
151              });
152            });
153            toggler.addEventListener('click', (e) => {
154              clickHandler(e, toggler, contentClass, toggleClass, toggleActClass, activeHeadClass);
155            });
156            toggler.addEventListener('keypress', () => {
157              toggler.querySelector("div[role='button']").click();
158            });

159            toggler.dataset.isInitialised = true;
160          });
161          if (behaviour === 'FirstOpen') {
162            const firstToggler = tabContainer.querySelector(`.${toggleClass}`);
163            if (firstToggler) {
164              const firstTogglerParent = firstToggler.parentNode;
165              const firstContentNode = firstTogglerParent.querySelector(`.${contentClass}`);
166              showTab(firstToggler, firstContentNode, activeHeadClass);
167            }
168          }
169        }
170      }
171    });
172  }
173
174  return {
175    init,
176  };
177}());
178window.addEventListener('load', () => {
179  presentation.init(document);
180}, false);