diff options
Diffstat (limited to 'ui')
| -rw-r--r-- | ui/jquery.ui.slider.js | 148 |
1 files changed, 87 insertions, 61 deletions
diff --git a/ui/jquery.ui.slider.js b/ui/jquery.ui.slider.js index ceb8e1320..b3e609aa2 100644 --- a/ui/jquery.ui.slider.js +++ b/ui/jquery.ui.slider.js @@ -42,12 +42,6 @@ $.widget( "ui.slider", $.ui.mouse, { }, _create: function() { - var i, handleCount, - o = this.options, - existingHandles = this.element.find( ".ui-slider-handle" ).addClass( "ui-state-default ui-corner-all" ), - handle = "<a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a>", - handles = []; - this._keySliding = false; this._mouseSliding = false; this._animateOff = true; @@ -62,29 +56,32 @@ $.widget( "ui.slider", $.ui.mouse, { " ui-widget-content" + " ui-corner-all"); - this.range = $([]); + this._refresh(); + this._setOption( "disabled", this.options.disabled ); - if ( o.range ) { - if ( o.range === true ) { - if ( !o.values ) { - o.values = [ this._valueMin(), this._valueMin() ]; - } else if ( o.values.length && o.values.length !== 2 ) { - o.values = [ o.values[0], o.values[0] ]; - } else if ( $.isArray( o.values ) ) { - o.values = o.values.slice(0); - } - } + this._animateOff = false; + }, - this.range = $( "<div></div>" ) - .appendTo( this.element ) - .addClass( "ui-slider-range" + - // note: this isn't the most fittingly semantic framework class for this element, - // but worked best visually with a variety of themes - " ui-widget-header ui-corner-all" + - ( ( o.range === "min" || o.range === "max" ) ? " ui-slider-range-" + o.range : "" ) ); - } + _refresh: function() { + this._createRange(); + this._createHandles(); + this._setupEvents(); + this._refreshValue(); + }, + + _createHandles: function() { + var i, handleCount, + options = this.options, + existingHandles = this.element.find( ".ui-slider-handle" ).addClass( "ui-state-default ui-corner-all" ), + handle = "<a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a>", + handles = []; - handleCount = ( o.values && o.values.length ) || 1; + handleCount = ( options.values && options.values.length ) || 1; + + if ( existingHandles.length > handleCount ) { + existingHandles.slice( handleCount ).remove(); + existingHandles = existingHandles.slice( 0, handleCount ); + } for ( i = existingHandles.length; i < handleCount; i++ ) { handles.push( handle ); @@ -94,41 +91,56 @@ $.widget( "ui.slider", $.ui.mouse, { this.handle = this.handles.eq( 0 ); - this.handles.add( this.range ).filter( "a" ) - .click(function( event ) { - event.preventDefault(); - }) - .mouseenter(function() { - if ( !o.disabled ) { - $( this ).addClass( "ui-state-hover" ); - } - }) - .mouseleave(function() { - $( this ).removeClass( "ui-state-hover" ); - }) - .focus(function() { - if ( !o.disabled ) { - $( ".ui-slider .ui-state-focus" ).removeClass( "ui-state-focus" ); - $( this ).addClass( "ui-state-focus" ); - } else { - $( this ).blur(); - } - }) - .blur(function() { - $( this ).removeClass( "ui-state-focus" ); - }); - this.handles.each(function( i ) { $( this ).data( "ui-slider-handle-index", i ); }); + }, - this._setOption( "disabled", o.disabled ); + _createRange: function() { + var options = this.options, + classes = ""; + + if ( options.range ) { + if ( options.range === true ) { + if ( !options.values ) { + options.values = [ this._valueMin(), this._valueMin() ]; + } else if ( options.values.length && options.values.length !== 2 ) { + options.values = [ options.values[0], options.values[0] ]; + } else if ( $.isArray( options.values ) ) { + options.values = options.values.slice(0); + } + } - this._on( this.handles, this._handleEvents ); + if ( !this.range || !this.range.length ) { + this.range = $( "<div></div>" ) + .appendTo( this.element ); - this._refreshValue(); + classes = "ui-slider-range" + + // note: this isn't the most fittingly semantic framework class for this element, + // but worked best visually with a variety of themes + " ui-widget-header ui-corner-all"; + } else { + this.range.removeClass( "ui-slider-range-min ui-slider-range-max" ) + // Handle range switching from true to min/max + .css({ + "left": "", + "bottom": "" + }); + } - this._animateOff = false; + this.range.addClass( classes + + ( ( options.range === "min" || options.range === "max" ) ? " ui-slider-range-" + options.range : "" ) ); + } else { + this.range = $([]); + } + }, + + _setupEvents: function() { + var elements = this.handles.add( this.range ).filter( "a" ); + this._off( elements ); + this._on( elements, this._handleEvents ); + this._hoverable( elements ); + this._focusable( elements ); }, _destroy: function() { @@ -401,6 +413,16 @@ $.widget( "ui.slider", $.ui.mouse, { var i, valsLength = 0; + if ( key === "range" && this.options.range === true ) { + if ( value === "min" ) { + this.options.value = this._values( 0 ); + this.options.values = null; + } else if ( value === "max" ) { + this.options.value = this._values( this.options.values.length-1 ); + this.options.values = null; + } + } + if ( $.isArray( this.options.values ) ) { valsLength = this.options.values.length; } @@ -408,12 +430,6 @@ $.widget( "ui.slider", $.ui.mouse, { $.Widget.prototype._setOption.apply( this, arguments ); switch ( key ) { - case "disabled": - if ( value ) { - this.handles.filter( ".ui-state-focus" ).blur(); - this.handles.removeClass( "ui-state-hover" ); - } - break; case "orientation": this._detectOrientation(); this.element @@ -441,6 +457,11 @@ $.widget( "ui.slider", $.ui.mouse, { this._refreshValue(); this._animateOff = false; break; + case "range": + this._animateOff = true; + this._refresh(); + this._animateOff = false; + break; } }, @@ -466,7 +487,7 @@ $.widget( "ui.slider", $.ui.mouse, { val = this._trimAlignValue( val ); return val; - } else { + } else if ( this.options.values && this.options.values.length ) { // .slice() creates a copy of the array // this copy gets trimmed by min and max and then returned vals = this.options.values.slice(); @@ -475,6 +496,8 @@ $.widget( "ui.slider", $.ui.mouse, { } return vals; + } else { + return []; } }, @@ -629,6 +652,9 @@ $.widget( "ui.slider", $.ui.mouse, { this._slide( event, index, newVal ); }, + click: function( event ) { + event.preventDefault(); + }, keyup: function( event ) { var index = $( event.target ).data( "ui-slider-handle-index" ); |