add confirmation message when delete is clicked

client/client.js

@@ -807,7 +807,7 @@
   }
 
   function toggleCatcher(show) {
-    const cc = $("#overlay"), modals = ["#prefs-box", "#about-box", "#entry-menu", "#drop-select", ".info-box"];
+    const cc = $("#overlay"), modals = ["#prefs-box", "#about-box", "#entry-menu", "#drop-select", ".info-box", "#confirmation-box"];
 
     if (show === undefined) {
       show = modals.some((selector) => { return $(selector).hasClass("in"); });
@@ -1127,9 +1127,20 @@
       });
 
       view.find(".delete-file").off("click").on("click", function() {
+        $("#confirmation-box").addClass("in");
+        toggleCatcher();
         if (droppy.socketWait) return;
-        showSpinner(view);
-        sendMessage(view[0].vId, "DELETE_FILE", $(this).parents(".data-row")[0].dataset.id);
+        const lineToDelete = $(this);
+        $("#confirmation-button-yes").off("click").on("click", () => {
+          $("#confirmation-box").removeClass("in");
+          showSpinner(view);
+          sendMessage(view[0].vId, "DELETE_FILE", lineToDelete.parents(".data-row")[0].dataset.id);
+          toggleCatcher(false);
+        });
+        $("#confirmation-button-no").off("click").on("click", () => {
+          $("#confirmation-box").removeClass("in");
+          toggleCatcher(false);
+        });
       });
 
       view.find(".icon-play, .icon-view").off("click").on("click", function() {

client/index.html

@@ -89,7 +89,7 @@
         text-align: center;
       }
       svg { height: 1em; width: 1em }
-      #about-box, #prefs-box { visibility: hidden }
+      #about-box, #prefs-box, #confirmation-box { visibility: hidden }
       .hidden { display: none !important }
     </style>
     <script defer src="!/res/client.js"></script>

client/style.css

@@ -1113,6 +1113,49 @@ video {
   text-decoration: underline;
 }
 
+/* =============================== confirmation box =============================== */
+
+#confirmation-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  background: #eee;
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(0,0,0,.3);
+  color: #333;
+  height: 100px;
+  top: 50%;
+  left: 50%;
+  opacity: 0;
+  visibility: hidden;
+  position: fixed;
+  transition: .15s, visibility 0s .15s;
+  transform: translate(-50%, -50%);
+  width: 450px;
+  text-align: center;
+  z-index: 65;
+}
+#confirmation-box.in { opacity: 1; visibility: visible; transition: .15s }
+
+#confirmation-engine {
+  font-size: .8em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#confirmation-button-box{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.confirmation-button>svg{
+  margin-bottom: -3px;
+}
+
+.confirmation-button:hover {color: #fff }
+
 /* ================================= Prefs ================================ */
 
 #prefs-box {

client/templates/main.hbs

@@ -18,6 +18,23 @@
   </a>
   <p id="about-copy">©<a href="https://github.com/silverwind" target="_blank" rel="noopener">silverwind</a></p>
 </div>
+<div id="confirmation-box">
+  <p id="confirmation-engine">Are you sure you want to delete this folder/file ?</p>
+  <div id="confirmation-button-box">
+    <button class="confirmation-button" id="confirmation-button-yes">
+      <svg class="check" >
+        <use xlink:href="#i-check">
+      </svg>
+      <span>Yes</span>
+    </button>
+    <button class="confirmation-button" id="confirmation-button-no">
+      <svg class="cross">
+        <use xlink:href="#i-cross">
+      </svg>
+      <span>Cancel</span></button>
+    </button>
+  </div>
+</div>
 <div id="prefs-box"></div>
 <div id="drop-select">
   <span class="movefile">Move</span>