Focus Trap

/**
 * Trap a panel: Tab wraps inside it, and focus goes back to Activate when it closes.
 */
export function mount(root) {
    const $root = $(root);
    const panel = $root.find('#basic-panel');

    const trap = E.focusTrap(panel.get(0), {
        initialFocus: '#basic-name',
        onActivate: () => panel.addClass('is-trapping'),
        onDeactivate: () => panel.removeClass('is-trapping')
    });
    const showState = () => $root.find('#basic-state').text(trap.isActive() ? 'active - press Tab' : 'inactive');
    trap.on('activate', showState).on('deactivate', showState);

    $root.find('#basic-on').on('click', () => trap.activate());
    $root.find('#basic-done').on('click', () => trap.deactivate());

    // Controls added while the trap is active join the Tab cycle at once.
    let added = 0;
    $root.find('#basic-add').on('click', () => {
        added += 1;
        const button = $('<button class="btn btn-outline btn-sm" type="button"></button>').text('New ' + added);
        $root.find('#basic-done').before(button);
    });

    return () => trap.destroy();
}

/**
 * Stacked traps: the inner trap pauses the outer one, and closing it hands focus back.
 */
export function mount(root) {
    const $root = $(root);
    const marker = (panel) => ({
        onActivate: () => panel.addClass('is-trapping'),
        onDeactivate: () => panel.removeClass('is-trapping')
    });

    const outerPanel = $root.find('#outer-panel');
    const innerPanel = $root.find('#inner-panel');
    const outer = E.focusTrap(outerPanel.get(0), marker(outerPanel));
    const inner = E.focusTrap(innerPanel.get(0), marker(innerPanel));

    const said = (t) => (t.isPaused() ? 'paused' : t.isActive() ? 'active' : 'inactive');
    const showState = () => $root.find('#stack-state').text('outer: ' + said(outer) + ' · inner: ' + said(inner));
    for (const trap of [outer, inner]) {
        for (const name of ['activate', 'deactivate', 'pause', 'unpause']) trap.on(name, showState);
    }

    $root.find('#outer-on').on('click', () => outer.activate());
    $root.find('#outer-off').on('click', () => outer.deactivate());
    $root.find('#inner-on').on('click', () => inner.activate());
    $root.find('#inner-off').on('click', () => inner.deactivate());

    return () => {
        inner.destroy();
        outer.destroy();
    };
}

/**
 * Escape, outside clicks and inert: the panel closes either way, and the page behind is inert meanwhile.
 */
export function mount(root) {
    const $root = $(root);
    const panel = $root.find('#opts-panel');

    const trap = E.focusTrap(panel.get(0), {
        escapeDeactivates: true,
        clickOutsideDeactivates: true,
        inert: true,
        onActivate: () => panel.addClass('is-trapping'),
        onDeactivate: () => panel.removeClass('is-trapping')
    });
    const showState = () => $root.find('#opts-state')
        .text(trap.isActive() ? 'active - the rest of the page is inert' : 'inactive');
    trap.on('activate', showState).on('deactivate', showState);

    $root.find('#opts-on').on('click', () => trap.activate());

    // destroy() deactivates first, so the page loses its inert again.
    return () => trap.destroy();
}

/**
 * Events: every trap fires dm:focus-trap:<name> on its container, so one listener hears them all.
 */
export function mount(root) {
    const $root = $(root);
    const names = {'ev-panel': 'Form', 'ev-confirm': 'Confirm'};
    const events = ['activate', 'deactivate', 'pause', 'unpause'].map((name) => 'dm:focus-trap:' + name).join(' ');

    const log = (message) => {
        const list = $root.find('#ev-log');
        list.find('li').filter((i, el) => /^Nothing yet/.test(el.textContent)).remove();
        list.prepend($('<li></li>').text(D().format('HH:mm:ss') + ' - ' + message));
        list.find('li').filter((i) => i >= 8).remove();
    };

    const marker = (panel) => ({
        onActivate: () => panel.addClass('is-trapping'),
        onDeactivate: () => panel.removeClass('is-trapping')
    });
    const formPanel = $root.find('#ev-panel');
    const confirmPanel = $root.find('#ev-confirm');
    const form = E.focusTrap(formPanel.get(0), marker(formPanel));
    const confirm = E.focusTrap(confirmPanel.get(0), marker(confirmPanel));

    // The DOM events bubble, so one handler on the demo hears both traps.
    const onTrapEvent = (e) => log(names[e.detail.instance.element.id] + ': ' + e.type.replace('dm:focus-trap:', ''));
    $root.on(events, onTrapEvent);

    $root.find('#ev-on').on('click', () => form.activate());
    $root.find('#ev-off').on('click', () => form.deactivate());
    $root.find('#ev-confirm-on').on('click', () => confirm.activate());
    $root.find('#ev-confirm-off').on('click', () => confirm.deactivate());

    return () => {
        $root.off(events, onTrapEvent);
        confirm.destroy();
        form.destroy();
    };
}