60 lines
1.7 KiB
JavaScript
60 lines
1.7 KiB
JavaScript
/**
|
|
This view extends the functionality of InputTipView with these extra features:
|
|
* it can be dismissed
|
|
* it bounces when it's shown
|
|
* it's absolutely positioned beside the input element, with the help of
|
|
extra css you'll need to write to line it up correctly.
|
|
|
|
@class PopupInputTipView
|
|
@extends Discourse.View
|
|
@namespace Discourse
|
|
@module Discourse
|
|
**/
|
|
Discourse.PopupInputTipView = Discourse.View.extend({
|
|
templateName: 'popup_input_tip',
|
|
classNameBindings: [':popup-tip', 'good', 'bad', 'shownAt::hide'],
|
|
animateAttribute: null,
|
|
bouncePixels: 6,
|
|
bounceDelay: 100,
|
|
|
|
click: function() {
|
|
this.set('shownAt', false);
|
|
},
|
|
|
|
good: function() {
|
|
return !this.get('validation.failed');
|
|
}.property('validation'),
|
|
|
|
bad: function() {
|
|
return this.get('validation.failed');
|
|
}.property('validation'),
|
|
|
|
bounce: function() {
|
|
if( this.get('shownAt') ) {
|
|
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);
|
|
}
|
|
}
|
|
}.observes('shownAt'),
|
|
|
|
bounceLeft: function($elem) {
|
|
for( var i = 0; i < 5; i++ ) {
|
|
$elem.animate({ left: '+=' + this.bouncePixels }, this.bounceDelay).animate({ left: '-=' + this.bouncePixels }, this.bounceDelay);
|
|
}
|
|
},
|
|
|
|
bounceRight: function($elem) {
|
|
for( var i = 0; i < 5; i++ ) {
|
|
$elem.animate({ right: '-=' + this.bouncePixels }, this.bounceDelay).animate({ right: '+=' + this.bouncePixels }, this.bounceDelay);
|
|
}
|
|
}
|
|
});
|
|
|
|
Discourse.View.registerHelper('popupInputTip', Discourse.PopupInputTipView);
|