Skip to content

Commit fe246fb

Browse files
arschmitzarschmitz
committed
Slider: Add classes option
1 parent 7f98076 commit fe246fb

File tree

3 files changed

+50
-42
lines changed

3 files changed

+50
-42
lines changed

‎tests/unit/slider/slider_common.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
TestHelpers.commonWidgetTests( "slider", {
22
defaults: {
33
animate: false,
4+
classes: {
5+
"ui-slider": "ui-corner-all",
6+
"ui-slider-handle": "ui-corner-all",
7+
"ui-slider-range": "ui-corner-all"
8+
},
49
cancel: "input,textarea,button,select,option",
510
delay: 0,
611
disabled: false,

‎tests/unit/slider/slider_core.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,17 @@ function handle() {
1212
// Slider Tests
1313
module( "slider: core" );
1414

15+
test( "markup structure", function( assert ) {
16+
expect( 3 );
17+
var element = $( "<div></div>" ).slider({ range: true }),
18+
handle = element.find( "span" ),
19+
range = element.find( "div" );
20+
21+
assert.hasClasses( element, "ui-slider ui-widget ui-widget-content" );
22+
assert.hasClasses( range, "ui-slider-range ui-widget-header" );
23+
assert.hasClasses( handle, "ui-slider-handle" );
24+
});
25+
1526
test( "keydown HOME on handle sets value to min", function() {
1627
expect( 2 );
1728
element = $( "<div></div>" );

‎ui/slider.js

Lines changed: 34 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,11 @@ return $.widget( "ui.slider", $.ui.mouse, {
3636

3737
options: {
3838
animate: false,
39+
classes: {
40+
"ui-slider": "ui-corner-all",
41+
"ui-slider-handle": "ui-corner-all",
42+
"ui-slider-range": "ui-corner-all"
43+
},
3944
distance: 0,
4045
max: 100,
4146
min: 0,
@@ -65,12 +70,8 @@ return $.widget( "ui.slider", $.ui.mouse, {
6570
this._mouseInit();
6671
this._calculateNewMax();
6772

68-
this.element
69-
.addClass( "ui-slider" +
70-
" ui-slider-" + this.orientation +
71-
" ui-widget" +
72-
" ui-widget-content" +
73-
" ui-corner-all");
73+
this._addClass( "ui-slider ui-slider-" + this.orientation,
74+
"ui-widget ui-widget-content ui-corner-all" );
7475

7576
this._refresh();
7677
this._setOption( "disabled", this.options.disabled );
@@ -88,8 +89,8 @@ return $.widget( "ui.slider", $.ui.mouse, {
8889
_createHandles: function() {
8990
var i, handleCount,
9091
options = this.options,
91-
existingHandles = this.element.find( ".ui-slider-handle" ).addClass( "ui-state-default ui-corner-all" ),
92-
handle = "<span class='ui-slider-handle ui-state-default ui-corner-all' tabindex='0'></span>",
92+
existingHandles = this.element.find( ".ui-slider-handle" ),
93+
handle = "<span tabindex='0'></span>",
9394
handles = [];
9495

9596
handleCount = ( options.values && options.values.length ) || 1;
@@ -105,6 +106,8 @@ return $.widget( "ui.slider", $.ui.mouse, {
105106

106107
this.handles = existingHandles.add( $( handles.join( "" ) ).appendTo( this.element ) );
107108

109+
this._addClass( this.handles, "ui-slider-handle", "ui-state-default" );
110+
108111
this.handle = this.handles.eq( 0 );
109112

110113
this.handles.each(function( i ) {
@@ -113,8 +116,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
113116
},
114117

115118
_createRange: function() {
116-
var options = this.options,
117-
classes = "";
119+
var options = this.options;
118120

119121
if ( options.range ) {
120122
if ( options.range === true ) {
@@ -128,24 +130,24 @@ return $.widget( "ui.slider", $.ui.mouse, {
128130
}
129131

130132
if ( !this.range || !this.range.length ) {
131-
this.range = $( "<div></div>" )
133+
this.range = $( "<div>" )
132134
.appendTo( this.element );
133135

134-
classes = "ui-slider-range" +
135-
// note: this isn't the most fittingly semantic framework class for this element,
136+
// Note: this isn't the most fittingly semantic framework class for this element,
136137
// but worked best visually with a variety of themes
137-
" ui-widget-header ui-corner-all";
138+
this._addClass( this.range, "ui-slider-range ui-widget-header" );
138139
} else {
139-
this.range.removeClass( "ui-slider-range-min ui-slider-range-max" )
140-
// Handle range switching from true to min/max
141-
.css({
142-
"left": "",
143-
"bottom": ""
144-
});
145-
}
140+
this._removeClass( this.range, "ui-slider-range-min ui-slider-range-max" );
146141

147-
this.range.addClass( classes +
148-
( ( options.range === "min" || options.range === "max" ) ? " ui-slider-range-" + options.range : "" ) );
142+
// Handle range switching from true to min/max
143+
this.range.css({
144+
"left": "",
145+
"bottom": ""
146+
});
147+
}
148+
if ( options.range === "min" || options.range === "max" ) {
149+
this._addClass( this.range, "ui-slider-range-" + options.range );
150+
}
149151
} else {
150152
if ( this.range ) {
151153
this.range.remove();
@@ -167,14 +169,6 @@ return $.widget( "ui.slider", $.ui.mouse, {
167169
this.range.remove();
168170
}
169171

170-
this.element
171-
.removeClass( "ui-slider" +
172-
" ui-slider-horizontal" +
173-
" ui-slider-vertical" +
174-
" ui-widget" +
175-
" ui-widget-content" +
176-
" ui-corner-all" );
177-
178172
this._mouseDestroy();
179173
},
180174

@@ -215,9 +209,8 @@ return $.widget( "ui.slider", $.ui.mouse, {
215209

216210
this._handleIndex = index;
217211

218-
closestHandle
219-
.addClass( "ui-state-active" )
220-
.focus();
212+
this._addClass( closestHandle, null, "ui-state-active" );
213+
closestHandle.focus();
221214

222215
offset = closestHandle.offset();
223216
mouseOverHandle = !$( event.target ).parents().addBack().is( ".ui-slider-handle" );
@@ -251,7 +244,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
251244
},
252245

253246
_mouseStop: function( event ) {
254-
this.handles.removeClass( "ui-state-active" );
247+
this._removeClass( this.handles, null, "ui-state-active" );
255248
this._mouseSliding = false;
256249

257250
this._stop( event, this._handleIndex );
@@ -448,18 +441,17 @@ return $.widget( "ui.slider", $.ui.mouse, {
448441
}
449442

450443
if ( key === "disabled" ) {
451-
this.element.toggleClass( "ui-state-disabled", !!value );
444+
this._toggleClass( null, "ui-state-disabled", !!value );
452445
}
453446

454447
this._super( key, value );
455448

456449
switch ( key ) {
457450
case "orientation":
458451
this._detectOrientation();
459-
this.element
460-
.removeClass( "ui-slider-horizontal ui-slider-vertical" )
461-
.addClass( "ui-slider-" + this.orientation );
462-
this._refreshValue();
452+
this._removeClass( "ui-slider-horizontal ui-slider-vertical" )
453+
._addClass( "ui-slider-" + this.orientation )
454+
._refreshValue();
463455

464456
// Reset positioning from previous orientation
465457
this.handles.css( value === "horizontal" ? "bottom" : "left", "" );
@@ -656,7 +648,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
656648
event.preventDefault();
657649
if ( !this._keySliding ) {
658650
this._keySliding = true;
659-
$( event.target ).addClass( "ui-state-active" );
651+
this._addClass( $( event.target ), null, "ui-state-active" );
660652
allowed = this._start( event, index );
661653
if ( allowed === false ) {
662654
return;
@@ -713,7 +705,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
713705
this._keySliding = false;
714706
this._stop( event, index );
715707
this._change( event, index );
716-
$( event.target ).removeClass( "ui-state-active" );
708+
this._removeClass( $( event.target ), null, "ui-state-active" );
717709
}
718710
}
719711
}

0 commit comments

Comments
 (0)