refactor(defaultTheme): refine filter logic

use `NodeList.foreach()` instead of iterate manually.

Author: marjune163

src/tpl/defaultTheme/frontend/index.css

@@ -91,7 +91,7 @@ em {
 	border-radius: 3px;
 }
 
-.none, :root body .none {
+.none {
 	display: none;
 }
 
@@ -395,7 +395,6 @@ html.dragging::before {
 }
 
 .filter button {
-	display: none;
 	position: absolute;
 	right: 0;
 	top: 0;

src/tpl/defaultTheme/frontend/index.html

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

src/tpl/defaultTheme/frontend/index.js

@@ -5,10 +5,10 @@
 	var classNone = 'none';
 	var classHeader = 'header';
 
-	var selectorNone = '.' + classNone;
-	var selectorNotNone = ':not(' + selectorNone + ')';
+	var selectorIsNone = '.' + classNone;
+	var selectorNotNone = ':not(' + selectorIsNone + ')';
 	var selectorItem = '.item-list > li:not(.' + classHeader + '):not(.parent)';
-	var selectorItemNone = selectorItem + selectorNone;
+	var selectorItemIsNone = selectorItem + selectorIsNone;
 	var selectorItemNotNone = selectorItem + selectorNotNone;
 
 	var leavingEvent = typeof window.onpagehide !== strUndef ? 'pagehide' : 'beforeunload';
@@ -34,61 +34,58 @@
 	var lastFocused;
 
 	function enableFilter() {
-		// pre check
 		var filter = document.body.querySelector('.filter');
-		if (!filter) {
-			return;
-		}
+		if (!filter) return;
 
 		var input = filter.querySelector('input');
-		if (!input) {
-			return;
-		}
+		if (!input) return;
 
 		var clear = filter.querySelector('button');
 
-		// event handler
 		var timeoutId;
 		var lastFilterText = '';
 		var doFilter = function () {
 			var filterText = input.value.trim().toLowerCase();
-			if (filterText === lastFilterText) {
-				return;
-			}
-
-			var selector, items, i;
+			if (filterText === lastFilterText) return;
 
-			if (!filterText) {	// filter cleared, show all items
+			var items
+			if (filterText) {
 				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';
+					clear.classList.remove(classNone)
 				}
+
+				var selector
 				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
-					selector = selectorItemNone;
+					selector = selectorItemIsNone;
 				} else {
 					selector = selectorItem;
 				}
 
 				items = document.body.querySelectorAll(selector);
-				for (i = items.length - 1; i >= 0; i--) {
-					var item = items[i];
+				if (!items.forEach) items = Array.prototype.slice.call(items);	// IE9+/ClassicEdge
+				items.forEach(function (item) {
 					var name = item.querySelector('.name');
-					if (name && name.textContent.toLowerCase().indexOf(filterText) < 0) {
-						item.classList.add(classNone);
+					if (name.textContent.toLowerCase().indexOf(filterText) < 0) {
+						if (selector !== selectorItemIsNone) {
+							item.classList.add(classNone);
+						}
 					} else {
-						item.classList.remove(classNone);
+						if (selector !== selectorItemNotNone) {
+							item.classList.remove(classNone);
+						}
 					}
+				});
+			} else {	// filter cleared, show all items
+				if (clear) {
+					clear.classList.add(classNone)
 				}
+				items = document.body.querySelectorAll(selectorItemIsNone);
+				if (!items.forEach) items = Array.prototype.slice.call(items);	// IE9+/ClassicEdge
+				items.forEach(function (item) {
+					item.classList.remove(classNone);
+				});
 			}
 
 			lastFilterText = filterText;
@@ -98,8 +95,8 @@
 			clearTimeout(timeoutId);
 			timeoutId = setTimeout(doFilter, 350);
 		};
-		input.addEventListener('input', onValueMayChange, false);
-		input.addEventListener('change', onValueMayChange, false);
+		input.addEventListener('input', onValueMayChange);
+		input.addEventListener('change', onValueMayChange);
 
 		var onEnter = function () {
 			clearTimeout(timeoutId);
@@ -124,7 +121,7 @@
 					e.preventDefault();
 					break;
 			}
-		}, false);
+		});
 
 		clear && clear.addEventListener('click', function () {
 			clearTimeout(timeoutId);
@@ -136,17 +133,19 @@
 		// init
 		if (hasStorage) {
 			var prevSessionFilter = sessionStorage.getItem(location.pathname);
-			sessionStorage.removeItem(location.pathname);
+			if (prevSessionFilter) {
+				input.value = prevSessionFilter;
+			}
+			if (prevSessionFilter !== null) {
+				sessionStorage.removeItem(location.pathname);
+			}
 
 			window.addEventListener(leavingEvent, function () {
 				if (input.value) {
 					sessionStorage.setItem(location.pathname, input.value);
 				}
-			}, false);
+			});
 
-			if (prevSessionFilter) {
-				input.value = prevSessionFilter;
-			}
 		}
 		if (input.value) {
 			doFilter();