gcch
d8dbe1370e
corvée(images) ajoute les images téléversées corvée(images) supprime les images optimisées
313 lines
11 KiB
JavaScript
313 lines
11 KiB
JavaScript
var __defProp = Object.defineProperty;
|
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
import { a0 as SELECTEUR_BOUTON_MENU_MOBILE, a1 as SELECTEUR_MENU_MOBILE, a2 as ATTRIBUT_MENU_MOBILE_ACTIVE } from "./dom.js";
|
|
import { a as recupereElementDansDocumentOuLeve } from "./utils.js";
|
|
import "./dom2.js";
|
|
import "./erreurs2.js";
|
|
import "./exports.B84S-6H1.js";
|
|
import "./pipe.XPB0wEfw.js";
|
|
import "./Either.wHNxn7Os.js";
|
|
const not = {
|
|
inert: ":not([inert]):not([inert] *)",
|
|
negTabIndex: ':not([tabindex^="-"])',
|
|
disabled: ":not(:disabled)"
|
|
};
|
|
var focusableSelectors = [
|
|
`a[href]${not.inert}${not.negTabIndex}`,
|
|
`area[href]${not.inert}${not.negTabIndex}`,
|
|
`input:not([type="hidden"]):not([type="radio"])${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
`input[type="radio"]${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
`select${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
`textarea${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
`button${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
`details${not.inert} > summary:first-of-type${not.negTabIndex}`,
|
|
// Discard until Firefox supports `:has()`
|
|
// See: https://github.com/KittyGiraudel/focusable-selectors/issues/12
|
|
// `details:not(:has(> summary))${not.inert}${not.negTabIndex}`,
|
|
`iframe${not.inert}${not.negTabIndex}`,
|
|
`audio[controls]${not.inert}${not.negTabIndex}`,
|
|
`video[controls]${not.inert}${not.negTabIndex}`,
|
|
`[contenteditable]${not.inert}${not.negTabIndex}`,
|
|
`[tabindex]${not.inert}${not.negTabIndex}`
|
|
];
|
|
function focus(el) {
|
|
(el.querySelector("[autofocus]") || el).focus();
|
|
}
|
|
function getFocusableEdges(el) {
|
|
const firstEl = findFocusableEl(el, true);
|
|
const lastEl = firstEl ? findFocusableEl(el, false) || firstEl : null;
|
|
return [firstEl, lastEl];
|
|
}
|
|
function findFocusableEl(el, forward) {
|
|
if (forward && isFocusable(el))
|
|
return el;
|
|
if (canHaveFocusableChildren(el)) {
|
|
if (el.shadowRoot) {
|
|
let next = getNextChildEl(el.shadowRoot, forward);
|
|
while (next) {
|
|
const focusableEl = findFocusableEl(next, forward);
|
|
if (focusableEl)
|
|
return focusableEl;
|
|
next = getNextSiblingEl(next, forward);
|
|
}
|
|
} else if (el.localName === "slot") {
|
|
const assignedElements = el.assignedElements({
|
|
flatten: true
|
|
});
|
|
if (!forward)
|
|
assignedElements.reverse();
|
|
for (const assignedElement of assignedElements) {
|
|
const focusableEl = findFocusableEl(assignedElement, forward);
|
|
if (focusableEl)
|
|
return focusableEl;
|
|
}
|
|
} else {
|
|
let next = getNextChildEl(el, forward);
|
|
while (next) {
|
|
const focusableEl = findFocusableEl(next, forward);
|
|
if (focusableEl)
|
|
return focusableEl;
|
|
next = getNextSiblingEl(next, forward);
|
|
}
|
|
}
|
|
}
|
|
if (!forward && isFocusable(el))
|
|
return el;
|
|
return null;
|
|
}
|
|
function getNextChildEl(el, forward) {
|
|
return forward ? el.firstElementChild : el.lastElementChild;
|
|
}
|
|
function getNextSiblingEl(el, forward) {
|
|
return forward ? el.nextElementSibling : el.previousElementSibling;
|
|
}
|
|
const isHidden = (el) => {
|
|
if (el.matches("details:not([open]) *") && !el.matches("details>summary:first-of-type"))
|
|
return true;
|
|
return !(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
|
|
};
|
|
const isFocusable = (el) => {
|
|
if (el.shadowRoot?.delegatesFocus)
|
|
return false;
|
|
return el.matches(focusableSelectors.join(",")) && !isHidden(el);
|
|
};
|
|
function canHaveFocusableChildren(el) {
|
|
if (el.shadowRoot && el.getAttribute("tabindex") === "-1")
|
|
return false;
|
|
return !el.matches(":disabled,[hidden],[inert]");
|
|
}
|
|
function getActiveEl(root = document) {
|
|
const activeEl = root.activeElement;
|
|
if (!activeEl)
|
|
return null;
|
|
if (activeEl.shadowRoot)
|
|
return getActiveEl(activeEl.shadowRoot) || document.activeElement;
|
|
return activeEl;
|
|
}
|
|
function trapTabKey(el, event) {
|
|
const [firstFocusableEl, lastFocusableEl] = getFocusableEdges(el);
|
|
if (!firstFocusableEl)
|
|
return event.preventDefault();
|
|
const activeEl = getActiveEl();
|
|
if (event.shiftKey && activeEl === firstFocusableEl) {
|
|
lastFocusableEl.focus();
|
|
event.preventDefault();
|
|
} else if (!event.shiftKey && activeEl === lastFocusableEl) {
|
|
firstFocusableEl.focus();
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
function closest(selector, base) {
|
|
function from(el) {
|
|
if (!el || el === document || el === window)
|
|
return null;
|
|
if (el.assignedSlot)
|
|
el = el.assignedSlot;
|
|
return el.closest(selector) || from(el.getRootNode().host);
|
|
}
|
|
return from(base);
|
|
}
|
|
const SCOPE = "data-a11y-dialog";
|
|
class A11yDialog {
|
|
constructor(element) {
|
|
__publicField(this, "$el");
|
|
__publicField(this, "id");
|
|
__publicField(this, "previouslyFocused");
|
|
__publicField(this, "shown");
|
|
this.$el = element;
|
|
this.id = this.$el.getAttribute(SCOPE) || this.$el.id;
|
|
this.previouslyFocused = null;
|
|
this.shown = false;
|
|
this.maintainFocus = this.maintainFocus.bind(this);
|
|
this.bindKeypress = this.bindKeypress.bind(this);
|
|
this.handleTriggerClicks = this.handleTriggerClicks.bind(this);
|
|
this.show = this.show.bind(this);
|
|
this.hide = this.hide.bind(this);
|
|
this.$el.setAttribute("aria-hidden", "true");
|
|
this.$el.setAttribute("aria-modal", "true");
|
|
this.$el.setAttribute("tabindex", "-1");
|
|
if (!this.$el.hasAttribute("role")) {
|
|
this.$el.setAttribute("role", "dialog");
|
|
}
|
|
document.addEventListener("click", this.handleTriggerClicks, true);
|
|
}
|
|
/**
|
|
* Destroy the current instance (after making sure the dialog has been hidden)
|
|
* and remove all associated listeners from dialog openers and closers
|
|
*/
|
|
destroy() {
|
|
const destroyEvent = this.fire("destroy");
|
|
if (destroyEvent.defaultPrevented)
|
|
return this;
|
|
this.hide();
|
|
document.removeEventListener("click", this.handleTriggerClicks, true);
|
|
this.$el.replaceWith(this.$el.cloneNode(true));
|
|
return this;
|
|
}
|
|
/**
|
|
* Show the dialog element, trap the current focus within it, listen for some
|
|
* specific key presses and fire all registered callbacks for `show` event
|
|
*/
|
|
show(event) {
|
|
if (this.shown)
|
|
return this;
|
|
const showEvent = this.fire("show", event);
|
|
if (showEvent.defaultPrevented)
|
|
return this;
|
|
this.shown = true;
|
|
this.$el.removeAttribute("aria-hidden");
|
|
this.previouslyFocused = getActiveEl();
|
|
if (this.previouslyFocused?.tagName === "BODY" && event?.target) {
|
|
this.previouslyFocused = event.target;
|
|
}
|
|
if (event?.type === "focus") {
|
|
this.maintainFocus(event);
|
|
} else {
|
|
focus(this.$el);
|
|
}
|
|
document.body.addEventListener("focus", this.maintainFocus, true);
|
|
this.$el.addEventListener("keydown", this.bindKeypress, true);
|
|
return this;
|
|
}
|
|
/**
|
|
* Hide the dialog element, restore the focus to the previously active
|
|
* element, stop listening for some specific key presses and fire all
|
|
* registered callbacks for `hide` event
|
|
*/
|
|
hide(event) {
|
|
if (!this.shown)
|
|
return this;
|
|
const hideEvent = this.fire("hide", event);
|
|
if (hideEvent.defaultPrevented)
|
|
return this;
|
|
this.shown = false;
|
|
this.$el.setAttribute("aria-hidden", "true");
|
|
this.previouslyFocused?.focus?.();
|
|
document.body.removeEventListener("focus", this.maintainFocus, true);
|
|
this.$el.removeEventListener("keydown", this.bindKeypress, true);
|
|
return this;
|
|
}
|
|
/**
|
|
* Register a new callback for the given event type
|
|
*/
|
|
on(type, handler, options) {
|
|
this.$el.addEventListener(type, handler, options);
|
|
return this;
|
|
}
|
|
/**
|
|
* Unregister an existing callback for the given event type
|
|
*/
|
|
off(type, handler, options) {
|
|
this.$el.removeEventListener(type, handler, options);
|
|
return this;
|
|
}
|
|
/**
|
|
* Dispatch and return a custom event from the DOM element associated with
|
|
* this dialog; this allows authors to listen for and respond to the events
|
|
* in their own code
|
|
*/
|
|
fire(type, event) {
|
|
const customEvent = new CustomEvent(type, {
|
|
detail: event,
|
|
cancelable: true
|
|
});
|
|
this.$el.dispatchEvent(customEvent);
|
|
return customEvent;
|
|
}
|
|
/**
|
|
* Add a delegated event listener for when elememts that open or close the
|
|
* dialog are clicked, and call `show` or `hide`, respectively
|
|
*/
|
|
handleTriggerClicks(event) {
|
|
const target = event.composedPath()[0];
|
|
const opener = closest(`[${SCOPE}-show="${this.id}"]`, target);
|
|
const explicitCloser = closest(`[${SCOPE}-hide="${this.id}"]`, target);
|
|
const implicitCloser = closest(`[${SCOPE}-hide]`, target) && closest('[aria-modal="true"]', target) === this.$el;
|
|
if (opener)
|
|
this.show(event);
|
|
if (explicitCloser || implicitCloser)
|
|
this.hide(event);
|
|
}
|
|
/**
|
|
* Private event handler used when listening to some specific key presses
|
|
* (namely ESC and TAB)
|
|
*/
|
|
bindKeypress(event) {
|
|
if (closest('[aria-modal="true"]', getActiveEl()) !== this.$el) {
|
|
return;
|
|
}
|
|
let hasOpenPopover = false;
|
|
try {
|
|
hasOpenPopover = !!this.$el.querySelector('[popover]:not([popover="manual"]):popover-open');
|
|
} catch {
|
|
}
|
|
if (event.key === "Escape" && this.$el.getAttribute("role") !== "alertdialog" && !hasOpenPopover) {
|
|
event.preventDefault();
|
|
this.hide(event);
|
|
}
|
|
if (event.key === "Tab") {
|
|
trapTabKey(this.$el, event);
|
|
}
|
|
}
|
|
/**
|
|
* If the dialog is shown and the focus is not within a dialog element (either
|
|
* this one or another one in case of nested dialogs) or attribute, move it
|
|
* back to the dialog container
|
|
* See: https://github.com/KittyGiraudel/a11y-dialog/issues/177
|
|
*/
|
|
maintainFocus(event) {
|
|
const target = event.target;
|
|
if (!target.closest(`[aria-modal="true"], [${SCOPE}-ignore-focus-trap]`)) {
|
|
focus(this.$el);
|
|
}
|
|
}
|
|
}
|
|
function instantiateDialogs() {
|
|
for (const el of document.querySelectorAll("[data-a11y-dialog]")) {
|
|
new A11yDialog(el);
|
|
}
|
|
}
|
|
if (typeof document !== "undefined") {
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", instantiateDialogs);
|
|
} else {
|
|
instantiateDialogs();
|
|
}
|
|
}
|
|
const BOUTON_MENU_MOBILE = recupereElementDansDocumentOuLeve(SELECTEUR_BOUTON_MENU_MOBILE);
|
|
const MENU_MOBILE = recupereElementDansDocumentOuLeve(SELECTEUR_MENU_MOBILE);
|
|
const initialiseBoutonMenuMobile = () => {
|
|
const menuMobile = new A11yDialog(MENU_MOBILE);
|
|
BOUTON_MENU_MOBILE.addEventListener("click", () => {
|
|
BOUTON_MENU_MOBILE.toggleAttribute(ATTRIBUT_MENU_MOBILE_ACTIVE);
|
|
menuMobile.show();
|
|
});
|
|
menuMobile.on("hide", () => {
|
|
BOUTON_MENU_MOBILE.toggleAttribute(ATTRIBUT_MENU_MOBILE_ACTIVE);
|
|
});
|
|
};
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
initialiseBoutonMenuMobile();
|
|
});
|
|
//# sourceMappingURL=scripts-menu-mobile.js.map
|