github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-20 17:52:45 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Remove buffered rendering from popup-input-tips

Browse Source 
This is another refactoring in the multi-step process to remove all uses
of our custom Render Buffer.

Previous commit: fe9293b8b554ab79636faa61a4756d5ff514a233 in this
series.

This commit affects the display of popup input tips, like in the
composer when the title is too short or too long. It is just a refactor
and does not change any functionality.
This commit is contained in:
Blake Erickson 2019-12-05 10:59:36 -07:00
parent 891b71bdf5
commit f269e45978
2 changed files with 57 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
app/assets/javascripts/discourse/components/popup-input-tip.js.es6
View File

@ -5,70 +5,67 @@ import {
default as discourseComputed,
observes
} from "discourse-common/utils/decorators";
import { bufferedRender } from "discourse-common/lib/buffered-render";
export default Component.extend(
bufferedRender({
classNameBindings: [":popup-tip", "good", "bad", "lastShownAt::hide"],
animateAttribute: null,
bouncePixels: 6,
bounceDelay: 100,
rerenderTriggers: ["validation.reason"],
export default Component.extend({
classNameBindings: [":popup-tip", "good", "bad", "lastShownAt::hide"],
animateAttribute: null,
bouncePixels: 6,
bounceDelay: 100,
rerenderTriggers: ["validation.reason"],
closeIcon: `${iconHTML("times-circle")}`.htmlSafe(),
tipReason: null,
click() {
this.set("shownAt", null);
this.set("validation.lastShownAt", null);
},
click() {
this.set("shownAt", null);
this.set("validation.lastShownAt", null);
},
bad: alias("validation.failed"),
good: not("bad"),
bad: alias("validation.failed"),
good: not("bad"),
@discourseComputed("shownAt", "validation.lastShownAt")
lastShownAt(shownAt, lastShownAt) {
return shownAt || lastShownAt;
},
@discourseComputed("shownAt", "validation.lastShownAt")
lastShownAt(shownAt, lastShownAt) {
return shownAt || lastShownAt;
},
@observes("lastShownAt")
bounce() {
if (this.lastShownAt) {
var $elem = $(this.element);
if (!this.animateAttribute) {
this.animateAttribute =
$elem.css("left") === "auto" ? "right" : "left";
}
if (this.animateAttribute === "left") {
this.bounceLeft($elem);
} else {
this.bounceRight($elem);
}
@observes("lastShownAt")
bounce() {
if (this.lastShownAt) {
var $elem = $(this.element);
if (!this.animateAttribute) {
this.animateAttribute = $elem.css("left") === "auto" ? "right" : "left";
}
},
buildBuffer(buffer) {
const reason = this.get("validation.reason");
if (!reason) {
return;
}
buffer.push(
`<span class='close'>${iconHTML("times-circle")}</span>${reason}`
);
},
bounceLeft($elem) {
for (var i = 0; i < 5; i++) {
$elem
.animate({ left: "+=" + this.bouncePixels }, this.bounceDelay)
.animate({ left: "-=" + this.bouncePixels }, this.bounceDelay);
}
},
bounceRight($elem) {
for (var i = 0; i < 5; i++) {
$elem
.animate({ right: "-=" + this.bouncePixels }, this.bounceDelay)
.animate({ right: "+=" + this.bouncePixels }, this.bounceDelay);
if (this.animateAttribute === "left") {
this.bounceLeft($elem);
} else {
this.bounceRight($elem);
}
}
})
);
},
didReceiveAttrs() {
this._super(...arguments);
let reason = this.get("validation.reason");
if (reason) {
this.set("tipReason", `${reason}`.htmlSafe());
} else {
this.set("tipReason", null);
}
},
bounceLeft($elem) {
for (var i = 0; i < 5; i++) {
$elem
.animate({ left: "+=" + this.bouncePixels }, this.bounceDelay)
.animate({ left: "-=" + this.bouncePixels }, this.bounceDelay);
}
},
bounceRight($elem) {
for (var i = 0; i < 5; i++) {
$elem
.animate({ right: "-=" + this.bouncePixels }, this.bounceDelay)
.animate({ right: "+=" + this.bouncePixels }, this.bounceDelay);
}
}
});

1
app/assets/javascripts/discourse/templates/components/popup-input-tip.hbs Normal file
View File

@ -0,0 +1 @@
<span class='close'>{{closeIcon}}</span>{{tipReason}}