added shortcut filter in the options dialog

This commit is contained in:
zadam 2019-11-24 20:20:13 +01:00
parent 499c9a7381
commit 3a54d00e2b

View File

@ -6,6 +6,10 @@ const TPL = `
<p>Multiple shortcuts for the same action can be separated by comma.</p> <p>Multiple shortcuts for the same action can be separated by comma.</p>
<div class="form-group">
<input type="text" class="form-control" id="keyboard-shortcut-filter" placeholder="Type text to filter shortcuts...">
</div>
<div style="overflow: auto; height: 500px;"> <div style="overflow: auto; height: 500px;">
<table id="keyboard-shortcut-table" cellpadding="10"> <table id="keyboard-shortcut-table" cellpadding="10">
<thead> <thead>
@ -27,6 +31,8 @@ const TPL = `
</div> </div>
`; `;
let globActions;
export default class KeyboardShortcutsOptions { export default class KeyboardShortcutsOptions {
constructor() { constructor() {
$("#options-keyboard-shortcuts").html(TPL); $("#options-keyboard-shortcuts").html(TPL);
@ -36,6 +42,8 @@ export default class KeyboardShortcutsOptions {
const $table = $("#keyboard-shortcut-table tbody"); const $table = $("#keyboard-shortcut-table tbody");
server.get('keyboard-actions').then(actions => { server.get('keyboard-actions').then(actions => {
globActions = actions;
for (const action of actions) { for (const action of actions) {
const $tr = $("<tr>"); const $tr = $("<tr>");
@ -95,5 +103,39 @@ export default class KeyboardShortcutsOptions {
} }
}); });
}); });
const $filter = $("#keyboard-shortcut-filter");
$filter.on('keyup', () => {
const filter = $filter.val().trim().toLowerCase();
$table.find("tr").each((i, el) => {
if (!filter) {
$(el).show();
return;
}
const actionName = $(el).find('input').attr('data-keyboard-action-name');
if (!actionName) {
$(el).hide();
return;
}
const action = globActions.find(act => act.actionName === actionName);
if (!action) {
$(el).hide();
return;
}
$(el).toggle(!!( // !! to avoid toggle overloads with different behavior
action.actionName.toLowerCase().includes(filter)
|| action.defaultShortcuts.some(shortcut => shortcut.toLowerCase().includes(filter))
|| action.effectiveShortcuts.some(shortcut => shortcut.toLowerCase().includes(filter))
|| (action.description && action.description.toLowerCase().includes(filter))
));
});
});
} }
} }