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

This commit is contained in:
Andrew Dolgov 2018-12-11 10:00:54 +03:00
parent fd6f3e7f07
commit 25ca144bb7
5 changed files with 49 additions and 67 deletions

View File

@ -254,10 +254,7 @@ class Article extends Handler_Protected {
$sth->execute(array_merge([$score], $ids, [$_SESSION['uid']])); $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() { function getScore() {
@ -269,9 +266,7 @@ class Article extends Handler_Protected {
$score = $row['score']; $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)));
} }

View File

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

View File

@ -1977,34 +1977,6 @@
return $filters; 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() { function init_plugins() {
PluginHost::getInstance()->load(PLUGINS, PluginHost::KIND_ALL); PluginHost::getInstance()->load(PLUGINS, PluginHost::KIND_ALL);

View File

@ -2,6 +2,30 @@
/* global __, ngettext */ /* global __, ngettext */
define(["dojo/_base/declare"], function (declare) { define(["dojo/_base/declare"], function (declare) {
Article = { 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 () { selectionSetScore: function () {
const ids = Headlines.getSelected(); const ids = Headlines.getSelected();
@ -21,23 +45,20 @@ define(["dojo/_base/declare"], function (declare) {
reply.id.each((id) => { reply.id.each((id) => {
const row = $("RROW-" + 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) { if (row) {
row.setAttribute("data-score", reply["score"]);
const pic = row.select(".icon-score")[0]; 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) { setScore: function (id, pic) {
const row = pic.up("div[id*=RROW]"); 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); 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) => { xhrJson("backend.php", query, (reply) => {
if (reply) { if (reply) {
pic.innerHTML = reply["score_pic"]; 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']));
} }
}); });
} }

View File

@ -400,8 +400,9 @@ define(["dojo/_base/declare"], function (declare) {
const comments = Article.formatComments(hl); const comments = Article.formatComments(hl);
const originally_from = Article.formatOriginallyFrom(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="header">
<div class="left"> <div class="left">
@ -426,8 +427,7 @@ define(["dojo/_base/declare"], function (declare) {
<span class="updated" title="${hl.imported}">${hl.updated}</span> <span class="updated" title="${hl.imported}">${hl.updated}</span>
<div class="right"> <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}})"> <span style="cursor : pointer" title="${hl.feed_title}" onclick="Feeds.open({feed:${hl.feed_id}})">
${hl.feed_icon}</span> ${hl.feed_icon}</span>
@ -464,8 +464,8 @@ define(["dojo/_base/declare"], function (declare) {
} else { } 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"> <div class="left">
<input dojoType="dijit.form.CheckBox" type="checkbox" onclick="Headlines.onRowChecked(this)" class='rchk'> <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> <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> <span class="updated">${hl.updated}</span>
</div> </div>
<div class="right"> <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> <span onclick="Feeds.open({feed:${hl.feed_id})" style="cursor : pointer" title="${hl.feed_title}">${hl.feed_icon}</span>
</div> </div>
</div> </div>