feat(tpl): add clear button for filter

Author: marjune163

src/tpl/frontend/index.css

@@ -8,10 +8,6 @@ html {
 	font-family: "roboto_condensedbold", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
-body, input, textarea, button {
-	font-family: Consolas, "Lucida Console", "San Francisco Mono", Menlo, Monaco, "Andale Mono", "DejaVu Sans Mono", monospace;
-}
-
 body {
 	color: #333;
 	font-size: 0.625em;
@@ -21,6 +17,14 @@ body {
 	padding-bottom: 1em;
 }
 
+body, input, textarea, button {
+	font-family: Consolas, "Lucida Console", "San Francisco Mono", Menlo, Monaco, "Andale Mono", "DejaVu Sans Mono", monospace;
+}
+
+input::-ms-clear {
+	display: none;
+}
+
 form {
 	margin: 0;
 	padding: 0;
@@ -291,15 +295,28 @@ em {
 }
 
 .filter .form {
+	position: relative;
 	display: flex;
 }
 
-.filter .filter-text {
+.filter input {
 	flex: 1 1 auto;
 	width: 100%;
+	padding-right: 1.5em;
 	box-sizing: border-box;
 }
 
+.filter button {
+	display: none;
+	position: absolute;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	border: 0;
+	background: none;
+	padding: 0 0.5em;
+}
+
 .item-list {
 	margin: 1em;
 }

src/tpl/frontend/index.html

@@ -58,7 +58,8 @@
 {{if .SubItemsHtml}}
 <div class="panel filter" id="panel-filter">
 	<div class="form">
-		<input type="text" accesskey="r" placeholder="{{.Trans.FilterLabel}}" name="filter-text" class="filter-text"/>
+		<input type="text" accesskey="r" placeholder="{{.Trans.FilterLabel}}"/>
+		<button type="reset">X</button>
 	</div>
 </div>
 {{end}}

src/tpl/frontend/index.js

@@ -29,10 +29,11 @@
 			return;
 		}
 
-		var input = filter.querySelector('input.filter-text');
+		var input = filter.querySelector('input');
 		if (!input) {
 			return;
 		}
+		var clear = filter.querySelector('button');
 
 		var selectorNone = '.' + classNone;
 		var selectorNotNone = ':not(' + selectorNone + ')';
@@ -52,12 +53,18 @@
 			var selector, items, i;
 
 			if (!filterText) {	// filter cleared, show all items
+				if (clear) {
+					clear.style.display = '';
+				}
 				selector = selectorItemNone;
 				items = document.body.querySelectorAll(selector);
 				for (i = items.length - 1; i >= 0; i--) {
 					items[i].classList.remove(classNone);
 				}
 			} else {
+				if (clear) {
+					clear.style.display = 'block';
+				}
 				if (filterText.indexOf(lastFilterText) >= 0) {	// increment search, find in visible items
 					selector = selectorItemNotNone;
 				} else if (lastFilterText.indexOf(filterText) >= 0) {	// decrement search, find in hidden items
@@ -105,6 +112,13 @@
 			}
 		}, false);
 
+		clear && clear.addEventListener('click', function () {
+			clearTimeout(timeoutId);
+			input.value = '';
+			input.focus();
+			doFilter();
+		});
+
 		// init
 		if (sessionStorage) {
 			var prevSessionFilter = sessionStorage.getItem(location.pathname);