function popincontenu(param) { const event = new CustomEvent('POPIN_CONTENU', { detail: '' + param + '' }) document.dispatchEvent(event) } $(document).ready(function() { $('.utoggle').click(function() { if ($(this).hasClass('closed')) { $(this).removeClass('closed') $(this).addClass('open') $(this).prev('.hide_content').slideDown(600, 'easeOutQuart') $(this).text('Voir moins') } else { $(this).removeClass('open') $(this).addClass('closed') $(this).prev('.hide_content').slideUp(600, 'easeOutQuart') $(this).text('Voir plus') } }) $('.c-text-link--toggle').click(function() { if ($(this).hasClass('closed')) { $(this).removeClass('closed') $(this).addClass('open') if ($(this).parent('p').length > 0) { $(this).parent('p').prev('.collapsible-content').slideDown(600, 'easeOutQuart') } else { $(this).prev('.collapsible-content').slideDown(600, 'easeOutQuart') } $(this).attr('aria-expanded', 'true') $(this).find('.c-text-link__text').text('Voir moins') } else { $(this).removeClass('open') $(this).addClass('closed') if ($(this).parent('p').length > 0) { $(this).parent('p').prev('.collapsible-content').slideUp(600, 'easeOutQuart') } else { $(this).prev('.collapsible-content').slideUp(600, 'easeOutQuart') } $(this).attr('aria-expanded', 'false') $(this).find('.c-text-link__text').text('Voir plus') } }) }) function formatString(chaine) { let tab1 = 'ÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ' let tab2 = 'aaaaaaaaaaaaooooooooooooeeeeeeeecciiiiiiiiuuuuuuuuynn' let rep2 = tab1.split('') let rep = tab2.split('') myarray = [] let i = -1 while (rep2[++i]) { myarray[rep2[i]] = rep[i] } myarray['Œ'] = 'OE' myarray['œ'] = 'oe' var chaine = chaine.replace(/./g, function($0) { return myarray[$0] ? myarray[$0] : $0 }) chaine = $.trim(chaine) chaine = chaine.replace(/[^A-Z0-9]+/gi, '_') return chaine } /* JS MODALE LOCALE */ function localModalOpen(control, id) { $(id).dialog({ close: function() { control.focus() }, }) $(id).dialog('open') } /**************************************/ /* Accordéons (définition de l'objet) */ 'use strict'; (function() { class Accordion { constructor(domNode) { this.rootEl = domNode this.buttonEl = this.rootEl.querySelector('button[aria-expanded]') const controlsId = this.buttonEl.getAttribute('aria-controls') this.contentEl = document.getElementById(controlsId) this.open = this.buttonEl.getAttribute('aria-expanded') === 'true' if (!this.contentEl.hasAttribute('hidden')) { this.contentEl.style.height = 'auto' } // add event listeners this.buttonEl.addEventListener('click', this.onButtonClick.bind(this)) } onButtonClick() { this.toggle(!this.open) } toggle(open) { // don't do anything if the open state doesn't change if (open === this.open) { return } // update the internal state this.open = open // handle DOM updates this.buttonEl.setAttribute('aria-expanded', `${open}`) if (open) { this.contentEl.removeAttribute('hidden') this.contentEl.style.height = '0px' this.contentEl.style.height = this.contentEl.firstElementChild.offsetHeight + 'px' setTimeout(() => { this.contentEl.style.height = 'auto' }, 300) } else { this.contentEl.style.height = this.contentEl.firstElementChild.offsetHeight + 'px' setTimeout(() => { this.contentEl.style.height = '0px' }, 50) setTimeout(() => { this.contentEl.setAttribute('hidden', '') }, 350) } } // Add public open and close methods for convenience open() { this.toggle(true) } close() { this.toggle(false) } } // Exposer globalement si nécessaire window.Accordion = Accordion // Auto-init tous les éléments accordéon présents dans la page ligne 724 : new Accordion(accordionEl) })() 'use strict'; (function() { class TabsAutomatic { constructor(groupNode) { this.tablistNode = groupNode this.tabs = Array.from(this.tablistNode.querySelectorAll('[role=tab]')) this.firstTab = null this.lastTab = null this.tabpanels = [] for (let i = 0; i < this.tabs.length; i++) { const tab = this.tabs[i] const tabpanel = document.getElementById(tab.getAttribute('aria-controls')) tab.tabIndex = -1 tab.setAttribute('aria-selected', 'false') this.tabpanels.push(tabpanel) tab.addEventListener('keydown', this.onKeydown.bind(this)) tab.addEventListener('click', this.onClick.bind(this)) if (!this.firstTab) { this.firstTab = tab } this.lastTab = tab } this.setSelectedTab(this.firstTab, false) } setSelectedTab(currentTab, setFocus = true) { for (let i = 0; i < this.tabs.length; i++) { const tab = this.tabs[i] const panel = this.tabpanels[i] if (currentTab === tab) { tab.setAttribute('aria-selected', 'true') tab.removeAttribute('tabindex') panel.classList.remove('is-hidden') if (setFocus) tab.focus() } else { tab.setAttribute('aria-selected', 'false') tab.tabIndex = -1 panel.classList.add('is-hidden') } } } setSelectedToPreviousTab(currentTab) { if (currentTab === this.firstTab) { this.setSelectedTab(this.lastTab) } else { const index = this.tabs.indexOf(currentTab) this.setSelectedTab(this.tabs[index - 1]) } } setSelectedToNextTab(currentTab) { if (currentTab === this.lastTab) { this.setSelectedTab(this.firstTab) } else { const index = this.tabs.indexOf(currentTab) this.setSelectedTab(this.tabs[index + 1]) } } onKeydown(event) { const tgt = event.currentTarget let flag = false switch (event.key) { case 'ArrowLeft': this.setSelectedToPreviousTab(tgt) flag = true break case 'ArrowRight': this.setSelectedToNextTab(tgt) flag = true break case 'Home': this.setSelectedTab(this.firstTab) flag = true break case 'End': this.setSelectedTab(this.lastTab) flag = true break } if (flag) { event.stopPropagation() event.preventDefault() } } onClick(event) { this.setSelectedTab(event.currentTarget) } } // Expose globalement si nécessaire (autres scripts peuvent l’utiliser) window.TabsAutomatic = TabsAutomatic // Init automatique (optionnel, supprime si tu veux l’instancier manuellement) document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.tabs').forEach((el) => { new TabsAutomatic(el) }) }) })() ;('use strict') /** * @namespace aria */ var aria = aria || {} /** * @description * Key code constants */ aria.KeyCode = { BACKSPACE: 8, TAB: 9, RETURN: 13, SHIFT: 16, ESC: 27, SPACE: 32, PAGE_UP: 33, PAGE_DOWN: 34, END: 35, HOME: 36, LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40, DELETE: 46, } aria.Utils = aria.Utils || {} // Polyfill src https://developer.mozilla.org/en-US/docs/Web/API/Element/matches aria.Utils.matches = function(element, selector) { if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.matchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.webkitMatchesSelector || function(s) { var matches = element.parentNode.querySelectorAll(s) var i = matches.length while (--i >= 0 && matches.item(i) !== this) { // empty } return i > -1 } } return element.matches(selector) } aria.Utils.remove = function(item) { if (item.remove && typeof item.remove === 'function') { return item.remove() } if (item.parentNode && item.parentNode.removeChild && typeof item.parentNode.removeChild === 'function') { return item.parentNode.removeChild(item) } return false } aria.Utils.isFocusable = function(element) { if (element.tabIndex < 0) { return false } if (element.disabled) { return false } switch (element.nodeName) { case 'A': return !!element.href && element.rel != 'ignore' case 'INPUT': return element.type != 'hidden' case 'BUTTON': case 'SELECT': case 'TEXTAREA': return true default: return false } } aria.Utils.getAncestorBySelector = function(element, selector) { if (!aria.Utils.matches(element, selector + ' ' + element.tagName)) { // Element is not inside an element that matches selector return null } // Move up the DOM tree until a parent matching the selector is found var currentNode = element var ancestor = null while (ancestor === null) { if (aria.Utils.matches(currentNode.parentNode, selector)) { ancestor = currentNode.parentNode } else { currentNode = currentNode.parentNode } } return ancestor } aria.Utils.hasClass = function(element, className) { return new RegExp('(\\s|^)' + className + '(\\s|$)').test(element.className) } aria.Utils.addClass = function(element, className) { if (!aria.Utils.hasClass(element, className)) { element.className += ' ' + className } } aria.Utils.removeClass = function(element, className) { var classRegex = new RegExp('(\\s|^)' + className + '(\\s|$)') element.className = element.className.replace(classRegex, ' ').trim() } aria.Utils.bindMethods = function(object /* , ...methodNames */) { var methodNames = Array.prototype.slice.call(arguments, 1) methodNames.forEach(function(method) { object[method] = object[method].bind(object) }) } /* * This content is licensed according to the W3C Software License at * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document */;('use strict') var aria = aria || {} aria.Utils = aria.Utils || {};(function() { /* * When util functions move focus around, set this true so the focus listener * can ignore the events. */ aria.Utils.IgnoreUtilFocusChanges = false aria.Utils.dialogOpenClass = 'has-dialog' /** * @description Set focus on descendant nodes until the first focusable element is * found. * @param element * DOM node for which to find the first focusable descendant. * @returns {boolean} * true if a focusable element is found and focus is set. */ aria.Utils.focusFirstDescendant = function(element) { for (var i = 0; i < element.childNodes.length; i++) { var child = element.childNodes[i] if (aria.Utils.attemptFocus(child) || aria.Utils.focusFirstDescendant(child)) { return true } } return false } // end focusFirstDescendant /** * @description Find the last descendant node that is focusable. * @param element * DOM node for which to find the last focusable descendant. * @returns {boolean} * true if a focusable element is found and focus is set. */ aria.Utils.focusLastDescendant = function(element) { for (var i = element.childNodes.length - 1; i >= 0; i--) { var child = element.childNodes[i] if (aria.Utils.attemptFocus(child) || aria.Utils.focusLastDescendant(child)) { return true } } return false } // end focusLastDescendant /** * @description Set Attempt to set focus on the current node. * @param element * The node to attempt to focus on. * @returns {boolean} * true if element is focused. */ aria.Utils.attemptFocus = function(element) { if (!aria.Utils.isFocusable(element)) { return false } aria.Utils.IgnoreUtilFocusChanges = true try { element.focus() } catch (e) { // continue regardless of error } aria.Utils.IgnoreUtilFocusChanges = false return document.activeElement === element } // end attemptFocus /* Modals can open modals. Keep track of them with this array. */ aria.OpenDialogList = aria.OpenDialogList || new Array(0) /** * @returns {object|void} the last opened dialog (the current dialog) */ aria.getCurrentDialog = function() { if (aria.OpenDialogList && aria.OpenDialogList.length) { return aria.OpenDialogList[aria.OpenDialogList.length - 1] } } aria.closeCurrentDialog = function() { var currentDialog = aria.getCurrentDialog() if (currentDialog) { currentDialog.close() return true } return false } aria.handleEscape = function(event) { var key = event.which || event.keyCode if (key === aria.KeyCode.ESC && aria.closeCurrentDialog()) { event.stopPropagation() } } document.addEventListener('keyup', aria.handleEscape) /** * @class * @description Dialog object providing modal focus management. * * Assumptions: The element serving as the dialog container is present in the * DOM and hidden. The dialog container has role='dialog'. * @param dialogId * The ID of the element serving as the dialog container. * @param focusAfterClosed * Either the DOM node or the ID of the DOM node to focus when the * dialog closes. * @param focusFirst * Optional parameter containing either the DOM node or the ID of the * DOM node to focus when the dialog opens. If not specified, the * first focusable element in the dialog will receive focus. */ aria.Dialog = function(dialogId, focusAfterClosed, focusFirst) { this.dialogNode = document.getElementById(dialogId) if (this.dialogNode === null) { throw new Error('No element found with id="' + dialogId + '".') } var validRoles = ['dialog', 'alertdialog'] var isDialog = (this.dialogNode.getAttribute('role') || '') .trim() .split(/\s+/g) .some(function(token) { return validRoles.some(function(role) { return token === role }) }) if (!isDialog) { throw new Error('Dialog() requires a DOM element with ARIA role of dialog or alertdialog.') } // Wrap in an individual backdrop element if one doesn't exist // Native

Voir aussi

Ministère de l’Intérieur : cap sur le numérique responsable !

Christophe Amoretti-Hannequin, France Urbaine : « Avec l’UGAP pour renforcer l’achat public responsable dans les territoires »