implement confirmation dialog

This commit is contained in:
Nolan Lawson 2018-02-05 09:43:45 -08:00
parent 95e5bdb106
commit 8711bfb831
9 changed files with 98 additions and 12 deletions

View file

@ -0,0 +1,61 @@
<ModalDialog :label :shown :closed background="var(--main-bg)" on:close="onClose()">
<form class="confirmation-dialog-form">
<p>
{{text}}
</p>
<div class="confirmation-dialog-form-flex">
<button type="button" on:click="onPositive()">
{{positiveText || 'OK'}}
</button>
<button type="button" on:click="onNegative()">
{{negativeText || 'Cancel'}}
</button>
</div>
</form>
</ModalDialog>
<style>
.confirmation-dialog-form-flex {
display: flex;
flex-direction: row;
}
.confirmation-dialog-form-flex button {
flex: 1;
min-width: 200px;
}
.confirmation-dialog-form p {
font-size: 1.3em;
padding: 40px 20px;
}
</style>
<script>
import ModalDialog from './ModalDialog.html'
export default {
components: {
ModalDialog
},
methods: {
show() {
this.set({shown: true})
},
onClose() {
if (this.get('positiveResult')) {
if (this.get('onPositive')) {
this.get('onPositive')()
}
} else {
if (this.get('onNegative')) {
this.get('onNegative')()
}
}
},
onPositive() {
this.set({positiveResult: true})
this.set({closed: true})
},
onNegative() {
this.set({closed: true})
}
}
}
</script>

View file

@ -29,7 +29,7 @@
}
</style>
<script>
import ModalDialog from '../ModalDialog.html'
import ModalDialog from './ModalDialog.html'
export default {
components: {

View file

@ -67,14 +67,21 @@
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()
a11yDialog.on('hide', () => {
console.log('destroying modal dialog')
a11yDialog.destroy()
this.destroy()
}
})
this.observe('closed', closed => {
if (closed) {
setTimeout(() => { // use setTimeout to workaround svelte timing issue
a11yDialog.hide()
}, 0)
}
})
}

View file

@ -16,7 +16,7 @@
}
</style>
<script>
import ModalDialog from '../ModalDialog.html'
import ModalDialog from './ModalDialog.html'
export default {
components: {

View file

@ -0,0 +1,11 @@
import ConfirmationDialog from './ConfirmationDialog.html'
export function showConfirmationDialog(options) {
let dialog = new ConfirmationDialog({
target: document.getElementById('modal-dialog'),
data: Object.assign({
label: 'Confirmation dialog'
}, options)
})
dialog.show()
}

View file

@ -1,4 +1,4 @@
import ImageDialog from '../_components/status/ImageDialog.html'
import ImageDialog from './ImageDialog.html'
export function showImageDialog(poster, src, type, width, height, description) {
let imageDialog = new ImageDialog({

View file

@ -1,4 +1,4 @@
import VideoDialog from '../_components/status/VideoDialog.html'
import VideoDialog from './VideoDialog.html'
export function showVideoDialog(poster, src, width, height, description) {
let videoDialog = new VideoDialog({

View file

@ -116,8 +116,8 @@
<script>
import { DEFAULT_MEDIA_WIDTH, DEFAULT_MEDIA_HEIGHT } from '../../_static/media'
import { imgLoad, imgLoadError } from '../../_utils/events'
import { showVideoDialog } from '../../_utils/showVideoDialog'
import { showImageDialog } from '../../_utils/showImageDialog'
import { showVideoDialog } from '../dialog/showVideoDialog'
import { showImageDialog } from '../dialog/showImageDialog'
import { mouseover } from '../../_utils/events'
import NonAutoplayGifv from '../NonAutoplayGifv.html'

View file

@ -100,6 +100,7 @@
import Layout from '../../_components/Layout.html'
import SettingsLayout from '../_components/SettingsLayout.html'
import ExternalLink from '../../_components/ExternalLink.html'
import { showConfirmationDialog } from '../../_components/dialog/showConfirmationDialog'
import {
changeTheme,
switchToInstance,
@ -141,8 +142,14 @@
onLogOut(e) {
e.preventDefault()
let instanceName = this.get('instanceName')
showConfirmationDialog({
text: `Log out of ${instanceName}?`,
onPositive() {
logOutOfInstance(instanceName)
}
})
}
}
}
</script>