Skip to content

Commit

Permalink
Merge pull request #21215 from Chocobo1/webui_event_param
Browse files Browse the repository at this point in the history 
WebUI: improve event handlers
  • Loading branch information
@Chocobo1
Chocobo1 committed Aug 19, 2024
2 parents f09d43d + 98623b2 commit 9c370bf
Show file tree
Hide file tree
Showing 8 changed files with 67 additions and 65 deletions.
36 changes: 20 additions & 16 deletions src/webui/www/private/scripts/client.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,11 +165,11 @@ window.addEventListener("DOMContentLoaded", () => {
LocalPreferences.set("properties_height_rel", properties_height_rel);
};

window.addEventListener("resize", () => {
window.addEventListener("resize", window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
// only save sizes if the columns are visible
if (!$("mainColumn").hasClass("invisible"))
saveColumnSizes.delay(200); // Resizing might takes some time.
});
saveColumnSizes();
}));

/* MochaUI.Desktop = new MochaUI.Desktop();
MochaUI.Desktop.desktop.style.background = "#fff";
Expand All @@ -181,7 +181,9 @@ window.addEventListener("DOMContentLoaded", () => {
new MochaUI.Column({
id: "filtersColumn",
placement: "left",
onResize: saveColumnSizes,
onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveColumnSizes();
}),
width: filt_w,
resizeLimit: [1, 300]
});
Expand Down Expand Up @@ -1059,8 +1061,8 @@ window.addEventListener("DOMContentLoaded", () => {
}).send();
});

$("DlInfos").addEventListener("click", globalDownloadLimitFN);
$("UpInfos").addEventListener("click", globalUploadLimitFN);
$("DlInfos").addEventListener("click", () => { globalDownloadLimitFN(); });
$("UpInfos").addEventListener("click", () => { globalUploadLimitFN(); });

$("showTopToolbarLink").addEventListener("click", (e) => {
showTopToolbar = !showTopToolbar;
Expand Down Expand Up @@ -1206,7 +1208,7 @@ window.addEventListener("DOMContentLoaded", () => {
$("mainWindowTabs").addClass("invisible");
};

$("StatisticsLink").addEventListener("click", StatisticsLinkFN);
$("StatisticsLink").addEventListener("click", () => { StatisticsLinkFN(); });

// main window tabs

Expand Down Expand Up @@ -1449,7 +1451,9 @@ window.addEventListener("DOMContentLoaded", () => {
updateMainData();
},
column: "mainColumn",
onResize: saveColumnSizes,
onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveColumnSizes();
}),
height: null
});
let prop_h = LocalPreferences.get("properties_height_rel");
Expand Down Expand Up @@ -1567,10 +1571,10 @@ window.addEventListener("DOMContentLoaded", () => {

document.getElementById("torrentsFilterToolbar").addEventListener("change", (e) => { torrentsTable.updateTable(); });

$("transfersTabLink").addEventListener("click", showTransfersTab);
$("searchTabLink").addEventListener("click", showSearchTab);
$("rssTabLink").addEventListener("click", showRssTab);
$("logTabLink").addEventListener("click", showLogTab);
$("transfersTabLink").addEventListener("click", () => { showTransfersTab(); });
$("searchTabLink").addEventListener("click", () => { showSearchTab(); });
$("rssTabLink").addEventListener("click", () => { showRssTab(); });
$("logTabLink").addEventListener("click", () => { showLogTab(); });
updateTabDisplay();

const registerDragAndDrop = () => {
Expand Down Expand Up @@ -1614,9 +1618,9 @@ window.addEventListener("DOMContentLoaded", () => {
paddingHorizontal: 0,
width: loadWindowWidth(id, 500),
height: loadWindowHeight(id, 460),
onResize: () => {
onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id);
},
}),
onContentLoaded: () => {
const fileInput = $(`${id}_iframe`).contentDocument.getElementById("fileselect");
fileInput.files = droppedFiles;
Expand Down Expand Up @@ -1658,9 +1662,9 @@ window.addEventListener("DOMContentLoaded", () => {
paddingHorizontal: 0,
width: loadWindowWidth(id, 500),
height: loadWindowHeight(id, 600),
onResize: () => {
onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id);
}
})
});
}
});
Expand Down
8 changes: 4 additions & 4 deletions src/webui/www/private/scripts/contextmenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ window.qBittorrent.ContextMenu ??= (() => {
this.hide();
this.touchStartAt = performance.now();
this.touchStartEvent = e;
});
}, { passive: true });
elem.addEventListener("touchend", (e) => {
const now = performance.now();
const touchStartAt = this.touchStartAt;
Expand All @@ -168,7 +168,7 @@ window.qBittorrent.ContextMenu ??= (() => {
const isTargetUnchanged = (Math.abs(e.event.pageX - touchStartEvent.event.pageX) <= 10) && (Math.abs(e.event.pageY - touchStartEvent.event.pageY) <= 10);
if (((now - touchStartAt) >= this.options.touchTimer) && isTargetUnchanged)
this.triggerMenu(touchStartEvent, elem);
});
}, { passive: true });
},

addTarget: function(t) {
Expand Down Expand Up @@ -440,7 +440,7 @@ window.qBittorrent.ContextMenu ??= (() => {
const createMenuItem = (text, imgURL, clickFn) => {
const anchor = document.createElement("a");
anchor.textContent = text;
anchor.addEventListener("click", clickFn);
anchor.addEventListener("click", () => { clickFn(); });

const img = document.createElement("img");
img.src = imgURL;
Expand Down Expand Up @@ -495,7 +495,7 @@ window.qBittorrent.ContextMenu ??= (() => {
const createMenuItem = (text, imgURL, clickFn) => {
const anchor = document.createElement("a");
anchor.textContent = text;
anchor.addEventListener("click", clickFn);
anchor.addEventListener("click", () => { clickFn(); });

const img = document.createElement("img");
img.src = imgURL;
Expand Down
32 changes: 7 additions & 25 deletions src/webui/www/private/scripts/dynamicTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,8 +95,9 @@ window.qBittorrent.DynamicTable ??= (() => {
const tableDiv = $(this.dynamicTableDivId);
const tableFixedHeaderDiv = $(this.dynamicTableFixedHeaderDivId);

const tableElement = tableFixedHeaderDiv.querySelector("table");
tableDiv.addEventListener("scroll", () => {
tableFixedHeaderDiv.getElements("table")[0].style.left = `${-tableDiv.scrollLeft}px`;
tableElement.style.left = `${-tableDiv.scrollLeft}px`;
});

// if the table exists within a panel
Expand All @@ -118,14 +119,9 @@ window.qBittorrent.DynamicTable ??= (() => {
}
};

this.resizeDebounceTimer = -1;
const resizeDebouncer = (entries) => {
clearTimeout(this.resizeDebounceTimer);
this.resizeDebounceTimer = setTimeout(() => {
resizeFn(entries);
this.resizeDebounceTimer = -1;
}, 100);
};
const resizeDebouncer = window.qBittorrent.Misc.createDebounceHandler(100, (entries) => {
resizeFn(entries);
});

const resizeObserver = new ResizeObserver(resizeDebouncer);
resizeObserver.observe(parentPanel, { box: "border-box" });
Expand Down Expand Up @@ -278,7 +274,7 @@ window.qBittorrent.DynamicTable ??= (() => {
const th = ths[i];
th.addEventListener("mousemove", mouseMoveFn);
th.addEventListener("mouseout", mouseOutFn);
th.addEventListener("touchend", onTouch);
th.addEventListener("touchend", onTouch, { passive: true });
th.makeResizable({
modifiers: {
x: "",
Expand Down Expand Up @@ -766,7 +762,7 @@ window.qBittorrent.DynamicTable ??= (() => {
this._this.deselectAll();
this._this.selectRow(this.rowId);
}
});
}, { passive: true });
tr.addEventListener("keydown", function(event) {
switch (event.key) {
case "up":
Expand Down Expand Up @@ -2764,13 +2760,6 @@ window.qBittorrent.DynamicTable ??= (() => {

this.hiddenTableHeader.appendChild(new Element("th"));
this.fixedTableHeader.appendChild(new Element("th"));
},
setupCommonEvents: function() {
const scrollFn = function() {
$(this.dynamicTableFixedHeaderDivId).getElements("table")[0].style.left = -$(this.dynamicTableDivId).scrollLeft + "px";
}.bind(this);

$(this.dynamicTableDivId).addEventListener("scroll", scrollFn);
}
});

Expand Down Expand Up @@ -2859,13 +2848,6 @@ window.qBittorrent.DynamicTable ??= (() => {

this.hiddenTableHeader.appendChild(new Element("th"));
this.fixedTableHeader.appendChild(new Element("th"));
},
setupCommonEvents: function() {
const scrollFn = function() {
$(this.dynamicTableFixedHeaderDivId).getElements("table")[0].style.left = -$(this.dynamicTableDivId).scrollLeft + "px";
}.bind(this);

$(this.dynamicTableDivId).addEventListener("scroll", scrollFn);
}
});

Expand Down
13 changes: 13 additions & 0 deletions src/webui/www/private/scripts/misc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ window.qBittorrent ??= {};
window.qBittorrent.Misc ??= (() => {
const exports = () => {
return {
createDebounceHandler: createDebounceHandler,
friendlyUnit: friendlyUnit,
friendlyDuration: friendlyDuration,
friendlyPercentage: friendlyPercentage,
Expand All @@ -50,6 +51,18 @@ window.qBittorrent.Misc ??= (() => {
};
};

const createDebounceHandler = (delay, func) => {
let timer = -1;
return (...params) => {
clearTimeout(timer);
timer = setTimeout(() => {
func(...params);

timer = -1;
}, delay);
};
};

/*
* JS counterpart of the function in src/misc.cpp
*/
Expand Down
20 changes: 10 additions & 10 deletions src/webui/www/private/scripts/mocha-init.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,9 +142,9 @@ const initializeWindows = function() {
paddingHorizontal: 0,
width: loadWindowWidth(id, 500),
height: loadWindowHeight(id, 600),
onResize: function() {
onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id);
}
})
});
updateMainData();
};
Expand All @@ -171,9 +171,9 @@ const initializeWindows = function() {
paddingHorizontal: 0,
width: loadWindowWidth(id, 700),
height: loadWindowHeight(id, 600),
onResize: function() {
onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id);
}
})
});
});

Expand All @@ -195,9 +195,9 @@ const initializeWindows = function() {
paddingHorizontal: 0,
width: loadWindowWidth(id, 500),
height: loadWindowHeight(id, 460),
onResize: function() {
onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id);
}
})
});
updateMainData();
});
Expand Down Expand Up @@ -367,9 +367,9 @@ const initializeWindows = function() {
padding: 10,
width: loadWindowWidth(id, 275),
height: loadWindowHeight(id, 370),
onResize: function() {
onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id);
}
})
});
};

Expand Down Expand Up @@ -1191,9 +1191,9 @@ const initializeWindows = function() {
padding: 10,
width: loadWindowWidth(id, 550),
height: loadWindowHeight(id, 360),
onResize: function() {
onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id);
}
})
});
});

Expand Down
9 changes: 5 additions & 4 deletions src/webui/www/private/scripts/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -502,9 +502,9 @@ window.qBittorrent.Search ??= (() => {
paddingHorizontal: 0,
width: loadWindowWidth(id, 600),
height: loadWindowHeight(id, 360),
onResize: function() {
onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id);
},
}),
onBeforeBuild: function() {
loadSearchPlugins();
},
Expand Down Expand Up @@ -753,14 +753,15 @@ window.qBittorrent.Search ??= (() => {
};

const setupSearchTableEvents = function(enable) {
const clickHandler = (e) => { downloadSearchTorrent(); };
if (enable) {
$$(".searchTableRow").each((target) => {
target.addEventListener("dblclick", downloadSearchTorrent, false);
target.addEventListener("dblclick", clickHandler);
});
}
else {
$$(".searchTableRow").each((target) => {
target.removeEventListener("dblclick", downloadSearchTorrent, false);
target.removeEventListener("dblclick", clickHandler);
});
}
};
Expand Down
4 changes: 2 additions & 2 deletions src/webui/www/private/views/rss.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -837,9 +837,9 @@
maximizable: false,
width: loadWindowWidth(id, 800),
height: loadWindowHeight(id, 650),
onResize: () => {
onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id);
},
}),
resizeLimit: {
"x": [800, 2500],
"y": [500, 2000]
Expand Down
10 changes: 6 additions & 4 deletions src/webui/www/private/views/searchplugins.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,16 +182,18 @@ <h2>QBT_TR(Installed search plugins:)QBT_TR[CONTEXT=PluginSelectDlg]</h2>
};

const setupSearchPluginTableEvents = function(enable) {
const clickHandler = (e) => { enablePlugin(); };
const menuHandler = (e) => { updateSearchPluginsTableContextMenuOffset(); };
if (enable) {
$$(".searchPluginsTableRow").each((target) => {
target.addEventListener("dblclick", enablePlugin, false);
target.addEventListener("contextmenu", updateSearchPluginsTableContextMenuOffset, true);
target.addEventListener("dblclick", clickHandler);
target.addEventListener("contextmenu", menuHandler, true);
});
}
else {
$$(".searchPluginsTableRow").each((target) => {
target.removeEventListener("dblclick", enablePlugin, false);
target.removeEventListener("contextmenu", updateSearchPluginsTableContextMenuOffset, true);
target.removeEventListener("dblclick", clickHandler);
target.removeEventListener("contextmenu", menuHandler, true);
});
}
};
Expand Down

0 comments on commit 9c370bf

Please sign in to comment.