refactor(defaultTheme): refine filter logic

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

Author: marjune163

src/tpl/defaultTheme/frontend/index.js

@@ -5,11 +5,7 @@
 	var classNone = 'none';
 	var classHeader = 'header';
 
-	var selectorNone = '.' + classNone;
-	var selectorNotNone = ':not(' + selectorNone + ')';
 	var selectorItem = '.item-list > li:not(.' + classHeader + '):not(.parent)';
-	var selectorItemNone = selectorItem + selectorNone;
-	var selectorItemNotNone = selectorItem + selectorNotNone;
 
 	var leavingEvent = typeof window.onpagehide !== strUndef ? 'pagehide' : 'beforeunload';
 
@@ -34,61 +30,63 @@
 	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 selectorIsNone = '.' + classNone;
+		var selectorNotNone = ':not(' + selectorIsNone + ')';
+		var selectorItemIsNone = selectorItem + selectorIsNone;
+		var selectorItemNotNone = selectorItem + selectorNotNone;
+
 		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
-				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 {
+			var items
+			if (filterText) {
 				if (clear) {
 					clear.style.display = 'block';
 				}
+
+				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.style.display = '';
 				}
+				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 +96,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 +122,7 @@
 					e.preventDefault();
 					break;
 			}
-		}, false);
+		});
 
 		clear && clear.addEventListener('click', function () {
 			clearTimeout(timeoutId);
@@ -142,7 +140,7 @@
 				if (input.value) {
 					sessionStorage.setItem(location.pathname, input.value);
 				}
-			}, false);
+			});
 
 			if (prevSessionFilter) {
 				input.value = prevSessionFilter;