implement confirmation dialog

routes/_components/dialog/ConfirmationDialog.html

@@ -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>

routes/_components/dialog/ImageDialog.html

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

routes/_components/dialog/ModalDialog.html

@@ -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)
         }
       })
     }

routes/_components/dialog/VideoDialog.html

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

routes/_components/dialog/showConfirmationDialog.js

@@ -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()
+}

routes/_components/dialog/showImageDialog.js

@@ -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({

routes/_components/dialog/showVideoDialog.js

@@ -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({

routes/_components/status/Media.html

@@ -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 { showVideoDialog } from '../dialog/showVideoDialog'
-  import { showImageDialog } from '../../_utils/showImageDialog'
+  import { showImageDialog } from '../dialog/showImageDialog'
   import { mouseover } from '../../_utils/events'
   import NonAutoplayGifv from '../NonAutoplayGifv.html'
 

routes/settings/instances/[instanceName].html

@@ -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>