https://www.univ-tech.eu/jsp/scripts/dropdown-button.js

1/*
2 * Copyright (C) 2015 - 2018 Kosmos [email protected]
3 *
4 * Projet: frontgen
5 * Version: 7.1.0
6 *
7 * Licensed under the Apache License, Version 2.0 (the "License");
8 * you may not use this file except in compliance with the License.
9 * You may obtain a copy of the License at
10 *
11 *         http://www.apache.org/licenses/LICENSE-2.0
12 *
13 * Unless required by applicable law or agreed to in writing, software
14 * distributed under the License is distributed on an "AS IS" BASIS,
15 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 * See the License for the specific language governing permissions and
17 * limitations under the License.
18 */
19(function() {
20    'use strict';
21
22    let callbacks = [];
23
24    window.collapsableCommons = {
25        // Hide every opened menu
26        hideAll: function (exceptions) {
27            let opened = document.querySelectorAll('.plier-deplier__contenu--ouvert');
28
29            // Filters exceptions
30            if (typeof exceptions === 'string') {
31                opened = Array.prototype.filter.call(opened, function(selectedElement) {
32                    return !selectedElement.classList.contains(exceptions);
33                });
34            } else if (Object.prototype.toString.call(exceptions) === '[object Array]') {
35                opened = exceptions.forEach(exception => Array.prototype.filter.call(opened, function(selectedElement) {
36                    return !selectedElement.classList.contains(exception);
37                }));
38            } else if (Object.prototype.toString.call(exceptions) === '[object Function]') {
39                opened = Array.prototype.filter.call(opened, exceptions);
40            }
41
42            // Handles states
43            opened.forEach(element => {
44                element.classList.remove('plier-deplier__contenu--ouvert');
45                element.classList.add('plier-deplier__contenu--clos');
46                let buttons = element.parentNode.getElementsByClassName('plier-deplier__bouton');
47                if (buttons[0]) {
48                    buttons[0].setAttribute('aria-expanded', true);
49                }
50            });
51
52            callbacks.forEach(function(callback) {
53                callback()
54            });
55        },
56        registerCallback: function (callback) {
57            if (callback && {}.toString.call(callback) === '[object Function]') {
58                callbacks.push(callback);
59            }
60        }
61    };
62
63    let foldUnfoldElements = document.querySelectorAll('.plier-deplier');
64
65    /**
66     * Handles default menu behaviors.
67     */
68    // Handle click and focusin events outside menus to close them
69    document.documentElement.addEventListener('click', function() {
70        collapsableCommons.hideAll('plier-deplier__contenu--relatif')
71    });
72
73    // Handle click and focusin events so it doesn't bubble to the html element
74    document.querySelectorAll('.plier-deplier__contenu').forEach(function(element) {
75        element.addEventListener('click', function(e) {
76            e.stopPropagation();
77        })
78    });
79
80    foldUnfoldElements.forEach(function(element) {
81        element.addEventListener('focus', function(e) {
82            e.stopPropagation();
83        })
84    });
85
86    // Création de la liste des éléments à gérer
87    let buttonList = Array.prototype.filter.call(foldUnfoldElements, function(selectedElement) {
88        return !selectedElement.classList.contains('plier-deplier__contenu--relatif');
89    });
90    let buttonList2 = Array.prototype.filter.call(document.getElementsByClassName('plier-deplier__bouton'),
91        function(selectedElement) {
92                    return selectedElement.id !== 'menu-principal-bouton';
93                });
94    buttonList.concat(buttonList2).forEach(function (element) {
95        element.addEventListener('click', foldUnfold)
96    });
97
98    /**
99     * Fonction d'ouverture/fermeture des contenus gérés.
100     * @param element l'élément qui a pris le clique
101     */
102    function foldUnfold(element) {
103        element.preventDefault();
104        element.stopPropagation();
105
106        let foldUnfoldGroup = this.dataset['plierdeplierGroup'];
107        let contents = this.parentNode.getElementsByClassName('plier-

107deplier__contenu');
108        if (foldUnfoldGroup) {
109            contents = Array.prototype.filter.call(contents, function(selectedElement) {
110                return filterByElementGroupData(selectedElement, foldUnfoldGroup);
111            });
112        }
113        let haveToClose = true;
114        for (let i = 0; i < contents.length; i++) {
115            haveToClose &= contents[i].classList.contains('plier-deplier__contenu--ouvert');
116            contents[i].classList.toggle('plier-deplier__contenu--clos');
117            contents[i].classList.toggle('plier-deplier__contenu--ouvert');
118        }
119        if (haveToClose) {
120            if (foldUnfoldGroup) {
121                collapsableCommons.hideAll(function(selectedElement) {
122                    return filterByElementGroupData(selectedElement, foldUnfoldGroup);
123                });
124            } else {
125                collapsableCommons.hideAll();
126            }
127        }
128    }
129
130    /**
131     * Permet de filtrer sur les éléments sélectionné.
132     * Le filtre s'applique sur les éléments possédant le même data-attribute "plierdeplier-group".
133     * @param selectedElement l'élément sélectionné
134     * @param group le groupe d'application
135     * @return {boolean} true si l'élément est accepté
136     */
137    function filterByElementGroupData(selectedElement, group) {
138        return selectedElement.dataset['plierdeplierGroup'] === group;
139    }
140
141})();