github/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent synced 2025-07-07 13:41:26 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

WebUI: Filter list improvements

Browse source 
A couple of tweaks to make them a little bit better:
1. Make highlighting functions more consistent (this also fixes minuscule bug when no filter item in tracker list is highlighted due to a type mismatch)
2. Use [event delegation](https://javascript.info/event-delegation) to handle filter toggling & item selection
3. Other minor improvements (everything should work like it was previously)

PR #21191.
This commit is contained in:
skomerko 2024-08-25 08:23:35 +02:00 • committed by GitHub
parent 39dd415d43
commit 5b7c9d5725
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 163 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/webui/www/private/css/style.css
View file

@ -545,7 +545,6 @@ ul.filterList .selectedFilter img {
filter: var(--color-icon-hover); filter: var(--color-icon-hover);
} }
ul.filterList a,
ul.filterList span.link { ul.filterList span.link {
align-items: center; align-items: center;
color: inherit; color: inherit;

192
src/webui/www/private/scripts/client.js
View file

@ -135,7 +135,7 @@ const CATEGORIES_UNCATEGORIZED = 2;
const category_list = new Map(); const category_list = new Map();
let selected_category = Number(LocalPreferences.get("selected_category", CATEGORIES_ALL)); let selectedCategory = Number(LocalPreferences.get("selected_category", CATEGORIES_ALL));
let setCategoryFilter = function() {}; let setCategoryFilter = function() {};
/* Tags filter */ /* Tags filter */
@ -154,12 +154,12 @@ const TRACKERS_TRACKERLESS = 2;
/** @type Map<number, {host: string, trackerTorrentMap: Map<string, string[]>}> **/ /** @type Map<number, {host: string, trackerTorrentMap: Map<string, string[]>}> **/
const trackerList = new Map(); const trackerList = new Map();
let selectedTracker = LocalPreferences.get("selected_tracker", TRACKERS_ALL); let selectedTracker = Number(LocalPreferences.get("selected_tracker", TRACKERS_ALL));
let setTrackerFilter = function() {}; let setTrackerFilter = function() {};
/* All filters */ /* All filters */
let selected_filter = LocalPreferences.get("selected_filter", "all"); let selectedStatus = LocalPreferences.get("selected_filter", "all");
let setFilter = function() {}; let setStatusFilter = function() {};
let toggleFilterDisplay = function() {}; let toggleFilterDisplay = function() {};
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
@ -240,62 +240,40 @@ window.addEventListener("DOMContentLoaded", () => {
buildLogTab(); buildLogTab();
MochaUI.initializeTabs("mainWindowTabsList"); MochaUI.initializeTabs("mainWindowTabsList");
setStatusFilter = function(name) {
LocalPreferences.set("selected_filter", name);
selectedStatus = name;
highlightSelectedStatus();
updateMainData();
};
setCategoryFilter = function(hash) { setCategoryFilter = function(hash) {
selected_category = hash; LocalPreferences.set("selected_category", hash);
LocalPreferences.set("selected_category", selected_category); selectedCategory = Number(hash);
highlightSelectedCategory(); highlightSelectedCategory();
if (typeof torrentsTable.tableBody !== "undefined") updateMainData();
updateMainData();
}; };
setTagFilter = function(hash) { setTagFilter = function(hash) {
selectedTag = hash; LocalPreferences.set("selected_tag", hash);
LocalPreferences.set("selected_tag", selectedTag); selectedTag = Number(hash);
highlightSelectedTag(); highlightSelectedTag();
if (torrentsTable.tableBody !== undefined) updateMainData();
updateMainData();
}; };
setTrackerFilter = function(hash) { setTrackerFilter = function(hash) {
selectedTracker = hash.toString(); LocalPreferences.set("selected_tracker", hash);
LocalPreferences.set("selected_tracker", selectedTracker); selectedTracker = Number(hash);
highlightSelectedTracker(); highlightSelectedTracker();
if (torrentsTable.tableBody !== undefined) updateMainData();
updateMainData();
}; };
setFilter = function(f) { toggleFilterDisplay = function(filterListID) {
// Visually Select the right filter const filterList = document.getElementById(filterListID);
$("all_filter").removeClass("selectedFilter"); const filterTitle = filterList.previousElementSibling;
$("downloading_filter").removeClass("selectedFilter"); const toggleIcon = filterTitle.firstElementChild;
$("seeding_filter").removeClass("selectedFilter"); toggleIcon.classList.toggle("rotate");
$("completed_filter").removeClass("selectedFilter"); LocalPreferences.set(`filter_${filterListID.replace("FilterList", "")}_collapsed`, filterList.classList.toggle("invisible").toString());
$("stopped_filter").removeClass("selectedFilter");
$("running_filter").removeClass("selectedFilter");
$("active_filter").removeClass("selectedFilter");
$("inactive_filter").removeClass("selectedFilter");
$("stalled_filter").removeClass("selectedFilter");
$("stalled_uploading_filter").removeClass("selectedFilter");
$("stalled_downloading_filter").removeClass("selectedFilter");
$("checking_filter").removeClass("selectedFilter");
$("moving_filter").removeClass("selectedFilter");
$("errored_filter").removeClass("selectedFilter");
$(f + "_filter").addClass("selectedFilter");
selected_filter = f;
LocalPreferences.set("selected_filter", f);
// Reload torrents
if (typeof torrentsTable.tableBody !== "undefined")
updateMainData();
};
toggleFilterDisplay = function(filter) {
const element = filter + "FilterList";
LocalPreferences.set("filter_" + filter + "_collapsed", !$(element).hasClass("invisible"));
$(element).toggleClass("invisible");
const parent = $(element).getParent(".filterWrapper");
const toggleIcon = $(parent).getChildren(".filterTitle img");
if (toggleIcon)
toggleIcon[0].toggleClass("rotate");
}; };
new MochaUI.Panel({ new MochaUI.Panel({
@ -311,7 +289,7 @@ window.addEventListener("DOMContentLoaded", () => {
loadMethod: "xhr", loadMethod: "xhr",
contentURL: "views/filters.html", contentURL: "views/filters.html",
onContentLoaded: function() { onContentLoaded: function() {
setFilter(selected_filter); highlightSelectedStatus();
}, },
column: "filtersColumn", column: "filtersColumn",
height: 300 height: 300
@ -467,12 +445,21 @@ window.addEventListener("DOMContentLoaded", () => {
updateFilter("errored", "QBT_TR(Errored (%1))QBT_TR[CONTEXT=StatusFilterWidget]"); updateFilter("errored", "QBT_TR(Errored (%1))QBT_TR[CONTEXT=StatusFilterWidget]");
}; };
const highlightSelectedStatus = function() {
const statusFilter = document.getElementById("statusFilterList");
const filterID = `${selectedStatus}_filter`;
for (const status of statusFilter.children)
status.classList.toggle("selectedFilter", (status.id === filterID));
};
const updateCategoryList = function() { const updateCategoryList = function() {
const categoryList = $("categoryFilterList"); const categoryList = $("categoryFilterList");
if (!categoryList) if (!categoryList)
return; return;
categoryList.getChildren().each(c => c.destroy()); categoryList.getChildren().each(c => c.destroy());
const categoryItemTemplate = document.getElementById("categoryFilterItem");
const create_link = function(hash, text, count) { const create_link = function(hash, text, count) {
let display_name = text; let display_name = text;
let margin_left = 0; let margin_left = 0;
@ -482,26 +469,15 @@ window.addEventListener("DOMContentLoaded", () => {
margin_left = (category_path.length - 1) * 20; margin_left = (category_path.length - 1) * 20;
} }
const span = document.createElement("span"); const categoryFilterItem = categoryItemTemplate.content.cloneNode(true).firstElementChild;
span.classList.add("link"); categoryFilterItem.id = hash;
span.href = "#"; categoryFilterItem.classList.toggle("selectedFilter", hash === selectedCategory);
const span = categoryFilterItem.firstElementChild;
span.style.marginLeft = `${margin_left}px`; span.style.marginLeft = `${margin_left}px`;
span.textContent = `${display_name} (${count})`; span.lastChild.textContent = `${display_name} (${count})`;
span.addEventListener("click", (event) => {
event.preventDefault();
setCategoryFilter(hash);
});
const img = document.createElement("img"); return categoryFilterItem;
img.src = "images/view-categories.svg";
span.prepend(img);
const listItem = document.createElement("li");
listItem.id = hash;
listItem.appendChild(span);
window.qBittorrent.Filters.categoriesFilterContextMenu.addTarget(listItem);
return listItem;
}; };
const all = torrentsTable.getRowIds().length; const all = torrentsTable.getRowIds().length;
@ -550,20 +526,16 @@ window.addEventListener("DOMContentLoaded", () => {
categoryList.appendChild(create_link(categoryHash, categoryName, categoryCount)); categoryList.appendChild(create_link(categoryHash, categoryName, categoryCount));
} }
highlightSelectedCategory(); window.qBittorrent.Filters.categoriesFilterContextMenu.searchAndAddTargets();
}; };
const highlightSelectedCategory = function() { const highlightSelectedCategory = function() {
const categoryList = $("categoryFilterList"); const categoryList = document.getElementById("categoryFilterList");
if (!categoryList) if (!categoryList)
return; return;
const children = categoryList.childNodes;
for (let i = 0; i < children.length; ++i) { for (const category of categoryList.children)
if (Number(children[i].id) === selected_category) category.classList.toggle("selectedFilter", (Number(category.id) === selectedCategory));
children[i].className = "selectedFilter";
else
children[i].className = "";
}
}; };
const updateTagList = function() { const updateTagList = function() {
@ -573,26 +545,17 @@ window.addEventListener("DOMContentLoaded", () => {
tagFilterList.getChildren().each(c => c.destroy()); tagFilterList.getChildren().each(c => c.destroy());
const tagItemTemplate = document.getElementById("tagFilterItem");
const createLink = function(hash, text, count) { const createLink = function(hash, text, count) {
const span = document.createElement("span"); const tagFilterItem = tagItemTemplate.content.cloneNode(true).firstElementChild;
span.classList.add("link"); tagFilterItem.id = hash;
span.href = "#"; tagFilterItem.classList.toggle("selectedFilter", hash === selectedTag);
span.textContent = `${text} (${count})`;
span.addEventListener("click", (event) => {
event.preventDefault();
setTagFilter(hash);
});
const img = document.createElement("img"); const span = tagFilterItem.firstElementChild;
img.src = "images/tags.svg"; span.lastChild.textContent = `${text} (${count})`;
span.prepend(img);
const listItem = document.createElement("li"); return tagFilterItem;
listItem.id = hash;
listItem.appendChild(span);
window.qBittorrent.Filters.tagsFilterContextMenu.addTarget(listItem);
return listItem;
}; };
const torrentsCount = torrentsTable.getRowIds().length; const torrentsCount = torrentsTable.getRowIds().length;
@ -615,17 +578,16 @@ window.addEventListener("DOMContentLoaded", () => {
for (const { tagName, tagHash, tagSize } of sortedTags) for (const { tagName, tagHash, tagSize } of sortedTags)
tagFilterList.appendChild(createLink(tagHash, tagName, tagSize)); tagFilterList.appendChild(createLink(tagHash, tagName, tagSize));
highlightSelectedTag(); window.qBittorrent.Filters.tagsFilterContextMenu.searchAndAddTargets();
}; };
const highlightSelectedTag = function() { const highlightSelectedTag = function() {
const tagFilterList = $("tagFilterList"); const tagFilterList = document.getElementById("tagFilterList");
if (!tagFilterList) if (!tagFilterList)
return; return;
const children = tagFilterList.childNodes; for (const tag of tagFilterList.children)
for (let i = 0; i < children.length; ++i) tag.classList.toggle("selectedFilter", (Number(tag.id) === selectedTag));
children[i].className = (Number(children[i].id) === selectedTag) ? "selectedFilter" : "";
}; };
// getHost emulate the GUI version `QString getHost(const QString &url)` // getHost emulate the GUI version `QString getHost(const QString &url)`
@ -659,26 +621,17 @@ window.addEventListener("DOMContentLoaded", () => {
trackerFilterList.getChildren().each(c => c.destroy()); trackerFilterList.getChildren().each(c => c.destroy());
const trackerItemTemplate = document.getElementById("trackerFilterItem");
const createLink = function(hash, text, count) { const createLink = function(hash, text, count) {
const span = document.createElement("span"); const trackerFilterItem = trackerItemTemplate.content.cloneNode(true).firstElementChild;
span.classList.add("link"); trackerFilterItem.id = hash;
span.href = "#"; trackerFilterItem.classList.toggle("selectedFilter", hash === selectedTracker);
span.textContent = text.replace("%1", count);
span.addEventListener("click", (event) => {
event.preventDefault();
setTrackerFilter(hash);
});
const img = document.createElement("img"); const span = trackerFilterItem.firstElementChild;
img.src = "images/trackers.svg"; span.lastChild.textContent = text.replace("%1", count);
span.prepend(img);
const listItem = document.createElement("li"); return trackerFilterItem;
listItem.id = hash;
listItem.appendChild(span);
window.qBittorrent.Filters.trackersFilterContextMenu.addTarget(listItem);
return listItem;
}; };
const torrentsCount = torrentsTable.getRowIds().length; const torrentsCount = torrentsTable.getRowIds().length;
@ -709,17 +662,16 @@ window.addEventListener("DOMContentLoaded", () => {
for (const { trackerHost, trackerHash, trackerCount } of sortedList) for (const { trackerHost, trackerHash, trackerCount } of sortedList)
trackerFilterList.appendChild(createLink(trackerHash, (trackerHost + " (%1)"), trackerCount)); trackerFilterList.appendChild(createLink(trackerHash, (trackerHost + " (%1)"), trackerCount));
highlightSelectedTracker(); window.qBittorrent.Filters.trackersFilterContextMenu.searchAndAddTargets();
}; };
const highlightSelectedTracker = function() { const highlightSelectedTracker = function() {
const trackerFilterList = $("trackerFilterList"); const trackerFilterList = document.getElementById("trackerFilterList");
if (!trackerFilterList) if (!trackerFilterList)
return; return;
const children = trackerFilterList.childNodes; for (const tracker of trackerFilterList.children)
for (const child of children) tracker.classList.toggle("selectedFilter", (Number(tracker.id) === selectedTracker));
child.className = (child.id === selectedTracker) ? "selectedFilter" : "";
}; };
const setupCopyEventHandler = (function() { const setupCopyEventHandler = (function() {

4
src/webui/www/private/scripts/contextmenu.js
View file

@ -179,6 +179,10 @@ window.qBittorrent.ContextMenu ??= (() => {
this.setupEventListeners(t); this.setupEventListeners(t);
}, },
searchAndAddTargets: function() {
document.querySelectorAll(this.options.targets).forEach((target) => { this.addTarget(target); });
},
triggerMenu: function(e, el) { triggerMenu: function(e, el) {
if (this.options.disabled) if (this.options.disabled)
return; return;

7
src/webui/www/private/scripts/dynamicTable.js
View file

@ -1456,8 +1456,7 @@ window.qBittorrent.DynamicTable ??= (() => {
} }
} }
const trackerHashInt = Number.parseInt(trackerHash, 10); switch (trackerHash) {
switch (trackerHashInt) {
case TRACKERS_ALL: case TRACKERS_ALL:
break; // do nothing break; // do nothing
case TRACKERS_TRACKERLESS: case TRACKERS_TRACKERLESS:
@ -1465,7 +1464,7 @@ window.qBittorrent.DynamicTable ??= (() => {
return false; return false;
break; break;
default: { default: {
const tracker = trackerList.get(trackerHashInt); const tracker = trackerList.get(trackerHash);
if (tracker) { if (tracker) {
let found = false; let found = false;
for (const torrents of tracker.trackerTorrentMap.values()) { for (const torrents of tracker.trackerTorrentMap.values()) {
@ -1537,7 +1536,7 @@ window.qBittorrent.DynamicTable ??= (() => {
const rows = this.rows.getValues(); const rows = this.rows.getValues();
for (let i = 0; i < rows.length; ++i) { for (let i = 0; i < rows.length; ++i) {
if (this.applyFilter(rows[i], selected_filter, selected_category, selectedTag, selectedTracker, filterTerms)) { if (this.applyFilter(rows[i], selectedStatus, selectedCategory, selectedTag, selectedTracker, filterTerms)) {
filteredRows.push(rows[i]); filteredRows.push(rows[i]);
filteredRows[rows[i].rowId] = rows[i]; filteredRows[rows[i].rowId] = rows[i];
} }

109
src/webui/www/private/views/filters.html
View file

@ -1,46 +1,68 @@
<div class="filterWrapper"> <div class="filterWrapper">
<span class="filterTitle" onclick="toggleFilterDisplay('status');"> <span class="filterTitle">
<img src="images/go-down.svg" alt="QBT_TR(Collapse/expand)QBT_TR[CONTEXT=TransferListFiltersWidget]">QBT_TR(Status)QBT_TR[CONTEXT=TransferListFiltersWidget] <img src="images/go-down.svg" alt="QBT_TR(Collapse/expand)QBT_TR[CONTEXT=TransferListFiltersWidget]">QBT_TR(Status)QBT_TR[CONTEXT=TransferListFiltersWidget]
</span> </span>
<ul class="filterList" id="statusFilterList"> <ul class="filterList" id="statusFilterList">
<li id="all_filter"><a href="#" onclick="setFilter('all');return false;"><img src="images/filter-all.svg" alt="All">QBT_TR(All (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li> <li id="all_filter"><span class="link"><img src="images/filter-all.svg" alt="All">QBT_TR(All (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
<li id="downloading_filter"><a href="#" onclick="setFilter('downloading');return false;"><img src="images/downloading.svg" alt="Downloading">QBT_TR(Downloading (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li> <li id="downloading_filter"><span class="link"><img src="images/downloading.svg" alt="Downloading">QBT_TR(Downloading (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
<li id="seeding_filter"><a href="#" onclick="setFilter('seeding');return false;"><img src="images/upload.svg" alt="Seeding">QBT_TR(Seeding (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li> <li id="seeding_filter"><span class="link"><img src="images/upload.svg" alt="Seeding">QBT_TR(Seeding (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
<li id="completed_filter"><a href="#" onclick="setFilter('completed');return false;"><img src="images/checked-completed.svg" alt="Completed">QBT_TR(Completed (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li> <li id="completed_filter"><span class="link"><img src="images/checked-completed.svg" alt="Completed">QBT_TR(Completed (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
<li id="running_filter"><a href="#" onclick="setFilter('running');return false;"><img src="images/torrent-start.svg" alt="Running">QBT_TR(Running (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li> <li id="running_filter"><span class="link"><img src="images/torrent-start.svg" alt="Running">QBT_TR(Running (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
<li id="stopped_filter"><a href="#" onclick="setFilter('stopped');return false;"><img src="images/stopped.svg" alt="Stopped">QBT_TR(Stopped (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li> <li id="stopped_filter"><span class="link"><img src="images/stopped.svg" alt="Stopped">QBT_TR(Stopped (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
<li id="active_filter"><a href="#" onclick="setFilter('active');return false;"><img src="images/filter-active.svg" alt="Active">QBT_TR(Active (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li> <li id="active_filter"><span class="link"><img src="images/filter-active.svg" alt="Active">QBT_TR(Active (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
<li id="inactive_filter"><a href="#" onclick="setFilter('inactive');return false;"><img src="images/filter-inactive.svg" alt="Inactive">QBT_TR(Inactive (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li> <li id="inactive_filter"><span class="link"><img src="images/filter-inactive.svg" alt="Inactive">QBT_TR(Inactive (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
<li id="stalled_filter"><a href="#" onclick="setFilter('stalled');return false;"><img src="images/filter-stalled.svg" alt="Stalled">QBT_TR(Stalled (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li> <li id="stalled_filter"><span class="link"><img src="images/filter-stalled.svg" alt="Stalled">QBT_TR(Stalled (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
<li id="stalled_uploading_filter"><a href="#" onclick="setFilter('stalled_uploading');return false;"><img src="images/stalledUP.svg" alt="Stalled Uploading">QBT_TR(Stalled Uploading (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li> <li id="stalled_uploading_filter"><span class="link"><img src="images/stalledUP.svg" alt="Stalled Uploading">QBT_TR(Stalled Uploading (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
<li id="stalled_downloading_filter"><a href="#" onclick="setFilter('stalled_downloading');return false;"><img src="images/stalledDL.svg" alt="Stalled Downloading">QBT_TR(Stalled Downloading (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li> <li id="stalled_downloading_filter"><span class="link"><img src="images/stalledDL.svg" alt="Stalled Downloading">QBT_TR(Stalled Downloading (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
<li id="checking_filter"><a href="#" onclick="setFilter('checking'); return false;"><img src="images/force-recheck.svg" alt="Checking">QBT_TR(Checking (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li> <li id="checking_filter"><span class="link"><img src="images/force-recheck.svg" alt="Checking">QBT_TR(Checking (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
<li id="moving_filter"><a href="#" onclick="setFilter('moving'); return false;"><img src="images/set-location.svg" alt="Moving">QBT_TR(Moving (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li> <li id="moving_filter"><span class="link"><img src="images/set-location.svg" alt="Moving">QBT_TR(Moving (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
<li id="errored_filter"><a href="#" onclick="setFilter('errored');return false;"><img src="images/error.svg" alt="Errored">QBT_TR(Errored (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li> <li id="errored_filter"><span class="link"><img src="images/error.svg" alt="Errored">QBT_TR(Errored (0))QBT_TR[CONTEXT=StatusFilterWidget]</span></li>
</ul> </ul>
</div> </div>
<div class="filterWrapper"> <div class="filterWrapper">
<span class="filterTitle" onclick="toggleFilterDisplay('category');"> <span class="filterTitle">
<img src="images/go-down.svg" alt="QBT_TR(Collapse/expand)QBT_TR[CONTEXT=TransferListFiltersWidget]">QBT_TR(Categories)QBT_TR[CONTEXT=TransferListFiltersWidget] <img src="images/go-down.svg" alt="QBT_TR(Collapse/expand)QBT_TR[CONTEXT=TransferListFiltersWidget]">QBT_TR(Categories)QBT_TR[CONTEXT=TransferListFiltersWidget]
</span> </span>
<ul class="filterList" id="categoryFilterList"> <ul class="filterList" id="categoryFilterList">
</ul> </ul>
</div> </div>
<div class="filterWrapper"> <div class="filterWrapper">
<span class="filterTitle" onclick="toggleFilterDisplay('tag');"> <span class="filterTitle">
<img src="images/go-down.svg" alt="QBT_TR(Collapse/expand)QBT_TR[CONTEXT=TransferListFiltersWidget]">QBT_TR(Tags)QBT_TR[CONTEXT=TransferListFiltersWidget] <img src="images/go-down.svg" alt="QBT_TR(Collapse/expand)QBT_TR[CONTEXT=TransferListFiltersWidget]">QBT_TR(Tags)QBT_TR[CONTEXT=TransferListFiltersWidget]
</span> </span>
<ul class="filterList" id="tagFilterList"> <ul class="filterList" id="tagFilterList">
</ul> </ul>
</div> </div>
<div class="filterWrapper"> <div class="filterWrapper">
<span class="filterTitle" onclick="toggleFilterDisplay('tracker');"> <span class="filterTitle">
<img src="images/go-down.svg" alt="QBT_TR(Collapse/expand)QBT_TR[CONTEXT=TransferListFiltersWidget]">QBT_TR(Trackers)QBT_TR[CONTEXT=TransferListFiltersWidget] <img src="images/go-down.svg" alt="QBT_TR(Collapse/expand)QBT_TR[CONTEXT=TransferListFiltersWidget]">QBT_TR(Trackers)QBT_TR[CONTEXT=TransferListFiltersWidget]
</span> </span>
<ul class="filterList" id="trackerFilterList"> <ul class="filterList" id="trackerFilterList">
</ul> </ul>
</div> </div>
<template id="categoryFilterItem">
<li class="categoriesFilterContextMenuTarget">
<span class="link">
<img src="images/view-categories.svg" alt="">
</span>
</li>
</template>
<template id="tagFilterItem">
<li class="tagsFilterContextMenuTarget">
<span class="link">
<img src="images/tags.svg" alt="">
</span>
</li>
</template>
<template id="trackerFilterItem">
<li class="trackersFilterContextMenuTarget">
<span class="link">
<img src="images/trackers.svg" alt="">
</span>
</li>
</template>
<script> <script>
"use strict"; "use strict";
@ -88,7 +110,7 @@
y: 2 y: 2
}, },
onShow: function() { onShow: function() {
this.options.element.firstChild.click(); this.options.element.click();
} }
}); });
@ -120,7 +142,7 @@
y: 2 y: 2
}, },
onShow: function() { onShow: function() {
this.options.element.firstChild.click(); this.options.element.click();
} }
}); });
@ -143,21 +165,58 @@
y: 2 y: 2
}, },
onShow: function() { onShow: function() {
this.options.element.firstChild.click(); this.options.element.click();
} }
}); });
if (LocalPreferences.get("filter_status_collapsed") === "true") if (LocalPreferences.get("filter_status_collapsed") === "true")
toggleFilterDisplay("status"); toggleFilterDisplay("statusFilterList");
if (LocalPreferences.get("filter_category_collapsed") === "true") if (LocalPreferences.get("filter_category_collapsed") === "true")
toggleFilterDisplay("category"); toggleFilterDisplay("categoryFilterList");
if (LocalPreferences.get("filter_tag_collapsed") === "true") if (LocalPreferences.get("filter_tag_collapsed") === "true")
toggleFilterDisplay("tag"); toggleFilterDisplay("tagFilterList");
if (LocalPreferences.get("filter_tracker_collapsed") === "true") if (LocalPreferences.get("filter_tracker_collapsed") === "true")
toggleFilterDisplay("tracker"); toggleFilterDisplay("trackerFilterList");
document.getElementById("Filters_pad").addEventListener("click", (event) => {
const filterItem = event.target.closest("li");
if (!filterItem)
return;
event.stopImmediatePropagation();
const { id: filterItemID } = filterItem;
const { id: filterListID } = filterItem.closest("ul[id]");
switch (filterListID) {
case "statusFilterList":
setStatusFilter(filterItemID.replace("_filter", ""));
break;
case "categoryFilterList":
setCategoryFilter(filterItemID);
break;
case "tagFilterList":
setTagFilter(filterItemID);
break;
case "trackerFilterList":
setTrackerFilter(filterItemID);
break;
default:
console.error(`Unexpected filterListID: ${filterListID}`);
break;
}
});
document.getElementById("Filters_pad").addEventListener("click", (event) => {
const filterTitle = event.target.closest(".filterTitle");
if (!filterTitle)
return;
const filterList = filterTitle.nextElementSibling.id;
toggleFilterDisplay(filterList);
});
return exports(); return exports();
})(); })();