From ccc21a8c94d9ee3d9cb2d1f869837bd03336ac9d Mon Sep 17 00:00:00 2001 From: mrgoldy Date: Mon, 9 Sep 2019 16:27:16 +0200 Subject: [ticket/12539] Live member search improvements PHPBB3-12539 --- phpBB/assets/javascript/core.js | 96 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 93 insertions(+), 3 deletions(-) (limited to 'phpBB/assets') diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js index 2ce20a3b1a..817adecfc4 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,8 @@ 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); }); }; @@ -584,9 +587,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,6 +707,8 @@ phpbb.search.showResults = function(results, $input, $container, callback) { row.appendTo($resultContainer).show(); }); $container.show(); + + phpbb.search.navigateResults($input, $container, $resultContainer); }; /** @@ -708,11 +720,89 @@ 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('.searchNavigation'); + $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 (.searchNavigation), + // so it can be unbound specifically later on. + $input.on('keydown.searchNavigation', function(event) { + let key = event.keyCode || event.which, + $active = $resultContainer.children('.active'); + + switch (key) { + // Set the value for the selected result + case keymap.ENTER: + if ($active.length) { + let 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; + + // Close the results + case keymap.ESC: + phpbb.search.closeResults($input, $container); + break; + + // Navigate the results + case keymap.ARROW_DOWN: + case keymap.ARROW_UP: + let up = key === keymap.ARROW_UP; + + if (!$active.length) { + if (up) { + $resultContainer.children().last().addClass('active'); + } else { + $resultContainer.children().first().addClass('active'); + } + } else { + if (up) { + if ($active.is(':first-child')) { + $resultContainer.children().last().addClass('active'); + } else { + $active.prev().addClass('active'); + } + } else { + if ($active.is(':last-child')) { + $resultContainer.children().first().addClass('active'); + } else { + $active.next().addClass('active'); + } + } + + $active.removeClass('active'); + } + 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')); } }); -- cgit v1.2.1 From fe7118aea0533061fdcaf8e20745c926f6fd6f5d Mon Sep 17 00:00:00 2001 From: mrgoldy Date: Tue, 22 Oct 2019 22:19:07 +0200 Subject: [ticket/12539] Change let to var in jQuery PHPBB3-12539 --- phpBB/assets/javascript/core.js | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) (limited to 'phpBB/assets') diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js index 817adecfc4..f3c494d8ac 100644 --- a/phpBB/assets/javascript/core.js +++ b/phpBB/assets/javascript/core.js @@ -563,7 +563,6 @@ 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')); - phpbb.search.closeResults($input, $container); }); }; @@ -578,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), @@ -714,7 +713,7 @@ phpbb.search.showResults = function(results, $input, $container, callback) { /** * 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(); @@ -723,33 +722,33 @@ phpbb.search.clearResults = function($container) { /** * Close search results. * - * @param {jQuery} $input Search input|textarea. - * @param {jQuery} $container Search results container. + * @param {jQuery} $input Search input|textarea. + * @param {jQuery} $container Search results container. */ phpbb.search.closeResults = function($input, $container) { - $input.off('.searchNavigation'); + $input.off('.phpbb.search'); $container.hide(); }; /** * Navigate search results. * - * @param {jQuery} $input Search input|textarea. - * @param {jQuery} $container Search results container. + * @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 (.searchNavigation), + // Add a namespace to the event (.phpbb.search), // so it can be unbound specifically later on. - $input.on('keydown.searchNavigation', function(event) { - let key = event.keyCode || event.which, + $input.on('keydown.phpbb.search', function(event) { + var key = event.keyCode || event.which, $active = $resultContainer.children('.active'); switch (key) { // Set the value for the selected result case keymap.ENTER: if ($active.length) { - let value = $active.find('.search-result > span').text(); + var value = $active.find('.search-result > span').text(); phpbb.search.setValue($input, value, $input.attr('data-multiline')); } @@ -768,24 +767,25 @@ phpbb.search.navigateResults = function($input, $container, $resultContainer) { // Navigate the results case keymap.ARROW_DOWN: case keymap.ARROW_UP: - let up = key === keymap.ARROW_UP; + var up = key === keymap.ARROW_UP, + $children = $resultContainer.children(); if (!$active.length) { if (up) { - $resultContainer.children().last().addClass('active'); + $children.last().addClass('active'); } else { - $resultContainer.children().first().addClass('active'); + $children.first().addClass('active'); } - } else { + } else if ($children.length > 1) { if (up) { if ($active.is(':first-child')) { - $resultContainer.children().last().addClass('active'); + $children.last().addClass('active'); } else { $active.prev().addClass('active'); } } else { if ($active.is(':last-child')) { - $resultContainer.children().first().addClass('active'); + $children.first().addClass('active'); } else { $active.next().addClass('active'); } -- cgit v1.2.1 From ade88f020e231c8961b0a21c3291297c72d84182 Mon Sep 17 00:00:00 2001 From: mrgoldy Date: Tue, 22 Oct 2019 22:20:27 +0200 Subject: [ticket/12539] Reposition ESC to be on top PHPBB3-12539 --- phpBB/assets/javascript/core.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'phpBB/assets') diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js index f3c494d8ac..8148da9f20 100644 --- a/phpBB/assets/javascript/core.js +++ b/phpBB/assets/javascript/core.js @@ -745,6 +745,11 @@ phpbb.search.navigateResults = function($input, $container, $resultContainer) { $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) { @@ -759,11 +764,6 @@ phpbb.search.navigateResults = function($input, $container, $resultContainer) { event.preventDefault(); break; - // Close the results - case keymap.ESC: - phpbb.search.closeResults($input, $container); - break; - // Navigate the results case keymap.ARROW_DOWN: case keymap.ARROW_UP: -- cgit v1.2.1 From 9cb1119d1e7fa880331f1ff4a171b36eb6a77413 Mon Sep 17 00:00:00 2001 From: mrgoldy Date: Mon, 28 Oct 2019 20:29:51 +0100 Subject: [ticket/12539] Prevent cursor repositioning PHPBB3-12539 --- phpBB/assets/javascript/core.js | 3 +++ 1 file changed, 3 insertions(+) (limited to 'phpBB/assets') diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js index 8148da9f20..6d30038b77 100644 --- a/phpBB/assets/javascript/core.js +++ b/phpBB/assets/javascript/core.js @@ -793,6 +793,9 @@ phpbb.search.navigateResults = function($input, $container, $resultContainer) { $active.removeClass('active'); } + + // Do not change cursor position in the input element + event.preventDefault(); break; } }); -- cgit v1.2.1