library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Slider: Range fills all space after changing orientation

Browse Source 
Resets width/height of range

Fixes #12205
Closes gh-1533
This commit is contained in:
Ablay Keldibek 2015-04-07 20:10:27 +06:00 committed by Scott González
parent ec952e2909
commit 897a238332
3 changed files with 62 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
tests/unit/slider/options.js
View File

@ -109,7 +109,7 @@ test( "min", function() {
}); });
test( "orientation", function( assert ) { test( "orientation", function( assert ) {
expect( 8 ); expect( 14 );
element = $( "#slider1" ); element = $( "#slider1" );
options = { options = {
@ -119,7 +119,8 @@ test( "orientation", function( assert ) {
value: 1 value: 1
}; };
var percentVal = ( options.value - options.min ) / ( options.max - options.min ) * 100; var newValue, rangeSize,
percentVal = ( options.value - options.min ) / ( options.max - options.min ) * 100;
element.slider( options ).slider( "option", "orientation", "horizontal" ); element.slider( options ).slider( "option", "orientation", "horizontal" );
assert.hasClasses( element, "ui-slider-horizontal" ); assert.hasClasses( element, "ui-slider-horizontal" );
@ -146,6 +147,42 @@ test( "orientation", function( assert ) {
element.slider( "destroy" ); element.slider( "destroy" );
newValue = 7;
rangeSize = 500 - (500 * newValue / 10);
element = $( "#slider2" ).slider({
range: "max",
min: 0,
max: 10
});
element.slider( "option", "value", newValue );
element.slider( "option", "orientation", "vertical" );
equal( element.find( ".ui-slider-range" ).width(), 12,
"range should occupy all horizontal space after changing orientation to vertical" );
equal( element.find( ".ui-slider-range" ).height(), rangeSize,
"range height of vertical slider should be proportional to the value" );
element.slider( "option", "orientation", "horizontal" );
equal( element.find( ".ui-slider-range " ).height(), 12,
"range should occupy all vertical space after changing orientation to horizontal" );
equal( element.find( ".ui-slider-range" ).width(), rangeSize,
"range width of horizontal slider should be proportional to the value" );
element.slider( "destroy" );
element = $( "#slider2" ).slider({
range: true,
min: 0,
max: 100
});
element.slider( "option", { values: [ 60, 70 ] } );
notEqual( element.find( ".ui-slider-range " ).position().left, 0,
"range should not pull over to the track's border" );
element.slider( "option", "orientation", "vertical" );
equal( element.find( ".ui-slider-range " ).position().left, 0,
"range should pull over to the track's border" );
element.slider( "destroy" );
}); });
//spec: http://wiki.jqueryui.com/Slider#specs //spec: http://wiki.jqueryui.com/Slider#specs

11
tests/unit/slider/slider.html
View File

@ -7,6 +7,16 @@
<script src="../../../external/requirejs/require.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js" data-modules="core slider"></script> <script src="../../lib/css.js" data-modules="core slider"></script>
<script src="../../lib/bootstrap.js" data-widget="slider"></script> <script src="../../lib/bootstrap.js" data-widget="slider"></script>
<style>
#slider2.ui-slider-horizontal {
height: 12px;
width: 500px;
}
#slider2.ui-slider-vertical {
width: 12px;
height: 500px;
}
</style>
</head> </head>
<body> <body>
@ -14,6 +24,7 @@
<div id="qunit-fixture"> <div id="qunit-fixture">
<div id="slider1"></div> <div id="slider1"></div>
<div id="slider2"></div>
<div id="slider3" style="position: relative; margin: 40px; width: 217px; height: 28px;"> <div id="slider3" style="position: relative; margin: 40px; width: 217px; height: 28px;">
<div class="ui-slider-handle" style="position: absolute; height: 21px; left: 0px; bottom: 0px; width: 17px;"></div> <div class="ui-slider-handle" style="position: absolute; height: 21px; left: 0px; bottom: 0px; width: 17px;"></div>
</div> </div>

12
ui/slider.js
View File

@ -440,6 +440,9 @@ return $.widget( "ui.slider", $.ui.mouse, {
this._removeClass( "ui-slider-horizontal ui-slider-vertical" ) this._removeClass( "ui-slider-horizontal ui-slider-vertical" )
._addClass( "ui-slider-" + this.orientation ); ._addClass( "ui-slider-" + this.orientation );
this._refreshValue(); this._refreshValue();
if ( this.options.range ) {
this._refreshRange( value );
}
// Reset positioning from previous orientation // Reset positioning from previous orientation
this.handles.css( value === "horizontal" ? "bottom" : "left", "" ); this.handles.css( value === "horizontal" ? "bottom" : "left", "" );
@ -564,6 +567,15 @@ return $.widget( "ui.slider", $.ui.mouse, {
return this.max; return this.max;
}, },
_refreshRange: function ( orientation ) {
if ( orientation === "vertical" ) {
this.range.css( { "width": "", "left": "" } );
}
if ( orientation === "horizontal" ) {
this.range.css( { "height": "", "bottom": "" } );
}
},
_refreshValue: function() { _refreshValue: function() {
var lastValPercent, valPercent, value, valueMin, valueMax, var lastValPercent, valPercent, value, valueMin, valueMax,
oRange = this.options.range, oRange = this.options.range,