From 9c8a2fe65d4873caab58ff9936d7016837945a6f Mon Sep 17 00:00:00 2001
From: Hamid Reza Mohammadi <mohammadi.hr@gmail.com>
Date: Wed, 13 Dec 2023 18:51:01 +0330
Subject: [PATCH] #417 inline search

---
 .../Pages/_InlinePageUtilsPartial.cshtml      |  3 ++-
 GanjooRazor/wwwroot/css/p8.css                |  5 ++++
 GanjooRazor/wwwroot/js/bk.js                  | 23 ++++++++++++++-----
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/GanjooRazor/Pages/_InlinePageUtilsPartial.cshtml b/GanjooRazor/Pages/_InlinePageUtilsPartial.cshtml
index ec02b106..2600bad8 100644
--- a/GanjooRazor/Pages/_InlinePageUtilsPartial.cshtml
+++ b/GanjooRazor/Pages/_InlinePageUtilsPartial.cshtml
@@ -241,10 +241,11 @@
         @if(Model.GanjoorPage.Poem != null)
         {
             <div class="clear-both margin-15px">
-                <input type="search" name="inline-search" id="inline-search" placeholder="جستجو در متن" size="35" value="" onkeyup="inlineHighlight()">
+                <input type="search" name="inline-search" id="inline-search" class="text-align-center" placeholder="جستجو در متن" size="35" value="" onkeyup="inlineHighlight()">
                 <a onclick="inlineUnHighlight()" role="button" class="cursor-pointer">
                     <i class="noindent-info-button close-button"></i>
                 </a>
+                <div id="inline-search-matches" class="inline-small"></div>
             </div>
         }
         
diff --git a/GanjooRazor/wwwroot/css/p8.css b/GanjooRazor/wwwroot/css/p8.css
index efd3bd9c..a3ddc07c 100644
--- a/GanjooRazor/wwwroot/css/p8.css
+++ b/GanjooRazor/wwwroot/css/p8.css
@@ -1993,6 +1993,11 @@ fieldset {
     margin: 15px !important;
 }
 
+.inline-small{
+    display:inline;
+    font-size:small;
+}
+
 @media(prefers-color-scheme: dark) {
     body {
         background: rgba(0, 0, 0, 0.9);
diff --git a/GanjooRazor/wwwroot/js/bk.js b/GanjooRazor/wwwroot/js/bk.js
index 838ec5b0..57f62070 100644
--- a/GanjooRazor/wwwroot/js/bk.js
+++ b/GanjooRazor/wwwroot/js/bk.js
@@ -413,7 +413,7 @@ function playCouplet(coupletIndex) {
 function editCouplet(poemId, coupletIndex, blockId) {
 
     var vIndex = getVerseIndexFromCoupleIndex(coupletIndex);
-    location.href = '/User/Editor?id=' + poemId + '#' + blockId  + '-' + String(vIndex + 1);
+    location.href = '/User/Editor?id=' + poemId + '#' + blockId + '-' + String(vIndex + 1);
 }
 
 function switchBookmark(poemId, coupletIndex, divSuffix) {
@@ -936,7 +936,7 @@ function showAllRecitations() {
     showRecitationsButtons.forEach(function (btn) {
         btn.style.display = 'none';
     });
-   
+
 }
 
 function switch_section(sectionId, buttonId) {
@@ -1116,13 +1116,13 @@ function loadCatRecitations(catId) {
 
     var loadButton = document.getElementById("load-cat-recitations");
     if (loadButton == null) {
-        
+
         return;
     }
 
     var divParent = document.getElementById('recitations-section');
     var imgElementId = 'loadingimg';
-   divParent.innerHTML = divParent.innerHTML + '<div class="bnumdiv" id="remove-this"><img id="' + imgElementId + '" src="/image/loading.gif" alt="بارگذاری"/></div>';
+    divParent.innerHTML = divParent.innerHTML + '<div class="bnumdiv" id="remove-this"><img id="' + imgElementId + '" src="/image/loading.gif" alt="بارگذاری"/></div>';
     $.ajax({
         type: "GET",
         url: '?Handler=CategoryRecitations&catId=' + String(catId),
@@ -1263,7 +1263,7 @@ function countAndSortCharacters(inputString) {
 function countAndDisplayCharacters(inputString, resultTableId, sourceStringId) {
     const result = countAndSortCharacters(inputString);
 
-    
+
     const container = document.getElementById(resultTableId);
 
     let highlightedCharDiv = null; // To keep track of the previously clicked charDiv
@@ -1346,7 +1346,16 @@ function inlineHighlight() {
                     "#poet-image *",
                     "#page-hierarchy *",
                     "#utils-navbar *",
-                ]
+                ],
+                done: function (markCount) {
+                    if (markCount == 0) {
+                        document.getElementById('inline-search').classList.add("background-red");
+                    }
+                    else {
+                        document.getElementById('inline-search').classList.remove("background-red");
+                    }
+                    $('#inline-search-matches').text(persianizeNumerals(markCount.toString()) + ' مورد');
+                }
             });
         }
     });
@@ -1354,6 +1363,8 @@ function inlineHighlight() {
 
 function inlineUnHighlight() {
     document.getElementById('inline-search').value = '';
+    document.getElementById('inline-search').classList.remove("background-red");
+    $('#inline-search-matches').text('');
     var context = document.getElementById('garticle');
     $(context).unmark();
 }