456 lines
13 KiB
JavaScript
456 lines
13 KiB
JavaScript
'use strict'
|
|
|
|
/* eslint-disable no-new */
|
|
/* global __, ngettext, App, Headlines, xhr, dojo, dijit, PluginHost, Notify, fox */
|
|
|
|
const Article = {
|
|
_scroll_reset_timeout: false,
|
|
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();
|
|
|
|
if (ids.length > 0) {
|
|
const score = prompt(__("Please enter new score for selected articles:"));
|
|
|
|
if (!isNaN(parseInt(score))) {
|
|
ids.forEach((id) => {
|
|
const row = App.byId(`RROW-${id}`);
|
|
|
|
if (row) {
|
|
row.setAttribute("data-score", score);
|
|
|
|
const pic = row.querySelector(".icon-score");
|
|
|
|
pic.innerHTML = Article.getScorePic(score);
|
|
pic.setAttribute("title", score);
|
|
|
|
["score-low", "score-high", "score-half-low", "score-half-high", "score-neutral"]
|
|
.forEach(function(scl) {
|
|
if (row.hasClassName(scl))
|
|
row.removeClassName(scl);
|
|
});
|
|
|
|
row.addClassName(Article.getScoreClass(score));
|
|
}
|
|
});
|
|
}
|
|
|
|
} else {
|
|
alert(__("No articles selected."));
|
|
}
|
|
},
|
|
setScore: function (id, pic) {
|
|
const row = pic.closest("div[id*=RROW]");
|
|
|
|
if (row) {
|
|
const score_old = row.getAttribute("data-score");
|
|
const score = prompt(__("Please enter new score for this article:"), score_old);
|
|
|
|
if (!isNaN(parseInt(score))) {
|
|
row.setAttribute("data-score", score);
|
|
|
|
const pic = row.querySelector(".icon-score");
|
|
|
|
pic.innerHTML = Article.getScorePic(score);
|
|
pic.setAttribute("title", score);
|
|
|
|
["score-low", "score-high", "score-half-low", "score-half-high", "score-neutral"]
|
|
.forEach(function(scl) {
|
|
if (row.hasClassName(scl))
|
|
row.removeClassName(scl);
|
|
});
|
|
|
|
row.addClassName(Article.getScoreClass(score));
|
|
}
|
|
}
|
|
},
|
|
popupOpenUrl: function(url) {
|
|
const w = window.open("");
|
|
|
|
w.opener = null;
|
|
w.location = url;
|
|
},
|
|
cdmToggleGridSpan: function(id) {
|
|
const row = App.byId(`RROW-${id}`);
|
|
|
|
if (row) {
|
|
row.toggleClassName('grid-span-row');
|
|
|
|
this.setActive(id);
|
|
this.cdmMoveToId(id);
|
|
}
|
|
},
|
|
cdmUnsetActive: function (event) {
|
|
const row = App.byId(`RROW-${Article.getActive()}`);
|
|
|
|
if (row) {
|
|
row.removeClassName("active");
|
|
|
|
if (event)
|
|
event.stopPropagation();
|
|
|
|
return false;
|
|
}
|
|
},
|
|
close: function () {
|
|
if (dijit.byId("content-insert"))
|
|
dijit.byId("headlines-wrap-inner").removeChild(
|
|
dijit.byId("content-insert"));
|
|
|
|
Article.setActive(0);
|
|
},
|
|
displayUrl: function (id) {
|
|
const query = {op: "article", method: "getmetadatabyid", id: id};
|
|
|
|
xhr.json("backend.php", query, (reply) => {
|
|
if (reply && reply.link) {
|
|
prompt(__("Article URL:"), reply.link);
|
|
} else {
|
|
alert(__("No URL could be displayed for this article."));
|
|
}
|
|
});
|
|
},
|
|
openInNewWindow: function (id) {
|
|
/* global __csrf_token */
|
|
App.postOpenWindow("backend.php",
|
|
{ "op": "article", "method": "redirect", "id": id, "csrf_token": __csrf_token });
|
|
|
|
Headlines.toggleUnread(id, 0);
|
|
},
|
|
renderNote: function (id, note) {
|
|
return `<div class="article-note" data-note-for="${id}" style="display : ${note ? "" : "none"}">
|
|
${App.FormFields.icon('note')} <div onclick class='body'>${note ? App.escapeHtml(note) : ""}</div>
|
|
</div>`;
|
|
},
|
|
renderTags: function (id, tags) {
|
|
const tags_short = tags.length > 5 ? tags.slice(0, 5) : tags;
|
|
|
|
return `<span class="tags" title="${tags.join(", ")}" data-tags-for="${id}">
|
|
${tags_short.length > 0 ? tags_short.map((tag) => `
|
|
<a href="#" onclick="Feeds.open({feed: '${tag.trim()}'})" class="tag">${tag}</a>`
|
|
).join(", ") : `${__("no tags")}`}</span>`;
|
|
},
|
|
renderLabels: function(id, labels) {
|
|
return `<span class="labels" data-labels-for="${id}">
|
|
${labels.map((label) => `
|
|
<a href="#" class="label" data-label-id="${label[0]}"
|
|
style="color : ${label[2]}; background-color : ${label[3]}"
|
|
onclick="event.stopPropagation(); Feeds.open({feed:'${label[0]}'})">
|
|
${App.escapeHtml(label[1])}
|
|
</a>`
|
|
).join("")}
|
|
</span>`;
|
|
},
|
|
renderEnclosures: function (enclosures) {
|
|
return `
|
|
${enclosures.formatted}
|
|
${enclosures.can_inline ?
|
|
`<div class='attachments-inline'>
|
|
${enclosures.entries.map((enc) => {
|
|
if (!enclosures.inline_text_only) {
|
|
if (enc.content_type && enc.content_type.indexOf("image/") != -1) {
|
|
return `<p>
|
|
<img loading="lazy"
|
|
width="${enc.width ? enc.width : ''}"
|
|
height="${enc.height ? enc.height : ''}"
|
|
src="${App.escapeHtml(enc.content_url)}"
|
|
title="${App.escapeHtml(enc.title ? enc.title : enc.content_url)}"/>
|
|
</p>`
|
|
} else if (enc.content_type && enc.content_type.indexOf("audio/") != -1 && App.audioCanPlay(enc.content_type)) {
|
|
return `<p class='inline-player' title="${App.escapeHtml(enc.content_url)}">
|
|
<audio preload="none" controls="controls">
|
|
<source type="${App.escapeHtml(enc.content_type)}" src="${App.escapeHtml(enc.content_url)}"/>
|
|
</audio>
|
|
</p>
|
|
`;
|
|
} else {
|
|
return `<p>
|
|
<a target="_blank" href="${App.escapeHtml(enc.content_url)}"
|
|
title="${App.escapeHtml(enc.title ? enc.title : enc.content_url)}"
|
|
rel="noopener noreferrer">${App.escapeHtml(enc.content_url)}</a>
|
|
</p>`
|
|
}
|
|
} else {
|
|
return `<p>
|
|
<a target="_blank" href="${App.escapeHtml(enc.content_url)}"
|
|
title="${App.escapeHtml(enc.title ? enc.title : enc.content_url)}"
|
|
rel="noopener noreferrer">${App.escapeHtml(enc.content_url)}</a>
|
|
</p>`
|
|
}
|
|
}).join("")}
|
|
</div>` : ''}
|
|
${enclosures.entries.length > 0 ?
|
|
`<div class="attachments" dojoType="fox.form.DropDownButton">
|
|
<span>${__('Attachments')}</span>
|
|
<div dojoType="dijit.Menu" style="display: none">
|
|
${enclosures.entries.map((enc) => `
|
|
<div onclick='Article.popupOpenUrl("${App.escapeHtml(enc.content_url)}")'
|
|
title="${App.escapeHtml(enc.title ? enc.title : enc.content_url)}" dojoType="dijit.MenuItem">
|
|
${enc.title ? enc.title : enc.filename}
|
|
</div>
|
|
`).join("")}
|
|
</div>
|
|
</div>` : ''}
|
|
`
|
|
},
|
|
render: function (article) {
|
|
App.cleanupMemory("content-insert");
|
|
|
|
dijit.byId("headlines-wrap-inner").addChild(
|
|
dijit.byId("content-insert"));
|
|
|
|
const c = dijit.byId("content-insert");
|
|
|
|
try {
|
|
c.domNode.scrollTop = 0;
|
|
} catch (e) {
|
|
}
|
|
|
|
c.attr('content', article);
|
|
PluginHost.run(PluginHost.HOOK_ARTICLE_RENDERED, c.domNode);
|
|
|
|
//Headlines.correctHeadlinesOffset(Article.getActive());
|
|
|
|
try {
|
|
c.focus();
|
|
} catch (e) {
|
|
}
|
|
},
|
|
formatComments: function(hl) {
|
|
let comments = "";
|
|
|
|
if (hl.comments || hl.num_comments > 0) {
|
|
let comments_msg = __("comments");
|
|
|
|
if (hl.num_comments > 0) {
|
|
comments_msg = hl.num_comments + " " + ngettext("comment", "comments", hl.num_comments)
|
|
}
|
|
|
|
comments = `<a target="_blank" rel="noopener noreferrer" href="${App.escapeHtml(hl.comments ? hl.comments : hl.link)}">(${comments_msg})</a>`;
|
|
}
|
|
|
|
return comments;
|
|
},
|
|
unpack: function(row) {
|
|
if (row.getAttribute("data-is-packed") == "1") {
|
|
console.log("unpacking: " + row.id);
|
|
|
|
const container = row.querySelector(".content-inner");
|
|
|
|
container.innerHTML = row.getAttribute("data-content").trim() + row.getAttribute("data-rendered-enclosures").trim();
|
|
|
|
dojo.parser.parse(container);
|
|
|
|
// blank content element might screw up onclick selection and keyboard moving
|
|
if (container.textContent.length == 0)
|
|
container.innerHTML += " ";
|
|
|
|
// in expandable mode, save content for later, so that we can pack unfocused rows back
|
|
if (App.isCombinedMode() && App.byId("main").hasClassName("expandable"))
|
|
row.setAttribute("data-content-original", row.getAttribute("data-content"));
|
|
|
|
row.setAttribute("data-is-packed", "0");
|
|
|
|
PluginHost.run(PluginHost.HOOK_ARTICLE_RENDERED_CDM, row);
|
|
}
|
|
},
|
|
pack: function(row) {
|
|
if (row.getAttribute("data-is-packed") != "1" && row.hasClassName("cdm")) {
|
|
console.log("packing", row.id);
|
|
row.setAttribute("data-is-packed", "1");
|
|
|
|
row.querySelector(".content-inner").innerHTML = `<div class="text-center text-muted">
|
|
${__("Loading, please wait...")}
|
|
</div>`
|
|
}
|
|
},
|
|
view: function (id, no_expand) {
|
|
this.setActive(id);
|
|
Headlines.scrollToArticleId(id);
|
|
|
|
if (!no_expand) {
|
|
const hl = Headlines.objectById(id);
|
|
|
|
if (hl) {
|
|
|
|
const comments = this.formatComments(hl);
|
|
|
|
const article = `<div class="post post-${hl.id}" data-article-id="${hl.id}">
|
|
<div class="header">
|
|
<div class="row">
|
|
<div class="title"><a target="_blank" rel="noopener noreferrer"
|
|
title="${App.escapeHtml(hl.title)}"
|
|
href="${App.escapeHtml(hl.link)}">${hl.title}</a></div>
|
|
<div class="date">${hl.updated_long}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="buttons left">${hl.buttons_left}</div>
|
|
<div class="comments">${comments}</div>
|
|
<div class="author">${hl.author}</div>
|
|
<i class="material-icons">label_outline</i>
|
|
${Article.renderTags(hl.id, hl.tags)}
|
|
<a title="${__("Edit tags for this article")}" href="#"
|
|
onclick="Article.editTags(${hl.id})">(+)</a>
|
|
<div class="buttons right">${hl.buttons}</div>
|
|
</div>
|
|
</div>
|
|
${Article.renderNote(hl.id, hl.note)}
|
|
<div class="content" lang="${hl.lang ? hl.lang : 'en'}">
|
|
${hl.content}
|
|
${Article.renderEnclosures(hl.enclosures)}
|
|
</div>
|
|
</div>`;
|
|
|
|
Headlines.toggleUnread(id, 0);
|
|
this.render(article);
|
|
}
|
|
}
|
|
|
|
return false;
|
|
},
|
|
editTags: function (id) {
|
|
const dialog = new fox.SingleUseDialog({
|
|
title: __("Article tags"),
|
|
content: `
|
|
${App.FormFields.hidden_tag("id", id.toString())}
|
|
${App.FormFields.hidden_tag("op", "article")}
|
|
${App.FormFields.hidden_tag("method", "setArticleTags")}
|
|
|
|
<header class='horizontal'>
|
|
${__("Tags for this article (separated by commas):")}
|
|
</header>
|
|
|
|
<section>
|
|
<textarea dojoType='dijit.form.SimpleTextarea' rows='4' disabled='true'
|
|
id='tags_str' name='tags_str'>${__("Loading, please wait...")}</textarea>
|
|
<div class='autocomplete' id='tags_choices' style='display:none'></div>
|
|
</section>
|
|
|
|
<footer>
|
|
<button dojoType='dijit.form.Button' type='submit' class='alt-primary'>
|
|
${__('Save')}
|
|
</button>
|
|
<button dojoType='dijit.form.Button' onclick='App.dialogOf(this).hide()'>
|
|
${__('Cancel')}
|
|
</button>
|
|
</footer>
|
|
`,
|
|
execute: function () {
|
|
if (this.validate()) {
|
|
Notify.progress("Saving article tags...", true);
|
|
|
|
xhr.json("backend.php", this.attr('value'), (data) => {
|
|
try {
|
|
Notify.close();
|
|
dialog.hide();
|
|
|
|
Headlines.onTagsUpdated(data);
|
|
} catch (e) {
|
|
App.Error.report(e);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
});
|
|
|
|
const tmph = dojo.connect(dialog, 'onShow', function () {
|
|
dojo.disconnect(tmph);
|
|
|
|
xhr.json("backend.php", {op: "article", method: "printArticleTags", id: id}, (reply) => {
|
|
|
|
dijit.getEnclosingWidget(App.byId("tags_str"))
|
|
.attr('value', reply.tags.join(", "))
|
|
.attr('disabled', false);
|
|
|
|
/* new Ajax.Autocompleter("tags_str", "tags_choices",
|
|
"backend.php?op=article&method=completeTags",
|
|
{tokens: ',', paramName: "search"}); */
|
|
});
|
|
});
|
|
|
|
dialog.show();
|
|
|
|
},
|
|
cdmMoveToId: function (id, params = {}) {
|
|
const force_to_top = params.force_to_top || false;
|
|
|
|
const ctr = App.byId("headlines-frame");
|
|
const row = App.byId(`RROW-${id}`);
|
|
|
|
if (ctr && row) {
|
|
const grid_gap = parseInt(window.getComputedStyle(ctr).gridGap) || 0;
|
|
|
|
if (force_to_top || !App.Scrollable.fitsInContainer(row, ctr)) {
|
|
ctr.scrollTop = row.offsetTop - grid_gap;
|
|
}
|
|
}
|
|
},
|
|
setActive: function (id) {
|
|
if (id != Article.getActive()) {
|
|
console.log("setActive", id, "was", Article.getActive());
|
|
|
|
App.findAll("div[id*=RROW][class*=active]").forEach((row) => {
|
|
row.removeClassName("active");
|
|
Article.pack(row);
|
|
});
|
|
|
|
const row = App.byId(`RROW-${id}`);
|
|
|
|
if (row) {
|
|
Article.unpack(row);
|
|
|
|
row.removeClassName("Unread");
|
|
row.addClassName("active");
|
|
|
|
PluginHost.run(PluginHost.HOOK_ARTICLE_SET_ACTIVE, row.getAttribute("data-article-id"));
|
|
}
|
|
}
|
|
},
|
|
getActive: function () {
|
|
const row = document.querySelector("#headlines-frame > div[id*=RROW][class*=active]");
|
|
|
|
if (row)
|
|
return row.getAttribute("data-article-id");
|
|
else
|
|
return 0;
|
|
},
|
|
scrollByPages: function (page_offset) {
|
|
App.Scrollable.scrollByPages(App.byId("content-insert"), page_offset);
|
|
},
|
|
scroll: function (offset) {
|
|
App.Scrollable.scroll(App.byId("content-insert"), offset);
|
|
},
|
|
mouseIn: function (id) {
|
|
this.post_under_pointer = id;
|
|
},
|
|
mouseOut: function (/* id */) {
|
|
this.post_under_pointer = false;
|
|
},
|
|
getUnderPointer: function () {
|
|
return this.post_under_pointer;
|
|
}
|
|
}
|