mirror of
https://github.com/qbittorrent/qBittorrent.git
synced 2024-10-22 10:46:04 +03:00
Merge pull request #21215 from Chocobo1/webui_event_param
WebUI: improve event handlers
This commit is contained in:
commit
9c370bf391
8 changed files with 67 additions and 65 deletions
|
@ -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";
|
||||
|
@ -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]
|
||||
});
|
||||
|
@ -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;
|
||||
|
@ -1206,7 +1208,7 @@ window.addEventListener("DOMContentLoaded", () => {
|
|||
$("mainWindowTabs").addClass("invisible");
|
||||
};
|
||||
|
||||
$("StatisticsLink").addEventListener("click", StatisticsLinkFN);
|
||||
$("StatisticsLink").addEventListener("click", () => { StatisticsLinkFN(); });
|
||||
|
||||
// main window tabs
|
||||
|
||||
|
@ -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");
|
||||
|
@ -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 = () => {
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
|
@ -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) {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
@ -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" });
|
||||
|
@ -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: "",
|
||||
|
@ -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":
|
||||
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -32,6 +32,7 @@ window.qBittorrent ??= {};
|
|||
window.qBittorrent.Misc ??= (() => {
|
||||
const exports = () => {
|
||||
return {
|
||||
createDebounceHandler: createDebounceHandler,
|
||||
friendlyUnit: friendlyUnit,
|
||||
friendlyDuration: friendlyDuration,
|
||||
friendlyPercentage: friendlyPercentage,
|
||||
|
@ -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
|
||||
*/
|
||||
|
|
|
@ -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();
|
||||
};
|
||||
|
@ -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);
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -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();
|
||||
});
|
||||
|
@ -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);
|
||||
}
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
@ -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();
|
||||
},
|
||||
|
@ -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);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -182,16 +182,18 @@
|
|||
};
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue