FreePad/static/js/pad-scripts.js

272 lines
7.4 KiB
JavaScript
Raw Normal View History

function sendMyData(el) {
const formData = new FormData();
// Check if the writing watch was sending something already
if (!!window.writingWatch) {
// Clear old timeout
clearTimeout(window.writingWatch);
}
if (el.value.length > maximumPadSize) {
let err = new Error(`Your Pad is too big! Please keep it limited to ${maximumPadSize} characters!`);
alert(err);
throw err;
}
el.setAttribute(`readonly`, `1`);
const textareaPreview = document.getElementById(`textarea-preview`)
if (!!textareaPreview) {
textareaPreview.textContent = el.value;
hljs.highlightElement(document.getElementById(`textarea-preview`));
}
formData.set("content", el.value);
updateStatus(`Attempting to save...`, `text-warning`);
fetch(window.location.href.toString(), {
body: formData,
method: "post",
})
.then(resp => {
resp.json()
.then(e => {
document.getElementById(`last_modified_`).value = e.pad.last_modified;
updateStatus(`Succesfully Saved`, `text-success`);
})
.catch(err => {
updateStatus(`Failed to Save`, `text-danger`);
console.error(err);
})
})
.catch(err => {
updateStatus(`Failed to Save`, `text-danger`);
console.error(err);
})
.finally(() => {
el.removeAttribute(`readonly`);
})
}
function toggleWritingWatch(el) {
// Check if the writing watch was sending something already
if (!!window.writingWatch) {
// Clear old timeout
clearTimeout(window.writingWatch);
}
// Set a timeout for the action
window.writingWatch = setTimeout(() => {
// Send out the data
sendMyData(el)
}, 750)
}
function updateStatus(txt, cls) {
const loading_status = document.getElementById(`loading_status`)
loading_status.value = txt;
loading_status.classList.remove("text-danger", "text-warning", "text-success", "text-white", "text-primary");
loading_status.classList.add(cls);
}
function getLocalArchives() {
2022-05-21 16:19:24 +03:00
let a = localStorage.getItem(`${padTitle}_archives`);
// Check if we had anything in storage for the archives
if (a == null) {
// There were nothing in storage
return [];
}
try {
// Try and parse the json
a = JSON.parse(a);
} catch (err) {
// Return null of the fail
return [];
}
return a;
}
function storeArchives(archives) {
// Check if the provided list is an array
if (!Array.isArray(archives)) return;
// Set the current archives
2022-05-21 16:19:24 +03:00
localStorage.setItem(`${padTitle}_archives`, JSON.stringify(archives));
}
function renderArchivesSelection() {
// Get the archives selection
const archivesSelection = document.getElementById(`archives-selection`);
const rowTemplate = document.getElementById(`archive-selection-example`);
// Clear any old optiosn
archivesSelection.querySelectorAll(`.dropdown-item:not(#do-archive-button):not(#archive-selection-example)`).forEach(el => {
// Remove the element
el.remove();
})
// Get the current list of available archives
for (let a of getLocalArchives()) {
// Clone the template row
const row = rowTemplate.cloneNode(true);
// Remove the id from the row
row.removeAttribute(`id`);
// Append the row to the selection menu
archivesSelection.appendChild(row);
const ts = new Date(a.ts);
// Update the display date
row.querySelector(`.archive-date`).textContent = ts.toLocaleString();
// Add an event listener
row.addEventListener(`click`, e => {
let resp = confirm("Load contents of pad from memory? This will overwrite the current pad for everyone.");
if (!!resp) {
2022-06-07 00:16:27 +03:00
// Update visually for the client
updatePadContent(a.content);
// Send the update
window.socket.sendPadUpdate();
}
})
}
}
function saveLocalArchive() {
let resp = confirm("Save a local copy of the current Pad?");
if (!resp) {
// Do not
return;
}
// Get all of the previous archives, append this one to them
let myArchives = getLocalArchives();
myArchives.push({
ts: new Date().getTime(),
content: document.getElementById(`pad-content`).value,
});
// Store the archives
storeArchives(myArchives);
// Re-Render the archives selection
renderArchivesSelection();
// Save
alert(`Saved`);
}
function generateQRCode() {
var qrcodeContainer = document.getElementById(`qrcode`)
// Remove old contents
qrcodeContainer.innerHTML = "";
// Add new qr
new QRCode(qrcodeContainer, {
text: window.location.toString(),
width: 256,
height: 256,
colorDark: "#555273",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
// Open the modal
MicroModal.show(`qrmodal`)
}
function toggleTextareaPreview() {
setTextareaPreview(!document.getElementById(`pad-content-toggler`).classList.contains(`read-only`))
}
// t == true - Read Only
// t == false - Edit mode
function setTextareaPreview(t = true) {
const prev = document.getElementById(`textarea-preview`)
const textarea = document.getElementById(`pad-content`);
const toggler = document.getElementById(`pad-content-toggler`);
const padContentArea = document.getElementById(`pad-content-area`);
if (t) {
// Toggle read only
prev.classList.remove(`hidden`)
toggler.classList.add(`read-only`);
padContentArea.classList.add(`read-only-content`);
prev.scrollTop = prev.scrollHeight;
textarea.classList.add(`hidden`);
} else {
// Toggle edit mode
prev.classList.add(`hidden`)
toggler.classList.remove(`read-only`);
padContentArea.classList.remove(`read-only-content`);
textarea.classList.remove(`hidden`);
// Focus
textarea.focus();
// Scroll
textarea.scrollTop = textarea.scrollHeight;
// Move cursor
textarea.setSelectionRange(textarea.value.length, textarea.value.length);
}
}
document.addEventListener(`DOMContentLoaded`, e => {
{ // Textarea Handling
const textarea = document.getElementById(`pad-content`);
setTextareaPreview(!!textarea.value);
// Make sure tabs are taken into consideration
textarea.addEventListener('keydown', function (e) {
if (e.key == 'Tab') {
e.preventDefault();
const start = this.selectionStart;
const end = this.selectionEnd;
// set textarea value to: text before caret + tab + text after caret
this.value = this.value.substring(0, start) +
"\t" + this.value.substring(end);
// put caret at right position again
this.selectionStart =
this.selectionEnd = start + 1;
}
});
}
try { // highlights
hljs.highlightElement(document.getElementById(`textarea-preview`));
} catch ( err ) {
console.err(err);
}
{ // Archives
renderArchivesSelection()
}
})