https://metropoleparticipative.fr/include/gabarit_site/GAB_DEMOC/democ.js

1var democ = {
2    init: function () {
3        if ($('.PRS_FAQ').length > 0) {
4            democ.toggleFAQ('');
5        }
6
7        democ.divers();
8        democ.wrapFields();
9        democ.wrapColonneAccueil();
10        democ.manageMenu();
11
12        $(window).on('resize', function () {
13            democ.manageMenu();
14        });
15
16        $(document).ready(function () {
17            democ.wrappers.init();
18            democ.hasOverlay();
19            democ.hasMobileOverlay();
20        });
21    },
22    divers: function () {
23        let switchButton = false;
24        const $hasSurHeader = $('#surBandeauHaut').length > 0;
25        $(window).on("load resize", function () {
26            if ($(window).width() < 580 && !switchButton && !$hasSurHeader) {
27                switchButton = true;
28                $(".menuSecondaire").appendTo("#menu > .inner");
29            } else if ($(window).width() >= 580 && switchButton && !$hasSurHeader) {
30                switchButton = false;
31                $(".menuSecondaire").insertAfter("#menu");
32            }
33        });
34
35        $(".TPL_SOMMAIREPAGE a").on('click', function () {
36            let anchor = $(this).attr('href');
37            $('html,body').animate({scrollTop: ($(anchor).offset().top - 20 - $('#bandeauHaut').outerHeight(false))}, 1400);
38        });
39
40        $("#hautDePage").on('click', function () {
41            $('html,body').animate({scrollTop: 0}, 700);
42            $('#document').attr('tabindex', '-1').focus().removeAttr('tabindex');
43        });
44
45        if ($(".TPL_ACTUALITELISTE li.noResult").length > 0) {
46            $(".TPL_ACTUALITELISTE").addClass('empty');
47        }
48
49        if ($(".TPL_PARTICIPATIONLISTE li.noResult").length > 0) {
50            $(".TPL_PARTICIPATIONLISTE").addClass('empty');
51        }
52
53        if ($(".TPL_PARTICIPATIONSUBMISSION").length > 0) {
54            $("#participationTabContent > h1, #participationTabContent > p").remove();
55        }
56
57        $(".contentLeft .mobileNav").on('click', function () {
58            $(".contentLeft .mobileNav").toggleClass('closed').toggleClass('open');
59            $(".contentLeft .mobileNav + ul").slideToggle();
60        });
61
62        $("#btnRecherche").on('click', function () {
63            $("#blocRecherche").addClass("opened");
64            $("#searchString").trigger('focus');
65        });
66
67        democ.getScrollbarWidthCSSVariable();
68    },
69    wrapFields: function () {
70        $('select').each(function () {
71            $(this).wrapAll('<span class="wrapperSelect"></span>');
72        });
73        $("input[data-type='date']").each(function () {
74            $(this).wrapAll('<span class="wrapperDate"></span>');
75        });
76    },
77    wrapColonneAccueil: function () {
78        if($('.accueil').length > 0) {
79            var colonnageAccueil = $('[class*="PRS_WIDTH"]');
80            for (var i = 0; i < colonnageAccueil.length;) {
81                i += colonnageAccueil.eq(i).nextUntil(':not([class*="PRS_WIDTH"])').addBack().wrapAll('<div class="wrapper_colonnage"></div>').length;
82            }
83        }
84    },
85    manageMenu: function () {
86        let widthWindow = window.innerWidth;
87        let isInMenuBurger = $(".menuSecondaire").closest('#menu').length == 1;
88        const niv1 = $('.menuItemNiv1 a.menuLinkNiv1');
89        const niv2 = $('.menuListNiv2 a.menuLinkNiv2');
90
91        if (widthWindow < 580 && !isInMenuBurger) {
92            $(".menuSecondaire").appendTo("#menu > .inner");
93        } else if (widthWindow >= 580 && isInMenuBurger) {
94            $(".menuSecondaire").insertAfter("#menu");
95        }
96
97        if (widthWindow > 1024) {
98            let $button = $('#btnMenuMobile');
99            $('#menu').removeAttr('aria-hidden').show().off('keydown.aria.btnMenuMobile');
100            $button.attr('aria-expanded', 'true');
101            $('body').off('click.aria.btnMenuMobile');
102        }
103    },
104    buildAccessibleFAQ: function (titre, id, contentFAQ) {
105        return `
106            <button type="button" aria-expanded="false" aria-controls="${id}" class="btn-faq">
107                <h2>${titre}</h2>
108            </button>
109            <div id="${id}" class="contentFAQ" role="region">
110                ${contentFAQ}
111            </div>
112        `;
113    },
114    toggleFAQ: function (selectorContainer) {
115        $(selectorContainer + " .PRS_FAQ").each(function (index) {
116            const $initialParagraphe = $(this).find(".innerParagraphe");
117            const id = 'FAQ_' + index;
118            const content = $initialParagraphe.html();
119            const titre = $(this).find('h2').html();
120            // Création d'un tableau de donnée avec les éléments HTML
121            let arr = Array.from($(content));
122            // On retire le premier élément du tableau (il s'agit du titre)
123            arr.shift();
124            // On re-transforme le tableau en collection HTML
125            let contentFaq = '';
126            arr.forEach(element => {
127                if (element.outerHTML) {
128                    contentFaq += element.outerHTML
129                }
130            });
131            // On ajoute la FAQ accessible dans le DOM avec ses données
132            $(this).append(democ.buildAccessibleFAQ(titre, id, contentFaq));
133            // On enlève les données initiales du DOM
134            $initialParagraphe.remove();
135        });
136
137        $(selectorContainer + " .btn-faq").on('click', function () {
138            if ($(this).hasClass('open')) {
139                var elem = this;
140                setTimeout(function () {
141                    $(elem).toggleClass("open").attr('aria-expanded', false);
142                }, 300);
143            } else {
144                $(this).toggleClass("open").attr('aria-expanded', true);
145            }
146            $(this).next(".contentFAQ").slideToggle('300');
147        });
148    },
149    sendEvtPageView: function (url, title) {
150        var link = document.createElement('a');
151        link.href = url;
152
153        if (typeof ga !== 'undefined' && ga !== null) {
154            var params = {
155                'hitType': 'pageview',
156                'location': link.pathname,
157                'page': link.pathname
158            };
159
160            if (title) {
161                params.title = title;
162            }
163            ga('set', 'page', link.pathname);
164            ga('send', params);
165        }
166
167        if (typeof _paq !== 'undefined') {
168            _paq.push(['setDocumentTitle', link.pathname]);
169            _paq.push(['trackPageView']);
170        }
171    },
172    initTAC: function () {
173        if (typeof tarteaucitron !== 'undefined') {
174            (tarteaucitron.job = tarteaucitron.job || []).push('youtube');
175            (tarteaucitron.job = tarteaucitron.job || []).push('dailymotion');
176            (tarteaucitron.job = tarteaucitron.job || []).push('calameo');
177            (tarteaucitron.job = tarteaucitron.job || []).push('vimeo');
178        }
179    },
180    initLightbox: function () {
181        $('a.lightbox').colorbox({
182            title: function () {
183                return $(this).data('title') !== '' ? $(this).data('title') : ' ';
184            },
185            onComplete: function () {
186                var alt = '';
187                if ($('img', this).attr('alt') !== $(this).data('title') && $('img', this).attr('alt') !== '') {
188                    alt = $('img', this).attr('alt');
189                }
190                $('.cboxPhoto').attr('alt', alt);
191            },
192            maxWidth: '95%',
193            maxHeight: '95%'
194        });
195
196    },
197    wrappers: {
198        init: function () {
199            // Styles fond gris
200            var divsBesoindAide = $('.accueil div[class*="PRS_MEA5"]');
201            divsBesoindAide.nextUntil('[class*="PRS_WIDTH_33D"]').addBack().wrapAll('<div class="wrapper_BesoindAide"></div>').wrapAll('<div class="row"></div>');
202        }
203    },
204    hasOverlay: function () {
205        $('.aria-toggle.has-overlay').on('click', function () {
206            var $button = $(this);
207            var $body = $('html, body');
208            if ($button.attr('aria-expanded') === 'true') {
209                $body.addClass('has-overlay');
210            } else {
211                $body.removeClass('has-overlay');
212            }
213        });
214    },
215    hasMobileOverlay: function () {
216        // Gestion du clique du menu mobile
217        $('.aria-toggle.has-mobile-overlay').on('click', function () {
218            var $button = $(this);
219            var $body = $('html, body');
220            if (window.innerWidth <= 1024 && $button.attr('aria-expanded') === 'true') {
221                $body.addClass('has-overlay');
222            } else {
223                $body.removeClass('has-overlay');
224            }
225        });
226
227        // Si le menu est ouvert en mobile et qu'on resize en desktop, on rétablit le scroll de la page
228        const mediaQuery = window.matchMedia('(min-width: 1025px)')
229
230        function handleTabletChange(e) {
231            if (e.matches) {
232                $('html, body').removeClass('has-overlay');
233            }
234        }
235
236        mediaQuery.addEventListener('change', handleTabletChange)
237        handleTabletChange(mediaQuery)
238    },
239    initHomeVideo: function () {
240        $('#bouton-video').on('click', function () {
241            $.colorbox({
242                href: $(this).attr('href'),
243                innerWidth: '75%',
244                onComplete: function () {
245                    tarteaucitron.job.push('youtube');
246                    var allowBtns = document.getElementsByClassName("tarteaucitronAllow");
247                    for (i = 0; i < allowBtns.length; i++) {
248                        tarteaucitron.addClickEventToElement(allowBtns[i], function () {
249                            tarteaucitron.userInterface.respond(this, true);
250                        });
251                    }
252                }
253            });
254            return false;

255        })
256    },
257    getScrollbarWidthCSSVariable: function () {
258        // On récupère la taille de la scrollbar pour l'utiliser dans le CSS
259        const scrollbarWidth = window.innerWidth - document.body.clientWidth;
260        document.querySelector(":root").style.setProperty("--scrollbarWidth", `${scrollbarWidth}px`)
261    }
262}
263$(democ.init);