From 90ac5324eaa86fa0ab6ca340d1917020217f57db Mon Sep 17 00:00:00 2001
From: Masahiko AMANO <hiko-19@ya.ru>
Date: Sat, 18 Feb 2023 00:50:35 +0300
Subject: [PATCH] fix(web): fix tag view menu lazy load

---
 web/public/js/tfm-files.js      |  7 +++++++
 web/public/js/tfm-management.js | 11 +++--------
 web/public/js/tfm-tags.js       |  7 +++++++
 web/public/tfm/files.html       |  2 +-
 web/public/tfm/tags.html        |  2 +-
 5 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/web/public/js/tfm-files.js b/web/public/js/tfm-files.js
index 1494988..58b85a6 100644
--- a/web/public/js/tfm-files.js
+++ b/web/public/js/tfm-files.js
@@ -16,6 +16,13 @@ $(window).on("load", function () {
 	sappyou.forEach((tanzaku) => {
 		$("#menu-file-view .list").append(`<div class="list-item tanzaku" tid="${tanzaku.id}">${tanzaku.name}</div>`);
 	});
+	lazy_menu = $("#menu-tag-view .thumb").lazy({
+		chainable: false,
+		scrollDirection: "vertical",
+		effect: "fadeIn",
+		visibleOnly: true,
+		appendScroll: $("#menu-tag-view .list")[0],
+	});
 });
 
 $(document).on("submit", "#menu-add form", function (e) {
diff --git a/web/public/js/tfm-management.js b/web/public/js/tfm-management.js
index ebe5bc9..540123b 100644
--- a/web/public/js/tfm-management.js
+++ b/web/public/js/tfm-management.js
@@ -13,6 +13,7 @@ if (sort_tanzaku == null) {
 var current_sasa = null, current_tanzaku = null;
 var current_sasa_index = -1;
 var menu_count = 0;
+var lazy_menu;
 
 function menu_view_file_open() {
 	if (menu_count > 1) {
@@ -45,14 +46,6 @@ function menu_view_tag_open() {
 		return;
 	}
 	menu_count++;
-	$(function () {
-		$("#menu-tag-view .thumb").Lazy({
-			scrollDirection: "vertical",
-			effect: "fadeIn",
-			visibleOnly: true,
-			appendScroll: $("#menu-tag-view .list")[0],
-		});
-	});
 	$("#menu-tag-view .selected").removeClass("selected");
 	$("#menu-tag-view").css("display", "flex");
 	$("#menu-tag-view .list-item").css("display", "");
@@ -71,6 +64,7 @@ function menu_view_tag_open() {
 	} else {
 		$("#menu-tag-view .list-item:not(.selected)").css("display", "block");
 	}
+	lazy_menu.update();
 }
 
 function menu_view_file_close() {
@@ -220,6 +214,7 @@ $(document).on("click", "#tag-selection-filter", function (e) {
 	} else {
 		notselected.css("display", "block");
 	}
+	lazy_menu.update();
 });
 
 $(document).on("input", "#text-filter", function (e) {
diff --git a/web/public/js/tfm-tags.js b/web/public/js/tfm-tags.js
index f36ed6d..1785296 100644
--- a/web/public/js/tfm-tags.js
+++ b/web/public/js/tfm-tags.js
@@ -8,6 +8,13 @@ $(window).on("load", function () {
 	sasahyou.forEach((sasa) => {
 		$("#menu-tag-view .list").append(`<div class="list-item sasa" sid="${sasa.id}" title="${sasa.path.split('/').slice(-1)}"><img class="thumb" data-src="${"/thumbs/" + sasa.path}"><div class="overlay"></div></div>`);
 	});
+	lazy_menu = $("#menu-tag-view .thumb").lazy({
+		chainable: false,
+		scrollDirection: "vertical",
+		effect: "fadeIn",
+		visibleOnly: true,
+		appendScroll: $("#menu-tag-view .list")[0],
+	});
 });
 
 $(document).on("input", "#text-filter-all", function (e) {
diff --git a/web/public/tfm/files.html b/web/public/tfm/files.html
index fa6c224..87bc452 100644
--- a/web/public/tfm/files.html
+++ b/web/public/tfm/files.html
@@ -83,7 +83,7 @@
 				<textarea class="form-control" name="description" id="description" rows="2"></textarea>
 			</div>
 			<div class="form-group form-check">
-				<input type="checkbox" name="selection-filter" class="form-check-input" id="tag-selection-filter">
+				<input type="checkbox" name="selection-filter" class="form-check-input" id="tag-selection-filter" checked>
 				<label class="form-check-label" for="tag-selection-filter">Show only selected</label>
 			</div>
 			<div class="form-group list"></div>
diff --git a/web/public/tfm/tags.html b/web/public/tfm/tags.html
index acd4d07..119e942 100644
--- a/web/public/tfm/tags.html
+++ b/web/public/tfm/tags.html
@@ -58,7 +58,7 @@
 				<textarea class="form-control" name="description" id="description" rows="2"></textarea>
 			</div>
 			<div class="form-group form-check">
-				<input type="checkbox" name="selection-filter" class="form-check-input" id="tag-selection-filter">
+				<input type="checkbox" name="selection-filter" class="form-check-input" id="tag-selection-filter" checked>
 				<label class="form-check-label" for="tag-selection-filter">Show only selected</label>
 			</div>
 			<div class="form-group list"></div>