format note on the client

classes/article.php

@@ -419,21 +419,6 @@ class Article extends Handler_Protected {
 		return $tags;
 	}
 
-	static function _format_note_html($id, $note, $allow_edit = true) {
-		if ($allow_edit) {
-			$onclick = "onclick='Plugins.Note.edit($id)'";
-			$note_class = 'editable';
-		} else {
-			$onclick = '';
-			$note_class = '';
-		}
-
-		return "<div class='article-note $note_class'>
-			<i class='material-icons'>note</i>
-			<div $onclick class='body'>$note</div>
-			</div>";
-	}
-
 	function getmetadatabyid() {
 		$id = clean($_REQUEST['id']);
 

classes/feeds.php

@@ -260,11 +260,6 @@ class Feeds extends Handler_Protected {
 
 				$this->_mark_timestamp("   disk_cache_rewrite");
 
-				if ($line['note'])
-					$line['note'] = Article::_format_note_html($id, $line['note']);
-				else
-					$line['note'] = "";
-
 				$this->_mark_timestamp("   note");
 
 				if (!get_pref("CDM_EXPANDED")) {

js/Article.js

@@ -130,6 +130,11 @@ const Article = {
 
 		Headlines.toggleUnread(id, 0);
 	},
+	renderNote: function (id, note) {
+		return `<div class="article-note" data-note-for="${id}" style="display : ${note ? "" : "none"}">
+				${App.FormFields.icon('note')} <div onclick class='body'>${note ? App.escapeHtml(note) : ""}</div>
+			</div>`;
+	},
 	renderTags: function (id, tags) {
 		const tags_short = tags.length > 5 ? tags.slice(0, 5) : tags;
 
@@ -300,7 +305,7 @@ const Article = {
 							<div class="buttons right">${hl.buttons}</div>
 						</div>
 					</div>
-					<div id="POSTNOTE-${hl.id}">${hl.note}</div>
+					${Article.renderNote(hl.id, hl.note)}
 					<div class="content" lang="${hl.lang ? hl.lang : 'en'}">
 						${hl.content}
 						${Article.renderEnclosures(hl.enclosures)}

js/Headlines.js

@@ -483,7 +483,7 @@ const Headlines = {
 						</div>
 
 						<div class="content" onclick="return Headlines.click(event, ${hl.id}, true);">
-							<div id="POSTNOTE-${hl.id}">${hl.note}</div>
+							${Article.renderNote(hl.id, hl.note)}
 							<div class="content-inner" lang="${hl.lang ? hl.lang : 'en'}">
 								<img src="${App.getInitParam('icon_indicator_white')}">
 							</div>

js/common.js

@@ -71,9 +71,9 @@ Element.prototype.fadeOut = function() {
 	}());
 };
 
-Element.prototype.fadeIn = function(display){
+Element.prototype.fadeIn = function(display = undefined){
 	this.style.opacity = 0;
-	this.style.display = display || "block";
+	this.style.display = display == undefined ? "block" : display;
 	const self = this;
 
 	(function fade() {

plugins/note/init.php

@@ -55,17 +55,14 @@ class Note extends Plugin {
 	}
 
 	function setNote() {
-		$id = $_REQUEST["id"];
+		$id = (int)clean($_REQUEST["id"]);
-		$note = trim(strip_tags($_REQUEST["note"]));
+		$note = clean($_REQUEST["note"]);
 
 		$sth = $this->pdo->prepare("UPDATE ttrss_user_entries SET note = ?
 			WHERE ref_id = ? AND owner_uid = ?");
 		$sth->execute([$note, $id, $_SESSION['uid']]);
 
-		$formatted_note = Article::_format_note_html($id, $note);
+		print json_encode(["id" => $id, "note" => $note]);
-
-		print json_encode(array("note" => $formatted_note,
-				"raw_length" => mb_strlen($note)));
 	}
 
 	function api_version() {

plugins/note/note.js

@@ -13,16 +13,14 @@ Plugins.Note = {
 						dialog.hide();
 
 						if (reply) {
-							const elem = App.byId("POSTNOTE-" + id);
+							App.findAll(`div[data-note-for="${reply.id}"]`).forEach((elem) => {
+								elem.querySelector(".body").innerHTML = reply.note;
 
-							if (elem) {
+								if (reply.note)
-								elem.innerHTML = reply.note;
+									elem.show();
-
-								if (reply.raw_length != 0)
-									Element.show(elem);
 								else
-									Element.hide(elem);
+									elem.hide();
-							}
+							});
 						}
 					});
 				}