feat: handle mobile portrait mode for current words table, improve top menù layout

my_ghost_writer/text_parsers.py

@@ -19,7 +19,7 @@ def text_stemming(text: str | RequestTextRowsParentList) -> ResponseTextRowsDict
         text (str): Input string containing the text to be stemmed.
 
     Returns:
-        tuple[int, dict]: a tuple with the number of processed total rows within the initial text and the words frequency dict
+        tuple[int, dict]: a tuple with the number of processed total rows within the initial text and the word frequency dict
     """
     import json
     from nltk.tokenize import wordpunct_tokenize, WordPunctTokenizer
@@ -68,7 +68,6 @@ def get_words_tokens_and_indexes(
     Args:
         words_tokens_list (list): List of words tokens.
         offsets_tokens_list (list): List of offsets for each token.
-        ps (PorterStemmer): The stemmer to use.
         idx_rows_list (list[int]): List of row indices corresponding to the tokens.
         idx_rows_child (list[int]): List of child row indices corresponding to the tokens.
         idx_rows_parent (list[int]): List of parent row indices corresponding to the tokens.

static/index.css

@@ -75,10 +75,10 @@
     margin: 2px;
 }
 .margin10px-left {
-    margin-left: 10px;
+    margin-left: 5px;
 }
 .margin5px-right {
-    margin-right: 10px;
+    margin-right: 5px;
 }
 .margin5px-top {
     margin-top: 5px;
@@ -125,6 +125,10 @@
     max-height: calc(100vh - 200px);
     overflow: auto;
 }
+#id-input-webserver-wordfreq-checkbox-container {
+    display: flex;
+    justify-content: right;
+}
 
 /* Classic UI Main Text, lite.koboldai.net */
 #gamescreen {
@@ -155,6 +159,17 @@
     height: calc(100vh - 200px);
 }
 
+.grid-container-elements-menu-top {
+    margin: 0 auto;
+    display: grid;
+    gap: 2px;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+}
+.grid-element-menu-top {
+    padding: 2px;
+    height: auto;
+}
+
 @media (prefers-color-scheme: dark) {
     .underlinedBlue {
         color: yellow;
@@ -196,3 +211,14 @@
         content: "(Mobile users: use this in landscape mode!)"
     }
 }
+
+@media only screen
+and (min-device-width: 320px)
+and (max-device-width: 480px)
+and (-webkit-min-device-pixel-ratio: 2)
+and (orientation: portrait) {
+    #id-input-webserver-wordfreq-checkbox-container {
+        display: flex;
+        justify-content: left !important;
+    }
+}

static/index.html

@@ -11,28 +11,33 @@
     <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>
+                <button id="id-menu-mobile-top" onclick="toggleElementWithClassById('id-container-desktop-menu')">Global menù word freq. stats</button>
+                <button id="id-menu-mobile-filter-sort-order" onclick="toggleElementWithClassById('id-container-filter-sort-order')">Menù 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="margin4px">
-                    <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="margin10px-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="margin10px-left">Text file selector</label>
-                    <input type="file" onchange="previewFile()" id="id-input-file-selector" aria-label="id-input-file-selector" />
+                <div class="margin4px grid-container-elements-menu-top">
+                    <button id="btn4-get-words-frequency" aria-label="btn4-get-words-frequency" onclick="getWordsFrequency()" type="submit" class="grid-element-menu-top">get words frequency</button>
+                    <span class="grid-element-menu-top">
+                        <label for="id-input-file-selector" class="">Text file selector</label>
+                        <input type="file" onchange="previewFile()" id="id-input-file-selector" aria-label="id-input-file-selector" placeholder="text file selector"/>
+                    </span>
+                    <span id="id-input-webserver-wordfreq-checkbox-container" class="grid-element-menu-top">
+                        <label for="id-input-webserver-wordfreq-checkbox" class="margin5px-left grid-element-menu-top">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"
+                                class="grid-element-menu-top"
+                                onchange="toggleWebserverCheckbox()"
+                                checked
+                        />
+                    </span>
+                    <span class="grid-element-menu-top">
+                        <input type="URL" id="id-input-webserver-wordfreq" aria-label="id-input-webserver-wordfreq" value="http://localhost:7860"/>
+                        <span>Now using: <span id="id-wordfreq-show-analyzer" aria-label="id-wordfreq-show-analyzer">webserver</span></span>
+                    </span>
                 </div>
             </div>
         </div>
@@ -109,8 +114,11 @@ Another row.<br>More one.<br>A last row, I hope.
                 <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="margin4px 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-container" class="display-block">
+                        <div class="display-flex">
+                            <span id="id-current-table-of-words-btn-back" onclick="backToListFromCurrentTable()" class="collapse">↩️</span>
+                            <span id="id-current-table-of-words-title"></span>
+                        </div>
                         <div id="id-current-table-of-words" class="overflow-auto" aria-label="id-current-table-of-words"></div>
                     </div>
                 </div>

static/index.js

@@ -16,6 +16,7 @@ const objectChildNodeNamesToParse = {
     "SPAN": "textContent"
 }
 const mobileInnerSize = 767
+const minNCharsMore = 10
 
 /**
  * Object containing functions for word frequency analysis.
@@ -663,6 +664,10 @@ function populateWordsFrequencyTables(wordsFrequencyObj, nTotalRows, rowArray) {
     updateWordsFrequencyTables()
 }
 
+function getRepetitionsText(iReduced) {
+    return isMobile() || isMobilePortrait() ? `${iReduced["word_prefix"]}: ${iReduced["count"]} reps.` : `${iReduced["word_prefix"]}: ${iReduced["count"]} repetitions`
+}
+
 /**
  * Inserts a table into the DOM displaying the frequency of word prefixes and their corresponding row nths and offsets.
  *
@@ -679,7 +684,7 @@ function insertCurrentTable(i, iReduced, currentTableOfWords) {
     // 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`
+    titleCurrentTable.innerText = getRepetitionsText(iReduced)
     let currentTBody = document.createElement("tbody")
     let offsetsArray = iReduced.offsets_array
     for (let ii = 0; ii < offsetsArray.length; ii++) {
@@ -704,13 +709,17 @@ function insertCurrentTable(i, iReduced, currentTableOfWords) {
 function insertListOfWords(i, iReduced, wordListElement, currentTableOfWords) {
     const li = document.createElement("li");
     const a = document.createElement("a")
-    a.innerText = `${iReduced["word_prefix"]}: ${iReduced["count"]} repetitions`
+    a.innerText = getRepetitionsText(iReduced)
     a.addEventListener("click",  function() {
         currentTableOfWords.innerHTML = ""
         console.log(`insertListOfWords::'a', ${iReduced["word_prefix"]}: ${iReduced["count"]} repetitions`)
         insertCurrentTable(i, iReduced, currentTableOfWords)
         setElementCssClassByOldClass(underlinedClicked, underlinedPrimary)
         a.className = underlinedClicked
+        console.log("insertListOfWords::click event:", isMobilePortrait(), "#")
+        if(isMobilePortrait()) {
+            gotoCurrentTableOfWords()
+        }
     });
     a.className = underlinedPrimary
     li.appendChild(a);
@@ -746,7 +755,10 @@ function insertCellIntoTRow(currentTBody, i, ii, nthOffset) {
     const wfoContainerWidth = getStylePropertyById("id-col2-words-frequency", "width", "int")
     const listOfWordsWidth = getStylePropertyById("id-list-of-words", "width", "int")
     const sentencesContainerWidth = wfoContainerWidth - listOfWordsWidth
-    const nCharsMore = Math.floor(sentencesContainerWidth / 20)
+    let nCharsMore = Math.floor(sentencesContainerWidth / 20)
+    if (nCharsMore < minNCharsMore) {
+        nCharsMore = minNCharsMore
+    }
     console.log(`insertCellIntoTRow::sentencesContainerWidth: ${sentencesContainerWidth}px, nCharsMore: ${nCharsMore}.`)
     const {substring0, substringWord, substring2} = getSubstringForTextWithGivenOffset(rowArray, nthRowIdx, nthOffset, nCharsMore)
 
@@ -999,12 +1011,39 @@ async function updateWordsFreqIfPressEnter() {
     }
 }
 
+function gotoCurrentTableOfWords() {
+    if (isMobilePortrait()) {
+        console.log("gotoCurrentTableOfWords::isMobilePortrait()...")
+        addClassById("id-current-table-of-words-btn-back", "display-block")
+        removeClassById("id-current-table-of-words-btn-back", "collapse")
+        addClassById("id-current-table-of-words-container", "display-block")
+        removeClassById("id-current-table-of-words-container", "collapse")
+        addClassById("id-list-of-words", "collapse")
+        removeClassById("id-list-of-words", "display-block")
+    }
+}
+
 function toggleWebserverCheckbox() {
     const checked = document.getElementById("id-input-webserver-wordfreq-checkbox").checked
     document.getElementById('id-input-webserver-wordfreq').disabled=!checked;
     document.getElementById('id-wordfreq-show-analyzer').innerText=checked?'webserver':'embedded';
 }
 
+function backToListFromCurrentTable() {
+    if (isMobilePortrait()) {
+        removeClassById("id-current-table-of-words-container", "display-block")
+        addClassById("id-current-table-of-words-container", "collapse")
+        removeClassById("id-list-of-words", "collapse")
+        addClassById("id-list-of-words", "display-block")
+    }
+}
+
+function isMobilePortrait() {
+    console.log("isMobilePortrait::window.innerWidth:", window.innerWidth, window.screen.orientation, "#")
+    const orientation = window.screen.orientation
+    return window.innerWidth <= mobileInnerSize && (orientation.type === "portrait-primary" || orientation.type === "portrait-secondary")
+}
+
 function handleMobileWindow() {
     if (isMobile()) {
         closeWordsFreqTopNav("id-container-desktop-menu")