render headline labels on the client

classes/article.php

@@ -292,22 +292,17 @@ class Article extends Handler_Protected {
 
 		$label = Labels::find_caption($label_id, $_SESSION["uid"]);
 
-		$reply["info-for-headlines"] = array();
+		$reply["labels-for"] = [];
 
 		if ($label) {
-
 			foreach ($ids as $id) {
-
 				if ($assign)
 					Labels::add_article($id, $label, $_SESSION["uid"]);
 				else
 					Labels::remove_article($id, $label, $_SESSION["uid"]);
 
-				$labels = $this->_get_labels($id, $_SESSION["uid"]);
-
-				array_push($reply["info-for-headlines"],
-				array("id" => $id, "labels" => $this->_format_labels_html($labels)));
-
+				array_push($reply["labels-for"],
+					["id" => (int)$id, "labels" => $this->_get_labels($id)]);
 			}
 		}
 

classes/feeds.php

@@ -216,11 +216,7 @@ class Feeds extends Handler_Protected {
 
 				if (!is_array($labels)) $labels = Article::_get_labels($id);
 
-				$labels_str = "<span class=\"HLLCTR-$id\">";
-				$labels_str .= Article::_format_labels_html($labels);
-				$labels_str .= "</span>";
-
-				$line["labels"] = $labels_str;
+				$line["labels"] = Article::_get_labels($id);
 
 				if (count($topmost_article_ids) < 3) {
 					array_push($topmost_article_ids, $id);

js/Article.js

@@ -130,6 +130,12 @@ const Article = {
 
 		Headlines.toggleUnread(id, 0);
 	},
+	renderLabels: function(id, labels) {
+		return `<span class="labels" data-labels-for="${id}">${labels.map((label) => `
+			<span class="label" data-label-id="${label[0]}"
+					style="color : ${label[2]}; background-color : ${label[3]}">${App.escapeHtml(label[1])}</span>`
+		).join("")}</span>`;
+	},
 	renderEnclosures: function (enclosures) {
 
 		// enclosure list was handled by backend (HOOK_FORMAT_ENCLOSURES)

js/Headlines.js

@@ -462,7 +462,7 @@ const Headlines = {
 								<a class="title" title="${App.escapeHtml(hl.title)}" target="_blank" rel="noopener noreferrer" href="${App.escapeHtml(hl.link)}">
 									${hl.title}</a>
 								<span class="author">${hl.author}</span>
-								${hl.labels}
+								${Article.renderLabels(hl.id, hl.labels)}
 								${hl.cdm_excerpt ? hl.cdm_excerpt : ""}
 							</span>
 
@@ -527,7 +527,7 @@ const Headlines = {
 				<span data-article-id="${hl.id}" class="hl-content hlMenuAttach">
 					<a class="title" href="${App.escapeHtml(hl.link)}">${hl.title} <span class="preview">${hl.content_preview}</span></a>
 					<span class="author">${hl.author}</span>
-					${hl.labels}
+					${Article.renderLabels(hl.id, hl.labels)}
 				</span>
 			</div>
 					<span class="feed">
@@ -1240,11 +1240,16 @@ const Headlines = {
 			}
 		}
 	},
+	// TODO: maybe this should cause article to be rendered again, although it might cause flicker etc
 	onLabelsUpdated: function (data) {
 		if (data) {
-			data['info-for-headlines'].forEach(function (elem) {
-				App.findAll(".HLLCTR-" + elem.id).forEach(function (ctr) {
-					ctr.innerHTML = elem.labels;
+			data["labels-for"].forEach((row) => {
+				if (this.headlines[row.id]) {
+					this.headlines[row.id].labels = row.labels;
+				}
+
+				App.findAll(`span[data-labels-for="${row.id}"]`).forEach((ctr) => {
+					ctr.innerHTML = Article.renderLabels(row.id, row.labels);
 				});
 			});
 		}