score: get correct classes for rows/score icons on the client

classes/article.php

@@ -254,10 +254,7 @@ class Article extends Handler_Protected {
 
 		$sth->execute(array_merge([$score], $ids, [$_SESSION['uid']]));
 
-		print json_encode(array("id" => $ids,
+		print json_encode(["id" => $ids, "score" => (int)$score]);
-			"score" => (int)$score,
-			"score_class" => get_score_class($score),
-			"score_pic" => get_score_pic($score)));
 	}
 
 	function getScore() {
@@ -269,9 +266,7 @@ class Article extends Handler_Protected {
 
 		$score = $row['score'];
 
-		print json_encode(array("id" => $id,
+		print json_encode(["id" => $id, "score" => (int)$score]);
-			"score" => (int)$score,
-			"score_pic" => get_score_pic($score)));
 	}
 
 

classes/feeds.php

@@ -344,9 +344,6 @@ class Feeds extends Handler_Protected {
 
 				$score = $line["score"];
 
-				$line["score_pic"] = get_score_pic($score);
-                $line["score_class"] = get_score_class($score);
-
 				if ($line["tag_cache"])
 					$tags = explode(",", $line["tag_cache"]);
 				else

include/functions.php

@@ -1977,34 +1977,6 @@
 		return $filters;
 	}
 
-	function get_score_pic($score) {
-		if ($score > 500) {
-			return "trending_up";
-		} else if ($score > 0) {
-			return "trending_up";
-		} else if ($score < 0) {
-			return "trending_down";
-		} else {
-			return "trending_neutral";
-		}
-	}
-
-	function get_score_class($score) {
-		if ($score > 500) {
-			$score_class = "score-high";
-		} else if ($score > 0) {
-			$score_class = "score-half-high";
-		} else if ($score < -100) {
-			$score_class = "score-low";
-		} else if ($score < 0) {
-			$score_class = "score-half-low";
-		} else {
-			$score_class = "score-neutral";
-		}
-
-		return $score_class;
-	}
-
 	function init_plugins() {
 		PluginHost::getInstance()->load(PLUGINS, PluginHost::KIND_ALL);
 

js/Article.js

@@ -2,6 +2,30 @@
 /* global __, ngettext */
 define(["dojo/_base/declare"], function (declare) {
 	Article = {
+		getScoreClass: function (score) {
+			if (score > 500) {
+				return "score-high";
+			} else if (score > 0) {
+				return "score-half-high";
+			} else if (score < -100) {
+				return "score-low";
+			} else if (score < 0) {
+				return "score-half-low";
+			} else {
+				return "score-neutral";
+			}
+		},
+		getScorePic: function (score) {
+			if (score > 500) {
+				return "trending_up";
+			} else if (score > 0) {
+				return "trending_up";
+			} else if (score < 0) {
+				return "trending_down";
+			} else {
+				return "trending_neutral";
+			}
+		},
 		selectionSetScore: function () {
 			const ids = Headlines.getSelected();
 
@@ -21,23 +45,20 @@ define(["dojo/_base/declare"], function (declare) {
 							reply.id.each((id) => {
 								const row = $("RROW-" + id);
 
-								row.removeClassName("score-low");
+								["score-low", "score-high", "score-half-low", "score-half-high", "score-neutral"]
-								row.removeClassName("score-high");
+									.each(function(scl) {
-								row.removeClassName("score-half-low");
+										row.removeClassName(scl);
-								row.removeClassName("score-half-high");
+									});
-								row.removeClassName("score-neutral");
-
-								row.addClassName(reply["score_class"]);
 
+								row.addClassName(Article.getScoreClass(reply['score']));
 
 								if (row) {
+									row.setAttribute("data-score", reply["score"]);
+
 									const pic = row.select(".icon-score")[0];
 
-									if (pic) {
+									pic.innerHTML = reply["score_pic"];
-										pic.innerHTML = reply["score_pic"];
+									pic.setAttribute("title", reply["score"]);
-										pic.setAttribute("data-score", reply["score"]);
-										pic.setAttribute("title", reply["score"]);
-									}
 								}
 							});
 						}
@@ -50,7 +71,7 @@ define(["dojo/_base/declare"], function (declare) {
 		},
 		setScore: function (id, pic) {
 			const row = pic.up("div[id*=RROW]");
-			const score = pic.getAttribute("data-score");
+			const score = row.getAttribute("data-score");
 
 			const new_score = prompt(__("Please enter new score for this article:"), score);
 
@@ -60,16 +81,14 @@ define(["dojo/_base/declare"], function (declare) {
 				xhrJson("backend.php", query, (reply) => {
 					if (reply) {
 						pic.innerHTML = reply["score_pic"];
-						pic.setAttribute("data-score", new_score);
+						row.setAttribute("title", new_score);
-						pic.setAttribute("title", new_score);
 
-						row.removeClassName("score-low");
+						["score-low", "score-high", "score-half-low", "score-half-high", "score-neutral"]
-						row.removeClassName("score-high");
+							.each(function(scl) {
-						row.removeClassName("score-half-low");
+								row.removeClassName(scl);
-						row.removeClassName("score-half-high");
+						});
-						row.removeClassName("score-neutral");
 
-						row.addClassName(reply["score_class"]);
+						row.addClassName(Article.getScoreClass(reply['score']));
 					}
 				});
 			}

js/Headlines.js

@@ -400,8 +400,9 @@ define(["dojo/_base/declare"], function (declare) {
 				const comments = Article.formatComments(hl);
 				const originally_from = Article.formatOriginallyFrom(hl);
 
-				row = `<div class="cdm ${row_class} ${hl.score_class}" id="RROW-${hl.id}" data-article-id="${hl.id}" data-orig-feed-id="${hl.feed_id}" 
+				row = `<div class="cdm ${row_class} ${Article.getScoreClass(hl.score)}" id="RROW-${hl.id}" data-article-id="${hl.id}" data-orig-feed-id="${hl.feed_id}" 
-							data-content="${escapeHtml(hl.content)}" onmouseover="Article.mouseIn(${hl.id})" onmouseout="Article.mouseOut(${hl.id})">
+							data-content="${escapeHtml(hl.content)}" data-score="${hl.score}" 
+							onmouseover="Article.mouseIn(${hl.id})" onmouseout="Article.mouseOut(${hl.id})">
 							
 							<div class="header">
 								<div class="left">
@@ -426,8 +427,7 @@ define(["dojo/_base/declare"], function (declare) {
 								<span class="updated" title="${hl.imported}">${hl.updated}</span>
 								
 								<div class="right">                        
-									<i class="material-icons icon-score" title="${hl.score}" data-score="${hl.score}" 
+									<i class="material-icons icon-score" title="${hl.score}" onclick="Article.setScore(${hl.id}, this)">${Article.getScorePic(hl.score)}</i>
-										onclick="Article.setScore(${hl.id}, this)">${hl.score_pic}</i>
 								
 									<span style="cursor : pointer" title="${hl.feed_title}" onclick="Feeds.open({feed:${hl.feed_id}})">
 										${hl.feed_icon}</span>
@@ -464,8 +464,8 @@ define(["dojo/_base/declare"], function (declare) {
 
 
 			} else {
-				row = `<div class="hl ${row_class} ${hl.score_class}" data-orig-feed-id="${hl.feed_id}" data-article-id="${hl.id}" id="RROW-${hl.id}" 
+				row = `<div class="hl ${row_class} ${Article.getScoreClass(hl.score)}" data-orig-feed-id="${hl.feed_id}" data-article-id="${hl.id}" id="RROW-${hl.id}" 
-					onmouseover="Article.mouseIn(${hl.id})" onmouseout="Article.mouseOut(${hl.id})">
+					data-score="${hl.score}" onmouseover="Article.mouseIn(${hl.id})" onmouseout="Article.mouseOut(${hl.id})">
 				<div class="left">
 					<input dojoType="dijit.form.CheckBox" type="checkbox" onclick="Headlines.onRowChecked(this)" class='rchk'>
 				    <i class="marked-pic marked-${hl.id} material-icons" onclick="Headlines.toggleMark(${hl.id})">star</i>
@@ -485,8 +485,7 @@ define(["dojo/_base/declare"], function (declare) {
 				  <span class="updated">${hl.updated}</span>
 				</div>
 				<div class="right">
-				  <i class="material-icons icon-score" title="${hl.score}" data-score="${hl.score}"
+				  <i class="material-icons icon-score" title="${hl.score}" onclick="Article.setScore(${hl.id}, this)">${Article.getScorePic(hl.score)}</i>
-				  onclick="Article.setScore(${hl.id}, this)">${hl.score_pic}</i>
 				  <span onclick="Feeds.open({feed:${hl.feed_id})" style="cursor : pointer" title="${hl.feed_title}">${hl.feed_icon}</span>
 				</div>
 			  </div>