voussoir/ycdl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Speed up filtering by hiding #video_cards first.

Browse source 
On large channels, filter_video_cards is painfully slow because of all
the forced reflows. I'm currently trying to find a better solution.
In the meantime, hiding the containing div does prevent those reflows
until the end, but itself is also quite slow.
This commit is contained in:
voussoir 2020-08-27 16:53:51 -07:00
parent 412d324352
commit 7b197c867b
1 changed files with 4 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontends/ycdl_flask/templates/channel.html
View file

@ -342,17 +342,15 @@ function filter_video_cards(search_term)
*/ */
var count = 0; var count = 0;
video_cards = document.getElementById("video_cards"); video_cards = document.getElementById("video_cards");
cards = video_cards.getElementsByClassName("video_card"); video_cards.classList.add("hidden");
search_term = search_term.toLocaleLowerCase(); search_term = search_term.toLocaleLowerCase();
var download_filter_class = "video_card_" + DOWNLOAD_FILTER; var download_filter_class = "video_card_" + DOWNLOAD_FILTER;
for (var index = 0; index < cards.length; index += 1) Array.from(video_cards.getElementsByClassName("video_card")).forEach(function(video_card)
{ {
var video_card = cards[index];
var title = video_card.getElementsByClassName("video_title")[0].innerText.toLocaleLowerCase(); var title = video_card.getElementsByClassName("video_title")[0].innerText.toLocaleLowerCase();
if (DOWNLOAD_FILTER && !video_card.classList.contains(download_filter_class)) if (DOWNLOAD_FILTER && !video_card.classList.contains(download_filter_class))
{ {
video_cards.removeChild(video_card); video_cards.removeChild(video_card);
index -= 1;
} }
else if (search_term !== "" && title.indexOf(search_term) == -1) else if (search_term !== "" && title.indexOf(search_term) == -1)
{ {
@ -363,7 +361,8 @@ function filter_video_cards(search_term)
video_card.classList.remove("hidden"); video_card.classList.remove("hidden");
count += 1; count += 1;
} }
} });
video_cards.classList.remove("hidden");
document.getElementById("search_filter_count").innerText = count; document.getElementById("search_filter_count").innerText = count;
} }