Dashboard - Edit, Menu Item - Edit: Integrate icon search.

core/dashboard/dashboard_edit.php

@@ -560,62 +560,44 @@
 		echo "		<td class='vtable' style='vertical-align: bottom;'>";
 		if (file_exists($_SERVER["PROJECT_ROOT"].'/resources/fontawesome/fa_icons.php')) {
 			include $_SERVER["PROJECT_ROOT"].'/resources/fontawesome/fa_icons.php';
-			if (!empty($font_awesome_icons) && is_array($font_awesome_icons)) {
-				//initialize variables
-				$previous_icon_classes = $previous_icon_name = $previous_icon_style = '';
-				//rebuild array, parse and format label
-				foreach ($font_awesome_icons as $i => $icon_classes) {
-					//split classes
-					$icon_class = explode(' ', $icon_classes);
-					$icon_style = $icon_class[0];
-					$icon_name = $icon_class[1];
-					//determine label
-					$icon_label = str_replace('fa-', '', $icon_name);
-					$icon_label = str_replace('-', ' ', $icon_label);
-					$icon_label = ucwords($icon_label);
-					//update previous
-					if (
-						!empty($previous_icon_name) &&
-						!empty($previous_icon_style) &&
-						$icon_name == $previous_icon_name &&
-						$icon_style != $previous_icon_style
-						) {
-						$icons[$previous_icon_classes] = $icon_label.' - '.ucwords(str_replace('fa-', '', $previous_icon_style));
-						$append_style = true;
-					}
-					else {
-						$append_style = false;
-					}
-					//set current
-					$icons[$icon_classes] = $icon_label.($append_style ? ' - '.ucwords(str_replace('fa-', '', $icon_style)) : null);
-					//set previous values
-					$previous_icon_name = $icon_name;
-					$previous_icon_style = $icon_style;
-					$previous_icon_classes = $icon_classes;
-				}
-				unset($icon_classes, $icon_class, $icon_style, $icon_name, $previous_icon_classes, $previous_icon_style, $previous_icon_name, $icon_label, $previous_icon_name, $previous_icon_style, $previous_icon_classes);
-				echo "<table cellpadding='0' cellspacing='0' border='0'>\n";
-				echo "	<tr>\n";
-				echo "		<td>\n";
-				echo "			<select class='formfld' name='dashboard_icon' id='dashboard_icon' onchange=\"$('#icons').slideUp(); $('#grid_icon').fadeIn();\">\n";
-				echo "				<option value=''></option>\n";
-				foreach ($icons as $icon_class => $icon_label) {
-					$selected = $dashboard_icon == $icon_class ? "selected" : null;
-					echo "			<option value='".escape($icon_class)."' ".$selected.">".escape($icon_label)."</option>\n";
-				}
-				echo "			</select>\n";
-				echo "		</td>\n";
-				echo "		<td style='padding: 0 0 0 5px;'>\n";
-				echo "			<button id='grid_icon' type='button' class='btn btn-default list_control_icon' style='font-size: 15px; padding-top: 1px; padding-left: 3px;' onclick=\"$('#icons').fadeIn(); $(this).fadeOut();\"><span class='fa-solid fa-th'></span></button>";
-				echo "		</td>\n";
-				echo "	</tr>\n";
-				echo "</table>\n";
-				echo "<div id='icons' style='clear: both; display: none; margin-top: 8px; padding-top: 10px; color: #000; max-height: 400px; overflow: auto;'>\n";
-				foreach ($icons as $icon_class => $icon_label) {
-					echo "<span class='".escape($icon_class)." fa-fw' style='font-size: 24px; float: left; margin: 0 8px 8px 0; cursor: pointer; opacity: 0.3;' title='".escape($icon_label)."' onclick=\"$('#dashboard_icon').val('".escape($icon_class)."'); $('#icons').slideUp(); $('#grid_icon').fadeIn();\" onmouseover=\"this.style.opacity='1';\" onmouseout=\"this.style.opacity='0.3';\"></span>\n";
-				}
-				echo "</div>";
+		}
+		if (!empty($font_awesome_icons) && is_array($font_awesome_icons)) {
+			echo "<table cellpadding='0' cellspacing='0' border='0'>\n";
+			echo "	<tr>\n";
+			echo "		<td>\n";
+			echo "			<select class='formfld' name='dashboard_icon' id='selected_icon' onchange=\"$('#icons').slideUp(200); $('#icon_search').fadeOut(200, function() { $('#grid_icon').fadeIn(); });\">\n";
+			echo "				<option value=''></option>\n";
+			foreach ($font_awesome_icons as $icon) {
+				$selected = $dashboard_icon == implode(' ', $icon['classes']) ? "selected" : null;
+				echo "			<option value='".escape(implode(' ', $icon['classes']))."' ".$selected.">".escape($icon['label'])."</option>\n";
 			}
+			echo "			</select>\n";
+			echo "		</td>\n";
+			echo "		<td style='padding: 0 0 0 5px;'>\n";
+			echo "			<button id='grid_icon' type='button' class='btn btn-default list_control_icon' style='font-size: 15px; padding-top: 1px; padding-left: 3px;' onclick=\"load_icons(); $(this).fadeOut(200, function() { $('#icons').fadeIn(200); $('#icon_search').fadeIn(200).focus(); });\"><span class='fa-solid fa-th'></span></button>";
+			echo "			<input id='icon_search' type='text' class='formfld' style='display: none;' onkeyup=\"if (this.value.length >= 3) { delay_submit(this.value); } else if (this.value == '') { load_icons(); } else { $('#icons').html(''); }\" placeholder=\"".$text['label-search']."\">\n";
+			echo "		</td>\n";
+			echo "	</tr>\n";
+			echo "</table>\n";
+			echo "<div id='icons' style='clear: both; display: none; margin-top: 8px; padding-top: 10px; color: #000; max-height: 400px; overflow: auto;'></div>";
+
+			echo "<script>\n";
+			//load icons by search
+			echo "function load_icons(search) {\n";
+			echo "	xhttp = new XMLHttpRequest();\n";
+			echo "	xhttp.open('GET', '".PROJECT_PATH."/resources/fontawesome/fa_icons.php?output=icons' + (search ? '&search=' + search : ''), false);\n";
+			echo "	xhttp.send();\n";
+			echo "	document.getElementById('icons').innerHTML = xhttp.responseText;\n";
+			echo "}\n";
+			//delay kepress for 1/2 second
+			echo "var keypress_timer;\n";
+			echo "function delay_submit(search) {\n";
+			echo "	clearTimeout(keypress_timer);\n";
+			echo "	keypress_timer = setTimeout(function(){\n";
+			echo "		load_icons(search);\n";
+			echo "	}, 500);\n";
+			echo "}\n";
+			echo "</script>\n";
 		}
 		else {
 			echo "		<input type='text' class='formfld' name='dashboard_icon' value='".escape($dashboard_icon)."'>";

core/menu/menu_item_edit.php

@@ -435,62 +435,44 @@
 	echo "		<td class='vtable' style='vertical-align: bottom;'>";
 	if (file_exists($_SERVER["PROJECT_ROOT"].'/resources/fontawesome/fa_icons.php')) {
 		include $_SERVER["PROJECT_ROOT"].'/resources/fontawesome/fa_icons.php';
-		if (!empty($font_awesome_icons) && is_array($font_awesome_icons)) {
-			//initialize variables
-			$previous_icon_classes = $previous_icon_name = $previous_icon_style = '';
-			//rebuild array, parse and format label
-			foreach ($font_awesome_icons as $i => $icon_classes) {
-				//split classes
-				$icon_class = explode(' ', $icon_classes);
-				$icon_style = $icon_class[0];
-				$icon_name = $icon_class[1];
-				//determine label
-				$icon_label = str_replace('fa-', '', $icon_name);
-				$icon_label = str_replace('-', ' ', $icon_label);
-				$icon_label = ucwords($icon_label);
-				//update previous
-				if (
-					!empty($previous_icon_name) &&
-					!empty($previous_icon_style) &&
-					$icon_name == $previous_icon_name &&
-					$icon_style != $previous_icon_style
-					) {
-					$icons[$previous_icon_classes] = $icon_label.' - '.ucwords(str_replace('fa-', '', $previous_icon_style));
-					$append_style = true;
-				}
-				else {
-					$append_style = false;
-				}
-				//set current
-				$icons[$icon_classes] = $icon_label.($append_style ? ' - '.ucwords(str_replace('fa-', '', $icon_style)) : null);
-				//set previous values
-				$previous_icon_name = $icon_name;
-				$previous_icon_style = $icon_style;
-				$previous_icon_classes = $icon_classes;
-			}
-			unset($icon_classes, $icon_class, $icon_style, $icon_name, $previous_icon_classes, $previous_icon_style, $previous_icon_name, $icon_label, $previous_icon_name, $previous_icon_style, $previous_icon_classes);
-			echo "<table cellpadding='0' cellspacing='0' border='0'>\n";
-			echo "	<tr>\n";
-			echo "		<td>\n";
-			echo "			<select class='formfld' name='menu_item_icon' id='menu_item_icon' onchange=\"$('#icons').slideUp(); $('#grid_icon').fadeIn();\">\n";
-			echo "				<option value=''></option>\n";
-			foreach ($icons as $icon_class => $icon_label) {
-				$selected = $menu_item_icon == $icon_class ? "selected" : null;
-				echo "			<option value='".escape($icon_class)."' ".$selected.">".escape($icon_label)."</option>\n";
-			}
-			echo "			</select>\n";
-			echo "		</td>\n";
-			echo "		<td style='padding: 0 0 0 5px;'>\n";
-			echo "			<button id='grid_icon' type='button' class='btn btn-default list_control_icon' style='font-size: 15px; padding-top: 1px; padding-left: 3px;' onclick=\"$('#icons').fadeIn(); $(this).fadeOut();\"><span class='fa-solid fa-th'></span></button>";
-			echo "		</td>\n";
-			echo "	</tr>\n";
-			echo "</table>\n";
-			echo "<div id='icons' style='clear: both; display: none; margin-top: 8px; padding-top: 10px; color: #000; max-height: 400px; overflow: auto;'>\n";
-			foreach ($icons as $icon_class => $icon_label) {
-				echo "<span class='".escape($icon_class)." fa-fw' style='font-size: 24px; float: left; margin: 0 8px 8px 0; cursor: pointer; opacity: 0.3;' title='".escape($icon_label)."' onclick=\"$('#menu_item_icon').val('".escape($icon_class)."'); $('#icons').slideUp(); $('#grid_icon').fadeIn();\" onmouseover=\"this.style.opacity='1';\" onmouseout=\"this.style.opacity='0.3';\"></span>\n";
-			}
-			echo "</div>";
+	}
+	if (!empty($font_awesome_icons) && is_array($font_awesome_icons)) {
+		echo "<table cellpadding='0' cellspacing='0' border='0'>\n";
+		echo "	<tr>\n";
+		echo "		<td>\n";
+		echo "			<select class='formfld' name='menu_item_icon' id='selected_icon' onchange=\"$('#icons').slideUp(200); $('#icon_search').fadeOut(200, function() { $('#grid_icon').fadeIn(); });\">\n";
+		echo "				<option value=''></option>\n";
+		foreach ($font_awesome_icons as $icon) {
+			$selected = $menu_item_icon == implode(' ', $icon['classes']) ? "selected" : null;
+			echo "			<option value='".escape(implode(' ', $icon['classes']))."' ".$selected.">".escape($icon['label'])."</option>\n";
 		}
+		echo "			</select>\n";
+		echo "		</td>\n";
+		echo "		<td style='padding: 0 0 0 5px;'>\n";
+		echo "			<button id='grid_icon' type='button' class='btn btn-default list_control_icon' style='font-size: 15px; padding-top: 1px; padding-left: 3px;' onclick=\"load_icons(); $(this).fadeOut(200, function() { $('#icons').fadeIn(200); $('#icon_search').fadeIn(200).focus(); });\"><span class='fa-solid fa-th'></span></button>";
+		echo "			<input id='icon_search' type='text' class='formfld' style='display: none;' onkeyup=\"if (this.value.length >= 3) { delay_submit(this.value); } else if (this.value == '') { load_icons(); } else { $('#icons').html(''); }\" placeholder=\"".$text['label-search']."\">\n";
+		echo "		</td>\n";
+		echo "	</tr>\n";
+		echo "</table>\n";
+		echo "<div id='icons' style='clear: both; display: none; margin-top: 8px; padding-top: 10px; color: #000; max-height: 400px; overflow: auto;'></div>";
+
+		echo "<script>\n";
+		//load icons by search
+		echo "function load_icons(search) {\n";
+		echo "	xhttp = new XMLHttpRequest();\n";
+		echo "	xhttp.open('GET', '".PROJECT_PATH."/resources/fontawesome/fa_icons.php?output=icons' + (search ? '&search=' + search : ''), false);\n";
+		echo "	xhttp.send();\n";
+		echo "	document.getElementById('icons').innerHTML = xhttp.responseText;\n";
+		echo "}\n";
+		//delay kepress for 1/2 second
+		echo "var keypress_timer;\n";
+		echo "function delay_submit(search) {\n";
+		echo "	clearTimeout(keypress_timer);\n";
+		echo "	keypress_timer = setTimeout(function(){\n";
+		echo "		load_icons(search);\n";
+		echo "	}, 500);\n";
+		echo "}\n";
+		echo "</script>\n";
 	}
 	else {
 		echo "		<input type='text' class='formfld' name='menu_item_icon' value='".escape($menu_item_icon)."'>";

resources/fontawesome/fa_icons.php

@@ -34,15 +34,85 @@ if (file_exists($_SERVER["PROJECT_ROOT"].'/resources/fontawesome/metadata/icons.
 	if (!empty($icons_json)) {
 		$icons_array = json_decode($icons_json, true);
 		if (!empty($icons_array) && is_array($icons_array)) {
+			$i = 0;
 			foreach ($icons_array as $icon_name => $properties) {
+				//loop through free icons
 				if (!empty($properties['free']) && is_array($properties['free'])) {
 					foreach ($properties['free'] as $icon_style) {
-						$font_awesome_icons[] = 'fa-'.$icon_style.' fa-'.$icon_name;
+						//if search terms exist, add them to array
+						$terms = [];
+						if (!empty($properties['search']['terms']) && is_array($properties['search']['terms'])) {
+							foreach ($properties['search']['terms'] as $term) {
+								$words = explode(' ', $term);
+								foreach ($words as $word) {
+									if (strlen($word) >= 3) {
+										$terms[] = strtolower($word);
+									}
+								}
+								unset($words);
+							}
+						}
+						//add icon name *words* themselves as search terms
+						if (strlen(str_replace('fa-', '', $icon_name)) >= 3) {
+							$words = explode(' ', str_replace(['fa-','-'], ['',' '], $icon_name));
+							foreach ($words as $word) {
+								if (strlen($word) >= 3) {
+									$terms[] = strtolower($word);
+								}
+							}
+							unset($words);
+						}
+						//remove duplicate terms
+						if (!empty($terms) && is_array($terms)) {
+							$terms = array_unique($terms);
+						}
+						//filter by search, if submitted
+						if (
+							!empty($_GET['search']) &&
+							strlen(trim($_GET['search'])) >= 3 &&
+							(
+								empty($terms) ||
+								(
+									!empty($terms) &&
+									is_array($terms) &&
+									!in_array(trim(strtolower($_GET['search'])), $terms)
+								)
+							)
+							) {
+							continue;
+						}
+						$font_awesome_icons[$i]['terms'] = $terms;
+						//add classes (icon style and name)
+						$font_awesome_icons[$i]['classes']['style'] = 'fa-'.$icon_style;
+						$font_awesome_icons[$i]['classes']['name'] = 'fa-'.$icon_name;
+						//detmine whether to append style to previous (and current) label
+						$append_style = false;
+						if (
+							$i != 0 &&
+							$font_awesome_icons[$i - 1]['classes']['name'] == $font_awesome_icons[$i]['classes']['name'] &&
+							$font_awesome_icons[$i - 1]['classes']['style'] != $font_awesome_icons[$i]['classes']['style']
+							) {
+							$font_awesome_icons[$i - 1]['label'] .= ' - '.ucwords(str_replace('fa-', '', $font_awesome_icons[$i - 1]['classes']['style']));
+							$append_style = true;
+						}
+						//determine label
+						$font_awesome_icons[$i]['label'] = ucwords(str_replace(['fa-','-'], ['',' '], $icon_name)).($append_style ? ' - '.ucwords(str_replace('fa-', '', $font_awesome_icons[$i]['classes']['style'])) : null);
+						//clear vars
+						$i++;
 					}
 				}
 			}
 		}
 	}
 }
+// view_array($font_awesome_icons);
 
-//view_array($font_awesome_icons, 0);
+//output icons
+if (
+	!empty($_GET['output']) && $_GET['output'] == 'icons' &&
+	!empty($font_awesome_icons) && is_array($font_awesome_icons)
+	) {
+	foreach ($font_awesome_icons as $icon) {
+		echo "<span class='".escape(implode(' ', $icon['classes']))." fa-fw' style='font-size: 24px; float: left; margin: 0 8px 8px 0; cursor: pointer; opacity: 0.3;' title='".escape($icon['label'])."' onclick=\"$('#selected_icon').val('".escape(implode(' ', $icon['classes']))."'); $('#icons').slideUp(); $('#icon_search').fadeOut(200, function() { $('#icon_search').val(''); $('#grid_icon').fadeIn(); });\" onmouseover=\"this.style.opacity='1';\" onmouseout=\"this.style.opacity='0.3';\"></span>\n";
+	}
+}