pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web_editor: properly navigate Powebox commands with arrow keys

Browse Source 
The commands are grouped by command group when rendered by the Powerbox.
That creates a dissociation between the order in which they are rendered
and the order of the arrays in which they are present in the code. The
mechanism to navigate between them with the arrow keys is however
dependent on the latter. As a result we may end up with a visually
disordered navigation.
This adds a private function to reorder these arrays in the same way as
they are rendered, thereby fixing the dissociation.

task-2802749

closes odoo/odoo#87209

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This commit is contained in:
Antoine Guenet
2022-04-07 17:57:23 +02:00
parent ca79036764
commit bf25bf4161
1 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/lib/odoo-editor/src/powerbox/Powerbox.js
+17 -4
View File
@@ -156,6 +156,7 @@ export class Powerbox {
open(openOptions) {
this.options.onActivate && this.options.onActivate();
this._currentOpenOptions = openOptions;
this._currentOpenOptions.commands = this._orderCommandsByGroup(openOptions.commands);
const openOnKeyupTarget =
this._currentOpenOptions.openOnKeyupTarget || this.options.editable;
@@ -285,6 +286,7 @@ export class Powerbox {
nextOpenOptions(openOptions) {
this._currentOpenOptions = openOptions;
this._currentOpenOptions.commands = this._orderCommandsByGroup(openOptions.commands);
this._initialValue = (
this._currentOpenOptions.openOnKeyupTarget || this.options.editable
).textContent;
@@ -304,11 +306,11 @@ export class Powerbox {
}
// -------------------------------------------------------------------------
// private
// Private
// -------------------------------------------------------------------------
_filter(term, commands) {
const initalCommands = commands;
const initialCommands = commands;
term = term.toLowerCase();
term = term.replaceAll(/\s/g, '\\s');
const regex = new RegExp(
@@ -318,14 +320,25 @@ export class Powerbox {
.join('.*'),
);
if (term.length) {
commands = initalCommands.filter(command => {
commands = initialCommands.filter(command => {
const commandText = (command.groupName + ' ' + command.title).toLowerCase();
return commandText.match(regex);
});
}
return commands;
}
_orderCommandsByGroup(commands) {
const groups = {};
for (const command of commands) {
groups[command.groupName] = groups[command.groupName] || [];
groups[command.groupName].push(command);
}
const reorderedCommands = [];
for (const groupCommands of Object.values(groups)) {
reorderedCommands.push(...groupCommands);
}
return reorderedCommands;
}
_resetPosition() {
const position = getRangePosition(this.el, this.options.document);
if (!position) {