https://ilias.hu/assets/js/accordion.js?_v=11_3

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
17il.Accordion = {
18
19  duration: 100,
20
21  data: {},
22
23  initAll() {
24    $;
25  },
26
27  /**
28	 * Add accordion element
29	 *
30	 * Options:
31	 * id: id,
32	 * toggle_class: toggle_class,
33	 * toggle_act_class: toggle_act_class,
34	 * content_class: content_class,
35	 * width: width,
36	 * height: height,
37	 * orientation: orientation,
38	 * behaviour: behaviour,
39	 * save_url: save_url,
40	 * active_head_class: active_head_class,
41	 * int_id: int_id,
42	 * initial_opened: initial opened accordion tabs (nr, separated by ;)
43	 * multi: multi
44	 * show_all_element: ID of HTML element that triggers show all
45	 * hide_all_element: ID of HTML element that triggers hide all
46	 */
47  add(options) {
48    options.animating = false;
49    options.clicked_acc = null;
50    options.last_opened_acc = null;
51
52    if (typeof options.reset_width === 'undefined') {
53      options.reset_width = false;
54    }
55
56    if (typeof options.show_all_element === 'undefined') {
57      options.show_all_element = null;
58    }
59
60    if (typeof options.hide_all_element === 'undefined') {
61      options.hide_all_element = null;
62    }
63
64    if ((typeof options.initial_opened !== 'undefined') && options.initial_opened && options.initial_opened.length > 0) {
65      options.initial_opened = options.initial_opened.split(';');
66    } else {
67      options.initial_opened = [];
68    }
69
70    il.Accordion.data[options.id] = options;
71    il.Accordion.init(options.id);
72  },
73
74  init(id) {
75    let t; let el; let next_el; let acc_el; const a = il.Accordion.data[id]; let apt; let
76      sp;
77    console.log('acc init 1');
78    if (a.behaviour == 'Carousel') {
79      apt = (a.auto_anim_wait > 100)
80        ? a.auto_anim_wait
81        : 5000;
82      sp = (a.random_start)
83        ? Math.floor(Math.random() * $(`#${id}`).children().length)
84        : 0;
85
86      $(`#${id}`).owlCarousel({
87        items: 1, autoplay: true, loop: true, dots: false, autoplayTimeout: apt, startPosition: sp,
88      });
89      return;
90    }
91    console.log('acc init');
92    // open the inital opened tabs
93    if (a.initial_opened.length > 0) {
94      for (let i = 0; i < a.initial_opened.length; i++) {
95        acc_el = $(`#${id} div.${a.content_class}:eq(${parseInt(a.initial_opened[i]) - 1})`);
96        acc_el.removeClass('ilAccHideContent');
97        il.Accordion.addActiveHeadClass(id, acc_el[0]);
98        a.last_opened_acc = acc_el.get(0);
99      }
100    } else if (a.behaviour == 'FirstOpen') {
101      acc_el = $(`#${id} div.${a.content_class}:eq(0)`);
102      acc_el.removeClass('ilAccHideContent');
103      il.Accordion.addActiveHeadClass(id, acc_el[0]);
104      a.last_opened_acc = acc_el.get(0);
105    }
106
107    // register click handler (if not all opened is forced)
108    if (a.behaviour != 'ForceAllOpen') {
109      $(`#${id}`).children().children(`.${a.toggle_class}`).each(function () {
110        t = $(this);
111
112        t.find('a').click((e) => {
113          e.stopPropagation(); // enable links inside of accordion header
114        });
115
116        t.on('click', { id, el: t }, il.Accordion.clickHandler);
117        t.on('keypress', function (e) {
118          if (e.which === 13 || e.which === 32) {
119            $(this).find("div[role='button']").trigger('click');
120          }
121        });
122      });
123    }
124
125    if (a.show_all_element) {
126      $(`#${a.show_all_element}`).prop('onclick', '').on('click', { id }, il.Accordion.showAll);
127    }
128    if (a.hide_all_element) {
129      $(`#${a.hide_all_element}`).prop('onclick', '').on('click', { id }, il.Accordion.hideAll);
130    }
131  },
132
133  isOpened(el) {
134    return !$(el).hasClass('ilAccHideContent');
135  },
136
137  getAllOpenedNr(id) {
138    let opened_str = '';
139    let lim = '';
140    let t = 1;
141    const a = il.Accordion.data[id];
142
143    $(`#${id}`).children().children(`.${a.content_class}`).each(function () {
144      if (!$(this).hasClass('ilAccHideContent')) {
145        opened_str = `${opened_str + lim}${t}`;
146        lim = ';';
147      }
148      t++;
149    });
150
151    return opened_str;
152  },
153
154  getAllNr(id) {
155    let all_str = '';
156    let lim = '';
157    let t = 1;
158    const a = il.Accordion.data[id];
159
160    $(`#${id}`).children().children(`.${a.content_class}`).each(() => {
161      all_str = `${all_str + lim}${t}`;
162      lim = ';';
163      t++;
164    });
165    return all_str;
166  },
167
168  clickHandler(e) {
169    let a; let el; let
170      id;
171    // console.log("clicked");
172    id = e.data.id;
173    a = il.Accordion.data[id];
174    el = e.data.el;
175    e.preventDefault();
176
177    if (a.animating) {
178      return false;

179    }
180
181    a.clicked_acc = el.next()[0];
182
183    if (il.Accordion.isOpened(a.clicked_acc)) {
184      il.Accordion.deactivate(id, el);
185    } else {
186      il.Accordion.handleAccordion(id, el);
187    }
188    return false;
189  },
190
191  initByIntId(int_id) {
192    for (const a in il.Accordion.data) {
193      if (a.int_id == int_id) {
194        il.Accordion.init(a.id);
195      }
196    }
197  },
198
199  addActiveHeadClass(id, acc_el) {
200    const a = il.Accordion.data[id];
201
202    if (a.active_head_class && a.active_head_class != '' && acc_el) {
203      const b = $(acc_el.parentNode).children(':first').children(':first');
204      b.addClass(a.active_head_class);
205      b.attr('aria-expanded', true);
206    }
207  },
208
209  removeActiveHeadClass(id, acc_el) {
210    const a = il.Accordion.data[id];
211
212    if (a.active_head_class && a.active_head_class != '' && acc_el) {
213      const b = $(acc_el.parentNode).children(':first').children(':first');
214      b.removeClass(a.active_head_class);
215      b.attr('aria-expanded', false);
216    }
217  },
218
219  showAll(e) {
220    let options; const
221      { id } = e.data;
222    const a = il.Accordion.data[id];
223    e.preventDefault();
224    e.stopPropagation();
225    if (a.multi) {
226      // console.log("deactivate");
227      a.animating = true;
228
229      $(`#${id}`).children().children(`.${a.content_class}`).each(function () {
230        t = $(this);
231        if (t.hasClass('ilAccHideContent')) {
232          il.Accordion.addActiveHeadClass(id, this);
233
234          // fade in the accordion (currentAccordion)
235          options = il.Accordion.prepareShow(a, t);
236          $(t).animate(options, il.Accordion.duration, () => {
237            $(t).css('height', 'auto');
238
239            // set the currently shown accordion
240            a.last_opened_acc = t;
241            il.Accordion.rerenderContent(t);
242
243            a.animating = false;
244          });
245        }
246      });
247
248      il.Accordion.saveAllAsOpenedTabs(a, id);
249    }
250
251    return false;
252  },
253
254  preparePrint() {
255    for (var id in il.Accordion.data) {
256      var a = il.Accordion.data[id];
257
258      $(`#${id}`).children().children(`.${a.content_class}`).each(function () {
259        t = $(this);
260        if (t.hasClass('ilAccHideContent')) {
261          il.Accordion.addActiveHeadClass(id, this);
262
263          // fade in the accordion (currentAccordion)
264          options = il.Accordion.prepareShow(a, t);
265          $(t).animate(options, 0, () => {
266            $(t).css('height', 'auto');
267
268            // set the currently shown accordion
269            a.last_opened_acc = t;
270            il.Accordion.rerenderContent(t);
271
272            a.animating = false;
273          });
274        }
275      });
276
277      il.Accordion.saveAllAsOpenedTabs(a, id);
278    }
279  },
280
281  hideAll(e) {
282    const { id } = e.data;
283    const a = il.Accordion.data[id];
284    e.preventDefault();
285    e.stopPropagation();
286    if (a.multi) {
287      //			console.log("hide all");
288
289      // console.log("deactivate");
290      a.animating = true;
291
292      $(`#${id}`).children().children(`.${a.content_class}`).each(function () {
293        t = $(this);
294        if (!t.hasClass('ilAccHideContent')) {
295          il.Accordion.removeActiveHeadClass(id, t);
296
297          if (a.orientation == 'vertical') {
298            options = { height: 0 };
299          } else {
300            options = { width: 0 };
301          }
302
303          t.animate(options, il.Accordion.duration, function () {
304            //						console.log("adding hide to");
305            //						console.log(this);
306            $(this).addClass('ilAccHideContent');
307            a.last_opened_acc = null;
308            a.animating = false;
309          });
310        }
311      });
312
313      const save_url = il.Accordion.getSaveUrl(a);
314      if (save_url != '') {
315        // il.Util.sendAjaxGetRequestToUrl(save_url + "&act=clear&tab_nr=", {}, {}, null);
316        $.get(`${save_url}&act=clear&tab_nr=`, null);
317      }
318    }
319    return false;
320  },
321
322  deactivate(id, el) {
323    let options; let act; const
324      a = il.Accordion.data[id];
325
326    // console.log("deactivate");
327    a.animating = true;
328
329    // $(el).css("display", "block");
330
331    il.Accordion.removeActiveHeadClass(id, a.clicked_acc);
332
333    if (a.orientation == 'vertical') {
334      options = { height: 0 };
335    } else {
336      options = { width: 0 };
337    }
338
339    $(a.clicked_acc).animate(options, il.Accordion.duration, () => {
340      $(a.clicked_acc).addClass('ilAccHideContent');
341      a.last_opened_acc = null;
342      a.animating = false;

343      const save_url = il.Accordion.getSaveUrl(a);
344      if (save_url != '') {
345        act = (a.multi)
346          ? '&act=rem'
347          : '&act=clear';
348        tab_nr = il.Accordion.getTabNr(a.clicked_acc);
349        $.get(`${save_url + act}&tab_nr=${tab_nr}`, null);
350        // il.Util.sendAjaxGetRequestToUrl(save_url + act + "&tab_nr=" + tab_nr, {}, {}, null);
351      }
352    });
353  },
354
355  getTabNr(acc_el) {
356    let tab_nr = 1;
357    let cel = acc_el.parentNode;
358    while (cel = cel.previousSibling) {
359      if (cel.nodeName.toUpperCase() == 'DIV') {
360        tab_nr++;
361      }
362    }
363    return tab_nr;
364  },
365
366  prepareShow(a, acc_el) {
367    let options;
368    if (a.orientation == 'vertical') {
369      $(acc_el).css('position', 'relative')
370        .css('left', '-10000px')
371        .css('display', 'block');
372
373      $(acc_el).removeClass('ilAccHideContent');
374
375      const nh = a.height
376        ? a.height
377        : $(acc_el).prop('scrollHeight');
378
379      $(acc_el).css('height', '0px')
380        .css('position', '')
381        .css('display', '')
382        .css('left', '');
383
384      options = {
385        height: a.height
386          ? a.height
387          : $(acc_el).prop('scrollHeight'),
388      };
389    } else {
390      $(acc_el).css('width', '0px');
391      $(acc_el).removeClass('ilAccHideContent');
392      options = {
393        width: (a.width
394          ? a.width
395          : $(acc_el).prop('scrollWidth')),
396      };
397    }
398    return options;
399  },
400
401  saveAllAsOpenedTabs(a, id) {
402    const save_url = il.Accordion.getSaveUrl(a);
403    if (save_url !== '') {
404      tab_nr = il.Accordion.getAllNr(id);
405      $.get(`${save_url}&act=set&tab_nr=${tab_nr}`, null);
406      // il.Util.sendAjaxGetRequestToUrl(save_url + "&act=set&tab_nr=" + tab_nr, {}, {}, null);
407    }
408  },
409
410  getSaveUrl(a) {
411    if (typeof a.save_url !== 'undefined' && a.save_url != '') {
412      let { save_url } = a;
413      if (!save_url.includes('accordion_id=')) {
414        save_url = `${save_url}&accordion_id=${a.id}`;
415      }
416      return save_url;
417    }
418    return '';
419  },
420
421  saveOpenedTabs(a, id) {
422    const save_url = il.Accordion.getSaveUrl(a);
423    if (save_url != '') {
424      if (a.multi) {
425        tab_nr = il.Accordion.getAllOpenedNr(id);
426      } else {
427        tab_nr = il.Accordion.getTabNr(a.last_opened_acc);
428      }
429      act = '&act=set';
430      $.get(`${save_url + act}&tab_nr=${tab_nr}`, null);
431      // il.Util.sendAjaxGetRequestToUrl(save_url + act + "&tab_nr=" + tab_nr, {}, {}, null);
432    }
433  },
434
435  handleAccordion(id, el) {
436    // console.log("handle");
437    let options; let options2; let last_acc; let tab_nr; const
438      a = il.Accordion.data[id];
439    a.animating = true;
440
441    // add active class to opened accordion
442    if (a.active_head_class && a.active_head_class != '') {
443      if (a.last_opened_acc && !a.multi) {
444        il.Accordion.removeActiveHeadClass(id, a.last_opened_acc);
445      }
446      il.Accordion.addActiveHeadClass(id, a.clicked_acc);
447    }
448
449    // fade in the new accordion (currentAccordion)
450    options = il.Accordion.prepareShow(a, a.clicked_acc);
451    il.Accordion.afterStartOpening(a.clicked_acc);
452
453    $(a.clicked_acc).animate(options, il.Accordion.duration, () => {
454      $(a.clicked_acc).css('height', 'auto');
455      if (a.reset_width) {
456        $(a.clicked_acc).css('width', a.width);
457      }
458
459      // set the currently shown accordion
460      a.last_opened_acc = a.clicked_acc;
461
462      il.Accordion.afterOpening(a.clicked_acc);
463
464      il.Accordion.saveOpenedTabs(a, id);
465
466      a.animating = false;
467    });
468
469    // fade out the currently shown accordion (last_opened_acc)
470    if ((last_acc = a.last_opened_acc) && !a.multi) {
471      if (a.orientation == 'vertical') {
472        options2 = { height: 0 };
473      } else {
474        options2 = { width: 0 };
475      }
476      $(last_acc).animate(options2, il.Accordion.duration, () => {
477        $(last_acc).addClass('ilAccHideContent');
478      });
479    }
480  },
481
482  afterOpening(acc_el) {
483    $(acc_el).trigger('il.accordion.opened', [acc_el]);
484    il.Accordion.rerenderContent(acc_el);
485  },
486
487  afterStartOpening(acc_el) {
488    $(acc_el).trigger('il.accordion.start-opening', [acc_el]);
489  },
490
491  rerenderContent(acc_el) {
492    // rerender mathjax
493    il.Util.renderMathJax([acc_el[0]]);
494
495    // rerender google maps
496    if (typeof ilMapRerender !== 'undefined') {
497      ilMapRerender(acc_el);
498    }
499
500    // see https://mantis.ilias.de/view.php?id=25301
501    // see https://mantis.ilias.de/view.php?id=34329
502    // previously we removed/re-added the player
503    // in ilCOPagePres which led to #34329
504    window.dispatchEvent(new Event('resize'));
505  },
506
507};
508
509(function ($, il) {
510  $(() => {
511    il.Accordion.initAll();
512  });
513}($, il));