DEV: Remove buffered rendering from topic-status
This is another refactoring in the multi-step process to remove all uses
of our custom Render Buffer.
Previous commit: 006e5904be in this
series.
This commit affects the icons next to the topic title that indicate if
it is closed, unlisted, pinned, etc. It is just a refactor and should
not change any functionality.
Originally I was going to continue to use the existing
topic-status-icons arrayProxy helper but this would require using
observers, so I opted instead to use computed properties and have a bit
larger hbs template.
This commit is contained in:
Blake Erickson
parent
ff1be40980
commit
1c7305c0f1
|
|
@ -1,58 +1,79 @@
|
|||
import discourseComputed from "discourse-common/utils/decorators";
|
||||
import Component from "@ember/component";
|
||||
import { iconHTML } from "discourse-common/lib/icon-library";
|
||||
import { bufferedRender } from "discourse-common/lib/buffered-render";
|
||||
import { escapeExpression } from "discourse/lib/utilities";
|
||||
import TopicStatusIcons from "discourse/helpers/topic-status-icons";
|
||||
|
||||
export default Component.extend(
|
||||
bufferedRender({
|
||||
classNames: ["topic-statuses"],
|
||||
export default Component.extend({
|
||||
classNames: ["topic-statuses"],
|
||||
|
||||
rerenderTriggers: [
|
||||
"topic.archived",
|
||||
"topic.closed",
|
||||
"topic.pinned",
|
||||
"topic.visible",
|
||||
"topic.unpinned",
|
||||
"topic.is_warning"
|
||||
],
|
||||
|
||||
click(e) {
|
||||
// only pin unpin for now
|
||||
if (this.canAct && $(e.target).hasClass("d-icon-thumbtack")) {
|
||||
const topic = this.topic;
|
||||
topic.get("pinned") ? topic.clearPin() : topic.rePin();
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
@discourseComputed("disableActions")
|
||||
canAct(disableActions) {
|
||||
return this.currentUser && !disableActions;
|
||||
},
|
||||
|
||||
buildBuffer(buffer) {
|
||||
const canAct = this.canAct;
|
||||
click(e) {
|
||||
// only pin unpin for now
|
||||
if (this.canAct && $(e.target).hasClass("d-icon-thumbtack")) {
|
||||
const topic = this.topic;
|
||||
|
||||
if (!topic) {
|
||||
return;
|
||||
}
|
||||
|
||||
TopicStatusIcons.render(topic, function(name, key) {
|
||||
const actionable = ["pinned", "unpinned"].includes(key) && canAct;
|
||||
const title = escapeExpression(I18n.t(`topic_statuses.${key}.help`)),
|
||||
startTag = actionable ? "a href" : "span",
|
||||
endTag = actionable ? "a" : "span",
|
||||
iconArgs = key === "unpinned" ? { class: "unpinned" } : null,
|
||||
icon = iconHTML(name, iconArgs);
|
||||
|
||||
buffer.push(
|
||||
`<${startTag} title='${title}' class='topic-status'>${icon}</${endTag}>`
|
||||
);
|
||||
});
|
||||
topic.get("pinned") ? topic.clearPin() : topic.rePin();
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
@discourseComputed("disableActions")
|
||||
canAct(disableActions) {
|
||||
return this.currentUser && !disableActions;
|
||||
},
|
||||
|
||||
@discourseComputed("topic.closed", "topic.archived")
|
||||
topicClosedArchived(closed, archived) {
|
||||
if (closed && archived) {
|
||||
this._set("closedArchived", "lock", "locked_and_archived");
|
||||
this._reset("closed");
|
||||
this._reset("archived");
|
||||
return true;
|
||||
} else {
|
||||
this._reset("closedArchived");
|
||||
closed ? this._set("closed", "lock", "locked") : this._reset("closed");
|
||||
archived
|
||||
? this._set("archived", "lock", "archived")
|
||||
: this._reset("archived");
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
@discourseComputed("topic.is_warning")
|
||||
topicWarning(warning) {
|
||||
return warning
|
||||
? this._set("warning", "envelope", "warning")
|
||||
: this._reset("warning");
|
||||
},
|
||||
|
||||
@discourseComputed("topic.pinned")
|
||||
topicPinned(pinned) {
|
||||
return pinned
|
||||
? this._set("pinned", "thumbtack", "pinned")
|
||||
: this._reset("pinned");
|
||||
},
|
||||
|
||||
@discourseComputed("topic.unpinned")
|
||||
topicUnpinned(unpinned) {
|
||||
return unpinned
|
||||
? this._set("unpinned", "thumbtack", "unpinned", { class: "unpinned" })
|
||||
: this._reset("unpinned");
|
||||
},
|
||||
|
||||
@discourseComputed("topic.invisible")
|
||||
topicInvisible(invisible) {
|
||||
return invisible
|
||||
? this._set("invisible", "far-eye-slash", "unlisted")
|
||||
: this._reset("invisible");
|
||||
},
|
||||
|
||||
_set(name, icon, key, iconArgs = null) {
|
||||
this.set(`${name}Icon`, iconHTML(`${icon}`, iconArgs).htmlSafe());
|
||||
this.set(`${name}Title`, I18n.t(`topic_statuses.${key}.help`));
|
||||
return true;
|
||||
},
|
||||
|
||||
_reset(name) {
|
||||
this.set(`${name}Icon`, null);
|
||||
this.set(`${name}Title`, null);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
{{~#if topicClosedArchived~}}
|
||||
<span class='topic-status' title={{closedArchivedTitle}}>{{closedArchivedIcon}}</span>
|
||||
{{~/if~}}
|
||||
{{~#if closedIcon~}}
|
||||
<span class='topic-status' title={{closedTitle}}>{{closedIcon}}</span>
|
||||
{{~/if~}}
|
||||
{{~#if archivedIcon~}}
|
||||
<span class='topic-status' title={{archivedTitle}}>{{archivedIcon}}</span>
|
||||
{{~/if~}}
|
||||
{{~#if topicWarning~}}
|
||||
<span class='topic-status' title={{warningTitle}}>{{warningIcon}}</span>
|
||||
{{~/if~}}
|
||||
{{~#if topicPinned~}}
|
||||
{{~#if canAct~}}
|
||||
<a href="" class='topic-status' title={{pinnedTitle}}>{{pinnedIcon}}</a>
|
||||
{{~else~}}
|
||||
<span class='topic-status' title={{pinnedTitle}}>{{pinnedIcon}}</span>
|
||||
{{~/if~}}
|
||||
{{~/if~}}
|
||||
{{~#if topicUnpinned~}}
|
||||
{{~#if canAct~}}
|
||||
<a href="" class='topic-status' title={{unpinnedTitle}}>{{unpinnedIcon}}</a>
|
||||
{{~else~}}
|
||||
<span class='topic-status' title={{unpinnedTitle}}>{{unpinnedIcon}}</span>
|
||||
{{~/if~}}
|
||||
{{~/if~}}
|
||||
{{~#if topicInvisible~}}
|
||||
<span class='topic-status' title={{invisibleTitle}}>{{invisibleIcon}}</span>
|
||||
{{~/if~}}
|
||||
Loading…
Reference in New Issue