59 lines
1.7 KiB
JavaScript
59 lines
1.7 KiB
JavaScript
import StringBuffer from 'discourse/mixins/string-buffer';
|
|
import { iconHTML } from 'discourse/helpers/fa-icon';
|
|
import { default as computed, observes } from 'ember-addons/ember-computed-decorators';
|
|
|
|
export default Ember.Component.extend(StringBuffer, {
|
|
classNameBindings: [':popup-tip', 'good', 'bad', 'lastShownAt::hide'],
|
|
animateAttribute: null,
|
|
bouncePixels: 6,
|
|
bounceDelay: 100,
|
|
rerenderTriggers: ['validation.reason'],
|
|
|
|
click() {
|
|
this.set('shownAt', null);
|
|
this.set('validation.lastShownAt', null);
|
|
},
|
|
|
|
bad: Ember.computed.alias("validation.failed"),
|
|
good: Ember.computed.not("bad"),
|
|
|
|
@computed('shownAt', 'validation.lastShownAt')
|
|
lastShownAt(shownAt, lastShownAt) {
|
|
return shownAt || lastShownAt;
|
|
},
|
|
|
|
@observes('lastShownAt')
|
|
bounce() {
|
|
if (this.get("lastShownAt")) {
|
|
var $elem = this.$();
|
|
if (!this.animateAttribute) {
|
|
this.animateAttribute = $elem.css('left') === 'auto' ? 'right' : 'left';
|
|
}
|
|
if (this.animateAttribute === 'left') {
|
|
this.bounceLeft($elem);
|
|
} else {
|
|
this.bounceRight($elem);
|
|
}
|
|
}
|
|
},
|
|
|
|
renderString(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);
|
|
}
|
|
}
|
|
});
|