Added word filter to custom text

src/js/custom-text-popup.js

@@ -2,6 +2,7 @@ import * as CustomText from "./custom-text";
 import * as ManualRestart from "./manual-restart-tracker";
 import * as Misc from "./misc";
 import * as Notifications from "./notification-center";
+import * as wordFilter from "./word-filter";
 
 let wrapper = "#customTextPopupWrapper";
 let popup = "#customTextPopup";
@@ -84,7 +85,7 @@ $(`${popup} .randomInputFields .time input`).keypress((e) => {
   $(`${popup} .randomInputFields .wordcount input`).val("");
 });
 
-$("#customTextPopup .button").click(() => {
+$("#customTextPopup .apply").click(() => {
   let text = $("#customTextPopup textarea").val();
   text = text.trim();
   // text = text.replace(/[\r]/gm, " ");
@@ -157,3 +158,7 @@ $("#customTextPopup .button").click(() => {
   restartTest();
   hide();
 });
+
+$("#customTextPopup .wordfilter").click(() => {
+  wordFilter.showWordFilterPopup();
+})

src/js/script.js

@@ -4472,7 +4472,8 @@ $(document).keydown(function (event) {
   let modePopupVisible =
     !$("#customTextPopupWrapper").hasClass("hidden") ||
     !$("#customMode2PopupWrapper").hasClass("hidden") ||
-    !$("#quoteSearchPopupWrapper").hasClass("hidden");
+    !$("#quoteSearchPopupWrapper").hasClass("hidden") ||
+    !$("#wordFilterPopupWrapper").hasClass("hidden");
   if (
     pageTestActive &&
     !commandLineVisible &&

src/js/word-filter.js

@@ -1,22 +1,77 @@
 import * as Misc from "./misc";
+//import * as config from "./userconfig";
 
-function showWordFilterPopup(hideCustomTextPopup){
-    $("#wordFilterPopupWrapper").removeclass("hidden");
-}
+export async function showWordFilterPopup(){
 
-export async function filter(language, filter){
-    filter = filter.replace(/ /gi, "|");
-    let reg = new RegExp(filter, "gi");
-    let filteredWords = [];
-    let languageList = await Misc.getLanguage(language);
-    languageList.words.forEach( word => {
-        let test = reg.test(word);
-        if(test){
-            filteredWords.push(word);
-        }
+    $("#wordFilterPopupWrapper").removeClass("hidden");
+    $("#customTextPopupWrapper").addClass("hidden");
+    let LanguageList = await Misc.getLanguageList();
+    LanguageList.forEach(language => {
+        let prettyLang = language;
+        prettyLang = prettyLang.replace("_", " ");
+        $("#languageList").append(`
+            <option value=${language}>${prettyLang}</option>
+        `)
     })
-    return filteredWords;
 }
 
+function hideWordFilterPopup(){
+    $("#wordFilterPopupWrapper").addClass("hidden");
+    $("#customTextPopupWrapper").removeClass("hidden");
+}
 
+async function applyWordFilterPopup(){
+    let language = $("#languageList").val();
+    let filteredWords = await filter(language);
+    let customText = "";
+    filteredWords.forEach( word => {
+        customText += (word + " ");
+    })
+    hideWordFilterPopup();
+    $("#customTextPopup textarea").val(customText);
+}
 
+$("#wordFilterPopupWrapper").mousedown((e) => {
+    if ($(e.target).attr("id") === "wordFilterPopupWrapper") {
+      hideWordFilterPopup();
+    }
+});
+
+$("#wordFilterPopupWrapper .button").mousedown((e) => {
+    $("#wordFilterPopupWrapper .wfload").removeClass("hidden");
+    $("#wordFilterPopupWrapper .button").addClass("hidden");
+    setTimeout(() => {
+        applyWordFilterPopup();
+        $("#wordFilterPopupWrapper .wfload").addClass("hidden");
+        $("#wordFilterPopupWrapper .button").removeClass("hidden");
+    }, 1)
+});
+
+async function filter(language){
+    let filterin = $("#wordFilter").val();
+    filterin = filterin.replace(/ /gi, "|");
+    let regincl = new RegExp(filterin, "i");
+    let filterout = $("#wordExclude").val();
+    filterout = filterout.replace(/ /gi, "|");
+    let regexcl = new RegExp(filterout, "i");
+    let filteredWords = [];
+    let languageWordList = await Misc.getLanguage(language);
+    let maxLength = $("#wordMax").val();
+    let minLength = $("#wordMin").val();
+    if(maxLength == ""){
+        maxLength = 999;
+    }
+    if(minLength == ""){
+        minLength = 1;
+    }
+    for( let i = 0; i < languageWordList.words.length; i++){
+        let word = languageWordList.words[i];
+        let test1 = regincl.test(word);
+        let test2 = regexcl.test(word);
+        if((test1 && !test2 || test1 && filterout == "") && word.length <= maxLength && word.length >= minLength){
+            filteredWords.push(word);
+            console.log(test1, test2, word, filterout, filterin, regexcl);
+        }
+    }
+    return filteredWords;
+}

src/sass/style.scss

@@ -415,7 +415,7 @@ a:hover {
     width: 60vw;
 
     .wordfilter{
-      width: 25%;
+      width: 33%;
       justify-self:right;
     }
 
@@ -432,6 +432,8 @@ a:hover {
       resize: vertical;
       height: 200px;
       color: var(--text-color);
+      overflow-x: hidden;
+      overflow-y: scroll;
     }
 
     .inputs {
@@ -517,6 +519,81 @@ a:hover {
   }
 }
 
+#wordFilterPopupWrapper{
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.75);
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  padding: 5rem 0;
+
+  #wordFilterPopup{
+    background: var(--bg-color);
+    border-radius: var(--roundness);
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    width: 400px;
+
+    .lengthgrid{
+      display:grid;
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr 1fr;
+      gap: 0.2rem;
+    }
+
+    .wordLength{
+      width: 10rem;
+    }
+
+    #languageList{
+      background: rgba(0, 0, 0, 0.1);
+      height: fit-content;
+      padding: 5px;
+      border-radius: 5px;
+      color: var(--text-color);
+      font: var(--font);
+      border: none;
+      
+
+      option{
+        background: var(--bg-color);
+      }
+    }
+    #languageList:focus{
+      height: fit-content;
+      padding: 5px;
+      border-radius: 5px;
+      color: var(--text-color);
+      font: var(--font);
+      border: none;
+      outline: none;
+    }
+    #languageList:active{
+      height: fit-content;
+      padding: 5px;
+      border-radius: 5px;
+      color: var(--text-color);
+      font: var(--font);
+      border: none;
+      outline: none;
+    }
+    .wftip{
+      color: var(--sub-color);
+      font-size: 0.8rem;
+    }
+
+    .wfload{
+      justify-self: center;
+    }
+  }
+}
+
 #simplePopupWrapper {
   width: 100%;
   height: 100%;

static/index.html

@@ -102,7 +102,7 @@
     </div>
     <div id="customTextPopupWrapper" class="hidden">
       <div id="customTextPopup" action="">
-        <div class="wordfilter button">word filter</div>
+        <div class="wordfilter button"><i class="fas fa-filter"></i>Words filter</div>
         <textarea class="textarea" placeholder="Custom text"></textarea>
         <div class="inputs">
           <label class="check">
@@ -137,6 +137,27 @@
         <div class="button apply">ok</div>
       </div>
     </div>
+    <div id="wordFilterPopupWrapper" class="hidden">
+      <div id="wordFilterPopup">
+        <div class="wftitle">language</div>
+        <select id="languageList" class="">
+          
+        </select>
+        <div class="lengthgrid">         
+          <div id="wordMinTitle" class="wftitle">min length</div>
+          <div id="wordMaxTitle" class="wftitle">max length</div>
+          <input id="wordMin" class="wordLength" autocomplete="off" type="number">
+          <input id="wordMax" class="wordLength" autocomplete="off" type="number">
+        </div>   
+        <div class="wftitle">include</div>
+        <input id="wordFilter" autocomplete="off">
+        <div class="wftitle">exclude</div>
+        <input id="wordExclude" autocomplete="off">
+        <div class="wftip">Use the above filters to include and exclude words or characters (separated by spaces)</div>
+        <i class="fas fa-fw fa-spin fa-circle-notch hidden wfload"></i>
+        <div class="button">ok</div>
+      </div>
+    </div>
     <div id="customMode2PopupWrapper" class="hidden">
       <div id="customMode2Popup" mode="">
         <div class="title">Test length</div>