Spaces:

aletrn
/

mgw

Sleeping

App Files Files Community

alessandro trinca tornidor commited on May 21, 2025

Commit

4614287

1 Parent(s): 9cb8062

feat: start refactoring the UI interface on mobile

Browse files

Files changed (3) hide show

static/index.css +29 -6
static/index.html +38 -25
static/index.js +85 -16

static/index.css CHANGED Viewed

@@ -5,7 +5,7 @@
     margin-block-start: 5px;
     margin-block-end: 5px;
 }
-#id-col1-editor > h4,#id-col2-words-frequency > div > div > h4 {
     font-size: 18px;
     margin-block-start: 2px;
     margin-block-end: 2px;
@@ -23,7 +23,7 @@
 .font-weight-bold {
     font-weight: bolder;
 }
-.display-none {
     display: none;
 }
 .display-block {
@@ -68,6 +68,9 @@
 .margin10px {
     margin: 10px;
 }
 .margin5px-left {
     margin-left: 10px;
 }
@@ -115,6 +118,10 @@
 .id-orientation-message {
     display: none;
 }
 /* Classic UI Main Text, lite.koboldai.net */
 #gamescreen {
@@ -127,21 +134,23 @@
     align-self: flex-end;
 }
 #gametext, #editor {
-    max-height: 100%;
     width: 100%;
     word-wrap: break-word;
     padding: 10px;
     overflow-y: auto;
     white-space: pre-wrap;
-    height: 96%;
     border: 1px solid black;
 }
-.calc98vh_less_240px {
-    height: calc(98vh - 160px);
 }
 .calc96vh_less_240px {
     height: calc(96vh - 240px);
 }
 @media (prefers-color-scheme: dark) {
     .underlinedBlue {
@@ -155,6 +164,20 @@
         text-decoration-color: violet;
     }
 }
 @media screen and (max-width: 1024px) and (orientation: portrait) {
     .id-orientation-message {
         display: block;

     margin-block-start: 5px;
     margin-block-end: 5px;
 }
+#id-col1-editor > h4,#id-col2-words-frequency > div > div > h4, #id-col2-words-frequency > h4 {
     font-size: 18px;
     margin-block-start: 2px;
     margin-block-end: 2px;
 .font-weight-bold {
     font-weight: bolder;
 }
+.display-none, .collapse {
     display: none;
 }
 .display-block {
 .margin10px {
     margin: 10px;
 }
+.margin2px {
+    margin: 2px;
+}
 .margin5px-left {
     margin-left: 10px;
 }
 .id-orientation-message {
     display: none;
 }
+.scrollable-table-container {
+    max-height: calc(100vh - 200px);
+    overflow: auto;
+}
 /* Classic UI Main Text, lite.koboldai.net */
 #gamescreen {
     align-self: flex-end;
 }
 #gametext, #editor {
     width: 100%;
     word-wrap: break-word;
     padding: 10px;
     overflow-y: auto;
     white-space: pre-wrap;
+    height: calc(100vh - 180px);
     border: 1px solid black;
 }
+.calc100vh_less_150px {
+    height: calc(100vh - 150px);
 }
 .calc96vh_less_240px {
     height: calc(96vh - 240px);
 }
+.calc100vh_less_200px {
+    height: calc(100vh - 200px);
+}
 @media (prefers-color-scheme: dark) {
     .underlinedBlue {
         text-decoration-color: violet;
     }
 }
+@media screen and (max-height: 767px) {
+    #gametext, #editor {
+        height: calc(100vh - 122px);
+    }
+    #gamescreen {
+        height: calc(100vh - 100px) !important;
+    }
+    #words-frequency {
+        height: calc(100vh - 100px) !important;
+    }
+    .scrollable-table-container {
+        max-height: calc(100vh - 130px) !important;
+    }
+}
 @media screen and (max-width: 1024px) and (orientation: portrait) {
     .id-orientation-message {
         display: block;

static/index.html CHANGED Viewed

@@ -8,31 +8,40 @@
         <script src="/static/index.js"></script>
     </head>
     <body class="overflow-hidden">
-        <h1 id="id-title" class="h1">Words Frequency Statistics in text</h1>
-        <div id="id-orientation-message" class="id-orientation-message" aria-hidden="true"><!-- ::before (Mobile users: use this project in landscape mode!) --></div>
-        <div class="margin10px">
-            <button id="btn4-get-words-frequency" aria-label="btn4-get-words-frequency" onclick="getWordsFrequency()" type="submit">get words frequency</button>
-            <label for="id-input-webserver-wordfreq-checkbox" class="margin5px-left">Use a custom webserver endpoint</label>
-            <input
-                type="checkbox"
-                id="id-input-webserver-wordfreq-checkbox"
-                aria-label="id-input-webserver-wordfreq-checkbox"
-                name="id-input-webserver-wordfreq-checkbox"
-                onchange="document.getElementById('id-input-webserver-wordfreq').disabled=!this.checked;document.getElementById('id-wordfreq-show-analyzer').innerText=this.checked?'webserver':'embedded';"
-                checked
-            />
-            <input type="URL" id="id-input-webserver-wordfreq" aria-label="id-input-webserver-wordfreq" value="http://localhost:7860" />
-            <span>Currently using: <span id="id-wordfreq-show-analyzer" aria-label="id-wordfreq-show-analyzer">webserver</span></span>
-            <label for="id-input-file-selector" class="margin5px-left">Text file selector</label>
-            <input type="file" onchange="previewFile()" id="id-input-file-selector" aria-label="id-input-file-selector" />
         </div>
         <div id="id-container-row-global-editor-frequency" class="display-flex">
             <div id="id-col1-editor" class="col-flex50 border-black padding10px margin10px overflow-hidden background-color-lightgray">
                 <h4>Text Editor</h4>
-                <div class="gamescreenbgnormal calc98vh_less_240px" id="gamescreen">
-                    <span id="editor" contenteditable="true" class="max-height-90vh calc96vh_less_240px overflow-auto background-color-whitesmoke" aria-label="editor">Once upon a time, in the kingdom of Elwoodia, there lived a young and wise young Princess named Isabella. She loved nothing more than to explore the world around her and experience new things. One day, she set off on an adventure to find out about the mysterious and enchanting forest beyond the village gate.<br>As she journeyed through the woods, Isabella stumbled upon a large clearing where she saw a small group of woodland creatures gathered around something. Curious, she went over to take a look. There she noticed a large, red apple lying across the ground. It was so unusual that she had never seen anything like it before; its shape was round but oval, and it was larger than any fruit she'd ever seen.<br><br>The creatures surrounding the apple moved aside to let Isabella get a closer look. As she came closer, she saw a tiny fairy perched on top of the apple. The fairy flew to Isabella and spoke in a soft voice.<br><br><br><br>
 <span>
 "Hi Isabella. Do you know where Harry is?" The fairy said. She was shy since they never spoken before.<br>Another sentence with the word "She".<br><br>
 "No, I don't know, but probably his father Harry Senior knows." Responded Isabella, a little unsure. She was afraid...<br>She was right?
@@ -55,13 +64,14 @@ Another row.<br>More one.<br>A last row, I hope.
             </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">
-                        <h4 id="id-words-frequency-table-title" aria-label="id-words-frequency-table-title">Words Frequency Stats</h4>
                         <input type="text" id="filter-words-frequency" aria-label="filter-words-frequency" placeholder="Filter the output table..." class="width-80perc" onkeydown="updateWordsFreqIfPressEnterSimple()"/>
                         <button type="submit" id="btn-filter-words-frequency" aria-label="btn-filter-words-frequency" onclick="updateWordsFrequencyTables()">Submit</button>
                     </div>
-                    <div class="display-flex width-50perc margin2px-bottom">
                         <form id="id-form-sort-by" aria-label="id-form-sort-by">
                             <fieldset>
                                 <legend>Sort:</legend>
@@ -89,9 +99,12 @@ Another row.<br>More one.<br>A last row, I hope.
                 <span id="id-n-total-rows" aria-label="id-n-total-rows" class="display-none"></span>
                 <span id="waiting-for-be" class="display-none">waiting for backend response...</span>
                 <span id="waiting-for-be-error" class="display-none">Error!</span>
-                <div id="words-frequency" class="max-height-80vh overflow-hidden background-color-whitesmoke display-flex" aria-label="words-frequency">
                     <div id="id-list-of-words" class="margin10px overflow-auto" aria-label="id-list-of-words"></div>
-                    <div id="id-current-table-of-words" class="margin10px overflow-auto" aria-label="id-current-table-of-words"></div>
                 </div>
             </div>

         <script src="/static/index.js"></script>
     </head>
     <body class="overflow-hidden">
+    <div id="id-orientation-message" class="id-orientation-message" aria-hidden="true"><!-- ::before (Mobile users: use this project in landscape mode!) --></div>
+        <div id="id-container-menu">
+            <div id="id-container-mobile-menu" class="collapse">
+                <button id="id-menu-mobile-top" onclick="toggleElementWithClassById('id-container-desktop-menu')">Global menu' word freq. stats</button>
+                <button id="id-menu-mobile-filter-sort-order" onclick="toggleElementWithClassById('id-container-filter-sort-order')">Menu' filter word freq.</button>
+            </div>
+            <div id="id-container-desktop-menu">
+                <h1 id="id-title" class="h1">Word Frequency Statistics in text</h1>
+                <div class="margin10px">
+                    <button id="btn4-get-words-frequency" aria-label="btn4-get-words-frequency" onclick="getWordsFrequency()" type="submit">get words frequency</button>
+                    <label for="id-input-webserver-wordfreq-checkbox" class="margin5px-left">Use a custom webserver endpoint</label>
+                    <input
+                            type="checkbox"
+                            id="id-input-webserver-wordfreq-checkbox"
+                            aria-label="id-input-webserver-wordfreq-checkbox"
+                            name="id-input-webserver-wordfreq-checkbox"
+                            onchange="toggleWebserverCheckbox()"
+                            checked
+                    />
+                    <input type="URL" id="id-input-webserver-wordfreq" aria-label="id-input-webserver-wordfreq" value="http://localhost:7860" />
+                    <span>Currently using: <span id="id-wordfreq-show-analyzer" aria-label="id-wordfreq-show-analyzer">webserver</span></span>
+                    <label for="id-input-file-selector" class="margin5px-left">Text file selector</label>
+                    <input type="file" onchange="previewFile()" id="id-input-file-selector" aria-label="id-input-file-selector" />
+                </div>
+            </div>
         </div>
         <div id="id-container-row-global-editor-frequency" class="display-flex">
             <div id="id-col1-editor" class="col-flex50 border-black padding10px margin10px overflow-hidden background-color-lightgray">
                 <h4>Text Editor</h4>
+                <div class="gamescreenbgnormal calc100vh_less_150px" id="gamescreen">
+                    <span id="editor" contenteditable="true" class="overflow-auto background-color-whitesmoke" aria-label="editor">Once upon a time, in the kingdom of Elwoodia, there lived a young and wise young Princess named Isabella. She loved nothing more than to explore the world around her and experience new things. One day, she set off on an adventure to find out about the mysterious and enchanting forest beyond the village gate.<br>As she journeyed through the woods, Isabella stumbled upon a large clearing where she saw a small group of woodland creatures gathered around something. Curious, she went over to take a look. There she noticed a large, red apple lying across the ground. It was so unusual that she had never seen anything like it before; its shape was round but oval, and it was larger than any fruit she'd ever seen.<br><br>The creatures surrounding the apple moved aside to let Isabella get a closer look. As she came closer, she saw a tiny fairy perched on top of the apple. The fairy flew to Isabella and spoke in a soft voice.<br><br><br><br>
 <span>
 "Hi Isabella. Do you know where Harry is?" The fairy said. She was shy since they never spoken before.<br>Another sentence with the word "She".<br><br>
 "No, I don't know, but probably his father Harry Senior knows." Responded Isabella, a little unsure. She was afraid...<br>She was right?
             </div>
             <div id="id-col2-words-frequency" class="col-flex50 border-blue padding10px margin10px overflow-hidden background-color-lightgray">
+                <h4 id="id-words-frequency-table-title-mobile" aria-label="id-words-frequency-table-title" class="collapse">Words Freq. Stats</h4>
+                <div id="id-container-filter-sort-order" class="display-flex">
+                    <div id="id-container-filter-word-list" class="width-50perc">
+                        <h4 id="id-words-frequency-table-title" aria-label="id-words-frequency-table-title">Words Freq. Stats</h4>
                         <input type="text" id="filter-words-frequency" aria-label="filter-words-frequency" placeholder="Filter the output table..." class="width-80perc" onkeydown="updateWordsFreqIfPressEnterSimple()"/>
                         <button type="submit" id="btn-filter-words-frequency" aria-label="btn-filter-words-frequency" onclick="updateWordsFrequencyTables()">Submit</button>
                     </div>
+                    <div id="id-container-sort-order-word-list" class="display-flex width-50perc margin2px-bottom">
                         <form id="id-form-sort-by" aria-label="id-form-sort-by">
                             <fieldset>
                                 <legend>Sort:</legend>
                 <span id="id-n-total-rows" aria-label="id-n-total-rows" class="display-none"></span>
                 <span id="waiting-for-be" class="display-none">waiting for backend response...</span>
                 <span id="waiting-for-be-error" class="display-none">Error!</span>
+                <div id="words-frequency" class="calc100vh_less_200px overflow-hidden background-color-whitesmoke display-flex" aria-label="words-frequency">
                     <div id="id-list-of-words" class="margin10px overflow-auto" aria-label="id-list-of-words"></div>
+                    <div id="id-current-table-of-words-container" class="">
+                        <span id="id-current-table-of-words-title"></span>
+                        <div id="id-current-table-of-words" class="overflow-auto" aria-label="id-current-table-of-words"></div>
+                    </div>
                 </div>
             </div>

static/index.js CHANGED Viewed

@@ -1,4 +1,5 @@
-const wordsFrequencyTableTitleText = "Words Frequency Stats"
 let wfo = {
     "words_frequency": {},
     "nTotalRows": null,
@@ -14,6 +15,7 @@ const objectChildNodeNamesToParse = {
     "#text": "textContent",
     "SPAN": "textContent"
 }
 /**
  * Object containing functions for word frequency analysis.
@@ -506,15 +508,23 @@ function parseWebserverDomain () {
  * @function getWordsFrequency
  */
 async function getWordsFrequency() {
     let {validChildContent} = getValidChildNodesFromEditorById(editorFieldLabel)
     setElementCssClassById("waiting-for-be-error", "display-none")
     setElementCssClassById("waiting-for-be", "display-block")
     let wordsFrequencyTableTitleEl = document.getElementById("id-words-frequency-table-title")
     wordsFrequencyTableTitleEl.innerText = wordsFrequencyTableTitleText
     let listOfWords = document.getElementById("id-list-of-words")
     listOfWords.innerHTML = ""
     let currentTableOfWords = document.getElementById("id-current-table-of-words")
     currentTableOfWords.innerHTML = ""
     const choiceWordFreqAnalyzerEl = document.getElementById('id-input-webserver-wordfreq-checkbox')
     console.log("choiceWordFreqAnalyzerEl checked:", typeof choiceWordFreqAnalyzerEl.checked, choiceWordFreqAnalyzerEl.checked, "#")
     switch (choiceWordFreqAnalyzerEl.checked) {
@@ -626,6 +636,9 @@ function updateWordsFrequencyTables() {
     let wordsFrequencyTableTitleEl = document.getElementById("id-words-frequency-table-title")
     wordsFrequencyTableTitleEl.innerText = `${wordsFrequencyTableTitleText} (${reduced.length} word groups, ${nTotalRows} rows)`
     const wordListElement = document.createElement("list")
     for (let i=0; i<reduced.length; i++ ) {
         insertListOfWords(i, reduced[i], wordListElement, currentTableOfWords);
@@ -663,17 +676,22 @@ function insertCurrentTable(i, iReduced, currentTableOfWords) {
     currentTableWordsFreq.setAttribute("id", `id-table-${i}-nth`)
     currentTableWordsFreq.setAttribute("aria-label", `id-table-${i}-nth`)
-    let currentCaption = currentTableWordsFreq.createCaption()
-    currentCaption.setAttribute("aria-label", `id-table-${i}-caption`)
-    currentCaption.innerText = `${iReduced["word_prefix"]}: ${iReduced["count"]} repetitions`
     let currentTBody = document.createElement("tbody")
     let offsetsArray = iReduced.offsets_array
     for (let ii = 0; ii < offsetsArray.length; ii++) {
         insertCellIntoTRow(currentTBody, i, ii, offsetsArray[ii])
     }
     currentTableWordsFreq.appendChild(currentTBody)
-    currentTableOfWords.appendChild(currentTableWordsFreq)
 }
 /**
@@ -929,24 +947,33 @@ function getValidChildNodesFromEditorById(idElement) {
 }
 /** Needed by lite.koboldai.net */
-function toggleWordsFreqNav(idElement) {
-    let x = document.getElementById(idElement);
-    if (x.classList.contains("collapse")) {
-        x.classList.remove("collapse");
     } else {
-        x.classList.add("collapse");
     }
 }
 function closeWordsFreqTopNav(idElement) {
-    let x = document.getElementById(idElement);
-    x.classList.add("collapse");
 }
-function toggleOrCloseByBoolAndId(idElement, boolFlag) {
     switch (boolFlag) {
         case boolFlag === true:
-            toggleWordsFreqNav(idElement)
             break;
         case boolFlag === false:
             closeWordsFreqTopNav(idElement)
@@ -970,4 +997,46 @@ async function updateWordsFreqIfPressEnter() {
             updateWordsFrequencyTables()
         }
     }
-}

+const wordsFrequencyTableTitleText = "Words Freq. Stats"
+const wordsFrequencyTableTitleMobileText = "Words Freq. Stats"
 let wfo = {
     "words_frequency": {},
     "nTotalRows": null,
     "#text": "textContent",
     "SPAN": "textContent"
 }
+const mobileInnerSize = 767
 /**
  * Object containing functions for word frequency analysis.
  * @function getWordsFrequency
  */
 async function getWordsFrequency() {
+    if (isMobile()) {
+        toggleElementWithClassById('id-container-desktop-menu')
+    }
     let {validChildContent} = getValidChildNodesFromEditorById(editorFieldLabel)
     setElementCssClassById("waiting-for-be-error", "display-none")
     setElementCssClassById("waiting-for-be", "display-block")
     let wordsFrequencyTableTitleEl = document.getElementById("id-words-frequency-table-title")
+    let wordsFrequencyTableTitleElMobile = document.getElementById("id-words-frequency-table-title-mobile")
     wordsFrequencyTableTitleEl.innerText = wordsFrequencyTableTitleText
+    wordsFrequencyTableTitleElMobile.innerText = wordsFrequencyTableTitleMobileText
     let listOfWords = document.getElementById("id-list-of-words")
     listOfWords.innerHTML = ""
     let currentTableOfWords = document.getElementById("id-current-table-of-words")
     currentTableOfWords.innerHTML = ""
+    let currentTableTitle = document.getElementById("id-current-table-of-words-title")
+    currentTableTitle.innerText = ""
     const choiceWordFreqAnalyzerEl = document.getElementById('id-input-webserver-wordfreq-checkbox')
     console.log("choiceWordFreqAnalyzerEl checked:", typeof choiceWordFreqAnalyzerEl.checked, choiceWordFreqAnalyzerEl.checked, "#")
     switch (choiceWordFreqAnalyzerEl.checked) {
     let wordsFrequencyTableTitleEl = document.getElementById("id-words-frequency-table-title")
     wordsFrequencyTableTitleEl.innerText = `${wordsFrequencyTableTitleText} (${reduced.length} word groups, ${nTotalRows} rows)`
+    let wordsFrequencyTableTitleMobileEl = document.getElementById("id-words-frequency-table-title-mobile")
+    wordsFrequencyTableTitleMobileEl.innerText = `${wordsFrequencyTableTitleMobileText} (${reduced.length} word groups, ${nTotalRows} rows)`
     const wordListElement = document.createElement("list")
     for (let i=0; i<reduced.length; i++ ) {
         insertListOfWords(i, reduced[i], wordListElement, currentTableOfWords);
     currentTableWordsFreq.setAttribute("id", `id-table-${i}-nth`)
     currentTableWordsFreq.setAttribute("aria-label", `id-table-${i}-nth`)
+    // let currentCaption = currentTableWordsFreq.createCaption()
+    // currentCaption.setAttribute("aria-label", `id-table-${i}-caption`
+    const titleCurrentTable = document.getElementById("id-current-table-of-words-title")
+    titleCurrentTable.innerText = `${iReduced["word_prefix"]}: ${iReduced["count"]} repetitions`
     let currentTBody = document.createElement("tbody")
     let offsetsArray = iReduced.offsets_array
     for (let ii = 0; ii < offsetsArray.length; ii++) {
         insertCellIntoTRow(currentTBody, i, ii, offsetsArray[ii])
     }
     currentTableWordsFreq.appendChild(currentTBody)
+    // Wrap the table in a scrollable container
+    let scrollableDiv = document.createElement("div")
+    scrollableDiv.className = "scrollable-table-container"
+    scrollableDiv.appendChild(currentTableWordsFreq)
+    currentTableOfWords.appendChild(scrollableDiv)
 }
 /**
 }
 /** Needed by lite.koboldai.net */
+function toggleElementWithClassById(idElement, className="collapse") {
+    let elementWithClassToChange = document.getElementById(idElement)
+    if (elementWithClassToChange.classList.contains(className)) {
+        elementWithClassToChange.classList.remove(className);
     } else {
+        elementWithClassToChange.classList.add(className);
     }
 }
+function addClassById(idElement, className) {
+    let elementWithClassToChange = document.getElementById(idElement)
+    elementWithClassToChange.classList.add(className);
+}
 function closeWordsFreqTopNav(idElement) {
+    addClassById(idElement, "collapse")
 }
+function removeClassById(idElement, className) {
+    let elementWithClassToChange = document.getElementById(idElement)
+    elementWithClassToChange.classList.remove(className);
+}
+function toggleOrCloseByBoolAndId(idElement, boolFlag, className="collapse") {
     switch (boolFlag) {
         case boolFlag === true:
+            toggleElementWithClassById(idElement, className)
             break;
         case boolFlag === false:
             closeWordsFreqTopNav(idElement)
             updateWordsFrequencyTables()
         }
     }
+}
+function toggleWebserverCheckbox() {
+    document.getElementById('id-input-webserver-wordfreq').disabled=!this.checked;document.getElementById('id-wordfreq-show-analyzer').innerText=this.checked?'webserver':'embedded';
+    if (isMobile()) {
+        toggleElementWithClassById('id-container-desktop-menu')
+    }
+}
+function handleMobileWindow() {
+    if (isMobile()) {
+        closeWordsFreqTopNav("id-container-desktop-menu")
+        closeWordsFreqTopNav("id-container-filter-sort-order")
+        addClassById('id-words-frequency-table-title', "collapse");
+        removeClassById('id-words-frequency-table-title-mobile', "collapse");
+        removeClassById('id-container-mobile-menu', "collapse");
+        removeClassById('id-container-filter-sort-order', "display-flex");
+        removeClassById('id-container-filter-word-list', "width-50perc");
+        removeClassById('id-container-sort-order-word-list', "width-50perc");
+        removeClassById('id-current-table-of-words-container', "margin10px");
+        addClassById('id-current-table-of-words-container', "margin2px");
+    } else {
+        closeWordsFreqTopNav("id-container-mobile-menu")
+        // Always show desktop container on desktop
+        removeClassById('id-container-desktop-menu', "collapse");
+        removeClassById('id-container-filter-sort-order', "collapse");
+        addClassById('id-container-filter-sort-order', "display-flex");
+        addClassById('id-words-frequency-table-title-mobile', "collapse");
+        addClassById('id-container-filter-word-list', "width-50perc");
+        removeClassById('id-words-frequency-table-title', "collapse");
+        addClassById('id-current-table-of-words-container', "margin10px");
+        removeClassById('id-current-table-of-words-container', "margin2px");
+    }
+}
+function isMobile() {
+    return window.innerWidth <= mobileInnerSize || window.innerHeight <= mobileInnerSize;
+}
+window.addEventListener('resize', handleMobileWindow);
+window.addEventListener('DOMContentLoaded', handleMobileWindow);
+console.log('DOMContentLoaded');