forked from cybrespace/pinafore
82 lines
2.0 KiB
HTML
82 lines
2.0 KiB
HTML
<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">×</span>
|
|
</button>
|
|
</div>
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
: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%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
padding: 0;
|
|
border: 3px solid var(--main-border);
|
|
}
|
|
.modal-dialog-document {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.close-dialog-button-wrapper {
|
|
text-align: right;
|
|
width: 100%;
|
|
background: var(--nav-bg)
|
|
}
|
|
.close-dialog-button {
|
|
padding: 0 0 7px;
|
|
background: none;
|
|
border: none;
|
|
}
|
|
.close-dialog-button span {
|
|
padding: 0 15px;
|
|
font-size: 48px;
|
|
color: var(--button-primary-text);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.close-dialog-button span {
|
|
padding: 0 10px 4px;
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
import A11yDialog from 'a11y-dialog'
|
|
|
|
export default {
|
|
oncreate() {
|
|
let dialogElement = this.refs.node.parentElement
|
|
let a11yDialog = new A11yDialog(dialogElement)
|
|
this.observe('shown', shown => {
|
|
if (shown) {
|
|
a11yDialog.show()
|
|
a11yDialog.on('hide', () => {
|
|
console.log('destroying modal dialog')
|
|
a11yDialog.destroy()
|
|
this.destroy()
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
</script> |