= 768) mobileMenu = false"
x-modelable="open"
x-data="{
open: false,
registered: false,
init() {
this.$watch('open', value => value ? this.show() : this.closeNow());
},
destroy() {
window.fsModalStack?.close('modal:mobile-navigation');
},
trigger: null,
initialState: '',
guardDirty: false,
initialFocus: '[data-menu-close]',
focusableElements() {
if (!this.$refs.panel) return [];
return Array.from(this.$refs.panel.querySelectorAll('a[href], button:not([disabled]), input:not([type=hidden]):not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\'-1\'])'))
.filter((element) => element.offsetParent !== null);
},
fieldState() {
if (!this.$refs.body) return '';
return JSON.stringify(Array.from(this.$refs.body.querySelectorAll('input:not([data-modal-ignore-dirty]), textarea:not([data-modal-ignore-dirty]), select:not([data-modal-ignore-dirty])')).map((element) => ({
type: element.type,
value: element.value,
checked: element.type === 'checkbox' || element.type === 'radio' ? element.checked : null,
})));
},
isTopmost() {
if (window.fsModalStack) return window.fsModalStack.isTop('modal:mobile-navigation');
const globalConfirm = document.querySelector('[data-global-confirm][role=dialog]');
if (globalConfirm?.getClientRects().length > 0) return false;
const dialogs = Array.from(document.querySelectorAll('[role=dialog]'))
.filter((dialog) => dialog.getClientRects().length > 0);
return dialogs[dialogs.length - 1] === this.$refs.dialog;
},
show() {
if (this.registered) return;
this.registered = true;
this.trigger = document.activeElement;
this.open = true;
window.fsModalStack?.open('modal:mobile-navigation', 10, this.$refs.dialog);
this.$nextTick(() => {
if (!this.open || !this.isTopmost()) return;
this.$refs.body.scrollTop = 0;
this.initialState = this.fieldState();
const requestedTarget = this.initialFocus ? this.$refs.panel?.querySelector(this.initialFocus) : null;
const visibleField = Array.from(this.$refs.body?.querySelectorAll('input:not([type=hidden]):not([disabled]), textarea:not([disabled]), select:not([disabled])') || [])
.find((element) => element.offsetParent !== null);
const target = (requestedTarget?.offsetParent !== null ? requestedTarget : null)
|| visibleField
|| this.focusableElements()[0]
|| this.$refs.panel;
target?.focus();
});
},
isDirty() {
return this.guardDirty && this.initialState !== this.fieldState();
},
requestClose(event = null) {
if (!this.open) return;
if (!this.isTopmost() || !(true)) return;
if (event && !window.fsModalStack?.claim('modal:mobile-navigation', event)) return;
if (!this.$el.dispatchEvent(new CustomEvent('modal-closing-mobile-navigation', { bubbles: true, cancelable: true }))) return;
if (this.isDirty()) {
this.$dispatch('fs-confirm-show', {
title: 'Abandonner les modifications ?',
message: 'Les informations saisies dans cette fenêtre ne seront pas conservées.',
variant: 'danger',
confirmLabel: 'Abandonner',
onConfirm: () => this.closeNow(),
});
return;
}
this.closeNow();
},
closeNow() {
if (!this.registered) return;
const restoreFocus = this.isTopmost();
this.registered = false;
this.open = false;
window.fsModalStack?.close('modal:mobile-navigation');
this.initialState = '';
const trigger = this.trigger;
this.$nextTick(() => { if (restoreFocus && !this.open && trigger?.isConnected && trigger.getClientRects().length) trigger.focus?.(); });
},
trapFocus(event) {
if (!this.open || !this.isTopmost()) return;
const elements = this.focusableElements();
if (!elements.length) { event.preventDefault(); this.$refs.panel.focus(); return; }
const first = elements[0];
const last = elements[elements.length - 1];
if (event.shiftKey && (document.activeElement === first || !this.$refs.panel.contains(document.activeElement))) {
event.preventDefault();
last.focus();
return;
}
if (!event.shiftKey && (document.activeElement === last || !this.$refs.panel.contains(document.activeElement))) {
event.preventDefault();
first.focus();
}
},
}"
@open-modal-mobile-navigation.window="show()"
@request-close-modal-mobile-navigation.window="requestClose()"
@close-modal-mobile-navigation.window="closeNow()"
@keydown.escape.window="requestClose($event)"
@keydown.tab.window="trapFocus($event)"
>
$refs.mobileMenuTrigger.focus())">
Explorer les SaaS
Catégories
Explorer par besoin
Industries
Explorer par secteur