Commit b7b74aa8 by cniska

Fixed a few minor issues with the jQuery UI widgets.

parent e0ef21b1
...@@ -17,23 +17,36 @@ ...@@ -17,23 +17,36 @@
name: 'alert', name: 'alert',
/** /**
* Widget options. * Widget options.
* - keys: The valid alert types.
* - template: The HTML template for displaying alerts.
* - displayTime: The time to display each alert.
* - closeTime: The duration for closing each alert.
* @type Object * @type Object
*/ */
options: { options: {
keys: [ 'success', 'info', 'warning', 'error' ], keys: [ 'success', 'info', 'warning', 'error' ],
template: '<div class="alert-message {key}"><p>{message}</p></div>', template: '<div class="alert-message {key}"><p>{message}</p></div>',
displayTime: 5000, displayTime: 5000,
fadeOutTime: 350 closeTime: 350
}, },
/** /**
* Creates the widget. * Creates the widget.
*/ */
_create: function() { _create: function() {
var alerts = this.element.find( '.alert-message' ); var self = this,
alerts = self.element.find( '.alert-message' );
for ( var i = 0, l = alerts.length; i < l; ++i ) { for ( var i = 0, l = alerts.length; i < l; ++i ) {
var alert = $( alerts[ i ] ); var alert = $( alerts[ i ] ),
this._appendCloseLink( alert ); closeLink = self._createCloseLink( alert );
closeLink.prependTo( alert );
if ( self.options.closeTime > 0 ) {
setTimeout( function() {
self.close( alert );
}, self.options.displayTime );
}
} }
}, },
/** /**
...@@ -50,41 +63,38 @@ ...@@ -50,41 +63,38 @@
var alert = $( template ) var alert = $( template )
.appendTo( this.element ); .appendTo( this.element );
this._appendCloseLink( alert ); var closeLink = this._createCloseLink( alert );
closeLink.prependTo( alert );
} }
return this; return this;
}, },
/** /**
* Closes the alert. * Closes a specific alert message.
* @param {HTMLElement} alert The alert element. * @param {Object} alert The alert element.
*/ */
close: function( alert ) { close: function( alert ) {
alert.fadeOut( this.options.fadeTime, function() { if (alert) {
alert.html( '' ); alert.fadeOut( this.options.closeTime, function() {
$( this ).html( '' );
}); });
}
return this; return this;
}, },
/** /**
* Creates the close link for a specific alert message. * Creates the close link.
* @param {HTMLElement} alert The alert element. * @param {Object} alert The alert element.
*/ */
_appendCloseLink: function( alert ) { _createCloseLink: function( alert ) {
var self = this; var self = this;
$( '<a class="close" href="#">x</a>' ) return $( '<a class="close" href="#">x</a>' )
.bind( 'click', function( event ) { .bind( 'click', function( event ) {
self.close( alert, self.options.fadeOutTime ); self.close( alert );
event.preventDefault(); event.preventDefault();
return false; return false;
} ).prependTo( self.element.children() ); } );
if ( self.options.fadeOutTime > 0 ) {
setTimeout( function() {
self.close( alert, self.options.fadeOutTime );
}, self.options.displayTime );
}
}, },
/** /**
* Destructs this widget. * Destructs this widget.
......
...@@ -29,9 +29,10 @@ ...@@ -29,9 +29,10 @@
* Widget options. * Widget options.
* - backdropClose: Indicates whether clicking on the backdrop closes the modal. * - backdropClose: Indicates whether clicking on the backdrop closes the modal.
* - buttons: Button configurations. * - buttons: Button configurations.
* - closeTime: The delay for closing the modal. * - closeTime: The duration for closing the modal.
* - escapeClose: Indicates whether pressing escape closes the modal. * - escapeClose: Indicates whether pressing escape closes the modal.
* - open: Indicates whether to open the modal on initialization. * - open: Indicates whether to open the modal on initialization.
* - openTime: The duration for opening the modal.
* - title: The modal title text. * - title: The modal title text.
* @type Object * @type Object
*/ */
......
...@@ -22,6 +22,10 @@ ...@@ -22,6 +22,10 @@
tooltipId: 'popover', tooltipId: 'popover',
/** /**
* Widget options. * Widget options.
* - placement: The placement of the tooltip. Valid values are: "above", "right", "below" and "left".
* - showEvent: The event for showing the tooltip.
* - hideEvent: The event for hiding the tooltip.
* - live: Indicates whether to use jQuery.live or jQuery.bind.
* @type Object * @type Object
*/ */
options: { options: {
......
...@@ -27,6 +27,10 @@ ...@@ -27,6 +27,10 @@
visible: false, visible: false,
/** /**
* Widget options. * Widget options.
* - placement: The placement of the tooltip. Valid values are: "above", "right", "below" and "left".
* - showEvent: The event for showing the tooltip.
* - hideEvent: The event for hiding the tooltip.
* - live: Indicates whether to use jQuery.live or jQuery.bind.
* @type Object * @type Object
*/ */
options: { options: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment