feat(widgets): it is now possible to filter the widgets in the add panel

Elgg · Dec 16, 2022 · 7d95d87 · 7d95d87
1 parent da2c197
commit 7d95d87
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 10 deletions.
diff --git a/views/default/elements/widgets.css b/views/default/elements/widgets.css
@@ -29,17 +29,22 @@
 	padding: 0.5rem;
 }
 
-.elgg-widgets-add-panel ul {
-	border-top: 1px solid $(border-color-soft);
-	margin-top: 0.5rem;
+.elgg-widgets-add-panel {
+	input[name="widget_search"] {
+		height: auto;
+	}
 
-	> li {
-		padding: 0.5rem;
-		transition: background 0.2s linear;
-		border-bottom: 1px solid $(border-color-soft);
+	ul {
+		margin-top: 0.5rem;
 
-		&:hover {
-			background: $(background-color-mild);
+		> li {
+			padding: 0.5rem;
+			transition: background 0.2s linear;
+			border-bottom: 1px solid $(border-color-soft);
+
+			&:hover {
+				background: $(background-color-mild);
+			}
 		}
 	}
 }

diff --git a/views/default/resources/widgets/add_panel.js b/views/default/resources/widgets/add_panel.js
@@ -44,4 +44,19 @@ define(['jquery', 'elgg/Ajax'], function($, Ajax) {
 	};
 
 	$(document).on('click', '.elgg-widgets-add-panel .elgg-widgets-add-actions .elgg-button-submit', addWidget);
+
+	$(document).on('keyup', '.elgg-widgets-add-panel input[name="widget_search"]', function() {
+		var $container = $('.elgg-widgets-add-panel');
+		var $items = $container.find('> .elgg-body > ul > li');
+		var q = $(this).val();
+
+		if (q === '') {
+			$items.show();
+		} else {
+			$items.hide();
+			$items.filter(function () {
+				return $(this).text().toUpperCase().indexOf(q.toUpperCase()) >= 0;
+			}).show();
+		}
+	});
 });
diff --git a/views/default/resources/widgets/add_panel.php b/views/default/resources/widgets/add_panel.php
@@ -103,4 +103,13 @@
 
 $result .= elgg_format_element('ul', [], $list_items);
 
-echo elgg_view_module('aside', elgg_echo('widgets:add'), $result, ['class' => 'elgg-widgets-add-panel']);
+$search_box = elgg_view('input/text', [
+	'name' => 'widget_search',
+	'title' => elgg_echo('search'),
+	'placeholder' => elgg_echo('search'),
+]);
+
+echo elgg_view_module('info', elgg_echo('widgets:add'), $result, [
+	'class' => 'elgg-widgets-add-panel',
+	'menu' => $search_box,
+]);