fixed many bugs

edit of cl templates setform button display changed footer changed overall layout a bit
fixed button hover for files added fontsize and font
2023-10-15 22:46:20 +02:00 · 2023-10-15 17:29:19 +02:00
7 changed files with 94 additions and 59 deletions
--- a/css/w3-colors-flat.css
+++ b/css/w3-colors-flat.css
@ -33,8 +33,11 @@
 .w3-flat-pumpkin
 {color:#fff;background-color:#d35400}
 .w3-flat-pomegranate
-{color:#fff;background-color:#c0392b}
+{color:#fff;background-color:#c0392b !important}
 .w3-flat-silver
 {color:#000;background-color:#bdc3c7}
 .w3-flat-asbestos
 {color:#fff;background-color:#7f8c8d}
+
+.w3-hover-flat-pomegranate:hover
+{color:#fff !important;background-color:#c0392b !important}
--- a/index.html
+++ b/index.html
@ -13,8 +13,11 @@

      //settings
      window.settings = {
-        lineBreak: 150,
        localOnly: true,
+        lineBreak: 150,
+        font: "Arial",
+        fontSize: "10px",
+
      };

      let script = document.createElement("script");
@ -37,7 +40,7 @@
    <link rel="stylesheet" href="css/styles.css" />
  </head>

-  <body>
+  <body class="w3-flat-clouds">
    <div
      class="w3-sidebar w3-bar-block w3-collapse w3-large w3-flat-clouds"
      style="width: 300px; margin-top: 51px; padding-top: 12px"
@ -280,7 +283,7 @@
        <div
          id="output"
          class="w3-row-padding w3-padding-64 w3-container w3-flat-clouds"
-          style="margin-bottom: 0px"
+          style="margin-bottom: 0px; display: none"
        ></div>
      </div>

@ -356,13 +359,8 @@
        </div>
      </div>

-      <div class="w3-container w3-flat-clouds" style="height: 15em">
-        <br />
-      </div>
-      <!-- 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 />
@ -372,13 +370,13 @@
          style="display: none"
        >
          <button
-            class="w3-button w3-border w3-flat-wet-asphalt"
+            class="w3-button w3-border w3-flat-clouds"
            id="setFormBtn"
          >
-            Set Form as Template
+            Set input as default
          </button>
        </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>
        </div>
      </footer>
--- a/js/9.9.9/files.js
+++ b/js/9.9.9/files.js
@ -11,7 +11,6 @@ import { modalNotifier } from "./evts.js";
 function buildFile() {
  createStorageObj();

-
  //set current page value in activeState object
  activeState.activePage = "files";

@ -24,7 +23,6 @@ function buildFile() {
    return;
  }

-
  if (screen.width > 992) {
    document.getElementById("siteTitle").innerHTML = "Saved files";
  } else {
@ -68,6 +66,7 @@ function loadFileDiv(fileName, template) {
  storeData("userInputForce", retrieveData(fileName, template));

  loadTemplate(template, false, true);
+  
 }

 function loadFileDivCallBack() {
@ -114,7 +113,7 @@ function loadFileDivCallBack() {
  deleteButton.setAttribute("type", "submit");
  deleteButton.setAttribute("value", "Delete");
  deleteButton.classList.add("w3-button");
-  deleteButton.classList.add("w3-red");
+  deleteButton.classList.add("w3-flat-pomegranate");
  document.getElementById("submitContainer").appendChild(deleteButton);

  if (screen.width > 992) {
@ -123,7 +122,6 @@ function loadFileDivCallBack() {
    document.getElementById("siteTitle").innerHTML = "TG";
  }

-
  let title = document.createElement("div");
  title.classList.add("w3-panel");
  let titleText = document.createElement("h2");
@ -133,10 +131,14 @@ function loadFileDivCallBack() {
  fileDisplay.appendChild(title);

  let div = document.createElement("div");
-  div.appendChild(parseFormOnSubmit(false, true));
+  let parsedTemplate = parseFormOnSubmit(false, true);
+  div.appendChild(parsedTemplate);
  fileDisplay.appendChild(div);
  document.getElementById("mainForm").appendChild(fileDisplay);

+  //fix fontsize for display
+  document.getElementById("fileDisplay").firstChild.style.fontSize = "1em";
+
  //add events
  formEvts(storageName);
 }
@ -192,13 +194,15 @@ function loadFileSidebar(tF) {
    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.classList.add("w3-flat-clouds");
+      sidebarListItem.setAttribute("data-template", "_overflow");
+      sidebarListItem.setAttribute("data-file", "_overflow");
+      sidebarListItem.style.backgroundColor = "#e3e7e8";
      sidebarListItem.classList.remove("w3-button");
-      sidebarListItem.style.borderRight = "1px solid rgb(221, 221, 221)"
-      sidebarListItem.innerHTML = tF.length - sidebarItemsAmount + " files not shown";
+      sidebarListItem.style.borderTop = "1px solid rgb(221, 221, 221)";
+      sidebarListItem.innerHTML =
+        tF.length - sidebarItemsAmount + " files not shown";
      sidebarList.appendChild(sidebarListItem);
      break;
    }
@ -209,17 +213,13 @@ function loadFileSidebar(tF) {
    c++;
  }

+  //clear all files button
  sidebarListItem = document.createElement("li");
-  sidebarListItem.classList.add(
-    "w3-bar-item",
-    "w3-padding-large",
-    "w3-button"
-  );
-  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.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);
@ -228,7 +228,11 @@ function loadFileSidebar(tF) {
 }

 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() {
@ -238,7 +242,6 @@ function copyFileToClipboard() {
  } else {
    console.log("error file not found");
  }
-
 }

 function copyToClipBoard(html) {
@ -288,12 +291,19 @@ function formEvts(storageName) {
          break;
        case "Copy":
          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";
          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";
          }, 250);
+          modalNotifier(activeState.fileName + " copied to clipboard", 2);
          break;
        case "Delete":
          let previousFile = getPreviousFile(storageName);
@ -302,7 +312,8 @@ function formEvts(storageName) {
          if (previousFile) {
            loadFileDiv(previousFile.fileName, previousFile.template);
          } else {
-            document.getElementById("mainForm").innerHTML = mainFormPlaceholder("No file yet");
+            document.getElementById("mainForm").innerHTML =
+              mainFormPlaceholder("No file yet");
          }

          break;
@ -325,7 +336,6 @@ function loadSpecificTemplate(storageName) {
 }

 function getPreviousFile(storageName) {
-
  let orgFileName = storageName.split("_m21_")[0];
  let tF = JSON.parse(retrieveData("templateFiles"));
  let i = 0;
@ -343,7 +353,7 @@ function getPreviousFile(storageName) {
    i++;
  }

-  return (previousFile != undefined) ?  previousFile : false;
+  return previousFile != undefined ? previousFile : false;
 }

 function clickClearAllFiles() {
@ -362,12 +372,13 @@ function clickClearAllFiles() {
          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);
+    0
+  );
 }
 function clearAllFiles() {
  let tF = JSON.parse(retrieveData("templateFiles"));
--- a/js/9.9.9/form.js
+++ b/js/9.9.9/form.js
@ -9,7 +9,7 @@ function buildForm(templateInput, loadOnly = false) {
  var wordArray = [];

  //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
  if (templateInput.indexOf("!JSON_placeholder:") !== -1) {
--- a/js/9.9.9/parseForm.js
+++ b/js/9.9.9/parseForm.js
@ -66,7 +66,6 @@ function parseFormOnSubmit(returnJSON = false, parseOnly = false) {
      return;
    }

-
    //iterate through templateObjects and look for according formdata
    for (let obj of objects) {
      //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(/ /g, "&nbsp;");
  
-    bHtml =
-      "<div style='font-family: Arial, Helvetica, sans-serif;'>" +
-      bHtml +
-      "</div>";
+    let divContent = document.createElement("div");
+    divContent.style.fontFamily = activeState.font + ", Helvetica, sans-serif";
+    divContent.style.fontSize = activeState.fontSize;
+    divContent.innerHTML = bHtml;

    let div = document.createElement("div");
    div.classList.add("w3-code", "notranslate", "w3-border-white");
    div.id = "fileDisplay";
-    div.innerHTML = bHtml;
+    div.appendChild(divContent);
  
    if (parseOnly) {
      return div;
@ -216,6 +215,7 @@ function parseFormOnSubmit(returnJSON = false, parseOnly = false) {
        }
      }
    }
+    return ""
  }

  export function parseTextMarkups(data) {
--- a/js/9.9.9/web.js
+++ b/js/9.9.9/web.js
@ -264,13 +264,36 @@ function delStoredDataOnServer() {

 function retrieveForm(arr) {
  for (let i = 0; i < arr.length; i++) {
+
    let e = document.getElementById(arr[i].name);
    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.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) {
      case "TEXTAREA":
--- a/template/testing-form.txt
+++ b/template/testing-form.txt
@ -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"}]
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