feat: improve compatibility with lite.koboldai.net

static/index-dark.css

@@ -0,0 +1,105 @@
+.display-none {
+    display: none;
+}
+.display-block {
+    display: block;
+}
+.underlinedDarkTurquoise {
+    text-decoration: underline;
+    text-decoration-color: darkturquoise;
+    text-decoration-style: wavy;
+}
+.underlinedYellow {
+    color: yellow;
+    text-decoration: underline;
+    text-decoration-color: yellow;
+}
+.underlinedViolet {
+    color: violet;
+    text-decoration: underline;
+    text-decoration-color: violet;
+}
+.display-flex {
+    display: flex;
+}
+.col-flex30 {
+    flex: 30%;
+}
+.col-flex50 {
+    flex: 50%;
+}
+.border-green {
+    border: 1px solid green;
+}
+.border-blue {
+    border: 1px solid blue;
+}
+.border-black {
+    border: 1px solid black;
+}
+.padding10px {
+    padding: 10px;
+}
+.margin10px {
+    margin: 10px;
+}
+.margin5px-left {
+    margin-left: 10px;
+}
+.margin5px-right {
+    margin-right: 10px;
+}
+.margin5px-top {
+    margin-top: 5px;
+}
+.margin2px-bottom {
+    margin-bottom: 2px;
+}
+.background-color-lightgray {
+    background-color: lightgray;
+}
+.background-color-whitesmoke {
+    background-color: whitesmoke;
+}
+.max-height-90vh {
+    max-height: 90vh;
+}
+.max-height-80vh {
+    max-height: 80vh;
+}
+.overflow-hidden {
+    /* needed for scroll bar*/
+    overflow: hidden;
+}
+.overflow-auto {
+    /* needed for scroll bar*/
+    overflow: auto;
+}
+.width-50perc {
+    width: 50%;
+}
+.width-80perc {
+    width: 80%;
+}
+#id-landscape-message {
+    display: none;
+}
+.id-orientation-message {
+    display: none;
+}
+.background-color-verydarkgrey {
+    background-color: #404040;
+}
+.font-size-12px {
+    font-size: small;
+}
+@media screen and (max-width: 1024px) and (orientation: portrait) {
+    .id-orientation-message {
+        display: block;
+        text-align: center;
+    }
+    .id-orientation-message:before {
+        color: red;
+        content: "(Mobile users: use this in landscape mode!)"
+    }
+}

static/index.css

@@ -37,9 +37,9 @@ td {
     text-decoration-color: blue;
 }
 .underlinedDarkViolet {
-    color: darkviolet;
+    color: violet;
     text-decoration: underline;
-    text-decoration-color: darkviolet;
+    text-decoration-color: violet;
 }
 .display-flex {
     display: flex;
@@ -109,6 +109,18 @@ td {
 .id-orientation-message {
     display: none;
 }
+@media (prefers-color-scheme: dark) {
+    .underlinedBlue {
+        color: yellow;
+        text-decoration: underline;
+        text-decoration-color: yellow;
+    }
+    .underlinedDarkViolet {
+        color: violet;
+        text-decoration: underline;
+        text-decoration-color: violet;
+    }
+}
 @media screen and (max-width: 1024px) and (orientation: portrait) {
     .id-orientation-message {
         display: block;

static/index.html

@@ -22,6 +22,7 @@
                     Hi there, how are you? There are some pasties for you. Can you give me also... Take a pasty from the table there!
                 </div>
             </div>
+            
             <div id="id-col2-words-frequency" class="col-flex50 border-blue padding10px margin10px overflow-hidden background-color-lightgray">
                 <div class="display-flex">
                     <div class="width-50perc">
@@ -59,6 +60,7 @@
                 <span id="waiting-for-be-error" class="display-none">Error!</span>
                 <div id="words-frequency" class="max-height-80vh overflow-auto background-color-whitesmoke" aria-label="words-frequency"></div>
             </div>
+            
         </div>
     </body>
 </html>

static/index.js

@@ -3,6 +3,10 @@ let wfo = {
     "words_frequency": {},
     "nTotalRows": null
 }
+const editorFieldLabel = "editor"
+const remoteWebServer = ""
+const underlinedPrimary = "underlinedBlue"
+const underlinedClicked = "underlinedDarkViolet"
 
 const getFormDataByKey = (formId, key) => {
     let formElement = document.getElementById(formId)
@@ -19,7 +23,7 @@ const getFormDataByKey = (formId, key) => {
  * @param {none}
  */
 const previewFile = () => {
-    const editor = document.getElementById("editor");
+    const editor = document.getElementById(editorFieldLabel);
     const [file] = document.querySelector("input[type=file]").files;
     const reader = new FileReader();
     reader.addEventListener("load", () => {
@@ -63,7 +67,7 @@ const scrollToGivenPoint = (editorElement, line, nTotalRows, negativeOffsetPerc=
  * @param {number} [negativeOffsetPerc=0.12] - A percentage value used to offset the vertical scroll position (default: 0.12).
  */
 const setCaret = (line, offsetColumn, nTotalRows, negativeOffsetPerc=0.12) => {
-    let editorElement = document.getElementById("editor");
+    let editorElement = document.getElementById(editorFieldLabel);
     let validChildNodes = []
     // use a for loop because of better performance
     for (let i=0; i < editorElement.childNodes.length; i++) {
@@ -102,7 +106,7 @@ const setElementCssClass = (elementId, currentClass) => {
  * @function getWordsFrequency
  */
 const getWordsFrequency = async () => {
-    let text = document.getElementById("editor")
+    let text = document.getElementById(editorFieldLabel)
     // replace repeated newlines to prepare setCaret() use
     text.innerText = text.innerText.replace(/[\r\n]+/g, '\n')
     let bodyRequest = {"text": text.innerText}
@@ -113,7 +117,7 @@ const getWordsFrequency = async () => {
     let wordsFrequency = document.getElementById("words-frequency")
     wordsFrequency.innerHTML = ""
     try {
-        let response = await fetch("/words-frequency", {
+        let response = await fetch(`${remoteWebServer}/words-frequency`, {
             method: "POST",
             body: JSON.stringify(bodyRequest)
         })
@@ -256,13 +260,13 @@ const insertCellIntoTRow = (currentTBody, i, ii, nthOffset, nTotalRows) => {
         setCaret(nRow, offsetWord, nTotalRows)
         try {
             let oldClassElement = document.getElementsByClassName('underlinedDarkViolet')
-            oldClassElement[0].className = "underlinedBlue"
+            oldClassElement[0].className = underlinedPrimary
         } catch {
             console.log("first click...")
         }
-        currentUrl.className = "underlinedDarkViolet"
+        currentUrl.className = underlinedClicked
     })
-    currentUrl.className = "underlinedBlue"
+    currentUrl.className = underlinedPrimary
     currentUrl.innerText = nthOffset["word"]
     currentCell.appendChild(currentUrl)
     nthRowBody.insertCell().textContent = nthOffset["n_row"]