maru21/templateGen
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: maru21:43a33ed76c51216a57bca6a47ac99bc7fbd489a5
Branches Tags
maru21:develop
..
compare: maru21:57d5fcceb4b15edcee87ffcb4ea7dc19411da1df
Branches Tags
maru21:develop

2 Commits
43a33ed76c ... 57d5fcceb4

Author SHA1 Message Date
maru21
57d5fcceb4 fixed many bugs 
edit of cl templates
setform button display
changed footer
changed overall layout a bit
 2023-10-15 22:46:20 +02:00
maru21
63c072f4f2 fixed button hover for files added fontsize and font 2023-10-15 17:29:19 +02:00
7 changed files with 94 additions and 59 deletions
Show Stats Expand all files Collapse all files

5
css/w3-colors-flat.css
View File

@ -33,8 +33,11 @@
.w3-flat-pumpkin .w3-flat-pumpkin
{color:#fff;background-color:#d35400} {color:#fff;background-color:#d35400}
.w3-flat-pomegranate .w3-flat-pomegranate
{color:#fff;background-color:#c0392b} {color:#fff;background-color:#c0392b !important}
.w3-flat-silver .w3-flat-silver
{color:#000;background-color:#bdc3c7} {color:#000;background-color:#bdc3c7}
.w3-flat-asbestos .w3-flat-asbestos
{color:#fff;background-color:#7f8c8d} {color:#fff;background-color:#7f8c8d}
.w3-hover-flat-pomegranate:hover
{color:#fff !important;background-color:#c0392b !important}

22
index.html
View File

@ -13,8 +13,11 @@
//settings //settings
window.settings = { window.settings = {
lineBreak: 150,
localOnly: true, localOnly: true,
lineBreak: 150,
font: "Arial",
fontSize: "10px",
}; };
let script = document.createElement("script"); let script = document.createElement("script");
@ -37,7 +40,7 @@
<link rel="stylesheet" href="css/styles.css" /> <link rel="stylesheet" href="css/styles.css" />
</head> </head>
<body> <body class="w3-flat-clouds">
<div <div
class="w3-sidebar w3-bar-block w3-collapse w3-large w3-flat-clouds" class="w3-sidebar w3-bar-block w3-collapse w3-large w3-flat-clouds"
style="width: 300px; margin-top: 51px; padding-top: 12px" style="width: 300px; margin-top: 51px; padding-top: 12px"
@ -280,7 +283,7 @@
<div <div
id="output" id="output"
class="w3-row-padding w3-padding-64 w3-container w3-flat-clouds" class="w3-row-padding w3-padding-64 w3-container w3-flat-clouds"
style="margin-bottom: 0px" style="margin-bottom: 0px; display: none"
></div> ></div>
</div> </div>
@ -356,13 +359,8 @@
</div> </div>
</div> </div>
<div class="w3-container w3-flat-clouds" style="height: 15em">
<br />
</div>
<!-- Footer -->
<footer <footer
class="w3-container w3-padding-64 w3-center w3-opacity w3-flat-asbestos" class="w3-container w3-padding w3-flat-clouds w3-center w3-margin-top"
> >
<br /> <br />
<br /> <br />
@ -372,13 +370,13 @@
style="display: none" style="display: none"
> >
<button <button
class="w3-button w3-border w3-flat-wet-asphalt" class="w3-button w3-border w3-flat-clouds"
id="setFormBtn" id="setFormBtn"
> >
Set Form as Template Set input as default
</button> </button>
</div> </div>
<div class="w3-container w3-margin-top" id="currentVersion"> <div class="w3-container w3-margin-top w3-right-align w3-small" id="currentVersion">
<span></span> <span></span>
</div> </div>
</footer> </footer>

69
js/9.9.9/files.js
View File

@ -11,7 +11,6 @@ import { modalNotifier } from "./evts.js";
function buildFile() { function buildFile() {
createStorageObj(); createStorageObj();
//set current page value in activeState object //set current page value in activeState object
activeState.activePage = "files"; activeState.activePage = "files";
@ -24,7 +23,6 @@ function buildFile() {
return; return;
} }
if (screen.width > 992) { if (screen.width > 992) {
document.getElementById("siteTitle").innerHTML = "Saved files"; document.getElementById("siteTitle").innerHTML = "Saved files";
} else { } else {
@ -68,6 +66,7 @@ function loadFileDiv(fileName, template) {
storeData("userInputForce", retrieveData(fileName, template)); storeData("userInputForce", retrieveData(fileName, template));
loadTemplate(template, false, true); loadTemplate(template, false, true);
} }
function loadFileDivCallBack() { function loadFileDivCallBack() {
@ -114,7 +113,7 @@ function loadFileDivCallBack() {
deleteButton.setAttribute("type", "submit"); deleteButton.setAttribute("type", "submit");
deleteButton.setAttribute("value", "Delete"); deleteButton.setAttribute("value", "Delete");
deleteButton.classList.add("w3-button"); deleteButton.classList.add("w3-button");
deleteButton.classList.add("w3-red"); deleteButton.classList.add("w3-flat-pomegranate");
document.getElementById("submitContainer").appendChild(deleteButton); document.getElementById("submitContainer").appendChild(deleteButton);
if (screen.width > 992) { if (screen.width > 992) {
@ -123,7 +122,6 @@ function loadFileDivCallBack() {
document.getElementById("siteTitle").innerHTML = "TG"; document.getElementById("siteTitle").innerHTML = "TG";
} }
let title = document.createElement("div"); let title = document.createElement("div");
title.classList.add("w3-panel"); title.classList.add("w3-panel");
let titleText = document.createElement("h2"); let titleText = document.createElement("h2");
@ -133,10 +131,14 @@ function loadFileDivCallBack() {
fileDisplay.appendChild(title); fileDisplay.appendChild(title);
let div = document.createElement("div"); let div = document.createElement("div");
div.appendChild(parseFormOnSubmit(false, true)); let parsedTemplate = parseFormOnSubmit(false, true);
div.appendChild(parsedTemplate);
fileDisplay.appendChild(div); fileDisplay.appendChild(div);
document.getElementById("mainForm").appendChild(fileDisplay); document.getElementById("mainForm").appendChild(fileDisplay);
//fix fontsize for display
document.getElementById("fileDisplay").firstChild.style.fontSize = "1em";
//add events //add events
formEvts(storageName); formEvts(storageName);
} }
@ -192,13 +194,15 @@ function loadFileSidebar(tF) {
sidebarListItem.style.borderBottom = "1px solid #ddd"; sidebarListItem.style.borderBottom = "1px solid #ddd";
sidebarListItem.id = "sb-" + obj.fileName.replace(/:/g, "_"); sidebarListItem.id = "sb-" + obj.fileName.replace(/:/g, "_");
//handle to many files on screen and display hidden files amount
if (c > sidebarItemsAmount) { if (c > sidebarItemsAmount) {
sidebarListItem.setAttribute("data-template", '_overflow'); sidebarListItem.setAttribute("data-template", "_overflow");
sidebarListItem.setAttribute("data-file", '_overflow'); sidebarListItem.setAttribute("data-file", "_overflow");
sidebarListItem.classList.add("w3-flat-clouds"); sidebarListItem.style.backgroundColor = "#e3e7e8";
sidebarListItem.classList.remove("w3-button"); sidebarListItem.classList.remove("w3-button");
sidebarListItem.style.borderRight = "1px solid rgb(221, 221, 221)" sidebarListItem.style.borderTop = "1px solid rgb(221, 221, 221)";
sidebarListItem.innerHTML = tF.length - sidebarItemsAmount + " files not shown"; sidebarListItem.innerHTML =
tF.length - sidebarItemsAmount + " files not shown";
sidebarList.appendChild(sidebarListItem); sidebarList.appendChild(sidebarListItem);
break; break;
} }
@ -209,17 +213,13 @@ function loadFileSidebar(tF) {
c++; c++;
} }
//clear all files button
sidebarListItem = document.createElement("li"); sidebarListItem = document.createElement("li");
sidebarListItem.classList.add( sidebarListItem.classList.add("w3-bar-item", "w3-padding-large", "w3-button");
"w3-bar-item", sidebarListItem.setAttribute("data-template", "_clearAll");
"w3-padding-large", sidebarListItem.setAttribute("data-file", "_clearAll");
"w3-button" sidebarListItem.classList.add("w3-hover-flat-pomegranate", "w3-bottom");
); sidebarListItem.style.borderTop = "1px solid rgb(221, 221, 221)";
sidebarListItem.style.borderBottom = "1px solid #ddd";
sidebarListItem.setAttribute("data-template", '_clearAll');
sidebarListItem.setAttribute("data-file", '_clearAll');
sidebarListItem.classList.add("w3-flat-pomegranate", "w3-bottom");
sidebarListItem.style.borderRight = "1px solid rgb(221, 221, 221)";
sidebarListItem.style.width = "300px"; sidebarListItem.style.width = "300px";
sidebarListItem.innerHTML = "Clear all files"; sidebarListItem.innerHTML = "Clear all files";
sidebarList.appendChild(sidebarListItem); sidebarList.appendChild(sidebarListItem);
@ -228,7 +228,11 @@ function loadFileSidebar(tF) {
} }
function mainFormPlaceholder(msg = "Select a file") { function mainFormPlaceholder(msg = "Select a file") {
return "<div 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>"; return (
"<div 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() { function copyFileToClipboard() {
@ -238,7 +242,6 @@ function copyFileToClipboard() {
} else { } else {
console.log("error file not found"); console.log("error file not found");
} }
} }
function copyToClipBoard(html) { function copyToClipBoard(html) {
@ -288,12 +291,19 @@ function formEvts(storageName) {
break; break;
case "Copy": case "Copy":
copyFileToClipboard(); copyFileToClipboard();
e.target.className = e.target.className.replace(" w3-grey", " w3-flat-carrot"); e.target.className = e.target.className.replace(
" w3-grey",
" w3-flat-carrot"
);
e.target.style.pointerEvents = "none"; e.target.style.pointerEvents = "none";
const timeoutCopy = setTimeout(() => { const timeoutCopy = setTimeout(() => {
e.target.className = e.target.className.replace(" w3-flat-carrot"," w3-grey"); e.target.className = e.target.className.replace(
" w3-flat-carrot",
" w3-grey"
);
e.target.style.pointerEvents = "auto"; e.target.style.pointerEvents = "auto";
}, 250); }, 250);
modalNotifier(activeState.fileName + " copied to clipboard", 2);
break; break;
case "Delete": case "Delete":
let previousFile = getPreviousFile(storageName); let previousFile = getPreviousFile(storageName);
@ -302,7 +312,8 @@ function formEvts(storageName) {
if (previousFile) { if (previousFile) {
loadFileDiv(previousFile.fileName, previousFile.template); loadFileDiv(previousFile.fileName, previousFile.template);
} else { } else {
document.getElementById("mainForm").innerHTML = mainFormPlaceholder("No file yet"); document.getElementById("mainForm").innerHTML =
mainFormPlaceholder("No file yet");
} }
break; break;
@ -325,7 +336,6 @@ function loadSpecificTemplate(storageName) {
} }
function getPreviousFile(storageName) { function getPreviousFile(storageName) {
let orgFileName = storageName.split("_m21_")[0]; let orgFileName = storageName.split("_m21_")[0];
let tF = JSON.parse(retrieveData("templateFiles")); let tF = JSON.parse(retrieveData("templateFiles"));
let i = 0; let i = 0;
@ -343,7 +353,7 @@ function getPreviousFile(storageName) {
i++; i++;
} }
return (previousFile != undefined) ? previousFile : false; return previousFile != undefined ? previousFile : false;
} }
function clickClearAllFiles() { function clickClearAllFiles() {
@ -362,12 +372,13 @@ function clickClearAllFiles() {
e.preventDefault; e.preventDefault;
} }
} }
}) });
modalNotifier( modalNotifier(
"<div class='w3-container'> \ "<div class='w3-container'> \
<p>Would you really like to delete all stored files?</p> \ <p>Would you really like to delete all stored files?</p> \
<button class='w3-button w3-border w3-flat-pomegranate' >Delete</button>", <button class='w3-button w3-border w3-flat-pomegranate' >Delete</button>",
0); 0
);
} }
function clearAllFiles() { function clearAllFiles() {
let tF = JSON.parse(retrieveData("templateFiles")); let tF = JSON.parse(retrieveData("templateFiles"));

2
js/9.9.9/form.js
View File

@ -9,7 +9,7 @@ function buildForm(templateInput, loadOnly = false) {
var wordArray = []; var wordArray = [];
//display set Form button //display set Form button
document.getElementById("setFormButton").style.display = "block"; if (!loadOnly) document.getElementById("setFormButton").style.display = "block";
//check for presets in "-form.txt" file; indicated by !JSON_placeholder //check for presets in "-form.txt" file; indicated by !JSON_placeholder
if (templateInput.indexOf("!JSON_placeholder:") !== -1) { if (templateInput.indexOf("!JSON_placeholder:") !== -1) {

12
js/9.9.9/parseForm.js
View File

@ -66,7 +66,6 @@ function parseFormOnSubmit(returnJSON = false, parseOnly = false) {
return; return;
} }
//iterate through templateObjects and look for according formdata //iterate through templateObjects and look for according formdata
for (let obj of objects) { for (let obj of objects) {
//compaire each obj with elements from mainFormObj //compaire each obj with elements from mainFormObj
@ -130,15 +129,15 @@ function parseFormOnSubmit(returnJSON = false, parseOnly = false) {
bHtml = bHtml.replace(/!ls /g, " ○ "); bHtml = bHtml.replace(/!ls /g, " ○ ");
bHtml = bHtml.replace(/ /g, "&nbsp;"); bHtml = bHtml.replace(/ /g, "&nbsp;");
bHtml = let divContent = document.createElement("div");
"<div style='font-family: Arial, Helvetica, sans-serif;'>" + divContent.style.fontFamily = activeState.font + ", Helvetica, sans-serif";
bHtml + divContent.style.fontSize = activeState.fontSize;
"</div>"; divContent.innerHTML = bHtml;
let div = document.createElement("div"); let div = document.createElement("div");
div.classList.add("w3-code", "notranslate", "w3-border-white"); div.classList.add("w3-code", "notranslate", "w3-border-white");
div.id = "fileDisplay"; div.id = "fileDisplay";
div.innerHTML = bHtml; div.appendChild(divContent);
if (parseOnly) { if (parseOnly) {
return div; return div;
@ -216,6 +215,7 @@ function parseFormOnSubmit(returnJSON = false, parseOnly = false) {
} }
} }
} }
return ""
} }
export function parseTextMarkups(data) { export function parseTextMarkups(data) {

27
js/9.9.9/web.js
View File

@ -264,13 +264,36 @@ function delStoredDataOnServer() {
function retrieveForm(arr) { function retrieveForm(arr) {
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
let e = document.getElementById(arr[i].name); let e = document.getElementById(arr[i].name);
if (e === null) { if (e === null) {
e = document.getElementById(arr[i].name.split("cl-")[1]); //parse connected list
let id = arr[i].name.split("cl-")[1];
//escape cl-text:!ls
if (id != undefined) id = id.split(":")[0];
e = document.getElementById(id);
if (e === null) {
//parse connected list main
let id = arr[i].name.split("clM-")[1];
e = document.getElementById(id);
if (e === null) continue; if (e === null) continue;
} }
if (e.name.substr(0, 4) == "clM-") continue; }
//handle connected list Main item button or list
if (e.name.substr(0, 4) == "clM-") {
if (arr[i].value != "!none") {
let clElement = document.getElementById(e.dataset.word);
if (clElement === null) {
clElement = document.getElementById(arr[i].value.replace(/ /g, "_"));
}
//make shure it is visible if selected before
if (clElement != undefined) clElement.parentElement.parentElement.classList.remove("hidden");
e.value = arr[i].value;
}
continue;
}
switch (e.nodeName) { switch (e.nodeName) {
case "TEXTAREA": case "TEXTAREA":

2
template/testing-form.txt
View File

@ -1 +1 @@
[{"value":"!none","name":"Con_List_Selection"},{"value":"","name":"cl-Die_Patientin_ist_erwerbstätig","placeholder":"!ls"},{"value":"Firma: \nFunktion: \nPensum: \nAngestellt seit: \n","name":"cl-Der_Patient_ist_erwerbstätig_auf_dem_2._AM","placeholder":"!ls"},{"value":"AUF seit: \nAktueller Stand IV: ","name":"cl-_Der_Patient_ist_nicht_erwerbstätig","placeholder":"!ls"},{"value":"","name":"cl-Andere","placeholder":"!ls"},{"value":"Lebensmittelpunkt","name":"Con_List_Button"},{"value":"!ls\n!kbs","name":"cl-Lebensmittelpunkt","placeholder":"!ls"}] [{"value":"!none","name":"Con_List_Selection"},{"value":"","name":"cl-Die_Patientin_ist_erwerbstätig","placeholder":"!ls"},{"value":"Firma: \nFunktion: \nPensum: \nAngestellt seit: \n","name":"cl-Der_Patient_ist_erwerbstätig_auf_dem_2._AM","placeholder":"!ls"},{"value":"AUF seit: \nAktueller Stand IV: ","name":"cl-_Der_Patient_ist_nicht_erwerbstätig","placeholder":"!ls"},{"value":"","name":"cl-Andere","placeholder":"!ls"},{"value":"Lebensmittelpunkt","name":"Con_List_Button"},{"value":"!ls\n!ls\n!kbs","name":"cl-Lebensmittelpunkt","placeholder":"!ls"}]