toggleMark, togglePub: refactor implementation

shorten marked/published img CSS classes

classes/feeds.php

@@ -331,11 +331,11 @@ class Feeds extends Handler_Protected {
 
 				$marked_pic_src = $line["marked"] ? "mark_set.png" : "mark_unset.png";
 				$class .= $line["marked"] ? " marked" : "";
-				$marked_pic = "<img src=\"images/$marked_pic_src\" class=\"markedPic\" onclick='toggleMark($id)'>";
+				$marked_pic = "<img src=\"images/$marked_pic_src\" class=\"marked-pic marked-$id\" onclick='toggleMark($id)'>";
 
 				$published_pic_src = $line["published"] ? "pub_set.png" : "pub_unset.png";
 				$class .= $line["published"] ? " published" : "";
-                $published_pic = "<img src=\"images/$published_pic_src\" class=\"pubPic\" onclick='togglePub($id)'>";
+                $published_pic = "<img src=\"images/$published_pic_src\" class=\"pub-pic pub-$id\" onclick='togglePub($id)'>";
 
 				$updated_fmt = make_local_datetime($line["updated"], false, false, false, true);
 				$date_entered_fmt = T_sprintf("Imported at %s",

classes/pref/users.php

@@ -425,7 +425,7 @@ class Pref_Users extends Handler_Protected {
 
 				$onclick = "onclick='editUser($uid, event)' title='".__('Click to edit')."'";
 
-				print "<td $onclick><img src='images/user.png' class='markedPic' alt=''> " . $line["login"] . "</td>";
+				print "<td $onclick><img src='images/user.png' class='marked-pic' alt=''> " . $line["login"] . "</td>";
 
 				if (!$line["email"]) $line["email"] = "&nbsp;";
 

css/tt-rss.less

@@ -561,14 +561,14 @@ body.ttrss_main {
 		border-radius : 4px;
 	}
 
-	img.markedPic, img.pubPic {
+	img.marked-pic, img.pub-pic {
 		cursor : pointer;
 		vertical-align : middle;
 		opacity : 0.5;
 		transition : opacity 0.25s;
 	}
 
-	img.markedPic:hover, img.pubPic:hover {
+	img.marked-pic:hover, img.pub-pic:hover {
 		opacity : 1;
 	}
 

js/PrefFilterTree.js

@@ -26,7 +26,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree"], functio
 			if (this.model.store.getValue(args.item, 'id') != 'root') {
 				const img = dojo.doc.createElement('img');
 				img.src ='images/filter.png';
-				img.className = 'markedPic';
+				img.className = 'marked-pic';
 				tnode._filterIconNode = img;
 				domConstruct.place(tnode._filterIconNode, tnode.labelNode, 'before');
 			}

js/viewfeed.js

@@ -400,27 +400,11 @@ function toggleMark(id, client_only) {
 	const query = { op: "rpc", id: id, method: "mark" };
 
 	const row = $("RROW-" + id);
-	if (!row) return;
-
-	const imgs = [];
-
-	const row_imgs = row.getElementsByClassName("markedPic");
-
-	for (let i = 0; i < row_imgs.length; i++)
-		imgs.push(row_imgs[i]);
-
-	const ft = $("floatingTitle");
-
-	if (ft && ft.getAttribute("data-article-id") == id) {
-		const fte = ft.getElementsByClassName("markedPic");
-
-		for (var i = 0; i < fte.length; i++)
-			imgs.push(fte[i]);
-	}
 
-	for (i = 0; i < imgs.length; i++) {
+	if (row) {
-		const img = imgs[i];
+		const imgs = $$("img[class*=marked-pic][class*=marked-" + id + "]");
 
+		imgs.each((img) => {
 			if (!row.hasClassName("marked")) {
 				img.src = img.src.replace("mark_unset", "mark_set");
 				query.mark = 1;
@@ -428,7 +412,7 @@ function toggleMark(id, client_only) {
 				img.src = img.src.replace("mark_set", "mark_unset");
 				query.mark = 0;
 			}
-	}
+		});
 
 		row.toggleClassName("marked");
 
@@ -437,38 +421,23 @@ function toggleMark(id, client_only) {
 				handle_rpc_json(transport);
 			});
 	}
+}
 
 function togglePub(id, client_only, no_effects, note) {
 	const query = { op: "rpc", id: id, method: "publ" };
 
+	const row = $("RROW-" + id);
+
+	if (row) {
 		if (note != undefined) {
 			query.note = note;
 		} else {
 			query.note = "undefined";
 		}
 
-	const row = $("RROW-" + id);
+		const imgs = $$("img[class*=pub-pic][class*=pub-" + id + "]");
-	if (!row) return;
-
-	const imgs = [];
-
-	const row_imgs = row.getElementsByClassName("pubPic");
-
-	for (let i = 0; i < row_imgs.length; i++)
-		imgs.push(row_imgs[i]);
-
-	const ft = $("floatingTitle");
-
-	if (ft && ft.getAttribute("data-article-id") == id) {
-		const fte = ft.getElementsByClassName("pubPic");
-
-		for (let i = 0; i < fte.length; i++)
-			imgs.push(fte[i]);
-	}
-
-	for (let i = 0; i < imgs.length; i++) {
-		const img = imgs[i];
 
+		imgs.each((img) => {
 			if (!row.hasClassName("published") || note != undefined) {
 				img.src = img.src.replace("pub_unset", "pub_set");
 				query.pub = 1;
@@ -476,7 +445,7 @@ function togglePub(id, client_only, no_effects, note) {
 				img.src = img.src.replace("pub_set", "pub_unset");
 				query.pub = 0;
 			}
-	}
+		});
 
 		if (note != undefined)
 			row.addClassName("published");
@@ -487,6 +456,8 @@ function togglePub(id, client_only, no_effects, note) {
 			xhrPost("backend.php", query, (transport) => {
 				handle_rpc_json(transport);
 			});
+
+	}
 }
 
 function moveToPost(mode, noscroll, noexpand) {
@@ -1932,7 +1903,7 @@ function updateFloatingTitle(unread_only) {
 
 					$("floatingTitle").setAttribute("data-article-id", child.getAttribute("data-article-id"));
 					$("floatingTitle").innerHTML = header.innerHTML;
-					$("floatingTitle").firstChild.innerHTML = "<img class='anchor markedPic' src='images/page_white_go.png' onclick=\"scrollToRowId('" + child.id + "')\">" + $("floatingTitle").firstChild.innerHTML;
+					$("floatingTitle").firstChild.innerHTML = "<img class='anchor marked-pics' src='images/page_white_go.png' onclick=\"scrollToRowId('" + child.id + "')\">" + $("floatingTitle").firstChild.innerHTML;
 
 					initFloatingMenu();
 

plugins/mark_button/init.php

@@ -22,12 +22,12 @@ class Mark_Button extends Plugin {
 			if (sql_bool_to_bool($line["marked"])) {
 				$marked_pic = "<img
 					src=\"images/mark_set.png\"
-					class=\"markedPic\" alt=\"Unstar article\"
+					class=\"marked-pic marked-$id\" alt=\"Unstar article\"
 					onclick='toggleMark($id)'>";
 			} else {
 				$marked_pic = "<img
 					src=\"images/mark_unset.png\"
-					class=\"markedPic\" alt=\"Star article\"
+					class=\"marked-pic marked-$id\" alt=\"Star article\"
 					onclick='toggleMark($id)'>";
 			}
 		}