toggleMark, togglePub: refactor implementation

shorten marked/published img CSS classes
This commit is contained in:
Andrew Dolgov 2018-12-01 08:20:09 +03:00
parent 3325979bf0
commit a2ef54cd92
7 changed files with 53 additions and 82 deletions

View File

@ -331,11 +331,11 @@ class Feeds extends Handler_Protected {
$marked_pic_src = $line["marked"] ? "mark_set.png" : "mark_unset.png"; $marked_pic_src = $line["marked"] ? "mark_set.png" : "mark_unset.png";
$class .= $line["marked"] ? " marked" : ""; $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"; $published_pic_src = $line["published"] ? "pub_set.png" : "pub_unset.png";
$class .= $line["published"] ? " published" : ""; $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); $updated_fmt = make_local_datetime($line["updated"], false, false, false, true);
$date_entered_fmt = T_sprintf("Imported at %s", $date_entered_fmt = T_sprintf("Imported at %s",

View File

@ -425,7 +425,7 @@ class Pref_Users extends Handler_Protected {
$onclick = "onclick='editUser($uid, event)' title='".__('Click to edit')."'"; $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;"; if (!$line["email"]) $line["email"] = "&nbsp;";

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

@ -400,93 +400,64 @@ function toggleMark(id, client_only) {
const query = { op: "rpc", id: id, method: "mark" }; const query = { op: "rpc", id: id, method: "mark" };
const row = $("RROW-" + id); const row = $("RROW-" + id);
if (!row) return;
const imgs = []; if (row) {
const imgs = $$("img[class*=marked-pic][class*=marked-" + id + "]");
const row_imgs = row.getElementsByClassName("markedPic"); imgs.each((img) => {
if (!row.hasClassName("marked")) {
for (let i = 0; i < row_imgs.length; i++) img.src = img.src.replace("mark_unset", "mark_set");
imgs.push(row_imgs[i]); query.mark = 1;
} else {
const ft = $("floatingTitle"); img.src = img.src.replace("mark_set", "mark_unset");
query.mark = 0;
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++) {
const img = imgs[i];
if (!row.hasClassName("marked")) {
img.src = img.src.replace("mark_unset", "mark_set");
query.mark = 1;
} else {
img.src = img.src.replace("mark_set", "mark_unset");
query.mark = 0;
}
}
row.toggleClassName("marked");
if (!client_only)
xhrPost("backend.php", query, (transport) => {
handle_rpc_json(transport);
}); });
row.toggleClassName("marked");
if (!client_only)
xhrPost("backend.php", query, (transport) => {
handle_rpc_json(transport);
});
} }
}
function togglePub(id, client_only, no_effects, note) { function togglePub(id, client_only, no_effects, note) {
const query = { op: "rpc", id: id, method: "publ" }; const query = { op: "rpc", id: id, method: "publ" };
if (note != undefined) {
query.note = note;
} else {
query.note = "undefined";
}
const row = $("RROW-" + id); const row = $("RROW-" + id);
if (!row) return;
const imgs = []; if (row) {
if (note != undefined) {
const row_imgs = row.getElementsByClassName("pubPic"); query.note = note;
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];
if (!row.hasClassName("published") || note != undefined) {
img.src = img.src.replace("pub_unset", "pub_set");
query.pub = 1;
} else { } else {
img.src = img.src.replace("pub_set", "pub_unset"); query.note = "undefined";
query.pub = 0;
} }
}
if (note != undefined) const imgs = $$("img[class*=pub-pic][class*=pub-" + id + "]");
row.addClassName("published");
else
row.toggleClassName("published");
if (!client_only) imgs.each((img) => {
xhrPost("backend.php", query, (transport) => { if (!row.hasClassName("published") || note != undefined) {
handle_rpc_json(transport); img.src = img.src.replace("pub_unset", "pub_set");
query.pub = 1;
} else {
img.src = img.src.replace("pub_set", "pub_unset");
query.pub = 0;
}
}); });
if (note != undefined)
row.addClassName("published");
else
row.toggleClassName("published");
if (!client_only)
xhrPost("backend.php", query, (transport) => {
handle_rpc_json(transport);
});
}
} }
function moveToPost(mode, noscroll, noexpand) { function moveToPost(mode, noscroll, noexpand) {
@ -1932,7 +1903,7 @@ function updateFloatingTitle(unread_only) {
$("floatingTitle").setAttribute("data-article-id", child.getAttribute("data-article-id")); $("floatingTitle").setAttribute("data-article-id", child.getAttribute("data-article-id"));
$("floatingTitle").innerHTML = header.innerHTML; $("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(); initFloatingMenu();

View File

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