refactor labels article menu (#6864)

* refactor labels menu with template

* reduce network traffic

3 files changed, 43 insertions, 18 deletions

diff --git a/app/views/helpers/index/normal/entry_bottom.phtml b/app/views/helpers/index/normal/entry_bottom.phtml
index 51c103a74..6ebd17949 100644
--- a/app/views/helpers/index/normal/entry_bottom.phtml
+++ b/app/views/helpers/index/normal/entry_bottom.phtml
@@ -41,16 +41,6 @@
 			<a class="dropdown-toggle" href="#dropdown-labels-<?= $this->entry->id() ?>">
 				<?= _i('label') ?><?= _t('index.menu.tags') ?>
 			</a>
-			<ul class="dropdown-menu dropdown-menu-scrollable scrollbar-thin">
-				<li class="dropdown-header">
-					<?= _t('index.menu.tags') ?>
-					<?php if (FreshRSS_Auth::hasAccess()) { ?>
-						<a href="<?= _url('tag', 'index') ?>"><?= _i('configure') ?></a>
-					<?php } ?>
-				</li>
-				<!-- Ajax -->
-			</ul>
-			<a class="dropdown-close" href="#close">❌</a>
 		</div>
 	</li><?php
 	}
diff --git a/app/views/index/normal.phtml b/app/views/index/normal.phtml
index 63d96e01f..816089eb2 100644
--- a/app/views/index/normal.phtml
+++ b/app/views/index/normal.phtml
@@ -23,6 +23,19 @@ $today = @strtotime('today');
 	<a class="dropdown-close" href="#close">❌</a>
 </template>
 
+<template id="labels_article_template">
+	<ul class="dropdown-menu dropdown-menu-scrollable scrollbar-thin">
+		<li class="dropdown-header">
+			<?= _t('index.menu.tags') ?>
+			<?php if (FreshRSS_Auth::hasAccess()) { ?>
+				<a href="<?= _url('tag', 'index') ?>"><?= _i('configure') ?></a>
+			<?php } ?>
+		</li>
+		<!-- Ajax -->
+	</ul>
+	<a class="dropdown-close" href="#close">❌</a>
+</template>
+
 <main id="stream" class="normal<?= FreshRSS_Context::userConf()->display_posts ? '' : ' hide_posts' ?>">
 	<h1 class="title_hidden"><?= _t('conf.reading.view.normal') ?></h1>
 	<div id="new-article">
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) {