From 8711bfb8314db8c8222de28dcbfaf8472e345ee8 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 5 Feb 2018 09:43:45 -0800
Subject: [PATCH] implement confirmation dialog

---
 .../dialog/ConfirmationDialog.html            | 61 +++++++++++++++++++
 .../{status => dialog}/ImageDialog.html       |  2 +-
 .../_components/{ => dialog}/ModalDialog.html | 17 ++++--
 .../{status => dialog}/VideoDialog.html       |  2 +-
 .../dialog/showConfirmationDialog.js          | 11 ++++
 .../dialog}/showImageDialog.js                |  2 +-
 .../dialog}/showVideoDialog.js                |  2 +-
 routes/_components/status/Media.html          |  4 +-
 routes/settings/instances/[instanceName].html |  9 ++-
 9 files changed, 98 insertions(+), 12 deletions(-)
 create mode 100644 routes/_components/dialog/ConfirmationDialog.html
 rename routes/_components/{status => dialog}/ImageDialog.html (93%)
 rename routes/_components/{ => dialog}/ModalDialog.html (84%)
 rename routes/_components/{status => dialog}/VideoDialog.html (90%)
 create mode 100644 routes/_components/dialog/showConfirmationDialog.js
 rename routes/{_utils => _components/dialog}/showImageDialog.js (83%)
 rename routes/{_utils => _components/dialog}/showVideoDialog.js (82%)

diff --git a/routes/_components/dialog/ConfirmationDialog.html b/routes/_components/dialog/ConfirmationDialog.html
new file mode 100644
index 00000000..35bcfb7f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/routes/_components/status/ImageDialog.html b/routes/_components/dialog/ImageDialog.html
similarity index 93%
rename from routes/_components/status/ImageDialog.html
rename to routes/_components/dialog/ImageDialog.html
index 95391323..ff7f2576 100644
--- a/routes/_components/status/ImageDialog.html
+++ b/routes/_components/dialog/ImageDialog.html
@@ -29,7 +29,7 @@
   }
 </style>
 <script>
-  import ModalDialog from '../ModalDialog.html'
+  import ModalDialog from './ModalDialog.html'
 
   export default {
     components: {
diff --git a/routes/_components/ModalDialog.html b/routes/_components/dialog/ModalDialog.html
similarity index 84%
rename from routes/_components/ModalDialog.html
rename to routes/_components/dialog/ModalDialog.html
index 144329f6..faefb71c 100644
--- a/routes/_components/ModalDialog.html
+++ b/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)
         }
       })
     }
diff --git a/routes/_components/status/VideoDialog.html b/routes/_components/dialog/VideoDialog.html
similarity index 90%
rename from routes/_components/status/VideoDialog.html
rename to routes/_components/dialog/VideoDialog.html
index 8f963a04..abe7d8db 100644
--- a/routes/_components/status/VideoDialog.html
+++ b/routes/_components/dialog/VideoDialog.html
@@ -16,7 +16,7 @@
   }
 </style>
 <script>
-  import ModalDialog from '../ModalDialog.html'
+  import ModalDialog from './ModalDialog.html'
 
   export default {
     components: {
diff --git a/routes/_components/dialog/showConfirmationDialog.js b/routes/_components/dialog/showConfirmationDialog.js
new file mode 100644
index 00000000..62ed6880
--- /dev/null
+++ b/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()
+}
\ No newline at end of file
diff --git a/routes/_utils/showImageDialog.js b/routes/_components/dialog/showImageDialog.js
similarity index 83%
rename from routes/_utils/showImageDialog.js
rename to routes/_components/dialog/showImageDialog.js
index cfdf3ead..282cbd53 100644
--- a/routes/_utils/showImageDialog.js
+++ b/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({
diff --git a/routes/_utils/showVideoDialog.js b/routes/_components/dialog/showVideoDialog.js
similarity index 82%
rename from routes/_utils/showVideoDialog.js
rename to routes/_components/dialog/showVideoDialog.js
index 1ff2d0b8..fe396e76 100644
--- a/routes/_utils/showVideoDialog.js
+++ b/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({
diff --git a/routes/_components/status/Media.html b/routes/_components/status/Media.html
index 4d50ff53..f5f907a1 100644
--- a/routes/_components/status/Media.html
+++ b/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 { showImageDialog } from '../../_utils/showImageDialog'
+  import { showVideoDialog } from '../dialog/showVideoDialog'
+  import { showImageDialog } from '../dialog/showImageDialog'
   import { mouseover } from '../../_utils/events'
   import NonAutoplayGifv from '../NonAutoplayGifv.html'
 
diff --git a/routes/settings/instances/[instanceName].html b/routes/settings/instances/[instanceName].html
index 7d7d95eb..7d7e485e 100644
--- a/routes/settings/instances/[instanceName].html
+++ b/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,7 +142,13 @@
       onLogOut(e) {
         e.preventDefault()
         let instanceName = this.get('instanceName')
-        logOutOfInstance(instanceName)
+
+        showConfirmationDialog({
+          text: `Log out of ${instanceName}?`,
+          onPositive() {
+            logOutOfInstance(instanceName)
+          }
+        })
       }
     }
   }