From 6b0d0007e2f9dc452061f49c589a195dbeeb2c53 Mon Sep 17 00:00:00 2001
From: Lukas SP <kbrt@protonmail.com>
Date: Mon, 24 Aug 2020 18:23:52 +0200
Subject: [PATCH] Implement the spinner functionality

---
 web/js/autoload.js |  3 +-
 web/js/buttons.js  | 77 +++++++++++++++++++++++++---------------------
 web/js/spinner.js  | 19 ++++++++++++
 3 files changed, 63 insertions(+), 36 deletions(-)
 create mode 100644 web/js/spinner.js

diff --git a/web/js/autoload.js b/web/js/autoload.js
index 873aec3..af503f7 100644
--- a/web/js/autoload.js
+++ b/web/js/autoload.js
@@ -1,6 +1,7 @@
 // Import the used modules
 import * as api from "./api.js";
 import * as buttons from "./buttons.js";
+import * as spinner from "./spinner.js";
 
 // Set up the buttons
 buttons.setupButtons();
@@ -57,4 +58,4 @@ async function loadPaste() {
         input.focus();
     }
 }
-loadPaste();
\ No newline at end of file
+spinner.surround(loadPaste);
\ No newline at end of file
diff --git a/web/js/buttons.js b/web/js/buttons.js
index 4aaf54b..7026fce 100644
--- a/web/js/buttons.js
+++ b/web/js/buttons.js
@@ -1,6 +1,7 @@
 // Import the used modules
 import * as api from "./api.js";
 import * as autoload from "./autoload.js";
+import * as spinner from "./spinner.js";
 
 // setupKeybinds initializes the keybinds for the buttons
 export function setupKeybinds() {
@@ -46,52 +47,58 @@ export function setupButtons() {
     });
 
     // Define the behavior of the 'save' button
-    document.getElementById("btn_save").addEventListener("click", async function() {
-        // Return if the text area is empty
-        const input = document.getElementById("input");
-        if (!input.value) return;
+    document.getElementById("btn_save").addEventListener("click", function() {
+        spinner.surround(async function() {
+            // Return if the text area is empty
+            const input = document.getElementById("input");
+            if (!input.value) return;
 
-        // Create the paste
-        const response = await api.createPaste(input.value);
-        if (!response.ok) {
-            alert("Error:\n\n" + data);
-            return;
-        }
-        const data = await response.json();
+            // Create the paste
+            const response = await api.createPaste(input.value);
+            if (!response.ok) {
+                alert("Error:\n\n" + data);
+                return;
+            }
+            const data = await response.json();
 
-        // Redirect the user to the paste page
-        let address = location.protocol + "//" + location.host + "/" + data.id;
-        if (data.suggestedSyntaxType) address += "." + data.suggestedSyntaxType;
-        location.replace(address);
+            // Redirect the user to the paste page
+            let address = location.protocol + "//" + location.host + "/" + data.id;
+            if (data.suggestedSyntaxType) address += "." + data.suggestedSyntaxType;
+            location.replace(address);
 
-        // TODO: Find a solution to display the deletion token
+            // TODO: Find a solution to display the deletion token
+        });
     });
 
     // Define the behavior of the 'delete' button
-    document.getElementById("btn_delete").addEventListener("click", async function() {
-        // Ask the user for the deletion token
-        const deletionToken = window.prompt("Deletion Token:");
-        if (!deletionToken) return;
+    document.getElementById("btn_delete").addEventListener("click", function() {
+        spinner.surround(async function() {
+            // Ask the user for the deletion token
+            const deletionToken = window.prompt("Deletion Token:");
+            if (!deletionToken) return;
 
-        // Delete the paste
-        const response = await api.deletePaste(autoload.PASTE_ID, deletionToken);
-        const data = await response.text();
-        if (!response.ok) {
-            alert("Error:\n\n" + data);
-            return;
-        }
+            // Delete the paste
+            const response = await api.deletePaste(autoload.PASTE_ID, deletionToken);
+            const data = await response.text();
+            if (!response.ok) {
+                alert("Error:\n\n" + data);
+                return;
+            }
 
-        // Redirect the user to the main page
-        location.replace(location.protocol + "//" + location.host);
+            // Redirect the user to the main page
+            location.replace(location.protocol + "//" + location.host);
+        });
     });
 
     // Define the behavior of the 'copy' button
-    document.getElementById("btn_copy").addEventListener("click", async function() {
-        // Ask for the clipboard permissions
-        askClipboardPermissions();
-        
-        // Copy the code
-        await navigator.clipboard.writeText(document.getElementById("code").innerText);
+    document.getElementById("btn_copy").addEventListener("click", function() {
+        spinner.surround(async function() {
+            // Ask for the clipboard permissions
+            askClipboardPermissions();
+            
+            // Copy the code
+            await navigator.clipboard.writeText(document.getElementById("code").innerText);
+        });
     });
 }
 
diff --git a/web/js/spinner.js b/web/js/spinner.js
new file mode 100644
index 0000000..f86801f
--- /dev/null
+++ b/web/js/spinner.js
@@ -0,0 +1,19 @@
+// element holds the spinners DOM element
+const element = document.getElementById("spinner");
+
+// show shows the spinner
+export function show() {
+    element.classList.remove("hidden");
+}
+
+// hide hides the spinner
+export function hide() {
+    element.classList.add("hidden");
+}
+
+// surround surrounds an action with a spinner
+export async function surround(action) {
+    show();
+    await action();
+    hide();
+}
\ No newline at end of file