refactor labels article menu (#6864)

* refactor labels menu with template

* reduce network traffic

1 files changed, 30 insertions, 8 deletions

diff --git a/p/scripts/main.js b/p/scripts/main.js
index 609e8ac80..e11c35205 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -697,6 +697,25 @@ function user_filter(key) {
 	}
 }
 
+function show_labels_menu(el) {
+	const div = el.parentElement;
+	const dropdownMenu = div.querySelector('.dropdown-menu');
+
+	if (!dropdownMenu || forceReloadLabelsList) {
+		if (dropdownMenu) {
+			dropdownMenu.nextElementSibling.remove();
+			dropdownMenu.remove();
+		}
+
+		const templateId = 'labels_article_template';
+		const template = document.getElementById(templateId).innerHTML;
+		div.insertAdjacentHTML('beforeend', template);
+
+		loadDynamicTags(div.closest('.dynamictags'));
+	}
+	return true;
+}
+
 function show_share_menu(el) {
 	const div = el.parentElement;
 	const dropdownMenu = div.querySelector('.dropdown-menu');
@@ -1116,12 +1135,6 @@ function init_stream(stream) {
 			return false;
 		}
 
-		el = ev.target.closest('.dynamictags');
-		if (el) {
-			loadDynamicTags(el);
-			return true;
-		}
-
 		el = ev.target.closest('.item a.title');
 		if (el) {	// Allow default control/command-click behaviour such as open in background-tab
 			return ev.ctrlKey || ev.metaKey;
@@ -1136,6 +1149,11 @@ function init_stream(stream) {
 			return true;
 		}
 
+		el = ev.target.closest('.item.labels a.dropdown-toggle');
+		if (el) {
+			return show_labels_menu(el);
+		}
+
 		el = ev.target.closest('.item.share a.dropdown-toggle');
 		if (el) {
 			return show_share_menu(el);
@@ -1306,6 +1324,7 @@ function init_stream(stream) {
 				req.onloadend = function (e) {
 					checkboxTag.disabled = false;
 					if (tagId == 0) {
+						forceReloadLabelsList = true;
 						loadDynamicTags(checkboxTag.closest('div.dropdown'));
 					}
 				};
@@ -1357,8 +1376,12 @@ function init_nav_entries() {
 	}
 }
 
+// forceReloadLabelsList default is false, so that the list does need a reload after opening it a second time.
+// will be set to true, if a new tag is added. Then the labels list will be reloaded each opening.
+// purpose of this flag: minimize the network traffic.
+let forceReloadLabelsList = false;
+
 function loadDynamicTags(div) {
-	div.classList.remove('dynamictags');
 	div.querySelectorAll('li.item').forEach(function (li) { li.remove(); });
 	const entryId = div.closest('div.flux').id.replace(/^flux_/, '');
 
@@ -1367,7 +1390,6 @@ function loadDynamicTags(div) {
 	req.responseType = 'json';
 	req.onerror = function (e) {
 		div.querySelectorAll('li.item').forEach(function (li) { li.remove(); });
-		div.classList.add('dynamictags');
 	};
 	req.onload = function (e) {
 		if (this.status != 200) {