cybrespace
/
pinafore
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

use a11y-dialog instead of dialog polyfill

This commit is contained in:
Nolan Lawson 2018-02-04 19:15:35 -08:00
parent b10ecff3c0
commit 074ef0a760
11 changed files with 54 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@ -14,6 +14,11 @@
"resolved": "https://registry.npmjs.org/@types/node/-/node-9.4.0.tgz",
"integrity": "sha512-zkYho6/4wZyX6o9UQ8rd0ReEaiEYNNCqYFIAACe2Tf9DrYlgzWW27OigYHnnztnnZQwVRpwWmZKegFmDpinIsA=="
},
"a11y-dialog": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/a11y-dialog/-/a11y-dialog-4.0.1.tgz",
"integrity": "sha512-JsYMIaoZt7nZM1oDbxLBijyl09uZa91+UdPF+P9YadmmdtaVYx44v131UcqAhN48jNp8/BGV/80uMsBacPo2gg=="
},
"abbrev": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@ -1389,11 +1394,6 @@
"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
"integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
},
"dialog-polyfill": {
"version": "0.4.9",
"resolved": "https://registry.npmjs.org/dialog-polyfill/-/dialog-polyfill-0.4.9.tgz",
"integrity": "sha512-iM4ZXRLOA/qpbW6XznGOq7Iq58JoXhZGo+OMG8K3wFxvIatnMTnIancLGEKa6WYy6oTkndfb2UXQ6FGtoUBn1g=="
},
"diffie-hellman": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.2.tgz",

2
package.json
View File

@ -17,13 +17,13 @@
},
"dependencies": {
"@gamestdio/websocket": "^0.2.2",
"a11y-dialog": "^4.0.1",
"cheerio": "^1.0.0-rc.2",
"chokidar": "^2.0.0",
"compression": "^1.7.1",
"concurrently": "^3.5.1",
"cross-env": "^5.1.3",
"css-loader": "^0.28.7",
"dialog-polyfill": "^0.4.9",
"express": "^4.16.2",
"extract-text-webpack-plugin": "^3.0.2",
"fg-loadcss": "^2.0.1",

86
routes/_components/ModalDialog.html
View File

@ -1,25 +1,41 @@
<div class="dialog-wrapper" ref:node>
<div class="close-dialog-button-wrapper">
<button class="close-dialog-button" aria-label="Close dialog" on:click="close()">
<span aria-hidden="true">&times;</span>
</button>
<div class="modal-dialog-backdrop" tabindex="-1" data-a11y-dialog-hide></div>
<div class="modal-dialog-contents" role="dialog" aria-label="{{label}}" ref:node>
<div class="modal-dialog-document" role="document" style="background: {{background || '#000'}};">
<div class="close-dialog-button-wrapper">
<button class="close-dialog-button" data-a11y-dialog-hide aria-label="Close dialog">
<span aria-hidden="true">&times;</span>
</button>
</div>
<slot></slot>
</div>
<slot></slot>
</div>
<style>
:global(.modal-dialog) {
:global(#modal-dialog[aria-hidden='true']) {
display: none;
}
.modal-dialog-backdrop {
position: fixed;
z-index: 10000;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(51, 51, 51, 0.9);
}
.modal-dialog-contents {
z-index: 10010;
position: fixed;
top: 50%;
transform: translate(0, -50%);
left: 50%;
transform: translate(-50%, -50%);
padding: 0;
border: 3px solid var(--main-border);
}
:global(.modal-dialog-wrapper) {
.modal-dialog-document {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: calc(100vw - 40px);
}
.close-dialog-button-wrapper {
text-align: right;
@ -36,9 +52,6 @@
font-size: 48px;
color: var(--button-primary-text);
}
:global(dialog::backdrop, .backdrop) {
background: rgba(51, 51, 51, 0.9) !important; /* TODO: hack for Safari */
}
@media (max-width: 767px) {
.close-dialog-button span {
@ -48,51 +61,22 @@
}
</style>
<script>
import { importDialogPolyfill } from '../_utils/asyncModules'
import { registerFocusRestoreDialog } from '../_utils/dialogs'
import A11yDialog from 'a11y-dialog'
export default {
oncreate() {
this.getDialogElement().style.background = this.get('background') || '#000'
let dialogElement = this.refs.node.parentElement
let a11yDialog = new A11yDialog(dialogElement)
this.observe('shown', shown => {
if (shown) {
this.show()
a11yDialog.show()
a11yDialog.on('hide', () => {
console.log('destroying modal dialog')
a11yDialog.destroy()
this.destroy()
})
}
})
this.registration = this.register()
this.onDocumentClick = (e) => {
let dialog = this.getDialogElement()
if (!dialog.open) {
return;
}
if (e.target !== dialog) {
return;
}
this.close() // close when clicked outside of dialog
}
document.body.addEventListener('click', this.onDocumentClick);
},
methods: {
async register() {
if (typeof HTMLDialogElement === 'undefined') {
let dialogPolyfill = await importDialogPolyfill()
dialogPolyfill.registerDialog(this.getDialogElement())
}
registerFocusRestoreDialog(this.getDialogElement())
},
async show() {
await this.registration
this.getDialogElement().showModal()
},
close() {
this.getDialogElement().close()
document.body.removeChild(this.getDialogElement())
document.body.removeEventListener('click', this.onDocumentClick);
},
getDialogElement() {
return this.refs.node.parentElement
}
}
}
</script>

4
routes/_components/status/ImageDialog.html
View File

@ -1,4 +1,4 @@
<ModalDialog :shown background="var(--main-bg)">
<ModalDialog :label :shown background="var(--main-bg)">
{{#if type === 'gifv'}}
<video
aria-label="Animated GIF: {{description || ''}}"
@ -21,7 +21,7 @@
{{/if}}
</ModalDialog>
<style>
:global(.modal-dialog img, .modal-dialog video) {
:global(#modal-dialog img, #modal-dialog video) {
object-fit: contain;
overflow: hidden;
max-width: calc(100vw - 20px);

4
routes/_components/status/VideoDialog.html
View File

@ -1,4 +1,4 @@
<ModalDialog :shown background="#000">
<ModalDialog :label :shown background="#000">
<video poster="{{poster}}"
src="{{src}}"
width="{{width}}"
@ -8,7 +8,7 @@
/>
</ModalDialog>
<style>
:global(.modal-dialog video) {
:global(#modal-dialog video) {
object-fit: contain;
overflow: hidden;
max-width: calc(100vw - 20px);

18
routes/_utils/asyncModules.js
View File

@ -1,5 +1,3 @@
import { loadCSS } from 'fg-loadcss';
export const importURLSearchParams = () => import(
/* webpackChunkName: 'url-search-params' */ 'url-search-params'
).then(Params => {
@ -25,18 +23,4 @@ export const importRequestIdleCallback = () => import(
export const importIndexedDBGetAllShim = () => import(
/* webpackChunkName: 'indexeddb-getall-shim' */ 'indexeddb-getall-shim'
)
export const importDialogPolyfill = (() => {
let cached
return () => {
if (cached) {
return Promise.resolve(cached)
}
loadCSS('/dialog-polyfill.css') // TODO: handle error
return import(/* webpackChunkName: 'dialog-polyfill' */ 'dialog-polyfill').then(res => {
cached = res
return cached
})
}
})()
)

55
routes/_utils/dialogs.js
View File

@ -1,55 +0,0 @@
// From https://gist.github.com/samthor/babe9fad4a65625b301ba482dad284d1
// Via https://github.com/GoogleChrome/dialog-polyfill/issues/139
let registered = new WeakMap()
// store previous focused node centrally
let previousFocus = null
document.addEventListener('focusout', (e) => {
previousFocus = e.target
}, true)
/**
* Updates the passed dialog to retain focus and restore it when the dialog is closed.
* @param {!HTMLDialogElement} dialog to upgrade
*/
export function registerFocusRestoreDialog(dialog) {
// replace showModal method directly, to save focus
let realShowModal = dialog.showModal
dialog.showModal = function () {
let savedFocus = document.activeElement
if (savedFocus === document || savedFocus === document.body) {
// some browsers read activeElement as body
savedFocus = previousFocus
}
registered.set(dialog, savedFocus)
realShowModal.call(this)
}
// on close, try to focus saved, if possible
dialog.addEventListener('close', function () {
if (dialog.hasAttribute('open')) {
return // in native, this fires the frame later
}
let savedFocus = registered.get(dialog)
if (document.contains(savedFocus)) {
let wasFocus = document.activeElement
savedFocus.focus()
if (document.activeElement !== savedFocus) {
wasFocus.focus() // restore focus, we couldn't focus saved
}
}
savedFocus = null
})
}
export function createDialogElement(label) {
if (!label) {
throw new Error('the modal must have a label')
}
let dialogElement = document.createElement('dialog')
dialogElement.classList.add('modal-dialog')
dialogElement.setAttribute('aria-label', label)
document.body.appendChild(dialogElement)
return dialogElement
}

3
routes/_utils/loadPolyfills.js
View File

@ -11,7 +11,6 @@ export function loadPolyfills() {
typeof URLSearchParams === 'undefined' && importURLSearchParams(),
typeof IntersectionObserver === 'undefined' && importIntersectionObserver(),
typeof requestIdleCallback === 'undefined' && importRequestIdleCallback(),
!IDBObjectStore.prototype.getAll && importIndexedDBGetAllShim(),
typeof HTMLDialogElement === 'undefined' && importDialogPolyfill()
!IDBObjectStore.prototype.getAll && importIndexedDBGetAllShim()
])
}

4
routes/_utils/showImageDialog.js
View File

@ -1,10 +1,10 @@
import ImageDialog from '../_components/status/ImageDialog.html'
import { createDialogElement } from './dialogs'
export function showImageDialog(poster, src, type, width, height, description) {
let imageDialog = new ImageDialog({
target: createDialogElement('Image dialog'),
target: document.getElementById('modal-dialog'),
data: {
label: 'Image dialog',
poster,
src,
type,

4
routes/_utils/showVideoDialog.js
View File

@ -1,10 +1,10 @@
import VideoDialog from '../_components/status/VideoDialog.html'
import { createDialogElement } from './dialogs'
export function showVideoDialog(poster, src, width, height, description) {
let videoDialog = new VideoDialog({
target: createDialogElement('Video dialog'),
target: document.getElementById('modal-dialog'),
data: {
label: 'Video dialog',
poster,
src,
width,

3
templates/2xx.html
View File

@ -92,6 +92,9 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
<!-- Toast.html gets rendered here -->
<div id="toast"></div>
<!-- ModalDialog.html gets rendered here -->
<div id="modal-dialog" aria-hidden="true"></div>
<!-- Sapper creates a <script> tag containing `templates/main.js`
and anything else it needs to hydrate the app and
initialise the router -->