Pinafore-Web-Client-Frontend/routes/_components/dialog/ModalDialog.html

97 lines
2.3 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">&times;</span>
</button>
</div>
<div class="modal-dialog-slot">
<slot></slot>
</div>
</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: 1px solid var(--main-border);
border-radius: 2px;
}
.modal-dialog-document {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: calc(100vw - 20px);
}
.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);
}
.modal-dialog-slot {
max-width: 100%;
}
@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)
a11yDialog.on('hide', () => {
a11yDialog.destroy()
this.fire('close')
this.destroy()
})
this.observe('shown', shown => {
if (shown) {
a11yDialog.show()
}
})
this.observe('closed', closed => {
if (closed) {
setTimeout(() => { // use setTimeout to workaround svelte timing issue
a11yDialog.hide()
}, 0)
}
})
}
}
</script>