render tags on the client

classes/article.php

@@ -199,8 +199,10 @@ class Article extends Handler_Protected {
 
 		$id = clean($_REQUEST["id"]);
 
-		$tags_str = clean($_REQUEST["tags_str"]);
-		$tags = array_unique(array_map('trim', explode(",", $tags_str)));
+		//$tags_str = clean($_REQUEST["tags_str"]);
+		//$tags = array_unique(array_map('trim', explode(",", $tags_str)));
+
+		$tags = FeedItem_Common::normalize_categories(explode(",", clean($_REQUEST["tags_str"])));
 
 		$this->pdo->beginTransaction();
 
@@ -225,8 +227,6 @@ class Article extends Handler_Protected {
 				(post_int_id, owner_uid, tag_name)
 				VALUES (?, ?, ?)");
 
-			$tags = FeedItem_Common::normalize_categories($tags);
-
 			foreach ($tags as $tag) {
 				$csth->execute([$int_id, $_SESSION['uid'], $tag]);
 
@@ -248,14 +248,7 @@ class Article extends Handler_Protected {
 
 		$this->pdo->commit();
 
-		$tags = self::_get_tags($id);
-		$tags_str = $this->_format_tags_html($tags);
-		$tags_str_full = join(", ", $tags);
-
-		if (!$tags_str_full) $tags_str_full = __("no tags");
-
-		print json_encode(array("id" => (int)$id,
-				"content" => $tags_str, "content_full" => $tags_str_full));
+		print json_encode(["id" => (int)$id, "tags" => $tags]);
 	}
 
 
@@ -425,42 +418,6 @@ class Article extends Handler_Protected {
 		return $tags;
 	}
 
-	static function _format_tags_html($tags) {
-		if (!is_array($tags) || count($tags) == 0) {
-			return __("no tags");
-		} else {
-			$maxtags = min(5, count($tags));
-			$tags_str = "";
-
-			for ($i = 0; $i < $maxtags; $i++) {
-				$tags_str .= "<a class=\"tag\" href=\"#\" onclick=\"Feeds.open({feed:'".$tags[$i]."'})\">" . $tags[$i] . "</a>, ";
-			}
-
-			$tags_str = mb_substr($tags_str, 0, mb_strlen($tags_str)-2);
-
-			if (count($tags) > $maxtags)
-				$tags_str .= ", &hellip;";
-
-			return $tags_str;
-		}
-	}
-
-	static function _format_labels_html($labels) {
-
-		if (!is_array($labels)) return '';
-
-		$labels_str = "";
-
-		foreach ($labels as $l) {
-			$labels_str .= sprintf("<div class='label'
-				style='color : %s; background-color : %s'>%s</div>",
-				$l[2], $l[3], $l[1]);
-		}
-
-		return $labels_str;
-
-	}
-
 	static function _format_note_html($id, $note, $allow_edit = true) {
 		if ($allow_edit) {
 			$onclick = "onclick='Plugins.Note.edit($id)'";

classes/feeds.php

@@ -299,7 +299,7 @@ class Feeds extends Handler_Protected {
 				else
 					$tags = false;
 
-				$line["tags_str"] = Article::_format_tags_html($tags);
+				$line["tags"] = Article::_get_tags($line["id"], false, $line["tag_cache"]);
 
 				$this->_mark_timestamp("   tags");
 

js/Article.js

@@ -130,6 +130,14 @@ const Article = {
 
 		Headlines.toggleUnread(id, 0);
 	},
+	renderTags: function (id, tags) {
+		const tags_short = tags.length > 5 ? tags.slice(0, 5) : tags;
+
+		return `<span class="tags" title="${tags.join(", ")}" data-tags-for="${id}">
+			${tags_short.length > 0 ? tags_short.map((tag) => `
+				<a href="#" onclick="Feeds.open({feed: '${tag.trim()}'})" class="tag">${tag}</a>`
+			).join(", ") : `${__("no tags")}`}</span>`;
+	},
 	renderLabels: function(id, labels) {
 		return `<span class="labels" data-labels-for="${id}">${labels.map((label) => `
 			<span class="label" data-label-id="${label[0]}"
@@ -286,7 +294,7 @@ const Article = {
 							<div class="comments">${comments}</div>
 							<div class="author">${hl.author}</div>
 							<i class="material-icons">label_outline</i>
-							<span id="ATSTR-${hl.id}">${hl.tags_str}</span>
+							${Article.renderTags(hl.id, hl.tags)}
 							&nbsp;<a title="${__("Edit tags for this article")}" href="#"
 								onclick="Article.editTags(${hl.id})">(+)</a>
 							<div class="buttons right">${hl.buttons}</div>
@@ -343,13 +351,13 @@ const Article = {
 							dialog.hide();
 
 							if (data) {
-								const id = data.id;
-
-								const tags = App.byId("ATSTR-" + id);
-								const tooltip = dijit.byId("ATSTRTIP-" + id);
+								if (Headlines.headlines[data.id]) {
+									Headlines.headlines[data.id].tags = data.tags;
+								}
 
-								if (tags) tags.innerHTML = data.content;
-								if (tooltip) tooltip.attr('label', data.content_full);
+								App.findAll(`span[data-tags-for="${data.id}"`).forEach((ctr) => {
+									ctr.innerHTML = Article.renderTags(data.id, data.tags);
+								});
 							}
 						} catch (e) {
 							App.Error.report(e);

js/Headlines.js

@@ -495,7 +495,7 @@ const Headlines = {
 								<div class="left">
 									${hl.buttons_left}
 									<i class="material-icons">label_outline</i>
-									<span id="ATSTR-${hl.id}">${hl.tags_str}</span>
+									${Article.renderTags(hl.id, hl.tags)}
 									<a title="${__("Edit tags for this article")}" href="#"
 										onclick="Article.editTags(${hl.id})">(+)</a>
 									${comments}