Merge pull request #37 from droppyjs/feature/confirm-delete

feat(#35): resolve unsafe delete
droppyjs · Sep 5, 2021 · a76f470 · a76f470
2 parents c2073f9 + e980f4c
commit a76f470
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 13 deletions.
diff --git a/packages/client/lib/client.js b/packages/client/lib/client.js
@@ -1159,9 +1159,13 @@ function openDirectory(view, data, isSearch) {
     });
 
     view.find(".delete-file").off("click").on("click", function() {
-      if (droppy.socketWait) return;
-      showSpinner(view);
-      sendMessage(view[0].vId, "DELETE_FILE", $(this).parents(".data-row")[0].dataset.id);
+      const dataset = $(this).parents(".data-row")[0].dataset;
+
+      showConfirmation(`Are you sure you want to delete the ${dataset.type} "${dataset.name}"?`, () => {
+        if (droppy.socketWait) return;
+        showSpinner(view);
+        sendMessage(view[0].vId, "DELETE_FILE", dataset.id);
+      });
     });
 
     view.find(".icon-play, .icon-view").off("click").on("click", function() {
@@ -1632,14 +1636,18 @@ function initEntryMenu() {
     // Delete a file/folder
   $("#entry-menu .delete").off("click").on("click", (event) => {
     event.stopPropagation();
-    if (droppy.socketWait) return;
-
+    toggleCatcher(false);
     const entry = $(`.data-row[data-id="${droppy.menuTargetId}"]`);
-    const view = entry.parents(".view");
+    const dataset = entry[0].dataset;
 
-    toggleCatcher(false);
-    showSpinner(view);
-    sendMessage(view[0].vId, "DELETE_FILE", entry[0].dataset.id);
+    showConfirmation(`Are you sure you want to delete the ${dataset.type} "${dataset.name}"?`, () => {
+      if (droppy.socketWait) return;
+
+      const view = entry.parents(".view");
+
+      showSpinner(view);
+      sendMessage(view[0].vId, "DELETE_FILE", entry[0].dataset.id);
+    });
   });
 }
 
@@ -2317,6 +2325,48 @@ function showPrefs() {
   }, 0);
 }
 
+function showConfirmation(message, callback) {
+  const box = $("#prefs-box");
+  box.empty().append(() => {
+    const content = document.createElement("div");
+
+    const confirm = document.createElement("button");
+    confirm.textContent = "Yes";
+    confirm.addEventListener("click", () => {
+      callback();
+      toggleCatcher(false);
+    });
+
+    const decline = document.createElement("button");
+    decline.textContent = "Cancel";
+    decline.addEventListener("click", () => {
+      toggleCatcher(false);
+    });
+
+    content.append(
+      document.createTextNode("Confirmation"),
+      document.createElement("br"),
+      document.createTextNode(message),
+      document.createElement("br"),
+      document.createElement("br"),
+      confirm,
+      decline,
+    );
+
+    return content;
+  });
+
+  setTimeout(() => {
+    box.addClass("in").transitionend(function() {
+      this.removeAttribute("style");
+    });
+    toggleCatcher(true);
+    $("#overlay").one("click", () => {
+      // todo
+    });
+  }, 0);
+}
+
 // ============================================================================
 //  Audio functions / events
 // ============================================================================

diff --git a/packages/client/lib/clienttheme.css b/packages/client/lib/clienttheme.css
@@ -97,3 +97,19 @@
   border-bottom-color: #aaa;
   color: #fff;
 }
+
+[theme=dark] #prefs-box button {
+  padding: 0 15px 0 15px;
+  margin: 2px;
+  border: 1px solid #eee;
+  border-radius: 5px;
+  display: inline-block;
+  cursor: pointer;
+  background: #444;
+
+}
+
+[theme=dark] #prefs-box button:hover {
+  background: #eee;
+  color: #444;
+}
diff --git a/packages/client/lib/style.css b/packages/client/lib/style.css
@@ -1782,6 +1782,19 @@ video {
   visibility: hidden;
 }
 
+#prefs-box button {
+  padding: 0 15px 0 15px;
+  margin: 2px;
+  border: 1px solid #bbb;
+  border-radius: 5px;
+  display: inline-block;
+  cursor: pointer;
+}
+
+#prefs-box button:hover {
+  background: #bbb;
+}
+
 #prefs-box.in {
   opacity: 1;
   visibility: visible;

diff --git a/packages/client/lib/templates/main.hbs b/packages/client/lib/templates/main.hbs
@@ -1,6 +1,6 @@
 <main></main>
 <div id="overlay"></div>
-<div id="entry-menu">
+<div id="entry-menu" aria-modal="true">
   <a class="play"><svg class="play">
       <use xlink:href="#i-play">
     </svg>Play</a>
@@ -26,7 +26,7 @@
       <use xlink:href="#i-trash">
     </svg>Delete</a>
 </div>
-<div id="about-box">
+<div id="about-box" aria-modal="true">
   <p id="about-title">droppy</p>
   <p id="about-version"></p>
   <p id="about-engine"></p>
@@ -40,8 +40,8 @@
   </a>
 
 </div>
-<div id="prefs-box"></div>
-<div id="drop-select">
+<div id="prefs-box" aria-modal="true"></div>
+<div id="drop-select" aria-modal="true">
   <span class="movefile">Move</span>
   <span class="copyfile">Copy</span>
   <span class="viewfile">View</span>