maru21
92bbebd2a1
fixed bug with sidebar click event not being cleared after accessing files and then pressing edit some cosmetic changes animations reimplemented bookshelfexport in localonly mode added logout functionality
291 lines
9.3 KiB
JavaScript
291 lines
9.3 KiB
JavaScript
|
|
import { storeData, createStorageObj } from "./storage.js";
|
|
import parseInput from "./parseTemplate.js";
|
|
import transformTemplateObject from "./buildForm.js";
|
|
import { showSidebar, handleOnBlur, modalNotifier } from "./evts.js";
|
|
import parseFormOnSubmit, { parseTextMarkups } from "./parseForm.js";
|
|
|
|
function buildForm(templateInput, loadOnly = false) {
|
|
var wordArray = [];
|
|
|
|
//display set Form button
|
|
document.getElementById("setFormButton").style.display = "block";
|
|
|
|
//check for presets in "-form.txt" file; indicated by !JSON_placeholder
|
|
if (templateInput.indexOf("!JSON_placeholder:") !== -1) {
|
|
let jsonPlaceholder = templateInput.split("!JSON_placeholder:")[1];
|
|
templateInput = templateInput.split("!JSON_placeholder:")[0];
|
|
storeData("templatePreset", jsonPlaceholder);
|
|
}
|
|
//start building wordArray by splitting input by line win/unix and define eol char for recreating templateInput
|
|
let eol;
|
|
if (templateInput.indexOf("\r\n") !== -1) {
|
|
eol = false;
|
|
var wordArrayByLine = templateInput.split("\r\n");
|
|
} else {
|
|
eol = true;
|
|
var wordArrayByLine = templateInput.split("\n");
|
|
}
|
|
//finish building wordArray by Looping through lines and spliting it into one array of words
|
|
//also create temporary templateInput to exclude comments
|
|
let templateInputArr = [];
|
|
for (let wordArrayByLineLine of wordArrayByLine) {
|
|
//ignore "#" comment lines
|
|
if (wordArrayByLineLine.substring(0, 1) == "#") {
|
|
continue;
|
|
}
|
|
|
|
//add words ob lines to wordArray
|
|
wordArray = wordArray.concat(wordArrayByLineLine.split(" "));
|
|
//add line to temp templatearray
|
|
templateInputArr.push(wordArrayByLineLine);
|
|
}
|
|
|
|
//create templateInput without comments
|
|
templateInput = templateInputArr.join(eol ? "\n" : "\r\n");
|
|
|
|
//parse text markups like !l !n in templateInput
|
|
templateInput = parseTextMarkups(templateInput);
|
|
|
|
//set objects array for parseInput Function
|
|
var objects = [];
|
|
//loop through words, parse it individually and add it to objects array
|
|
|
|
|
|
for (let i = 0; i < wordArray.length; i++) {
|
|
parseInput(wordArray, objects, i);
|
|
//console.log(wordArray[i]);
|
|
}
|
|
|
|
//set individual positionens of objects in string and add it to objects
|
|
setStringPos(objects, templateInput);
|
|
|
|
//save objects array and template file string for web.js in session storage
|
|
window.sessionStorage.setItem("templateObjects", JSON.stringify(objects));
|
|
window.sessionStorage.setItem("fullString", templateInput);
|
|
|
|
//sort objects array by words prio
|
|
objects = prioritizeArray(objects);
|
|
|
|
//remove non display objects and safe it to session storage
|
|
let objectsPurified = purifyObjects(objects);
|
|
window.sessionStorage.setItem(
|
|
"templateObjectsPurified",
|
|
JSON.stringify(objectsPurified)
|
|
);
|
|
|
|
//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");
|
|
//sidebarDiv.replaceWith(sidebarDiv.cloneNode(true));
|
|
|
|
mainFormDiv.innerHTML = "";
|
|
mainFormDiv.replaceWith(mainFormDiv.cloneNode(true));
|
|
outputDiv.innerHTML = "";
|
|
outputDiv.replaceWith(outputDiv.cloneNode(true));
|
|
submitContainerDiv.innerHTML = "";
|
|
submitContainerDiv.replaceWith(submitContainerDiv.cloneNode(true));
|
|
sidebarDiv.innerHTML = "";
|
|
|
|
//finally build html code for Form and siddebar and add it to dom if needed
|
|
if (loadOnly) {return};
|
|
|
|
transformTemplateObject(objectsPurified);
|
|
//add events
|
|
formEvts();
|
|
}
|
|
|
|
function prioritizeArray(objects) {
|
|
let prioArray = [];
|
|
let objects_sorted = [];
|
|
|
|
for (let valPreSorted of objects) {
|
|
prioArray.push(valPreSorted.prio);
|
|
}
|
|
prioArray.sort(function (a, b) {
|
|
return a - b;
|
|
});
|
|
//console.log(prioArray);
|
|
for (let valSorted of prioArray) {
|
|
for (let obj of objects) {
|
|
if (valSorted === obj.prio) {
|
|
objects_sorted.push(obj);
|
|
if (obj.prio !== 0) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return objects_sorted;
|
|
}
|
|
|
|
function purifyObjects(objects) {
|
|
let objectsPurified = [];
|
|
let objectsPrePurified = [];
|
|
for (let objPrePurified of objects) {
|
|
if (!objectsPrePurified.includes(objPrePurified.word)) {
|
|
objectsPurified.push(objPrePurified);
|
|
}
|
|
objectsPrePurified.push(objPrePurified.word);
|
|
}
|
|
return objectsPurified;
|
|
}
|
|
|
|
function setStringPos(objects, fullStringMaster) {
|
|
let stringCursor = 0;
|
|
let startPos = 0;
|
|
let endPos = 0;
|
|
let fullString = "";
|
|
for (let obj of objects) {
|
|
fullString = fullStringMaster.substring(stringCursor);
|
|
if (fullString.indexOf("%" + obj.word) !== -1) {
|
|
startPos = 0;
|
|
endPos = 0;
|
|
startPos = fullString.indexOf("%" + obj.word) + stringCursor;
|
|
let objPrioLength = 1;
|
|
if (obj.prio > 9) {
|
|
objPrioLength = 2;
|
|
}
|
|
if (obj.prio == 0) {
|
|
objPrioLength = 0;
|
|
}
|
|
|
|
switch (obj.type) {
|
|
case "simpleInput":
|
|
endPos = startPos + 2 + obj.word.length + objPrioLength;
|
|
break;
|
|
case "genderSpecific":
|
|
let gSC = 0;
|
|
if (typeof obj.m !== "undefined") {
|
|
gSC = gSC + obj.m.length + 3;
|
|
}
|
|
if (typeof obj.w !== "undefined") {
|
|
gSC = gSC + obj.w.length + 3;
|
|
}
|
|
if (typeof obj.d !== "undefined") {
|
|
gSC = gSC + obj.d.length + 3;
|
|
}
|
|
endPos = startPos + 2 + gSC + objPrioLength + obj.word.length + 1;
|
|
break;
|
|
case "list":
|
|
let gSC1 = 0;
|
|
for (
|
|
let objListItem = 0;
|
|
objListItem < obj.listCount + 1;
|
|
objListItem++
|
|
) {
|
|
if (typeof obj[objListItem] !== "undefined") {
|
|
gSC1 = gSC1 + obj[objListItem].length + 3;
|
|
}
|
|
}
|
|
endPos = startPos + 2 + gSC1 + objPrioLength + obj.word.length + 1;
|
|
break;
|
|
case "conList":
|
|
let gSC2 = 0;
|
|
for (
|
|
let objListItem = 0;
|
|
objListItem < obj.listCount + 1;
|
|
objListItem++
|
|
) {
|
|
if (typeof obj[objListItem] !== "undefined") {
|
|
gSC2 = gSC2 + obj[objListItem].length + obj["clType-"+obj[objListItem]].length + 4;
|
|
if (obj["clType-"+obj[objListItem]] == "cl-simpleInput") {
|
|
gSC2 = gSC2 - obj["clType-"+obj[objListItem]].length;
|
|
}
|
|
}
|
|
}
|
|
endPos = startPos + 2 + gSC2 + objPrioLength + obj.word.length + 1;
|
|
break;
|
|
default:
|
|
endPos =
|
|
startPos +
|
|
2 +
|
|
obj.word.length +
|
|
1 +
|
|
obj.type.length +
|
|
objPrioLength;
|
|
break;
|
|
}
|
|
obj.spos = startPos;
|
|
obj.epos = endPos;
|
|
stringCursor = endPos;
|
|
}
|
|
}
|
|
}
|
|
|
|
function formEvts() {
|
|
//add event for main copy button
|
|
document.getElementById("submitContainer").addEventListener("click", (e) => {
|
|
if (e.target && e.target.tagName === "INPUT") {
|
|
switch (e.target.value) {
|
|
case "Copy":
|
|
createStorageObj();
|
|
parseFormOnSubmit();
|
|
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);
|
|
break;
|
|
case "Save":
|
|
createStorageObj();
|
|
e.target.className = e.target.className.replace(" w3-grey", " w3-flat-nephritis");
|
|
e.target.style.pointerEvents = "none";
|
|
modalNotifier(activeState.fileName + " saved", 2);
|
|
const timeoutSave = setTimeout(() => {
|
|
e.target.className = e.target.className.replace(" w3-flat-nephritis"," w3-grey");
|
|
e.target.style.pointerEvents = "auto";
|
|
}, 250);
|
|
break;
|
|
default:
|
|
e.preventDefault;
|
|
}
|
|
}
|
|
});
|
|
|
|
//add sidebar events
|
|
document.getElementById("sidebar").addEventListener("click", (e) => {
|
|
if (e.target) {
|
|
if (e.target.id == "sb-submit") {
|
|
if (screen.width < 993) {
|
|
showSidebar();
|
|
}
|
|
parseFormOnSubmit();
|
|
focusOnField("output");
|
|
}
|
|
if (e.target.id == "sb-item") {
|
|
setTimeout(() => {
|
|
focusOnField(e.target.dataset.item);
|
|
}, 100);
|
|
}
|
|
}
|
|
});
|
|
|
|
//add handle on blur event listener to each form object
|
|
let mainForm = document.getElementById("mainFormObj");
|
|
for (let formElement of mainForm.children) {
|
|
let id = formElement.firstChild.lastChild.id;
|
|
document.getElementById(id).addEventListener("blur", (e) => {
|
|
e.preventDefault;
|
|
handleOnBlur(e.target);
|
|
});
|
|
}
|
|
}
|
|
|
|
function focusOnField(id) {
|
|
let targetElement = document.getElementById(id);
|
|
if (targetElement == null) return;
|
|
|
|
document.activeElement.blur();
|
|
targetElement.focus();
|
|
setTimeout(function () {
|
|
let offset = targetElement.offsetTop - 100;
|
|
window.scrollTo(0, offset);
|
|
}, 100);
|
|
}
|
|
|
|
export default buildForm;
|