Merge pull request #350 from IgniteUI/dTsvetkov/update-filter-results

Remain open filtering results and add clearing functionality
IgniteUI · Jul 27, 2021 · ff36894 · ff36894
2 parents f82a099 + d00c7f8
commit ff36894
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 6 deletions.
diff --git a/src/app/services/rendering/toc.ts b/src/app/services/rendering/toc.ts
@@ -100,12 +100,6 @@ export class TocRenderingService extends RenderingService implements ResizableOb
             this.scrollToActive();
         }
 
-
-        if ($("#toc_filter_input").val()) {
-            $("#toc_filter_input").val("");
-            this.clearFilter();
-            this.scrollToActive(0);
-        }
     }
 
     private scrollToActive(amount?: number) {
@@ -164,14 +158,23 @@ export class TocRenderingService extends RenderingService implements ResizableOb
             this.router.navigateTo($a.attr("href")!, {stateAction: "push", adjustTocScrollPosition: false})
         });
 
+        $(".clear-icon").on("click", (e: any) => {
+            $("#toc_filter_input").val("");
+            $(".clear-icon").hide();
+            this.clearFilter();
+            this.scrollToActive();
+        })
+
         $("#toc_filter_input").on("input", (e: any) => {
 
             let val = e.target?.value! as string;
             if (val === "") {
+                $(".clear-icon").hide();
                 // Clear 'filtered' class
                 this.clearFilter();
                 return;
             }
+            $(".clear-icon").show();
 
             // Get leaf nodes
             $<HTMLAnchorElement>("#toc li>a")

diff --git a/src/app/services/search/lunr-client.ts b/src/app/services/search/lunr-client.ts
@@ -30,11 +30,20 @@ export function enableSearch() {
     }
 
     addSearchEvent();
+    addClearSearchEvent();
   } catch (e) {
     console.error(e);
   }
 }
 
+function addClearSearchEvent() {
+  $(".search-clear-icon").on("click", () => {
+    $("#search-query").val("")
+    flipContents("show");
+    $(".search-clear-icon").hide();
+  })
+}
+
 function addSearchEvent() {
 
   $("body").on("searchEvent", () => {
@@ -45,11 +54,15 @@ function addSearchEvent() {
     $searchInput.on("keypress", e => e.key !== "Enter");
 
     $keyUp.pipe(
+      tap(()=> $(".search-clear-icon").show()),
       debounceTime(100),
       map<JQuery.TriggeredEvent, string>(e => $(e.target).val()! as string),
       tap(searchText => query = searchText)
     ).subscribe(searchText => {
       if (searchText.length < 3) {
+        if (searchText.length === 0){
+          $(".search-clear-icon").hide();
+        }
         flipContents("show");
       } else {
         flipContents("hide");

diff --git a/src/styles/shared/components/_sidenav.scss b/src/styles/shared/components/_sidenav.scss
@@ -144,6 +144,12 @@
 	left: rem(5px);
 }
 
+.toc-filter > .clear-icon {
+	position: absolute;
+	top: rem(10px);
+	right: rem(5px);
+}
+
 .sidenav {
 	background-color: $toc-bg-color;
 	margin-right: rem(-15px);
@@ -307,6 +313,7 @@
 	#toc_filter_input {
 		font-size: rem(13px);
 		padding-left: rem(24px);
+		padding-right: 25px;
 	}
 
 	.filter-icon {
@@ -316,6 +323,17 @@
 		left: 0;
 		transform: translateY(-50%);
 	}
+
+	.clear-icon {
+		position: absolute;
+		color: $filter-icon-color;
+		font-size: rem(16px);
+		top: 50%;
+		right: 8px;
+		transform: translateY(-50%);
+		cursor: pointer;
+		display: none;
+	}
 }
 
 @media only screen and (max-width: 991px) {

diff --git a/src/styles/shared/components/header/_navbar.scss b/src/styles/shared/components/header/_navbar.scss
@@ -114,6 +114,16 @@
 		}
 	}
 
+	.form-group{
+		position: relative;
+	}
+
+	.form-control > .search-clear-icon {
+		position: absolute;
+		top: rem(10px);
+		right: rem(5px);
+	}
+
 
 	@media only screen and (min-width: 768px) {
 		.navbar-flex {
@@ -177,6 +187,21 @@
 	border-radius: 0;
 }
 
+#search-query {
+	padding-right: 28px;
+}
+
+.search-clear-icon {
+	position: absolute;
+	color: $filter-icon-color;
+	font-size: rem(16px);
+	top: 50%;
+	right: 10px;
+	transform: translateY(-50%);
+	cursor: pointer;
+	display: none;
+}
+
 #hamburger2 {
 	margin-left: 70px;
 }
diff --git a/template/partials/navbar.tmpl.partial b/template/partials/navbar.tmpl.partial
@@ -45,6 +45,7 @@ full license information.}}
                         {{#_isLangJa}}
                             <input type="text" class="form-control" id="search-query" placeholder="トピックで検索" autocomplete="off">
                         {{/_isLangJa}}
+                        <span class="glyphicon glyphicon-remove-circle search-clear-icon"></span>
                         </div>
                     </form>
                 {{/_enableSearch}}

diff --git a/template/toc.html.tmpl b/template/toc.html.tmpl
@@ -7,6 +7,7 @@ full license information.}}
         <form class="toc-filter">
             <span class="glyphicon glyphicon-filter filter-icon"></span>
             <input type="text" id="toc_filter_input" placeholder={{#_isLangJa}}"検索..."{{/_isLangJa}}{{^_isLangJa}}"Filter"{{/_isLangJa}} onkeypress="if(event.keyCode==13) {return false;}">
+            <span class="glyphicon glyphicon-remove-circle clear-icon"></span>
         </form>
     </div>
     {{/_disableSideFilter}}