aboutsummaryrefslogtreecommitdiffstats
path: root/phpBB
diff options
context:
space:
mode:
authorMarc Alexander <admin@m-a-styles.de>2019-11-06 21:28:05 +0100
committerMarc Alexander <admin@m-a-styles.de>2019-11-06 21:28:05 +0100
commit5d6f8c8bd91eaed92631bbedd989e37e7ebc1c31 (patch)
tree935421667598a3806fb9da6bb15969336bfe481d /phpBB
parent78ce646c699d3874bb1662832528f10ce9e9d7a5 (diff)
parent9cb1119d1e7fa880331f1ff4a171b36eb6a77413 (diff)
downloadforums-5d6f8c8bd91eaed92631bbedd989e37e7ebc1c31.tar
forums-5d6f8c8bd91eaed92631bbedd989e37e7ebc1c31.tar.gz
forums-5d6f8c8bd91eaed92631bbedd989e37e7ebc1c31.tar.bz2
forums-5d6f8c8bd91eaed92631bbedd989e37e7ebc1c31.tar.xz
forums-5d6f8c8bd91eaed92631bbedd989e37e7ebc1c31.zip
Merge pull request #5684 from mrgoldy/ticket/12539
[ticket/12539] Live member search improvements
Diffstat (limited to 'phpBB')
-rw-r--r--phpBB/assets/javascript/core.js103
-rw-r--r--phpBB/styles/prosilver/template/memberlist_search.html2
-rw-r--r--phpBB/styles/prosilver/theme/colours.css5
-rw-r--r--phpBB/styles/prosilver/theme/forms.css2
4 files changed, 105 insertions, 7 deletions
diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js
index bb38441622..4a61490615 100644
--- a/phpBB/assets/javascript/core.js
+++ b/phpBB/assets/javascript/core.js
@@ -11,7 +11,9 @@ phpbb.alertTime = 100;
var keymap = {
TAB: 9,
ENTER: 13,
- ESC: 27
+ ESC: 27,
+ ARROW_UP: 38,
+ ARROW_DOWN: 40
};
var $dark = $('#darkenwrapper');
@@ -561,7 +563,7 @@ phpbb.search.setValue = function($input, value, multiline) {
phpbb.search.setValueOnClick = function($input, value, $row, $container) {
$row.click(function() {
phpbb.search.setValue($input, value.result, $input.attr('data-multiline'));
- $container.hide();
+ phpbb.search.closeResults($input, $container);
});
};
@@ -575,7 +577,7 @@ phpbb.search.setValueOnClick = function($input, value, $row, $container) {
* @param {object} event Onkeyup event object.
* @param {function} sendRequest Function to execute AJAX request.
*
- * @returns {bool} Returns false.
+ * @returns {boolean} Returns false.
*/
phpbb.search.filter = function(data, event, sendRequest) {
var $this = $(this),
@@ -584,9 +586,16 @@ phpbb.search.filter = function(data, event, sendRequest) {
searchID = $this.attr('data-results'),
keyword = phpbb.search.getKeyword($this, data[dataName], $this.attr('data-multiline')),
cache = phpbb.search.cache.get(searchID),
+ key = event.keyCode || event.which,
proceed = true;
data[dataName] = keyword;
+ // No need to search if enter was pressed
+ // for selecting a value from the results.
+ if (key === keymap.ENTER) {
+ return false;
+ }
+
if (cache.timeout) {
clearTimeout(cache.timeout);
}
@@ -697,22 +706,106 @@ phpbb.search.showResults = function(results, $input, $container, callback) {
row.appendTo($resultContainer).show();
});
$container.show();
+
+ phpbb.search.navigateResults($input, $container, $resultContainer);
};
/**
* Clear search results.
*
- * @param {jQuery} $container Search results container.
+ * @param {jQuery} $container Search results container.
*/
phpbb.search.clearResults = function($container) {
$container.children(':not(.search-result-tpl)').remove();
};
+/**
+ * Close search results.
+ *
+ * @param {jQuery} $input Search input|textarea.
+ * @param {jQuery} $container Search results container.
+ */
+phpbb.search.closeResults = function($input, $container) {
+ $input.off('.phpbb.search');
+ $container.hide();
+};
+
+/**
+ * Navigate search results.
+ *
+ * @param {jQuery} $input Search input|textarea.
+ * @param {jQuery} $container Search results container.
+ * @param {jQuery} $resultContainer Search results list container.
+ */
+phpbb.search.navigateResults = function($input, $container, $resultContainer) {
+ // Add a namespace to the event (.phpbb.search),
+ // so it can be unbound specifically later on.
+ $input.on('keydown.phpbb.search', function(event) {
+ var key = event.keyCode || event.which,
+ $active = $resultContainer.children('.active');
+
+ switch (key) {
+ // Close the results
+ case keymap.ESC:
+ phpbb.search.closeResults($input, $container);
+ break;
+
+ // Set the value for the selected result
+ case keymap.ENTER:
+ if ($active.length) {
+ var value = $active.find('.search-result > span').text();
+
+ phpbb.search.setValue($input, value, $input.attr('data-multiline'));
+ }
+
+ phpbb.search.closeResults($input, $container);
+
+ // Do not submit the form
+ event.preventDefault();
+ break;
+
+ // Navigate the results
+ case keymap.ARROW_DOWN:
+ case keymap.ARROW_UP:
+ var up = key === keymap.ARROW_UP,
+ $children = $resultContainer.children();
+
+ if (!$active.length) {
+ if (up) {
+ $children.last().addClass('active');
+ } else {
+ $children.first().addClass('active');
+ }
+ } else if ($children.length > 1) {
+ if (up) {
+ if ($active.is(':first-child')) {
+ $children.last().addClass('active');
+ } else {
+ $active.prev().addClass('active');
+ }
+ } else {
+ if ($active.is(':last-child')) {
+ $children.first().addClass('active');
+ } else {
+ $active.next().addClass('active');
+ }
+ }
+
+ $active.removeClass('active');
+ }
+
+ // Do not change cursor position in the input element
+ event.preventDefault();
+ break;
+ }
+ });
+};
+
$('#phpbb').click(function() {
var $this = $(this);
if (!$this.is('.live-search') && !$this.parents().is('.live-search')) {
- $('.live-search').hide();
+ phpbb.search.closeResults($('input, textarea'), $('.live-search'));
}
});
diff --git a/phpBB/styles/prosilver/template/memberlist_search.html b/phpBB/styles/prosilver/template/memberlist_search.html
index b1c7a81709..34915ebc41 100644
--- a/phpBB/styles/prosilver/template/memberlist_search.html
+++ b/phpBB/styles/prosilver/template/memberlist_search.html
@@ -12,7 +12,7 @@
<dt><label for="username">{L_USERNAME}{L_COLON}</label></dt>
<dd>
<!-- IF U_LIVE_SEARCH --><div class="dropdown-container dropdown-{S_CONTENT_FLOW_END}"><!-- ENDIF -->
- <input type="text" name="username" id="username" value="{USERNAME}" class="inputbox"<!-- IF U_LIVE_SEARCH --> autocomplete="off" data-filter="phpbb.search.filter" data-ajax="member_search" data-min-length="3" data-url="{U_LIVE_SEARCH}" data-results="#user-search" data-overlay="false"<!-- ENDIF --> />
+ <input type="text" name="username" id="username" value="{USERNAME}" class="inputbox"<!-- IF U_LIVE_SEARCH --> autocomplete="off" data-filter="phpbb.search.filter" data-ajax="member_search" data-min-length="3" data-url="{U_LIVE_SEARCH}" data-results="#user-search"<!-- ENDIF --> />
<!-- IF U_LIVE_SEARCH -->
<div class="dropdown live-search hidden" id="user-search">
<div class="pointer"><div class="pointer-inner"></div></div>
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css
index ffaa71034f..1ead493926 100644
--- a/phpBB/styles/prosilver/theme/colours.css
+++ b/phpBB/styles/prosilver/theme/colours.css
@@ -672,6 +672,11 @@ Colours and backgrounds for buttons.css
box-shadow: 0 0 10px #0075B0;
}
+.search-results li:hover,
+.search-results li.active {
+ background-color: #CFE1F6;
+}
+
/* Icon images
---------------------------------------- */
diff --git a/phpBB/styles/prosilver/theme/forms.css b/phpBB/styles/prosilver/theme/forms.css
index 5646a7d6c7..99c898f41e 100644
--- a/phpBB/styles/prosilver/theme/forms.css
+++ b/phpBB/styles/prosilver/theme/forms.css
@@ -355,7 +355,7 @@ input.button3 {
font-variant: small-caps;
}
-input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"], input[type="radio"] {
+input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"], input[type="radio"], .search-results li {
cursor: pointer;
}
generated by cgit v1.2.1 (git 2.21.0) at 2024-09-12 10:51:01 +0000