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

2 files changed, 47 insertions, 29 deletions

diff --git a/js/Article.js b/js/Article.js
index 3f595ff29..cfba3804b 100644
--- a/js/Article.js
+++ b/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");
-								row.removeClassName("score-high");
-								row.removeClassName("score-half-low");
-								row.removeClassName("score-half-high");
-								row.removeClassName("score-neutral");
-
-								row.addClassName(reply["score_class"]);
+								["score-low", "score-high", "score-half-low", "score-half-high", "score-neutral"]
+									.each(function(scl) {
+										row.removeClassName(scl);
+									});
 
+								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.setAttribute("data-score", reply["score"]);
-										pic.setAttribute("title", reply["score"]);
-									}
+									pic.innerHTML = reply["score_pic"];
+									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);
-						pic.setAttribute("title", new_score);
+						row.setAttribute("title", new_score);
 
-						row.removeClassName("score-low");
-						row.removeClassName("score-high");
-						row.removeClassName("score-half-low");
-						row.removeClassName("score-half-high");
-						row.removeClassName("score-neutral");
+						["score-low", "score-high", "score-half-low", "score-half-high", "score-neutral"]
+							.each(function(scl) {
+								row.removeClassName(scl);
+						});
 
-						row.addClassName(reply["score_class"]);
+						row.addClassName(Article.getScoreClass(reply['score']));
 					}
 				});
 			}
diff --git a/js/Headlines.js b/js/Headlines.js
index 1db858bb7..64b3bd69d 100755
--- a/js/Headlines.js
+++ b/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}" 
-							data-content="${escapeHtml(hl.content)}" onmouseover="Article.mouseIn(${hl.id})" onmouseout="Article.mouseOut(${hl.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)}" 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}" 
-										onclick="Article.setScore(${hl.id}, this)">${hl.score_pic}</i>
+									<i class="material-icons icon-score" title="${hl.score}" onclick="Article.setScore(${hl.id}, this)">${Article.getScorePic(hl.score)}</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}" 
-					onmouseover="Article.mouseIn(${hl.id})" onmouseout="Article.mouseOut(${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}" 
+					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}"
-				  onclick="Article.setScore(${hl.id}, this)">${hl.score_pic}</i>
+				  <i class="material-icons icon-score" title="${hl.score}" onclick="Article.setScore(${hl.id}, this)">${Article.getScorePic(hl.score)}</i>
 				  <span onclick="Feeds.open({feed:${hl.feed_id})" style="cursor : pointer" title="${hl.feed_title}">${hl.feed_icon}</span>
 				</div>
 			  </div>