525 lines
16 KiB
JavaScript
525 lines
16 KiB
JavaScript
import { storeData, clearData, retrieveData, setTimeStamp } from "./storage.js";
|
|
import { loadTemplate } from "./web.js";
|
|
import parseForm from "./parseForm.js";
|
|
import { copyToClipBoard, modalNotifier, resetNavBar } from "./evts.js";
|
|
import { passwordHash } from "./scripts.js";
|
|
|
|
function buildFile() {
|
|
//set current page value in activeState object
|
|
activeState.activePage = "files";
|
|
|
|
//set templateFiles array
|
|
let tF = retrieveData("templateFiles");
|
|
|
|
if (tF == null || tF.length == 0) {
|
|
//console.log("none yet");
|
|
modalNotifier(
|
|
"there are no saved texts yet",
|
|
activeState.settings.notifierPause
|
|
);
|
|
return;
|
|
}
|
|
|
|
if (screen.width > 992) {
|
|
document.getElementById("siteTitle").innerHTML = "Saved files";
|
|
} else {
|
|
document.getElementById("siteTitle").innerHTML = "TG";
|
|
document.getElementById("logo").innerHTML = "TG";
|
|
}
|
|
|
|
//sessionVerfication check
|
|
if (!passwordHash.verify()) {
|
|
modalNotifier("Error: Session is not authenticated...", 0, false);
|
|
}
|
|
|
|
//disable toggleFiles Button
|
|
let target = document.getElementById("toggleFilesMenu");
|
|
target.innerHTML = "";
|
|
let i = document.createElement("i");
|
|
i.classList.add("fa", "fa-file");
|
|
//target.classList.add("w3-disabled");
|
|
target.appendChild(i);
|
|
target.style.cssText = "background-color:#9e9e9e !important";
|
|
target.style.borderBottom = "4px solid #9e9e9e";
|
|
|
|
//disable toggleTestBlocksMenu
|
|
document.getElementById("toggleTestBlocksMenu").style.display = "none";
|
|
|
|
//reset page and event listeners
|
|
let mainFormDiv = document.getElementById("mainForm");
|
|
let outputDiv = document.getElementById("output");
|
|
let submitContainerDiv = document.getElementById("submitContainer");
|
|
let sidebarDiv = document.getElementById("sidebar");
|
|
let fileInfoDiv = document.getElementById("outputInfo");
|
|
|
|
mainFormDiv.innerHTML = "";
|
|
mainFormDiv.replaceWith(mainFormDiv.cloneNode(true));
|
|
outputDiv.innerHTML = "";
|
|
outputDiv.replaceWith(outputDiv.cloneNode(true));
|
|
submitContainerDiv.innerHTML = "";
|
|
submitContainerDiv.replaceWith(submitContainerDiv.cloneNode(true));
|
|
sidebarDiv.innerHTML = "";
|
|
sidebarDiv.replaceWith(sidebarDiv.cloneNode(true));
|
|
fileInfoDiv.innerHTML = "";
|
|
fileInfoDiv.replaceWith(fileInfoDiv.cloneNode(true));
|
|
|
|
document.getElementById("mainForm").innerHTML = mainFormPlaceholder();
|
|
|
|
document.getElementById("sidebar").appendChild(loadFileSidebar(tF));
|
|
document.getElementById("sidebar").addEventListener("click", (e) => {
|
|
let target = e.target.parentElement;
|
|
if (e.target.matches("li.w3-bar-item")) target = e.target;
|
|
if (target.classList.contains("w3-bar-item")) {
|
|
let fileName = target.dataset.file;
|
|
let template = target.dataset.template;
|
|
let pos = target.dataset.tfpos;
|
|
clickLoadFileDiv(fileName, template, pos);
|
|
}
|
|
});
|
|
}
|
|
|
|
function loadFileDiv(fileName, template, pos) {
|
|
activeState.fileName = fileName;
|
|
activeState.loadedTemplate = template;
|
|
pos = parseInt(pos) + 1;
|
|
|
|
storeData("userInputForce", retrieveData(fileName, template));
|
|
|
|
loadTemplate(template, false, true);
|
|
}
|
|
|
|
function loadFileDivCallBack() {
|
|
let tF = retrieveData("templateFiles");
|
|
document.getElementById("sidebar").appendChild(loadFileSidebar(tF));
|
|
|
|
let lT = activeState.loadedTemplate;
|
|
let fN = activeState.fileName;
|
|
let storageName = fN + "_m21_" + lT;
|
|
|
|
let fileDisplay = document.createElement("DIV");
|
|
fileDisplay.classList.add(
|
|
"w3-row-padding",
|
|
"w3-padding-24",
|
|
"w3-container",
|
|
"w3-flat-clouds"
|
|
);
|
|
fileDisplay.id = "fileDisplayWrapper";
|
|
|
|
//start building submitContainer with edit copy and delete
|
|
let editButton = document.createElement("input");
|
|
editButton.setAttribute("type", "submit");
|
|
editButton.setAttribute("value", "Edit");
|
|
editButton.classList.add("w3-button");
|
|
editButton.classList.add("w3-grey");
|
|
document.getElementById("submitContainer").appendChild(editButton);
|
|
|
|
document
|
|
.getElementById("submitContainer")
|
|
.appendChild(document.createTextNode(" "));
|
|
|
|
let copyButton = document.createElement("input");
|
|
copyButton.setAttribute("type", "submit");
|
|
copyButton.setAttribute("value", "Copy");
|
|
copyButton.classList.add("w3-button");
|
|
copyButton.classList.add("w3-grey");
|
|
document.getElementById("submitContainer").appendChild(copyButton);
|
|
|
|
document
|
|
.getElementById("submitContainer")
|
|
.appendChild(document.createTextNode(" "));
|
|
|
|
let deleteButton = document.createElement("input");
|
|
deleteButton.setAttribute("type", "submit");
|
|
deleteButton.setAttribute("value", "Delete");
|
|
deleteButton.classList.add("w3-button");
|
|
deleteButton.classList.add("w3-flat-pomegranate");
|
|
document.getElementById("submitContainer").appendChild(deleteButton);
|
|
|
|
if (screen.width > 992) {
|
|
document.getElementById("siteTitle").innerHTML = lT.replace(/_/g, " ");
|
|
} else {
|
|
document.getElementById("siteTitle").innerHTML = "TG";
|
|
}
|
|
|
|
let title = document.createElement("div");
|
|
title.classList.add("w3-panel");
|
|
let titleText = document.createElement("h2");
|
|
titleText.innerText = fN.replace(/_/g, " ");
|
|
titleText.style.margin = "0px";
|
|
title.appendChild(titleText);
|
|
fileDisplay.appendChild(title);
|
|
|
|
let div = document.createElement("div");
|
|
let parsedTemplate = parseForm(true);
|
|
|
|
if (parsedTemplate == null) {
|
|
let wrapper = document.createElement("div");
|
|
wrapper.innerHTML = mainFormPlaceholder("Error: file empty");
|
|
let div = wrapper.firstChild;
|
|
parsedTemplate = div;
|
|
}
|
|
|
|
if (parsedTemplate == "") {
|
|
let wrapper = document.createElement("div");
|
|
wrapper.innerHTML = mainFormPlaceholder("File empty");
|
|
let div = wrapper.firstChild;
|
|
parsedTemplate = div;
|
|
}
|
|
|
|
div.appendChild(parsedTemplate);
|
|
|
|
fileDisplay.appendChild(div);
|
|
|
|
document.getElementById("mainForm").appendChild(fileDisplay);
|
|
|
|
//append TS info
|
|
let fileInfoDiv = document.getElementById("outputInfo");
|
|
|
|
let pos = "";
|
|
tF = retrieveData("templateFiles");
|
|
for (let tFi of tF) {
|
|
if (tFi.fileName == fN) {
|
|
pos = parseInt(tFi.pos);
|
|
}
|
|
}
|
|
|
|
let tsCreate = tF[pos].metadata.ts_create;
|
|
let created = "";
|
|
if (tsCreate != "") {
|
|
tsCreate =
|
|
tsCreate.current_time_long +
|
|
" " +
|
|
tsCreate.current_date +
|
|
"." +
|
|
tsCreate.current_year;
|
|
created = "";
|
|
created = "<p style='margin: 0'>Created at: " + tsCreate + "</p>";
|
|
}
|
|
|
|
let tsSave = tF[pos].metadata.ts_save;
|
|
let lastSaved = "";
|
|
if (tsSave != "") {
|
|
tsSave =
|
|
tsSave.current_time_long +
|
|
" " +
|
|
tsSave.current_date +
|
|
"." +
|
|
tsSave.current_year;
|
|
lastSaved = "";
|
|
lastSaved = "<p style='margin: 0'>Last saved at: " + tsSave + "</p>";
|
|
}
|
|
|
|
let tsCopy = tF[pos].metadata.ts_copy;
|
|
let lastCopy = "";
|
|
if (tsCopy != "") {
|
|
tsCopy =
|
|
tsCopy.current_time_long +
|
|
" " +
|
|
tsCopy.current_date +
|
|
"." +
|
|
tsCopy.current_year;
|
|
lastCopy = "";
|
|
lastCopy = "<p style='margin: 0'>Last copied at: " + tsCopy + "</p>";
|
|
}
|
|
|
|
let tsEdit = tF[pos].metadata.ts_edit;
|
|
let lastEdit = "";
|
|
if (tsEdit != "") {
|
|
tsEdit =
|
|
tsEdit.current_time_long +
|
|
" " +
|
|
tsEdit.current_date +
|
|
"." +
|
|
tsEdit.current_year;
|
|
lastEdit = "";
|
|
lastEdit = "<p style='margin: 0'>Last edited at: " + tsEdit + "</p>";
|
|
}
|
|
fileInfoDiv.innerHTML =
|
|
"<p><b>Fileinformation:</b></p>" +
|
|
"<p style='margin: 0'>Template: " +
|
|
lT +
|
|
"</p>" +
|
|
"<p style='margin: 0'>ID: " +
|
|
tF[pos].metadata.id +
|
|
"</p>" +
|
|
created +
|
|
lastSaved +
|
|
lastCopy +
|
|
lastEdit
|
|
fileInfoDiv.style.display = "block";
|
|
|
|
//fix min height of file display
|
|
try {
|
|
document.getElementById("fileDisplay").style.cssText = "min-height: 300px;";
|
|
} catch (e) {}
|
|
//fix fontsize for display
|
|
try {
|
|
document.getElementById("fileDisplay").firstChild.style.fontSize = "1em";
|
|
} catch (e) {}
|
|
//add events
|
|
formEvts(storageName);
|
|
}
|
|
|
|
function clickLoadFileDiv(fileName, template, pos) {
|
|
if (fileName == "_overflow") return;
|
|
|
|
if (fileName == "_clearAll") {
|
|
clickClearAllFiles();
|
|
return;
|
|
}
|
|
|
|
document.getElementById("mainForm").innerHTML = "";
|
|
loadFileDiv(fileName, template, pos);
|
|
}
|
|
|
|
function clearFileData(storData) {
|
|
let fileName = storData.split("_m21_")[0];
|
|
|
|
let tF = retrieveData("templateFiles");
|
|
let newArray = [];
|
|
for (let obj of tF) {
|
|
if (obj.fileName != fileName) {
|
|
newArray.push(obj);
|
|
}
|
|
}
|
|
storeData("templateFiles", newArray);
|
|
|
|
clearData(fileName);
|
|
clearData("userInputForce");
|
|
|
|
document.getElementById("mainForm").innerHTML = "";
|
|
document.getElementById("output").innerHTML = "";
|
|
document.getElementById("outputInfo").innerHTML = "";
|
|
document.getElementById("submitContainer").innerHTML = "";
|
|
document.getElementById("sidebar").innerHTML = "";
|
|
document.getElementById("mainForm").innerHTML = mainFormPlaceholder();
|
|
document.getElementById("sidebar").appendChild(loadFileSidebar(newArray));
|
|
}
|
|
|
|
function loadFileSidebar(tF) {
|
|
let sidebarList = document.createElement("ul");
|
|
sidebarList.classList.add("w3-ul");
|
|
|
|
let sidebarListItem = document.createElement("li");
|
|
|
|
sidebarListItem.classList.add("w3-padding-large");
|
|
sidebarListItem.style.borderBottom = "1px solid #ddd";
|
|
sidebarListItem.id = "sb-title";
|
|
sidebarListItem.innerHTML = "Saved Files:";
|
|
sidebarList.appendChild(sidebarListItem);
|
|
|
|
let c = 0;
|
|
let sidebarItemsAmount = 6;
|
|
for (let obj of tF.reverse()) {
|
|
sidebarListItem = document.createElement("li");
|
|
sidebarListItem.classList.add(
|
|
"w3-bar-item",
|
|
"w3-padding-large",
|
|
"w3-button"
|
|
);
|
|
sidebarListItem.style.borderBottom = "1px solid #ddd";
|
|
sidebarListItem.id = "sb-" + obj.fileName.replace(/:/g, "_");
|
|
|
|
//handle to many files on screen and display hidden files amount
|
|
if (c > sidebarItemsAmount) {
|
|
sidebarListItem.setAttribute("data-template", "_overflow");
|
|
sidebarListItem.setAttribute("data-file", "_overflow");
|
|
sidebarListItem.style.backgroundColor = "#e3e7e8";
|
|
sidebarListItem.classList.remove("w3-button");
|
|
sidebarListItem.style.borderTop = "1px solid rgb(221, 221, 221)";
|
|
sidebarListItem.innerHTML =
|
|
tF.length - sidebarItemsAmount + " files not shown";
|
|
sidebarList.appendChild(sidebarListItem);
|
|
break;
|
|
}
|
|
|
|
let sidebarListItemTitle = document.createElement("p");
|
|
sidebarListItemTitle.innerText = obj.fileName.replace(/_/g, " ");
|
|
sidebarListItemTitle.style.cssText = "margin: 0;";
|
|
let sidebarListItemInfo = document.createElement("span");
|
|
sidebarListItemInfo.classList.add("w3-small");
|
|
sidebarListItemInfo.innerText =
|
|
"created at: " +
|
|
obj.metadata.ts_create.current_time +
|
|
" - " +
|
|
obj.metadata.ts_create.current_date;
|
|
sidebarListItem.appendChild(sidebarListItemTitle);
|
|
sidebarListItem.append(sidebarListItemInfo);
|
|
sidebarListItem.setAttribute("data-file", obj.fileName);
|
|
sidebarListItem.setAttribute("data-template", obj.template);
|
|
sidebarListItem.setAttribute("data-tFPos", obj.pos);
|
|
sidebarList.appendChild(sidebarListItem);
|
|
c++;
|
|
}
|
|
|
|
//clear all files button
|
|
sidebarListItem = document.createElement("li");
|
|
sidebarListItem.classList.add("w3-bar-item", "w3-padding-large", "w3-button");
|
|
sidebarListItem.setAttribute("data-template", "_clearAll");
|
|
sidebarListItem.setAttribute("data-file", "_clearAll");
|
|
sidebarListItem.classList.add("w3-hover-flat-pomegranate", "w3-bottom");
|
|
sidebarListItem.style.borderTop = "1px solid rgb(221, 221, 221)";
|
|
sidebarListItem.style.width = "300px";
|
|
sidebarListItem.innerHTML = "Clear all files";
|
|
sidebarList.appendChild(sidebarListItem);
|
|
|
|
return sidebarList;
|
|
}
|
|
|
|
function mainFormPlaceholder(msg = "Select a file") {
|
|
return (
|
|
"<div id='fileDisplay' class='w3-row-padding w3-padding-24 w3-container w3-flat-clouds'><div class='w3-code notranslate w3-border-white' style='font-family: Arial, Helvetica, sans-serif;'><p>" +
|
|
msg +
|
|
"</p><br><br><br><br><br><br><br><br><br><br><br></div></div>"
|
|
);
|
|
}
|
|
|
|
function copyFileToClipboard() {
|
|
const fileDisplay = document.getElementById("fileDisplay");
|
|
if (fileDisplay != null) {
|
|
copyToClipBoard(fileDisplay.innerHTML);
|
|
} else {
|
|
console.log("error file not found");
|
|
}
|
|
}
|
|
|
|
function formEvts(storageName) {
|
|
//add event listener to submitContainer
|
|
document.getElementById("submitContainer").addEventListener("click", (e) => {
|
|
if (e.target && e.target.tagName === "INPUT") {
|
|
switch (e.target.value) {
|
|
case "Edit":
|
|
editSpecificTemplate(storageName);
|
|
break;
|
|
case "Copy":
|
|
copyFileToClipboard();
|
|
e.target.className = e.target.className.replace(
|
|
" w3-grey",
|
|
" w3-flat-carrot"
|
|
);
|
|
e.target.style.pointerEvents = "none";
|
|
const timeoutCopy = setTimeout(() => {
|
|
e.target.className = e.target.className.replace(
|
|
" w3-flat-carrot",
|
|
" w3-grey"
|
|
);
|
|
e.target.style.pointerEvents = "auto";
|
|
}, 250);
|
|
modalNotifier(
|
|
activeState.fileName + " copied to clipboard",
|
|
activeState.settings.notifierPause
|
|
);
|
|
break;
|
|
case "Delete":
|
|
let previousFile = getPreviousFile(storageName);
|
|
clearFileData(storageName);
|
|
let delFileName = activeState.fileName;
|
|
document.getElementById("mainForm").innerHTML = "";
|
|
if (previousFile) {
|
|
loadFileDiv(
|
|
previousFile.fileName,
|
|
previousFile.template,
|
|
previousFile.pos
|
|
);
|
|
} else {
|
|
document.getElementById("mainForm").innerHTML =
|
|
mainFormPlaceholder("No file yet");
|
|
}
|
|
modalNotifier(
|
|
delFileName + " deleted!",
|
|
activeState.settings.notifierPause
|
|
);
|
|
|
|
break;
|
|
default:
|
|
e.preventDefault;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function editSpecificTemplate(storageName) {
|
|
storeData(
|
|
"userInputForce",
|
|
retrieveData(storageName.split("_m21_")[0], storageName.split("_m21_")[1])
|
|
);
|
|
//reset sidebar to clear events
|
|
let sidebarDiv = document.getElementById("sidebar");
|
|
sidebarDiv.replaceWith(sidebarDiv.cloneNode(true));
|
|
|
|
//reset navbar above all else
|
|
resetNavBar();
|
|
|
|
//reset correct activePage
|
|
activeState.activePage = "template";
|
|
|
|
//set edit timestamp
|
|
setTimeStamp("edit");
|
|
|
|
loadTemplate(storageName.split("_m21_")[1]);
|
|
}
|
|
|
|
function getPreviousFile(storageName) {
|
|
let orgFileName = storageName.split("_m21_")[0];
|
|
let tF = retrieveData("templateFiles");
|
|
let i = 0;
|
|
let previousFile;
|
|
|
|
for (let obj of tF) {
|
|
if (obj.fileName == orgFileName) {
|
|
previousFile = tF[i - 1];
|
|
if (previousFile === undefined) {
|
|
//get the next one if there is no previous one
|
|
previousFile = tF[i + 1];
|
|
}
|
|
break;
|
|
}
|
|
i++;
|
|
}
|
|
|
|
return previousFile != undefined ? previousFile : false;
|
|
}
|
|
|
|
function clickClearAllFiles() {
|
|
let modal = document.getElementById("modalMsg");
|
|
modal.replaceWith(modal.cloneNode(true));
|
|
document.getElementById("modalMsg").addEventListener("click", (e) => {
|
|
if (e.target && e.target.tagName === "BUTTON") {
|
|
let modal = document.getElementById("modalNotifier");
|
|
switch (e.target.innerHTML) {
|
|
case "Delete":
|
|
clearAllFiles();
|
|
modal.replaceWith(modal.cloneNode(true));
|
|
modalNotifier(
|
|
"All files deleted!",
|
|
activeState.settings.notifierPause
|
|
);
|
|
break;
|
|
default:
|
|
e.preventDefault;
|
|
}
|
|
}
|
|
});
|
|
modalNotifier(
|
|
"<div class='w3-container'> \
|
|
<p>Would you really like to delete all stored files?</p> \
|
|
<button class='w3-button w3-border w3-flat-pomegranate' >Delete</button>",
|
|
0
|
|
);
|
|
}
|
|
function clearAllFiles() {
|
|
let tF = retrieveData("templateFiles");
|
|
if (tF == null || tF.length == 0) {
|
|
modalNotifier(
|
|
"there are no saved texts yet",
|
|
activeState.settings.notifierPause
|
|
);
|
|
return;
|
|
}
|
|
for (let storageName of tF) {
|
|
clearFileData(storageName.fileName);
|
|
}
|
|
}
|
|
|
|
export { buildFile, loadFileDivCallBack };
|