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;
|