library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Spinner: Cleanup, use ._bind() and ._hoverable().

Browse Source
This commit is contained in:
Scott González 2011-08-06 12:38:59 -04:00
parent 7134033365
commit 6981cab9c4
1 changed files with 80 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
ui/jquery.ui.spinner.js vendored
View File

@ -52,106 +52,87 @@ $.widget( "ui.spinner", {
}, },
_draw: function() { _draw: function() {
var self = this, var uiSpinner = this.uiSpinner = this.element
options = self.options;
var uiSpinner = this.uiSpinner = self.element
.addClass( "ui-spinner-input" ) .addClass( "ui-spinner-input" )
.attr( "autocomplete", "off" ) .attr( "autocomplete", "off" )
.wrap( self._uiSpinnerHtml() ) .wrap( this._uiSpinnerHtml() )
.parent() .parent()
// add buttons // add buttons
.append( self._buttonHtml() ) .append( this._buttonHtml() )
// add behaviours // add behaviors
.disableSelection() .disableSelection();
// TODO: user ._hoverable this._hoverable( uiSpinner );
.hover(function() {
if ( !options.disabled ) {
$( this ).addClass( "ui-state-hover" );
}
self.hovered = true;
}, function() {
$( this ).removeClass( "ui-state-hover" );
self.hovered = false;
});
// TODO: use ._bind() this.element.attr( "role", "spinbutton" );
this.element this._bind({
.attr( "role", "spinbutton" ) keydown: function( event ) {
.bind( "keydown.spinner", function( event ) { if ( this._start( event ) ) {
if ( options.disabled ) { // TODO: don't stop propagation
return; return this._keydown( event );
} }
if ( self._start( event ) ) { },
return self._keydown( event ); keyup: function( event ) {
if ( this.spinning ) {
this._stop( event );
this._change( event );
} }
return true; },
}) focus: function() {
.bind( "keyup.spinner", function( event ) {
if ( options.disabled ) {
return;
}
if ( self.spinning ) {
self._stop( event );
self._change( event );
}
})
.bind( "focus.spinner", function() {
uiSpinner.addClass( "ui-state-active" ); uiSpinner.addClass( "ui-state-active" );
self.focused = true; },
}) blur: function( event ) {
.bind( "blur.spinner", function( event ) { this.value( this.element.val() );
self.value( self.element.val() ); // TODO: is this really correct or just the simplest
if ( !self.hovered ) { // way to keep the active class when pressing the buttons?
// if the mosue is over the text field and the user tabs out
// shouldn't the active class get removed?
if ( !uiSpinner.hasClass( "ui-state-hover" ) ) {
uiSpinner.removeClass( "ui-state-active" ); uiSpinner.removeClass( "ui-state-active" );
} }
self.focused = false; }
}); });
// button bindings // button bindings
this.buttons = uiSpinner.find( ".ui-spinner-button" ) this.buttons = uiSpinner.find( ".ui-spinner-button" )
.attr( "tabIndex", -1 ) .attr( "tabIndex", -1 )
.button() .button()
.removeClass( "ui-corner-all" ) .removeClass( "ui-corner-all" );
.bind( "mousedown", function( event ) { this._bind( this.buttons, {
if ( options.disabled ) { mousedown: function( event ) {
return; if ( this._start( event ) === false ) {
} // TODO: do we really want to stop propagation?
if ( self._start( event ) === false ) {
return false; return false;
} }
self._repeat( null, $( this ).hasClass( "ui-spinner-up" ) ? 1 : -1, event ); this._repeat( null, $( event.currentTarget ).hasClass( "ui-spinner-up" ) ? 1 : -1, event );
}) },
.bind( "mouseup", function( event ) { mouseup: function( event ) {
if ( options.disabled ) { if ( this.spinning ) {
return; this._stop( event );
} this._change( event );
if ( self.spinning ) {
self._stop( event );
self._change( event );
}
})
.bind( "mouseenter", function() {
if ( self.options.disabled ) {
return;
} }
},
mouseenter: function( event ) {
// button will add ui-state-active if mouse was down while mouseleave and kept down // button will add ui-state-active if mouse was down while mouseleave and kept down
if ( $( this ).hasClass( "ui-state-active" ) ) { if ( !$( event.currentTarget ).hasClass( "ui-state-active" ) ) {
if ( self._start( event ) === false ) { return;
return false;
}
self._repeat( null, $( this ).hasClass( "ui-spinner-up" ) ? 1 : -1, event );
} }
})
.bind( "mouseleave", function() { if ( this._start( event ) === false ) {
if ( self.spinning ) { return false;
self._stop( event );
self._change( event );
} }
}); this._repeat( null, $( event.currentTarget ).hasClass( "ui-spinner-up" ) ? 1 : -1, event );
},
// TODO: we shouldn't trigger any events until mouseup
mouseleave: function() {
if ( this.spinning ) {
this._stop( event );
this._change( event );
}
}
});
// disable spinner if element was already disabled // disable spinner if element was already disabled
if ( options.disabled ) { if ( this.options.disabled ) {
this.disable(); this.disable();
} }
}, },
@ -185,23 +166,25 @@ $.widget( "ui.spinner", {
if ( !$.fn.mousewheel ) { if ( !$.fn.mousewheel ) {
return; return;
} }
var self = this; this._bind({
this.element.bind( "mousewheel.spinner", function( event, delta ) { mousewheel: function( event, delta ) {
if ( self.options.disabled || !delta ) { if ( !delta ) {
return; return;
}
if ( !self.spinning && !self._start( event ) ) {
return false;
}
self._spin( (delta > 0 ? 1 : -1) * self.options.step, event );
clearTimeout( self.timeout );
self.timeout = setTimeout(function() {
if ( self.spinning ) {
self._stop( event );
self._change( event );
} }
}, 100); if ( !this.spinning && !this._start( event ) ) {
event.preventDefault(); return false;
}
this._spin( (delta > 0 ? 1 : -1) * this.options.step, event );
clearTimeout( this.timeout );
this.timeout = setTimeout(function() {
if ( this.spinning ) {
this._stop( event );
this._change( event );
}
}, 100 );
event.preventDefault();
}
}); });
}, },
@ -232,15 +215,15 @@ $.widget( "ui.spinner", {
}, },
_repeat: function( i, steps, event ) { _repeat: function( i, steps, event ) {
var self = this; var that = this;
i = i || 500; i = i || 500;
clearTimeout( this.timer ); clearTimeout( this.timer );
this.timer = setTimeout(function() { this.timer = setTimeout(function() {
self._repeat( 40, steps, event ); that._repeat( 40, steps, event );
}, i ); }, i );
self._spin( steps * self.options.step, event ); this._spin( steps * this.options.step, event );
}, },
_spin: function( step, event ) { _spin: function( step, event ) {
@ -282,10 +265,8 @@ $.widget( "ui.spinner", {
}, },
_stop: function( event ) { _stop: function( event ) {
clearTimeout( this.timer );
this.counter = 0; this.counter = 0;
if ( this.timer ) {
clearTimeout( this.timer );
}
this.element.focus(); this.element.focus();
this.spinning = false; this.spinning = false;
this._trigger( "stop", event ); this._trigger( "stop", event );