From b51c264c8b33cee020f3b9e45c1e6ce0b0c48ea6 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 25 Mar 2017 06:04:24 +0300
Subject: [PATCH] confirmDelete: extract, refactor, use in manage

---
 manage.html        | 17 ++++++++--
 manage.js          |  9 +-----
 msgbox/confirm.css | 80 ++++++++++++++++++++++++++++++++++++++++++++++
 msgbox/confirm.js  | 53 ++++++++++++++++++++++++++++++
 popup.css          | 45 --------------------------
 popup.html         | 16 +++++++---
 popup.js           | 42 +++++++-----------------
 7 files changed, 173 insertions(+), 89 deletions(-)
 create mode 100644 msgbox/confirm.css
 create mode 100644 msgbox/confirm.js
diff --git a/manage.html b/manage.html
index 48b97ed6..4726eeec 100644
--- a/manage.html
+++ b/manage.html
@@ -3,8 +3,9 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title i18n-text="manageTitle"></title>
-  <link href="manage.css" rel="stylesheet">
-  <link href="msgbox/msgbox.css" rel="stylesheet">
+  <link rel="stylesheet" href="manage.css">
+  <link rel="stylesheet" href="msgbox/msgbox.css">
+  <link rel="stylesheet" href="msgbox/confirm.css">
 
   <template data-id="style">
     <div class="entry">
@@ -115,6 +116,17 @@
 </div>
 <div id="installed"></div>
 
+<div id="confirm">
+  <div>
+    <b>Style's Name</b>
+    <span i18n-text="deleteStyleConfirm"></span>
+    <div>
+      <button i18n-text="confirmCancel" data-cmd="cancel"></button>
+      <button i18n-text="confirmDelete" data-cmd="ok"></button>
+    </div>
+  </div>
+</div>
+
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
   <symbol id="svg-icon-external-link" height="16" width="16" viewBox="0 0 8 8">
     <path d="M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z"></path>
@@ -124,6 +136,7 @@
 <script src="manage.js"></script>
 <script src="backup/fileSaveLoad.js"></script>
 <script src="msgbox/msgbox.js"></script>
+<script src="msgbox/confirm.js"></script>
 
 </body>
 </html>
diff --git a/manage.js b/manage.js
index 3852d937..f6c4ed1c 100644
--- a/manage.js
+++ b/manage.js
@@ -172,7 +172,7 @@ function createStyleElement(style) {
   $('.disable', entry).onclick = EntryOnClick.toggle;
   $('.check-update', entry).onclick = EntryOnClick.check;
   $('.update', entry).onclick = EntryOnClick.update;
-  $('.delete', entry).onclick = EntryOnClick.delete;
+  $('.delete', entry).onclick = event => confirmDelete(event, {float: true});
   return entry;
 }
 
@@ -224,13 +224,6 @@ class EntryOnClick {
     }));
   }
 
-  static delete(event) {
-    if (confirm(t('deleteStyleConfirm'))) {
-      deleteStyle(getClickedStyleId(event))
-        .then(handleDelete);
-    }
-  }
-
 }
 
 
diff --git a/msgbox/confirm.css b/msgbox/confirm.css
new file mode 100644
index 00000000..0d418fac
--- /dev/null
+++ b/msgbox/confirm.css
@@ -0,0 +1,80 @@
+#confirm,
+#confirm > div > span {
+  align-items: center;
+  justify-content: center;
+}
+
+#confirm {
+  z-index: 2147483647;
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  margin: 0 !important;
+  box-sizing: border-box;
+  animation: lights-off .5s cubic-bezier(.03, .67, .08, .94);
+  animation-fill-mode: both;
+}
+
+#confirm.lights-on {
+  animation: lights-on .25s ease-in-out;
+  animation-fill-mode: both;
+}
+
+#confirm.lights-on > div{
+  display: none;
+}
+
+#confirm[data-display=true] {
+  display: flex;
+}
+
+#confirm > div {
+  width: 80vw;
+  max-width: 16em;
+  min-height: 8em;
+  max-height: 80vh;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  border: solid 2px rgba(0, 0, 0, 0.5);
+}
+
+#confirm > div > span {
+  display: flex;
+  flex: 1;
+  padding: 0 10px;
+}
+
+#confirm > div > b {
+  padding: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#confirm > div > div {
+  padding: 10px;
+  direction: rtl;
+}
+
+@keyframes lights-off {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+}
+
+@keyframes lights-on {
+  from {
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
diff --git a/msgbox/confirm.js b/msgbox/confirm.js
new file mode 100644
index 00000000..2094c5f3
--- /dev/null
+++ b/msgbox/confirm.js
@@ -0,0 +1,53 @@
+function confirmDelete(event, {float = false} = {}) {
+  const id = getClickedStyleId(event);
+  const box = $('#confirm');
+  box.dataset.id = id;
+  box.dataset.display = true;
+  box.style.cssText = '';
+  $('b', box).textContent = ((cachedStyles.byId.get(id) || {}).style || {}).name;
+  if (float) {
+    const GAP = 50;
+    const {width:W, height:H} = box.firstElementChild.getBoundingClientRect();
+    const {left:L, top:T, right:R, bottom:B} = event.target.getBoundingClientRect();
+    Object.assign(box.style, {
+      paddingTop: (Math.min(T - H/2, innerHeight - H) - GAP) + 'px',
+      paddingLeft: (Math.min(L - W/2, innerWidth - W) - GAP) + 'px',
+      paddingRight: (innerWidth - Math.max(R + W/2, W) - GAP) + 'px',
+      paddingBottom: (innerHeight - Math.max(B + H/2, H) - GAP) + 'px',
+    });
+  }
+  let resolveMe;
+  $('[data-cmd="ok"]', box).onclick = event => doDelete(true);
+  $('[data-cmd="cancel"]', box).onclick = event => doDelete(false);
+  window.addEventListener('keydown', onKey);
+
+  const stopScroll = {x: scrollX, y: scrollY};
+  window.addEventListener('scroll', preventScroll);
+
+  return new Promise(resolve => resolveMe = resolve);
+
+  function doDelete(confirmed) {
+    window.removeEventListener('keydown', onKey);
+    window.removeEventListener('scroll', preventScroll);
+    box.classList.add('lights-on');
+    box.addEventListener('animationend', function _() {
+      box.removeEventListener('animationend', _);
+      box.dataset.display = false;
+      box.classList.remove('lights-on');
+    });
+    Promise.resolve(confirmed && deleteStyle(id))
+      .then(resolveMe);
+  }
+
+  function onKey(event) {
+    if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey
+    && (event.keyCode == 13 || event.keyCode == 27)) {
+      event.preventDefault();
+      doDelete(event.keyCode == 13);
+    }
+  }
+
+  function preventScroll() {
+    window.scrollTo(stopScroll.x, stopScroll.y);
+  }
+}
diff --git a/popup.css b/popup.css
index 31ed24c0..d1e0f2a5 100644
--- a/popup.css
+++ b/popup.css
@@ -211,49 +211,4 @@ body>div:not(#installed) {
   text-overflow: ellipsis;
   white-space: nowrap;
   padding-right: 5px;
-}
-  /* confirm */
-#confirm,
-#confirm>div>span {
-  align-items: center;
-  justify-content: center;
-}
-#confirm {
-  z-index: 2147483647;
-  display: none; /* flex */
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  margin:  0!important;
-  box-sizing: border-box;
-  background-color: rgba(0, 0, 0, 0.4);
-}
-#confirm[data-display=true] {
-  display: flex;
-}
-#confirm>div {
-  width: 80%;
-  height: 100px;
-  max-height: 80%;
-  background-color: #fff;
-  display: flex;
-  flex-direction: column;
-  border: solid 2px rgba(0, 0, 0, 0.5);
-}
-#confirm>div>span {
-  display: flex;
-  flex: 1;
-  padding: 0 10px;
-}
-#confirm>div>b {
-  padding: 10px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-#confirm>div>div {
-  padding: 10px;
-  direction: rtl;
 }
diff --git a/popup.html b/popup.html
index f26c943e..d0084d96 100644
--- a/popup.html
+++ b/popup.html
@@ -3,9 +3,10 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
     <link rel="stylesheet" href="popup.css">
+    <link rel="stylesheet" href="msgbox/confirm.css">
 
     <template data-id="style">
-        <div>
+        <div class="entry">
             <div class="left-gutter">
                 <input class="checker" type="checkbox">
             </div>
@@ -33,11 +34,17 @@
         <a class="write-style-link"></a>
     </template>
 
+    <template data-id="noStyles">
+        <div id="no-styles" class="entry" i18n-text="noStylesForSite"></div>
+    </template>
+
     <script src="localization.js"></script>
     <script src="health.js"></script>
     <script src="storage.js"></script>
     <script src="messaging.js"></script>
     <script src="apply.js"></script>
+    <script src="msgbox/confirm.js"></script>
+
     <script src="popup.js"></script>
 </head>
 
@@ -48,14 +55,15 @@
             <b>Style's Name</b>
             <span i18n-text="deleteStyleConfirm"></span>
             <div>
-                <input type="button" i18n-value="confirmCancel" data-cmd="cancel">
-                <input type="button" i18n-value="confirmDelete" data-cmd="ok">
+                <button i18n-text="confirmCancel" data-cmd="cancel"></button>
+                <button i18n-text="confirmDelete" data-cmd="ok"></button>
             </div>
         </div>
     </div>
 
     <div id="unavailable">
-        <div class="main-controls"><span id="unavailable-message" i18n-text="stylishUnavailableForURL"></span>
+        <div class="main-controls">
+            <span id="unavailable-message" i18n-text="stylishUnavailableForURL"></span>
         </div>
     </div>
     <div id="installed"></div>
diff --git a/popup.js b/popup.js
index 3fe9fbf3..74295514 100644
--- a/popup.js
+++ b/popup.js
@@ -37,23 +37,6 @@ function initPopup(url) {
   document.body.style.width =
     Math.max(200, Math.min(800, Number(localStorage.popupWidth) || 246)) + 'px';
 
-  // confirm dialog
-  $('#confirm').onclick = e => {
-    const cmd = e.target.dataset.cmd;
-    if (cmd === 'ok') {
-      deleteStyle($('#confirm').dataset.id).then(() => {
-        // update view with 'No styles installed for this site' message
-        if ($('#installed').children.length === 0) {
-          showStyles([]);
-        }
-      });
-    }
-    //
-    if (cmd) {
-      $('#confirm').dataset.display = false;
-    }
-  };
-
   // action buttons
   $('#disableAll').onchange = () =>
     installed.classList.toggle('disabled', prefs.get('disableAll'));
@@ -132,8 +115,7 @@ function initPopup(url) {
 
 function showStyles(styles) {
   if (!styles.length) {
-    installed.innerHTML =
-      `<div class="entry" id="no-styles">${t('noStylesForSite')}</div>`;
+    installed.innerHTML = template.noStyles.outerHTML;
   } else {
     const enabledFirst = prefs.get('popup.enabledFirst');
     styles.sort((a, b) =>
@@ -168,14 +150,19 @@ function createStyleElement(style) {
         .then(handleUpdate);
     },
     deleteClick(event) {
-      doDelete(event);
+      confirmDelete(event).then(() => {
+        // update view with 'No styles installed for this site' message
+        if (!installed.children.length) {
+          showStyles([]);
+        }
+      });
     }
   };
   const entry = template.style.cloneNode(true);
   entry.setAttribute('style-id', style.id);
   Object.assign(entry, {
     styleId: style.id,
-    className: ['entry', style.enabled ? 'enabled' : 'disabled'].join(' '),
+    className: entry.className + ' ' + (style.enabled ? 'enabled' : 'disabled'),
     onmousedown: openEditorOnMiddleclick,
     onauxclick: openEditorOnMiddleclick,
   });
@@ -209,18 +196,13 @@ function createStyleElement(style) {
 }
 
 
-function doDelete(event) {
-  $('#confirm').dataset.display = true;
-  const id = getClickedStyleId(event);
-  $('#confirm b').textContent =
-    $(`[style-id="${id}"] label`).textContent;
-  $('#confirm').dataset.id = id;
+function getClickedStyleId(event) {
+  return (getClickedStyleElement(event) || {}).styleId;
 }
 
 
-function getClickedStyleId(event) {
-  const entry = event.target.closest('.entry');
-  return entry ? entry.styleId : null;
+function getClickedStyleElement(event) {
+  return event.target.closest('.entry');
 }
 
 
