fe588cc7f8
* DEV: Fix the function prototype observers deprecation
DEPRECATION: Function prototype extensions have been deprecated, please migrate from function(){}.observes('foo') to observer('foo', function() {}). [deprecation id: function-prototype-extensions.observes] See https://deprecations.emberjs.com/v3.x/#toc_function-prototype-extensions-observes for more details.
* DEV: Fix the function prototype event listeners deprecation
DEPRECATION: Function prototype extensions have been deprecated, please migrate from function(){}.on('foo') to on('foo', function() {}). [deprecation id: function-prototype-extensions.on] See https://deprecations.emberjs.com/v3.x/#toc_function-prototype-extensions-on for more details.
* DEV: Simplify `default as` imports
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
69 lines
1.8 KiB
JavaScript
69 lines
1.8 KiB
JavaScript
import { alias, not } from "@ember/object/computed";
|
|
import Component from "@ember/component";
|
|
import { iconHTML } from "discourse-common/lib/icon-library";
|
|
import discourseComputed, { observes } from "discourse-common/utils/decorators";
|
|
|
|
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);
|
|
},
|
|
|
|
bad: alias("validation.failed"),
|
|
good: not("bad"),
|
|
|
|
@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);
|
|
}
|
|
}
|
|
},
|
|
|
|
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);
|
|
}
|
|
}
|
|
});
|