mirrors/wagtail
mirrors/wagtail
0
0
Fork 0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-25 05:02:57 +01:00
Code Issues Releases Wiki Activity

Adopt DialogController & TeleportController in the userbar

Browse Source
This commit is contained in:
Lovelyfin00 2023-07-01 15:29:45 +01:00 committed by LB (Ben Johnston)
parent 62786ebd13
commit 9868be7900
2 changed files with 68 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
client/src/includes/userbar.ts
View File

@ -1,6 +1,9 @@
import axe, { ElementContext, NodeResult, Result, RunOptions } from 'axe-core';
import { dialog } from './dialog';
import A11yDialog from 'a11y-dialog';
import { Application } from '@hotwired/stimulus';
import { DialogController } from '../controllers/DialogController';
import { TeleportController } from '../controllers/TeleportController';
/*
This entrypoint is not bundled with any polyfills to keep it as light as possible
@ -51,7 +54,9 @@ export class Userbar extends HTMLElement {
const shadowRoot = this.attachShadow({
mode: 'open',
});
shadowRoot.appendChild(template.content.cloneNode(true));
shadowRoot.appendChild(
(template.content.firstElementChild as HTMLElement).cloneNode(true),
);
// Removes the template from html after it's being used
template.remove();
@ -369,25 +374,37 @@ export class Userbar extends HTMLElement {
this.trigger.appendChild(a11yErrorBadge);
}
const dialogTemplates =
this.shadowRoot.querySelectorAll<HTMLTemplateElement>(
'[data-wagtail-dialog]',
);
const dialogs = dialog(
dialogTemplates,
this.shadowRoot as unknown as HTMLElement,
const stimulus = Application.start(
this.shadowRoot.firstElementChild as Element,
);
if (!dialogs.length) return;
const modal = dialogs[0];
stimulus.register('w-dialog', DialogController);
stimulus.register('w-teleport', TeleportController);
const modalReady = new Promise<{ body: HTMLElement; dialog: A11yDialog }>(
(resolve) => {
this.shadowRoot?.addEventListener(
'w-dialog:ready',
(({
detail,
}: CustomEvent<{ body: HTMLElement; dialog: A11yDialog }>) => {
const { body, dialog } = detail;
resolve({ body, dialog });
}) as EventListener,
{ once: true, passive: true },
);
},
);
const { body: modalBody, dialog: modal } = await modalReady;
// Disable TS linter check for legacy code in 3rd party `A11yDialog` element
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const modalBody = modal.$el.querySelector(
'[data-dialog-body]',
) as HTMLDivElement;
const accessibilityResultsBox =
this.shadowRoot.querySelector<HTMLDivElement>('#accessibility-results');
const accessibilityResultsBox = this.shadowRoot.querySelector(
'#accessibility-results',
);
const a11yRowTemplate = this.shadowRoot.querySelector<HTMLTemplateElement>(
'#w-a11y-result-row-template',
);

68
wagtail/admin/templates/wagtailadmin/userbar/base.html
View File

@ -1,42 +1,44 @@
{% load wagtailadmin_tags i18n %}
<!-- Wagtail user bar embed code -->
<template id="wagtail-userbar-template">
<div class="w-userbar w-userbar--{{ position|default:'bottom-right' }}" data-wagtail-userbar part="userbar">
<link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/core.css' %}">
{% hook_output 'insert_global_admin_css' %}
{% hook_output 'insert_editor_css' %}
<div class="w-userbar-nav">
<aside>
<div class="w-userbar w-userbar--{{ position|default:'bottom-right' }}" data-wagtail-userbar part="userbar">
<link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/core.css' %}">
{% hook_output 'insert_global_admin_css' %}
{% hook_output 'insert_editor_css' %}
<div class="w-userbar-nav">
<svg class="w-hidden">
<defs>
{% include "wagtailadmin/icons/wagtail.svg" %}
{% include "wagtailadmin/icons/key.svg" %}
{% include "wagtailadmin/icons/folder-open-inverse.svg" %}
{% include "wagtailadmin/icons/edit.svg" %}
{% include "wagtailadmin/icons/plus.svg" %}
{% include "wagtailadmin/icons/check.svg" %}
{% include "wagtailadmin/icons/cross.svg" %}
{% include "wagtailadmin/icons/crosshairs.svg" %}
</defs>
</svg>
<svg class="w-hidden">
<defs>
{% include "wagtailadmin/icons/wagtail.svg" %}
{% include "wagtailadmin/icons/key.svg" %}
{% include "wagtailadmin/icons/folder-open-inverse.svg" %}
{% include "wagtailadmin/icons/edit.svg" %}
{% include "wagtailadmin/icons/plus.svg" %}
{% include "wagtailadmin/icons/check.svg" %}
{% include "wagtailadmin/icons/cross.svg" %}
{% include "wagtailadmin/icons/crosshairs.svg" %}
</defs>
</svg>
<button aria-controls="wagtail-userbar-items" aria-haspopup="true" class="w-userbar-trigger" id="wagtail-userbar-trigger" data-wagtail-userbar-trigger>
{% block branding_logo %}
{% comment %} Intentionally not using the icon template tag to show as SVG only {% endcomment %}
<svg class="w-userbar-icon" aria-hidden="true">
<use href="#icon-wagtail-icon"></use>
</svg>
{% endblock %}
<span class="w-sr-only">{% trans 'View Wagtail quick actions' %}</span>
</button>
<ul aria-labelledby="wagtail-userbar-trigger" class="w-userbar-items" id="wagtail-userbar-items" role="menu">
{% for item in items %}
{{ item|safe }}
{% endfor %}
</ul>
<button aria-controls="wagtail-userbar-items" aria-haspopup="true" class="w-userbar-trigger" id="wagtail-userbar-trigger" data-wagtail-userbar-trigger>
{% block branding_logo %}
{% comment %} Intentionally not using the icon template tag to show as SVG only {% endcomment %}
<svg class="w-userbar-icon" aria-hidden="true">
<use href="#icon-wagtail-icon"></use>
</svg>
{% endblock %}
<span class="w-sr-only">{% trans 'View Wagtail quick actions' %}</span>
</button>
<ul aria-labelledby="wagtail-userbar-trigger" class="w-userbar-items" id="wagtail-userbar-items" role="menu">
{% for item in items %}
{{ item|safe }}
{% endfor %}
</ul>
</div>
</div>
</div>
<div data-a11y-result-outline-container></div>
<div data-a11y-result-outline-container></div>
</aside>
</template>
<wagtail-userbar></wagtail-userbar>
<script src="{% versioned_static 'wagtailadmin/js/vendor.js' %}"></script>