selfhosted
/
pasty
mirror of https://github.com/lus/pasty.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Implement the spinner functionality

This commit is contained in:
Lukas SP 2020-08-24 18:23:52 +02:00
parent 09135a493f
commit 6b0d0007e2
3 changed files with 63 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/js/autoload.js
View File

@ -1,6 +1,7 @@
// Import the used modules // Import the used modules
import * as api from "./api.js"; import * as api from "./api.js";
import * as buttons from "./buttons.js"; import * as buttons from "./buttons.js";
import * as spinner from "./spinner.js";
// Set up the buttons // Set up the buttons
buttons.setupButtons(); buttons.setupButtons();
@ -57,4 +58,4 @@ async function loadPaste() {
input.focus(); input.focus();
} }
} }
loadPaste(); spinner.surround(loadPaste);

77
web/js/buttons.js
View File

@ -1,6 +1,7 @@
// Import the used modules // Import the used modules
import * as api from "./api.js"; import * as api from "./api.js";
import * as autoload from "./autoload.js"; import * as autoload from "./autoload.js";
import * as spinner from "./spinner.js";
// setupKeybinds initializes the keybinds for the buttons // setupKeybinds initializes the keybinds for the buttons
export function setupKeybinds() { export function setupKeybinds() {
@ -46,52 +47,58 @@ export function setupButtons() {
}); });
// Define the behavior of the 'save' button // Define the behavior of the 'save' button
document.getElementById("btn_save").addEventListener("click", async function() { document.getElementById("btn_save").addEventListener("click", function() {
// Return if the text area is empty spinner.surround(async function() {
const input = document.getElementById("input"); // Return if the text area is empty
if (!input.value) return; const input = document.getElementById("input");
if (!input.value) return;
// Create the paste // Create the paste
const response = await api.createPaste(input.value); const response = await api.createPaste(input.value);
if (!response.ok) { if (!response.ok) {
alert("Error:\n\n" + data); alert("Error:\n\n" + data);
return; return;
} }
const data = await response.json(); const data = await response.json();
// Redirect the user to the paste page // Redirect the user to the paste page
let address = location.protocol + "//" + location.host + "/" + data.id; let address = location.protocol + "//" + location.host + "/" + data.id;
if (data.suggestedSyntaxType) address += "." + data.suggestedSyntaxType; if (data.suggestedSyntaxType) address += "." + data.suggestedSyntaxType;
location.replace(address); 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 // Define the behavior of the 'delete' button
document.getElementById("btn_delete").addEventListener("click", async function() { document.getElementById("btn_delete").addEventListener("click", function() {
// Ask the user for the deletion token spinner.surround(async function() {
const deletionToken = window.prompt("Deletion Token:"); // Ask the user for the deletion token
if (!deletionToken) return; const deletionToken = window.prompt("Deletion Token:");
if (!deletionToken) return;
// Delete the paste // Delete the paste
const response = await api.deletePaste(autoload.PASTE_ID, deletionToken); const response = await api.deletePaste(autoload.PASTE_ID, deletionToken);
const data = await response.text(); const data = await response.text();
if (!response.ok) { if (!response.ok) {
alert("Error:\n\n" + data); alert("Error:\n\n" + data);
return; return;
} }
// Redirect the user to the main page // Redirect the user to the main page
location.replace(location.protocol + "//" + location.host); location.replace(location.protocol + "//" + location.host);
});
}); });
// Define the behavior of the 'copy' button // Define the behavior of the 'copy' button
document.getElementById("btn_copy").addEventListener("click", async function() { document.getElementById("btn_copy").addEventListener("click", function() {
// Ask for the clipboard permissions spinner.surround(async function() {
askClipboardPermissions(); // Ask for the clipboard permissions
askClipboardPermissions();
// Copy the code
await navigator.clipboard.writeText(document.getElementById("code").innerText); // Copy the code
await navigator.clipboard.writeText(document.getElementById("code").innerText);
});
}); });
} }

19
web/js/spinner.js Normal file
View File

@ -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();
}