WebUI: Use event delegation to handle common table events

Event delegation is now used to handle basic table events.
2 minor fixes were added to match GUI behavior:
* Clicking on the table body deselects everything
* Table rows are now scrolled into view when using up/down arrows

PR #21829.
This commit is contained in:
skomerko
2024-11-18 19:12:26 +01:00
committed by GitHub
parent ea35aa45d6
commit c9c85eeb95
8 changed files with 142 additions and 173 deletions

View File

@@ -95,7 +95,7 @@
const setup = () => {
searchPluginsTable = new window.qBittorrent.DynamicTable.SearchPluginsTable();
searchPluginsTableContextMenu = new window.qBittorrent.ContextMenu.SearchPluginsTableContextMenu({
targets: ".searchPluginsTableRow",
targets: "#searchPluginsTableDiv tr",
menu: "searchPluginsTableMenu",
actions: {
Enabled: enablePlugin,
@@ -104,6 +104,12 @@
offsets: calculateContextMenuOffsets()
});
searchPluginsTable.setup("searchPluginsTableDiv", "searchPluginsTableFixedHeaderDiv", searchPluginsTableContextMenu);
searchPluginsTable.dynamicTableDiv.addEventListener("dblclick", (e) => { enablePlugin(); });
searchPluginsTable.dynamicTableDiv.addEventListener("contextmenu", (e) => {
updateSearchPluginsTableContextMenuOffset();
}, true);
updateTable();
};
@@ -181,27 +187,7 @@
searchPluginsTableContextMenu.options.offsets = calculateContextMenuOffsets();
};
const setupSearchPluginTableEvents = (enable) => {
const clickHandler = (e) => { enablePlugin(); };
const menuHandler = (e) => { updateSearchPluginsTableContextMenuOffset(); };
if (enable) {
$$(".searchPluginsTableRow").each((target) => {
target.addEventListener("dblclick", clickHandler);
target.addEventListener("contextmenu", menuHandler, true);
});
}
else {
$$(".searchPluginsTableRow").each((target) => {
target.removeEventListener("dblclick", clickHandler);
target.removeEventListener("contextmenu", menuHandler, true);
});
}
};
const updateTable = () => {
// clear event listeners
setupSearchPluginTableEvents(false);
const oldPlugins = [...searchPluginsTable.getRowIds()];
// remove old rows from the table
for (let i = 0; i < oldPlugins.length; ++i) {
@@ -222,9 +208,6 @@
}
searchPluginsTable.updateTable();
// add event listeners
setupSearchPluginTableEvents(true);
};
return exports();