Skip to content

I
i20rzslider
Commit 1542cfb2 authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

Merge pull request #276 from Liam-Ryan/pr/rtl 

feat(RzSlider): Add RTL support
parents a495e536 52741f40
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3404 additions and 139 deletions
.gitignore
View file @ 1542cfb2
......@@ -3,3 +3,4 @@ node_modules/
bower_components/
temp/
tests/coverage/
dist/
CHANGELOG.md
View file @ 1542cfb2
2.10.0 (2016-02-28)
## Features
- Added rightToLeft option for RTL support (#270)
# 2.9.0 (2016-02-18)
## Features
- Change `rzSliderOptions` to use expression binding (#266).
......
README.md
View file @ 1542cfb2
......@@ -20,6 +20,7 @@ Slider directive implementation for AngularJS, without any dependencies: [http:/
- Simple to use
- Keyboard support
- Compatibility with jQuery Lite, ie. with full jQuery ( Thanks Jusas! https://github.com/Jusas)
- Supports right to left
**Horizontal**
......@@ -202,7 +203,8 @@ The default options are:
onlyBindHandles: false,
onStart: null,
onChange: null,
onEnd: null
onEnd: null,
rightToLeft: false
}
````
......@@ -295,6 +297,8 @@ $scope.slider = {
**onEnd** - _Function(sliderId, modelValue, highValue)_: Function to be called when a slider update is ended. If an id was set in the options, then it's passed to this callback.
**rightToLeft** - _Boolean (defaults to false)_: Set to true to show graphs right to left. If **vertical** is true it reverses the left / right arrow functions
**vertical** - _Boolean (defaults to false)_: Set to true to display the slider vertically. The slider will take the full height of its parent.
_Changing this value at runtime is not currently supported._
......
demo/demo.js
View file @ 1542cfb2
......@@ -112,6 +112,17 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
}
};
//Right to left slider with floor, ceil and step
$scope.slider_floor_ceil_rtl = {
value: 12,
options: {
floor: 10,
ceil: 100,
step: 5,
rightToLeft: true
}
}
//Slider config with callbacks
$scope.slider_callbacks = {
value: 100,
......
demo/index.html
View file @ 1542cfb2
......@@ -102,6 +102,14 @@
></rzslider>
</article>
<article>
<h2>Right to left slider with custom floor/ceil/step</h2>
<rzslider
rz-slider-model="slider_floor_ceil_rtl.value"
rz-slider-options="slider_floor_ceil_rtl.options"
></rzslider>
</article>
<article>
<h2>Slider with callbacks on start, change and end</h2>
<p>Value linked on start: {{ otherData.start }}</p>
......@@ -289,7 +297,8 @@
<label>Show ticks <input type="checkbox" ng-model="slider_all_options.options.showTicks"></label><br/>
<label>Show ticks values <input type="checkbox" ng-model="slider_all_options.options.showTicksValues"></label><br/>
<label>Disabled <input type="checkbox" ng-model="slider_all_options.options.disabled"></label><br/>
<label>Read-Only <input type="checkbox" ng-model="slider_all_options.options.readOnly"></label>
<label>Read-Only <input type="checkbox" ng-model="slider_all_options.options.readOnly"></label><br />
<label>Right to Left <input type="checkbox" ng-model="slider_all_options.options.rightToLeft"></label>
</div>
</div>
<rzslider
......
dist/rzslider.css
View file @ 1542cfb2
/*! angularjs-slider - v2.9.0 -
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
https://github.com/angular-slider/angularjs-slider -
2016-02-24 */
2016-02-28 */
rzslider {
position: relative;
display: inline-block;
......
dist/rzslider.js
View file @ 1542cfb2
This diff is collapsed.
dist/rzslider.min.css
View file @ 1542cfb2
/*! angularjs-slider - v2.9.0 - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - https://github.com/angular-slider/angularjs-slider - 2016-02-24 */
/*! angularjs-slider - v2.9.0 - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - https://github.com/angular-slider/angularjs-slider - 2016-02-28 */
rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:35px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}rzslider[disabled]{cursor:not-allowed}rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider .rz-base{width:100%;height:100%;padding:0}rzslider .rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider .rz-bar-wrapper.rz-draggable{cursor:move}rzslider .rz-bar{left:0;z-index:1;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-pointer{top:-14px;z-index:3;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider .rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider .rz-pointer:hover:after{background-color:#fff}rzslider .rz-pointer.rz-active{z-index:4}rzslider .rz-pointer.rz-active:after{background-color:#451aff}rzslider .rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default}rzslider .rz-bubble.rz-selection{top:16px}rzslider .rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:0;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}rzslider .rz-ticks .tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .tick.selected{background:#0db9f0}rzslider .rz-ticks .tick .tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}rzslider.vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}rzslider.vertical .rz-base{width:100%;height:100%;padding:0}rzslider.vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}rzslider.vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}rzslider.vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}rzslider.vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}rzslider.vertical .rz-bubble.rz-selection{top:auto;left:16px!important}rzslider.vertical .rz-ticks{top:0;left:-3px;z-index:1;width:0;height:100%;padding:11px 0;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}rzslider.vertical .rz-ticks .tick{vertical-align:middle}rzslider.vertical .rz-ticks .tick .tick-value{top:auto;right:-30px;transform:translate(0,-28%)}
\ No newline at end of file
dist/rzslider.min.js
View file @ 1542cfb2
This diff is collapsed.
src/rzslider.js
View file @ 1542cfb2
This diff is collapsed.
tests/specs/helper-functions-test.js
View file @ 1542cfb2
......@@ -652,6 +652,60 @@
expect(helper.slider.onPointerFocus.callCount).to.equal(0);
});
});
describe('RTL tests with same config', function() {
beforeEach(function () {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
rightToLeft: true
}
};
helper.createSlider(sliderConf);
});
it('should have a valid valueToOffset for positive sliders', function() {
helper.slider.maxPos = 1000;
expect(helper.slider.valueToOffset(0)).to.equal(1000);
expect(helper.slider.valueToOffset(50)).to.equal(500);
expect(helper.slider.valueToOffset(100)).to.equal(0);
});
it('should have a valid valueToOffset for negative sliders', function() {
helper.scope.slider.options.floor = -100;
helper.scope.slider.options.ceil = 0;
helper.scope.slider.value = -50;
helper.scope.$digest();
helper.slider.maxPos = 1000;
expect(helper.slider.valueToOffset(0)).to.equal(0);
expect(helper.slider.valueToOffset(-50)).to.equal(500);
expect(helper.slider.valueToOffset(-100)).to.equal(1000);
});
it('should have a valid offsetToValue for positive sliders', function() {
helper.slider.maxPos = 1000;
expect(helper.slider.offsetToValue(0)).to.equal(100);
expect(helper.slider.offsetToValue(1000)).to.equal(0);
expect(helper.slider.offsetToValue(500)).to.equal(50);
});
it('should have a valid offsetToValue for for negative sliders', function() {
helper.scope.slider.options.floor = -100;
helper.scope.slider.options.ceil = 0;
helper.scope.slider.value = -50;
helper.scope.$digest();
helper.slider.maxPos = 1000;
expect(helper.slider.offsetToValue(0)).to.equal(0);
expect(helper.slider.offsetToValue(1000)).to.equal(-100);
expect(helper.slider.offsetToValue(500)).to.equal(-50);
});
});
});
}());
tests/specs/keyboard-controls/draggableRangeOnly-range-slider-test.js
View file @ 1542cfb2
......@@ -117,5 +117,123 @@
expect(helper.scope.slider.max).to.equal(200);
});
});
describe('Right to left Keyboard controls - draggableRangeOnly range slider', function() {
var helper,
RzSliderOptions,
$rootScope,
$timeout;
beforeEach(module('test-helper'));
beforeEach(inject(function (TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
helper = TestHelper;
RzSliderOptions = _RzSliderOptions_;
$rootScope = _$rootScope_;
$timeout = _$timeout_;
}));
afterEach(function () {
helper.clean();
});
beforeEach(function () {
var sliderConf = {
min: 90,
max: 110,
options: {
floor: 0,
ceil: 200,
draggableRangeOnly: true,
rightToLeft: true
}
};
helper.createRangeSlider(sliderConf);
});
it('should decrement minH/maxH by 1 when RIGHT is pressed on minH', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'RIGHT');
expect(helper.scope.slider.min).to.equal(89);
expect(helper.scope.slider.max).to.equal(109);
});
it('should decrement minH/maxH by 1 when RIGHT is pressed on maxH', function() {
helper.slider.maxH.triggerHandler('focus');
helper.pressKeydown(helper.slider.maxH, 'RIGHT');
expect(helper.scope.slider.min).to.equal(89);
expect(helper.scope.slider.max).to.equal(109);
});
it('should increment minH/maxH by 1 when LEFT is pressed on minH', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'LEFT');
expect(helper.scope.slider.min).to.equal(91);
expect(helper.scope.slider.max).to.equal(111);
});
it('should increment minH/maxH by 1 when LEFT is pressed on maxH', function() {
helper.slider.maxH.triggerHandler('focus');
helper.pressKeydown(helper.slider.maxH, 'LEFT');
expect(helper.scope.slider.min).to.equal(91);
expect(helper.scope.slider.max).to.equal(111);
});
it('should increment minH/maxH by 10% when PAGEUP is pressed on minH', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'PAGEUP');
expect(helper.scope.slider.min).to.equal(110);
expect(helper.scope.slider.max).to.equal(130);
});
it('should increment minH/maxH by 10% when PAGEUP is pressed on maxH', function() {
helper.slider.maxH.triggerHandler('focus');
helper.pressKeydown(helper.slider.maxH, 'PAGEUP');
expect(helper.scope.slider.min).to.equal(110);
expect(helper.scope.slider.max).to.equal(130);
});
it('should decrement minH/maxH by 10% when PAGEDOWN is pressed on minH', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'PAGEDOWN');
expect(helper.scope.slider.min).to.equal(70);
expect(helper.scope.slider.max).to.equal(90);
});
it('should decrement minH/maxH by 10% when PAGEDOWN is pressed on maxH', function() {
helper.slider.maxH.triggerHandler('focus');
helper.pressKeydown(helper.slider.maxH, 'PAGEDOWN');
expect(helper.scope.slider.min).to.equal(70);
expect(helper.scope.slider.max).to.equal(90);
});
it('should set minH to min when HOME is pressed on minH', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'HOME');
expect(helper.scope.slider.min).to.equal(0);
expect(helper.scope.slider.max).to.equal(20);
});
it('should set minH to min when HOME is pressed on maxH', function() {
helper.slider.maxH.triggerHandler('focus');
helper.pressKeydown(helper.slider.maxH, 'HOME');
expect(helper.scope.slider.min).to.equal(0);
expect(helper.scope.slider.max).to.equal(20);
});
it('should set minH to min when END is pressed on minH', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'END');
expect(helper.scope.slider.min).to.equal(180);
expect(helper.scope.slider.max).to.equal(200);
});
it('should set minH to min when END is pressed on maxH', function() {
helper.slider.maxH.triggerHandler('focus');
helper.pressKeydown(helper.slider.maxH, 'END');
expect(helper.scope.slider.min).to.equal(180);
expect(helper.scope.slider.max).to.equal(200);
});
});
}());
tests/specs/keyboard-controls/range-slider-test.js
View file @ 1542cfb2
......@@ -149,5 +149,143 @@
expect(helper.scope.slider.max).to.equal(101);
});
});
describe('Right to left Keyboard controls - range slider', function() {
var helper,
RzSliderOptions,
$rootScope,
$timeout;
beforeEach(module('test-helper'));
beforeEach(inject(function (TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
helper = TestHelper;
RzSliderOptions = _RzSliderOptions_;
$rootScope = _$rootScope_;
$timeout = _$timeout_;
}));
afterEach(function () {
helper.clean();
});
beforeEach(function () {
var sliderConf = {
min: 50,
max: 100,
options: {
floor: 0,
ceil: 200,
rightToLeft: true
}
};
helper.createRangeSlider(sliderConf);
});
it('should decrement minH by 1 when RIGHT is pressed', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'RIGHT');
expect(helper.scope.slider.min).to.equal(49);
});
it('should decrement maxH by 1 when RIGHT is pressed', function() {
helper.slider.maxH.triggerHandler('focus');
helper.pressKeydown(helper.slider.maxH, 'RIGHT');
expect(helper.scope.slider.max).to.equal(99);
});
it('should increment minH by 1 when LEFT is pressed', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'LEFT');
expect(helper.scope.slider.min).to.equal(51);
});
it('should increment maxH by 1 when LEFT is pressed', function() {
helper.slider.maxH.triggerHandler('focus');
helper.pressKeydown(helper.slider.maxH, 'LEFT');
expect(helper.scope.slider.max).to.equal(101);
});
it('should increment minH by 10% when PAGEUP is pressed', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'PAGEUP');
expect(helper.scope.slider.min).to.equal(70);
});
it('should increment maxH by 10% when PAGEUP is pressed', function() {
helper.slider.maxH.triggerHandler('focus');
helper.pressKeydown(helper.slider.maxH, 'PAGEUP');
expect(helper.scope.slider.max).to.equal(120);
});
it('should decrement minH by 10% when PAGEDOWN is pressed', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'PAGEDOWN');
expect(helper.scope.slider.min).to.equal(30);
});
it('should decrement maxH by 10% when PAGEDOWN is pressed', function() {
helper.slider.maxH.triggerHandler('focus');
helper.pressKeydown(helper.slider.maxH, 'PAGEDOWN');
expect(helper.scope.slider.max).to.equal(80);
});
it('should set minH to min when HOME is pressed on minH', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'HOME');
expect(helper.scope.slider.min).to.equal(0);
});
it('should set minH value to previous min and switch min/max when HOME is pressed on maxH', function() {
helper.slider.maxH.triggerHandler('focus');
helper.pressKeydown(helper.slider.maxH, 'HOME');
expect(helper.scope.slider.min).to.equal(0);
expect(helper.scope.slider.max).to.equal(50);
});
it('should set minH value to previous max and switch min/max when END is pressed on minH', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'END');
expect(helper.scope.slider.min).to.equal(100);
expect(helper.scope.slider.max).to.equal(200);
});
it('should set maxH value to max when END is pressed on maxH', function() {
helper.slider.maxH.triggerHandler('focus');
helper.pressKeydown(helper.slider.maxH, 'END');
expect(helper.scope.slider.max).to.equal(200);
});
it('should do nothing when SPACE is pressed on minH', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'SPACE');
expect(helper.scope.slider.min).to.equal(50);
});
it('should do nothing when SPACE is pressed on maxH', function() {
helper.slider.maxH.triggerHandler('focus');
helper.pressKeydown(helper.slider.maxH, 'SPACE');
expect(helper.scope.slider.max).to.equal(100);
});
it('should not modify minH when keypress but not focused', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'RIGHT');
expect(helper.scope.slider.min).to.equal(49);
helper.slider.minH.triggerHandler('blur');
helper.pressKeydown(helper.slider.minH, 'RIGHT');
expect(helper.scope.slider.min).to.equal(49);
});
it('should not modify maxH when keypress but not focused', function() {
helper.slider.maxH.triggerHandler('focus');
helper.pressKeydown(helper.slider.maxH, 'RIGHT');
expect(helper.scope.slider.max).to.equal(99);
helper.slider.maxH.triggerHandler('blur');
helper.pressKeydown(helper.slider.maxH, 'RIGHT');
expect(helper.scope.slider.max).to.equal(99);
});
});
}());
tests/specs/keyboard-controls/single-slider-test.js
View file @ 1542cfb2
......@@ -107,5 +107,113 @@
expect(helper.scope.slider.value).to.equal(101);
});
});
describe('Right to left Keyboard controls - single slider', function() {
var helper,
RzSliderOptions,
$rootScope,
$timeout;
beforeEach(module('test-helper'));
beforeEach(inject(function (TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
helper = TestHelper;
RzSliderOptions = _RzSliderOptions_;
$rootScope = _$rootScope_;
$timeout = _$timeout_;
}));
afterEach(function () {
helper.clean();
});
beforeEach(function () {
var sliderConf = {
value: 100,
options: {
floor: 0,
ceil: 200,
rightToLeft: true
}
};
helper.createSlider(sliderConf);
});
it('should toggle active style when handle focused/blured', function() {
helper.slider.minH.triggerHandler('focus');
expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
helper.slider.minH.triggerHandler('blur');
expect(helper.slider.minH.hasClass('rz-active')).to.be.false;
});
it('should decrement by 1 when RIGHT is pressed', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'RIGHT');
expect(helper.scope.slider.value).to.equal(99);
});
it('should decrement by 1 when RIGHT is pressed with oldAPI', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'RIGHT', true);
expect(helper.scope.slider.value).to.equal(99);
});
it('should increment by 1 when LEFT is pressed', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'LEFT');
expect(helper.scope.slider.value).to.equal(101);
});
it('should increment by 1 when UP is pressed', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'UP');
expect(helper.scope.slider.value).to.equal(101);
});
it('should decrement by 1 when DOWN is pressed', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'DOWN');
expect(helper.scope.slider.value).to.equal(99);
});
it('should increment by 10% when PAGEUP is pressed', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'PAGEUP');
expect(helper.scope.slider.value).to.equal(120);
});
it('should decrement by 10% when PAGEDOWN is pressed', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'PAGEDOWN');
expect(helper.scope.slider.value).to.equal(80);
});
it('should set value to min when HOME is pressed', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'HOME');
expect(helper.scope.slider.value).to.equal(0);
});
it('should set value to max when END is pressed', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'END');
expect(helper.scope.slider.value).to.equal(200);
});
it('should do nothing when SPACE is pressed', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'SPACE');
expect(helper.scope.slider.value).to.equal(100);
});
it('should not modify when keypress but not focused', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'RIGHT');
expect(helper.scope.slider.value).to.equal(99);
helper.slider.minH.triggerHandler('blur');
helper.pressKeydown(helper.slider.minH, 'RIGHT');
expect(helper.scope.slider.value).to.equal(99);
});
});
}());
tests/specs/keyboard-controls/specific-test.js
View file @ 1542cfb2
......@@ -126,7 +126,139 @@
helper.pressKeydown(helper.slider.maxH, 'RIGHT');
expect(helper.scope.slider.max).to.equal(56);
});
});
describe('Right to left Keyboard controls - specific tests', function() {
var helper,
RzSliderOptions,
$rootScope,
$timeout;
beforeEach(module('test-helper'));
beforeEach(inject(function (TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
helper = TestHelper;
RzSliderOptions = _RzSliderOptions_;
$rootScope = _$rootScope_;
$timeout = _$timeout_;
}));
afterEach(function () {
helper.clean();
});
it('should not go below floor', function() {
var sliderConf = {
value: 10,
options: {
floor: 0,
ceil: 1000,
step: 10,
rightToLeft: true
}
};
helper.createSlider(sliderConf);
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'PAGEDOWN');
expect(helper.scope.slider.value).to.equal(0);
});
it('should not go above ceil', function() {
var sliderConf = {
value: 990,
options: {
floor: 0,
ceil: 1000,
step: 10,
rightToLeft: true
}
};
helper.createSlider(sliderConf);
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'PAGEUP');
expect(helper.scope.slider.value).to.equal(1000);
});
it('should not be modified by keyboard if disabled=true', function() {
var sliderConf = {
value: 10,
options: {
floor: 0,
ceil: 100,
disabled: true,
rightToLeft: true
}
};
helper.createSlider(sliderConf);
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'LEFT');
expect(helper.scope.slider.value).to.equal(10);
});
it('should not be modified by keyboard if readOnly=true', function() {
var sliderConf = {
value: 10,
options: {
floor: 0,
ceil: 100,
readOnly: true,
rightToLeft: true
}
};
helper.createSlider(sliderConf);
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'LEFT');
expect(helper.scope.slider.value).to.equal(10);
});
it('should not be modified by keyboard if new range is below minRange', function() {
var sliderConf = {
min: 45,
max: 55,
options: {
floor: 0,
ceil: 100,
step: 1,
minRange: 10,
rightToLeft: true
}
};
helper.createRangeSlider(sliderConf);
//try to move minH left ( increase in rtl )
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'LEFT');
expect(helper.scope.slider.min).to.equal(45);
//try to move maxH right (decrease in rtl )
helper.slider.maxH.triggerHandler('focus');
helper.pressKeydown(helper.slider.maxH, 'RIGHT');
expect(helper.scope.slider.max).to.equal(55);
});
it('should be modified by keyboard if new range is above minRange', function() {
var sliderConf = {
min: 45,
max: 55,
options: {
floor: 0,
ceil: 100,
step: 1,
minRange: 10,
rightToLeft: true
}
};
helper.createRangeSlider(sliderConf);
//try to move minH RIGHT
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'RIGHT');
expect(helper.scope.slider.min).to.equal(44);
//try to move maxH LEFT
helper.slider.maxH.triggerHandler('focus');
helper.pressKeydown(helper.slider.maxH, 'LEFT');
expect(helper.scope.slider.max).to.equal(56);
});
});
}());
tests/specs/keyboard-controls/vertical-slider-test.js
View file @ 1542cfb2
......@@ -56,5 +56,64 @@
expect(helper.scope.slider.value).to.equal(99);
});
});
describe('Right to left Keyboard controls - vertical slider', function() {
var helper,
RzSliderOptions,
$rootScope,
$timeout;
beforeEach(module('test-helper'));
beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
helper = TestHelper;
RzSliderOptions = _RzSliderOptions_;
$rootScope = _$rootScope_;
$timeout = _$timeout_;
}));
afterEach(function() {
helper.clean();
});
beforeEach(function() {
var sliderConf = {
value: 100,
options: {
floor: 0,
ceil: 200,
vertical: true,
rightToLeft: true
}
};
helper.createSlider(sliderConf);
});
it('should decrement by 1 when RIGHT is pressed', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'RIGHT');
expect(helper.scope.slider.value).to.equal(99);
});
it('should decrement by 1 when UP is pressed', function() {
//while not strictly left to right this does allow also reversing vertical bars
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'UP');
expect(helper.scope.slider.value).to.equal(99);
});
it('should increment by 1 when DOWN is pressed', function() {
//while not strictly left to right this does allow also reversing vertical bars
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'DOWN');
expect(helper.scope.slider.value).to.equal(101);
});
it('should increment by 1 when LEFT is pressed', function() {
helper.slider.minH.triggerHandler('focus');
helper.pressKeydown(helper.slider.minH, 'LEFT');
expect(helper.scope.slider.value).to.equal(101);
});
});
}());
tests/specs/mouse-controls/draggable-range-slider-horizontal-test.js
View file @ 1542cfb2
......@@ -201,5 +201,207 @@
expect(helper.slider.maxH.css('left')).to.equal(maxOffset + 'px');
});
});
describe('Right to left Mouse controls - draggableRange Horizontal', function() {
var helper,
RzSliderOptions,
$rootScope,
$timeout;
beforeEach(module('test-helper'));
beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
helper = TestHelper;
RzSliderOptions = _RzSliderOptions_;
$rootScope = _$rootScope_;
$timeout = _$timeout_;
}));
afterEach(function() {
helper.clean();
});
beforeEach(function() {
var sliderConf = {
min: 40,
max: 60,
options: {
floor: 0,
ceil: 100,
draggableRange: true,
rightToLeft: true
}
};
helper.createRangeSlider(sliderConf);
});
afterEach(function() {
// to clean document listener
helper.fireMouseup();
});
it('should handle click and drag on minH correctly when mouse is on the middle', function() {
sinon.spy(helper.slider, 'positionTrackingHandle');
sinon.spy(helper.slider, 'callOnChange');
var event = helper.fireMousedown(helper.slider.minH, 0);
var expectedValue = 50,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousemove(offset);
expect(helper.scope.slider.min).to.equal(expectedValue);
helper.slider.positionTrackingHandle.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
it('should handle click and drag on maxH correctly when mouse is on the middle', function() {
sinon.spy(helper.slider, 'positionTrackingHandle');
sinon.spy(helper.slider, 'callOnChange');
var event = helper.fireMousedown(helper.slider.maxH, 0);
var expectedValue = 50,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousemove(offset);
expect(helper.scope.slider.max).to.equal(expectedValue);
helper.slider.positionTrackingHandle.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
it('should handle click and drag on minH and switch min/max if needed', function() {
var event = helper.fireMousedown(helper.slider.minH, 0);
var expectedValue = 80,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousemove(offset);
expect(helper.scope.slider.min).to.equal(60);
expect(helper.scope.slider.max).to.equal(80);
});
it('should handle click and drag on maxH and switch min/max if needed', function() {
var event = helper.fireMousedown(helper.slider.maxH, 0);
var expectedValue = 20,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousemove(offset);
expect(helper.scope.slider.min).to.equal(20);
expect(helper.scope.slider.max).to.equal(40);
});
it('should handle click on fullbar and move minH when click pos is nearer to minH', function() {
sinon.spy(helper.slider, 'positionTrackingHandle');
sinon.spy(helper.slider, 'callOnStart');
sinon.spy(helper.slider, 'callOnChange');
sinon.spy(helper.slider, 'focusElement');
var expectedValue = 10,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
var event = helper.fireMousedown(helper.slider.fullBar, offset);
expect(helper.scope.slider.min).to.equal(expectedValue);
expect(helper.slider.tracking).to.equal('rzSliderModel');
helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
helper.slider.positionTrackingHandle.called.should.be.true;
helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
it('should handle click on fullbar and move maxH when click pos is nearer to maxH', function() {
sinon.spy(helper.slider, 'positionTrackingHandle');
sinon.spy(helper.slider, 'callOnStart');
sinon.spy(helper.slider, 'callOnChange');
sinon.spy(helper.slider, 'focusElement');
var expectedValue = 90,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
var event = helper.fireMousedown(helper.slider.fullBar, offset);
expect(helper.scope.slider.max).to.equal(expectedValue);
expect(helper.slider.tracking).to.equal('rzSliderHigh');
helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
helper.slider.positionTrackingHandle.called.should.be.true;
helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
it('should handle click on selbar and move whole range when moved within slider range', function() {
sinon.spy(helper.slider, 'positionTrackingBar');
sinon.spy(helper.slider, 'callOnStart');
sinon.spy(helper.slider, 'callOnChange');
sinon.spy(helper.slider, 'focusElement');
helper.fireMousedown(helper.slider.selBar, 0);
var moveValue = 10,
offset = helper.slider.maxPos - helper.slider.valueToOffset(moveValue);
helper.fireMousemove(offset);
expect(helper.scope.slider.min).to.equal(30);
expect(helper.scope.slider.max).to.equal(50);
expect(helper.slider.tracking).to.equal('rzSliderHigh');
helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
helper.slider.positionTrackingBar.called.should.be.true;
helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
it('should handle click on selbar and move move range when near 0 and moved right', function() {
helper.scope.slider.min = 10;
helper.scope.$digest();
helper.fireMousedown(helper.slider.selBar, 0);
helper.fireMousemove(1000);
expect(helper.scope.slider.min).to.equal(0);
expect(helper.scope.slider.max).to.equal(50);
expect(helper.slider.tracking).to.equal('rzSliderHigh');
});
it('should handle click on selbar and don\'t move range when already at 0 and moved right', function() {
helper.scope.slider.min = 0;
helper.scope.$digest();
helper.fireMousedown(helper.slider.selBar, 0);
helper.fireMousemove(100);
expect(helper.scope.slider.min).to.equal(0);
expect(helper.scope.slider.max).to.equal(60);
expect(helper.slider.tracking).to.equal('rzSliderHigh');
});
it('should handle click on selbar and move range when near max and moved left', function() {
helper.scope.slider.max = 90;
helper.scope.$digest();
helper.fireMousedown(helper.slider.selBar, 0);
helper.fireMousemove(-1000);
expect(helper.scope.slider.min).to.equal(50);
expect(helper.scope.slider.max).to.equal(100);
expect(helper.slider.tracking).to.equal('rzSliderHigh');
});
it('should handle click on selbar and don\'t move range when already at max and moved left', function() {
helper.scope.slider.max = 100;
helper.scope.$digest();
helper.fireMousedown(helper.slider.selBar, 0);
helper.fireMousemove(-1000);
expect(helper.scope.slider.min).to.equal(40);
expect(helper.scope.slider.max).to.equal(100);
expect(helper.slider.tracking).to.equal('rzSliderHigh');
});
it('should a working positionTrackingBar', function() {
var newMin = 50,
newMax = 90,
minOffset = helper.slider.valueToOffset(newMin),
maxOffset = helper.slider.valueToOffset(newMax);
helper.slider.positionTrackingBar(newMin, newMax, minOffset, maxOffset);
expect(helper.scope.slider.min).to.equal(50);
expect(helper.scope.slider.max).to.equal(90);
expect(helper.slider.minH.css('left')).to.equal(minOffset + 'px');
expect(helper.slider.maxH.css('left')).to.equal(maxOffset + 'px');
});
});
}());
tests/specs/mouse-controls/draggableOnly-range-slider-horizontal-test.js
View file @ 1542cfb2
......@@ -148,5 +148,154 @@
expect(helper.slider.tracking).to.equal('rzSliderModel');
});
});
describe('Right to left Mouse controls - draggableRangeOnly Horizontal', function() {
var helper,
RzSliderOptions,
$rootScope,
$timeout;
beforeEach(module('test-helper'));
beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
helper = TestHelper;
RzSliderOptions = _RzSliderOptions_;
$rootScope = _$rootScope_;
$timeout = _$timeout_;
}));
afterEach(function() {
helper.clean();
});
beforeEach(function() {
var sliderConf = {
min: 40,
max: 60,
options: {
floor: 0,
ceil: 100,
draggableRangeOnly: true,
leftToRight: true
}
};
helper.createRangeSlider(sliderConf);
});
afterEach(function() {
// to clean document listener
helper.fireMouseup();
});
it('should handle click and drag on minH correctly', function() {
sinon.spy(helper.slider, 'positionTrackingBar');
sinon.spy(helper.slider, 'callOnChange');
var event = helper.fireMousedown(helper.slider.minH, 0);
var moveValue = 10,
offset = helper.slider.valueToOffset(moveValue);
helper.fireMousemove(offset);
expect(helper.scope.slider.min).to.equal(50);
expect(helper.scope.slider.max).to.equal(70);
helper.slider.positionTrackingBar.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
it('should handle click and drag on maxH correctly', function() {
sinon.spy(helper.slider, 'positionTrackingBar');
sinon.spy(helper.slider, 'callOnChange');
var event = helper.fireMousedown(helper.slider.maxH, 0);
var moveValue = 10,
offset = helper.slider.valueToOffset(moveValue);
helper.fireMousemove(offset);
expect(helper.scope.slider.min).to.equal(50);
expect(helper.scope.slider.max).to.equal(70);
helper.slider.positionTrackingBar.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
it('should not handle click on fullbar', function() {
sinon.spy(helper.slider, 'callOnStart');
var moveValue = 10,
offset = helper.slider.valueToOffset(moveValue);
var event = helper.fireMousedown(helper.slider.fullBar, offset);
expect(helper.scope.slider.min).to.equal(40);
expect(helper.scope.slider.max).to.equal(60);
expect(helper.slider.tracking).to.equal('');
helper.slider.callOnStart.called.should.be.false;
});
it('should handle click on selbar and move whole range when moved within slider range', function() {
sinon.spy(helper.slider, 'positionTrackingBar');
sinon.spy(helper.slider, 'callOnStart');
sinon.spy(helper.slider, 'callOnChange');
sinon.spy(helper.slider, 'focusElement');
helper.fireMousedown(helper.slider.selBar, 0);
var moveValue = 10,
offset = helper.slider.valueToOffset(moveValue);
helper.fireMousemove(offset);
expect(helper.scope.slider.min).to.equal(50);
expect(helper.scope.slider.max).to.equal(70);
expect(helper.slider.tracking).to.equal('rzSliderModel');
helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
helper.slider.positionTrackingBar.called.should.be.true;
helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
it('should handle click on selbar and move move range when near 0 and moved left', function() {
helper.scope.slider.min = 10;
helper.scope.$digest();
helper.fireMousedown(helper.slider.selBar, 0);
helper.fireMousemove(-1000);
expect(helper.scope.slider.min).to.equal(0);
expect(helper.scope.slider.max).to.equal(50);
expect(helper.slider.tracking).to.equal('rzSliderModel');
});
it('should handle click on selbar and don\'t move range when already at 0 and moved left', function() {
helper.scope.slider.min = 0;
helper.scope.$digest();
helper.fireMousedown(helper.slider.selBar, 0);
helper.fireMousemove(-100);
expect(helper.scope.slider.min).to.equal(0);
expect(helper.scope.slider.max).to.equal(60);
expect(helper.slider.tracking).to.equal('rzSliderModel');
});
it('should handle click on selbar and move move range when near max and moved right', function() {
helper.scope.slider.max = 90;
helper.scope.$digest();
helper.fireMousedown(helper.slider.selBar, 0);
helper.fireMousemove(helper.slider.maxPos);
expect(helper.scope.slider.min).to.equal(50);
expect(helper.scope.slider.max).to.equal(100);
expect(helper.slider.tracking).to.equal('rzSliderModel');
});
it('should handle click on selbar and don\'t move range when already at max and moved right', function() {
helper.scope.slider.max = 100;
helper.scope.$digest();
helper.fireMousedown(helper.slider.selBar, 0);
helper.fireMousemove(helper.slider.maxPos);
expect(helper.scope.slider.min).to.equal(40);
expect(helper.scope.slider.max).to.equal(100);
expect(helper.slider.tracking).to.equal('rzSliderModel');
});
});
}());
tests/specs/mouse-controls/minRange-noSwitching-range-slider-horizontal-test.js
View file @ 1542cfb2
......@@ -88,5 +88,95 @@
expect(helper.scope.slider.max).to.equal(55);
});
});
describe('Right to left Mouse controls - minRange and noSwitching Range Horizontal', function() {
var helper,
RzSliderOptions,
$rootScope,
$timeout;
beforeEach(module('test-helper'));
beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
helper = TestHelper;
RzSliderOptions = _RzSliderOptions_;
$rootScope = _$rootScope_;
$timeout = _$timeout_;
}));
afterEach(function() {
helper.clean();
});
beforeEach(function() {
var sliderConf = {
min: 45,
max: 55,
options: {
floor: 0,
ceil: 100,
minRange: 10,
noSwitching: true,
rightToLeft: true
}
};
helper.createRangeSlider(sliderConf);
});
afterEach(function() {
// to clean document listener
helper.fireMouseup();
});
it('should not modify any value if new range would be smaller than minRange when moving minH', function() {
helper.fireMousedown(helper.slider.minH, 0);
var expectedValue = 50,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousemove(-offset);
expect(helper.scope.slider.min).to.equal(45);
});
it('should not modify any value if new range would be smaller than minRange when moving maxH', function() {
helper.fireMousedown(helper.slider.maxH, 0);
var expectedValue = 50,
offset = helper.slider.maxPos - (helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp);
helper.fireMousemove(offset);
expect(helper.scope.slider.max).to.equal(55);
});
it('should modify the min value if new range is larger than minRange when moving minH', function() {
helper.fireMousedown(helper.slider.minH, 0);
var expectedValue = 30,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousemove(offset);
expect(helper.scope.slider.min).to.equal(expectedValue);
});
it('should modify the max value if new range is larger than than minRange when moving maxH', function() {
helper.fireMousedown(helper.slider.maxH, 0);
var expectedValue = 70,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousemove(offset);
expect(helper.scope.slider.max).to.equal(expectedValue);
});
it('should not switch min/max when moving minH even if the range is large enough', function() {
helper.fireMousedown(helper.slider.minH, 0);
var expectedValue = 80,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousemove(-offset);
expect(helper.scope.slider.min).to.equal(45);
expect(helper.scope.slider.max).to.equal(55);
});
it('should not switch min/max when moving maxH even if the range is large enough', function() {
helper.fireMousedown(helper.slider.maxH, 0);
var expectedValue = 20,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousemove(offset);
expect(helper.scope.slider.min).to.equal(45);
expect(helper.scope.slider.max).to.equal(55);
});
});
}());
tests/specs/mouse-controls/minRange-range-slider-horizontal-test.js
View file @ 1542cfb2
......@@ -87,5 +87,94 @@
expect(helper.scope.slider.max).to.equal(45);
});
});
describe('Right to left Mouse controls - minRange!=0 Range Horizontal', function() {
var helper,
RzSliderOptions,
$rootScope,
$timeout;
beforeEach(module('test-helper'));
beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
helper = TestHelper;
RzSliderOptions = _RzSliderOptions_;
$rootScope = _$rootScope_;
$timeout = _$timeout_;
}));
afterEach(function() {
helper.clean();
});
beforeEach(function() {
var sliderConf = {
min: 45,
max: 55,
options: {
floor: 0,
ceil: 100,
minRange: 10,
rightToLeft: true
}
};
helper.createRangeSlider(sliderConf);
});
afterEach(function() {
// to clean document listener
helper.fireMouseup();
});
it('should not modify any value if new range would be smaller than minRange when moving minH', function() {
helper.fireMousedown(helper.slider.minH, 0);
var expectedValue = 50,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousemove(offset);
expect(helper.scope.slider.min).to.equal(45);
});
it('should not modify any value if new range would be smaller than minRange when moving maxH', function() {
helper.fireMousedown(helper.slider.maxH, 0);
var expectedValue = 50,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousemove(offset);
expect(helper.scope.slider.max).to.equal(55);
});
it('should modify the min value if new range is larger than minRange when moving minH', function() {
helper.fireMousedown(helper.slider.minH, 0);
var expectedValue = 30,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousemove(offset);
expect(helper.scope.slider.min).to.equal(expectedValue);
});
it('should modify the max value if new range is larger than than minRange when moving maxH', function() {
helper.fireMousedown(helper.slider.maxH, 0);
var expectedValue = 70,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousemove(offset);
expect(helper.scope.slider.max).to.equal(expectedValue);
});
it('should modify the min value if switch min/max with a value large enough', function() {
helper.fireMousedown(helper.slider.minH, 0);
var expectedValue = 80,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousemove(offset);
expect(helper.scope.slider.min).to.equal(55);
expect(helper.scope.slider.max).to.equal(expectedValue);
});
it('should modify the max value if switch min/max with a value large enough', function() {
helper.fireMousedown(helper.slider.maxH, 0);
var expectedValue = 20,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousemove(offset);
expect(helper.scope.slider.min).to.equal(expectedValue);
expect(helper.scope.slider.max).to.equal(45);
});
});
}());
tests/specs/mouse-controls/noSwitching-range-slider-horizontal-test.js
View file @ 1542cfb2
......@@ -79,5 +79,85 @@
expect(helper.scope.slider.max).to.equal(70);
});
});
describe('Right to left Mouse controls - noSwitching Range Horizontal', function() {
var helper,
RzSliderOptions,
$rootScope,
$timeout;
beforeEach(module('test-helper'));
beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
helper = TestHelper;
RzSliderOptions = _RzSliderOptions_;
$rootScope = _$rootScope_;
$timeout = _$timeout_;
}));
afterEach(function() {
helper.clean();
});
beforeEach(function() {
var sliderConf = {
min: 45,
max: 55,
options: {
floor: 0,
ceil: 100,
noSwitching: true,
rightToLeft: true
}
};
helper.createRangeSlider(sliderConf);
});
afterEach(function() {
// to clean document listener
helper.fireMouseup();
});
it('should not switch min and max handles if minH is dragged after maxH', function() {
helper.fireMousedown(helper.slider.minH, 0);
var expectedValue = 60,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousemove(offset);
expect(helper.scope.slider.min).to.equal(55);
});
it('should not switch min and max handles if maxH is dragged before minH', function() {
helper.fireMousedown(helper.slider.maxH, 0);
var expectedValue = 20,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousemove(offset);
expect(helper.scope.slider.max).to.equal(45);
});
it('should move minH if minH==maxH and click is on the left side of the bar', function() {
helper.scope.slider.min = helper.scope.slider.max = 50;
helper.scope.$digest();
var expectedValue = 30,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousedown(helper.slider.fullBar, offset);
expect(helper.scope.slider.min).to.equal(30);
expect(helper.scope.slider.max).to.equal(50);
});
it('should move maxH if minH==maxH and click is on the right side of the bar', function() {
helper.scope.slider.min = helper.scope.slider.max = 50;
helper.scope.$digest();
var expectedValue = 70,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousedown(helper.slider.fullBar, offset);
expect(helper.scope.slider.min).to.equal(50);
expect(helper.scope.slider.max).to.equal(70);
});
});
}());
tests/specs/mouse-controls/onlyBindHandles-single-slider-horizontal-test.js
View file @ 1542cfb2
......@@ -62,5 +62,68 @@
helper.slider.positionTrackingHandle.called.should.be.false;
});
});
describe('Right to left Mouse controls - onlyBindHandles Single Horizontal', function() {
var helper,
RzSliderOptions,
$rootScope,
$timeout;
beforeEach(module('test-helper'));
beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
helper = TestHelper;
RzSliderOptions = _RzSliderOptions_;
$rootScope = _$rootScope_;
$timeout = _$timeout_;
}));
afterEach(function() {
helper.clean();
});
beforeEach(function() {
var sliderConf = {
value: 0,
options: {
floor: 0,
ceil: 100,
showTicks: true,
onlyBindHandles: true,
rightToLeft: true
}
};
helper.createSlider(sliderConf);
});
afterEach(function() {
// to clean document listener
helper.fireMouseup();
});
it('should handle click and drag on minH correctly when mouse is on the middle', function() {
sinon.spy(helper.slider, 'positionTrackingHandle');
sinon.spy(helper.slider, 'callOnChange');
helper.fireMousedown(helper.slider.minH, 0);
var expectedValue = 50,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousemove(offset);
expect(helper.scope.slider.value).to.equal(expectedValue);
helper.slider.positionTrackingHandle.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
it('should do nothing when a click happen on another element than the handle', function() {
helper.scope.slider.value = 100;
helper.scope.$digest();
sinon.spy(helper.slider, 'positionTrackingHandle');
helper.fireMousedown(helper.slider.selBar, 0);
helper.fireMousedown(helper.slider.fullBar, 0);
helper.fireMousedown(helper.slider.ticks, 0);
expect(helper.scope.slider.value).to.equal(100);
helper.slider.positionTrackingHandle.called.should.be.false;
});
});
}());
tests/specs/mouse-controls/single-slider-vertical-test.js
View file @ 1542cfb2
......@@ -187,5 +187,194 @@
helper.slider.callOnChange.called.should.be.true;
});
});
describe('Right to left Mouse controls - Single Vertical', function() {
var helper,
RzSliderOptions,
$rootScope,
$timeout;
beforeEach(module('test-helper'));
beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
helper = TestHelper;
RzSliderOptions = _RzSliderOptions_;
$rootScope = _$rootScope_;
$timeout = _$timeout_;
}));
afterEach(function() {
helper.clean();
});
beforeEach(function() {
var sliderConf = {
value: 0,
options: {
floor: 0,
ceil: 100,
vertical: true,
rightToLeft: true
}
};
helper.createSlider(sliderConf);
});
afterEach(function() {
// to clean document listener
helper.fireMouseup();
});
it('should handle mousedown on minH correctly when keyboardSupport is true', function() {
sinon.spy(helper.slider, 'calcViewDimensions');
sinon.spy(helper.slider, 'callOnStart');
sinon.spy(helper.slider, 'focusElement');
var event = helper.fireMousedown(helper.slider.minH, 0, true);
helper.slider.calcViewDimensions.called.should.be.true;
helper.slider.callOnStart.called.should.be.true;
helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
event.preventDefault.called.should.be.true;
event.stopPropagation.called.should.be.true;
expect(helper.slider.tracking).to.equal('rzSliderModel');
expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
});
it('should handle mousedown on minH correctly when keyboardSupport is false', function() {
helper.scope.slider.options.keyboardSupport = false;
helper.scope.$digest();
sinon.spy(helper.slider, 'calcViewDimensions');
sinon.spy(helper.slider, 'callOnStart');
sinon.spy(helper.slider, 'focusElement');
var event = helper.fireMousedown(helper.slider.minH, 0, true);
helper.slider.calcViewDimensions.called.should.be.true;
helper.slider.callOnStart.called.should.be.true;
helper.slider.focusElement.called.should.be.false;
event.preventDefault.called.should.be.true;
event.stopPropagation.called.should.be.true;
expect(helper.slider.tracking).to.equal('rzSliderModel');
expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
});
it('should handle click and drag on minH correctly when mouse is on the middle', function() {
sinon.spy(helper.slider, 'positionTrackingHandle');
sinon.spy(helper.slider, 'callOnChange');
helper.fireMousedown(helper.slider.minH, 0, true);
var expectedValue = 50,
offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
helper.fireMousemove(offset, true);
expect(helper.scope.slider.value).to.equal(expectedValue);
helper.slider.positionTrackingHandle.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
it('should handle click and drag on minH correctly when mouse is before the slider and previous value was different than 0', function() {
helper.scope.slider.value = 50;
helper.scope.$digest();
sinon.spy(helper.slider, 'positionTrackingHandle');
var event = helper.fireMousedown(helper.slider.minH, 0, true);
helper.fireMousemove(-100, true);
expect(helper.scope.slider.value).to.equal(0);
helper.slider.positionTrackingHandle.called.should.be.true;
});
it('should handle click and drag on minH correctly when mouse is after the slider and previous value was different than 100', function() {
sinon.spy(helper.slider, 'positionTrackingHandle');
var event = helper.fireMousedown(helper.slider.minH, 0, true);
helper.fireMousemove(helper.slider.maxPos + 100, true);
expect(helper.scope.slider.value).to.equal(100);
helper.slider.positionTrackingHandle.called.should.be.true;
});
it('should call correct callbacks on slider end and keep handle focused when keyboardSupport is true', function() {
var event = helper.fireMousedown(helper.slider.minH, 0, true);
sinon.spy(helper.slider, 'callOnEnd');
sinon.spy(helper.slider.scope, '$emit');
helper.fireMouseup();
expect(helper.slider.tracking).to.equal('rzSliderModel');
expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
helper.slider.callOnEnd.called.should.be.true;
helper.slider.scope.$emit.calledWith('slideEnded').should.be.true;
});
it('should call correct callbacks on slider end and not keep handle focused when keyboardSupport is false', function() {
helper.scope.slider.options.keyboardSupport = false;
helper.scope.$digest();
var event = helper.fireMousedown(helper.slider.minH, 0, true);
sinon.spy(helper.slider, 'callOnEnd');
sinon.spy(helper.slider.scope, '$emit');
helper.fireMouseup();
expect(helper.slider.tracking).to.equal('');
expect(helper.slider.minH.hasClass('rz-active')).to.be.false;
helper.slider.callOnEnd.called.should.be.true;
helper.slider.scope.$emit.calledWith('slideEnded').should.be.true;
});
it('should handle click on fullbar and move minH', function() {
sinon.spy(helper.slider, 'positionTrackingHandle');
sinon.spy(helper.slider, 'callOnStart');
sinon.spy(helper.slider, 'callOnChange');
var expectedValue = 50,
offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
var event = helper.fireMousedown(helper.slider.fullBar, offset, true);
expect(helper.scope.slider.value).to.equal(expectedValue);
expect(helper.slider.tracking).to.equal('rzSliderModel');
helper.slider.positionTrackingHandle.called.should.be.true;
helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
it('should handle click on selbar and move minH', function() {
sinon.spy(helper.slider, 'positionTrackingHandle');
sinon.spy(helper.slider, 'callOnStart');
sinon.spy(helper.slider, 'callOnChange');
var expectedValue = 12,
offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
helper.fireMousedown(helper.slider.selBar, offset, true);
expect(helper.scope.slider.value).to.equal(expectedValue);
expect(helper.slider.tracking).to.equal('rzSliderModel');
helper.slider.positionTrackingHandle.called.should.be.true;
helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
it('should handle click on ticks and move minH', function() {
helper.scope.slider.options.step = 10;
helper.scope.slider.options.showTicks = true;
helper.scope.$digest();
sinon.spy(helper.slider, 'positionTrackingHandle');
sinon.spy(helper.slider, 'callOnStart');
sinon.spy(helper.slider, 'callOnChange');
var expectedValue = 10,
offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
helper.fireMousedown(helper.slider.ticks, offset, true);
expect(helper.scope.slider.value).to.equal(expectedValue);
expect(helper.slider.tracking).to.equal('rzSliderModel');
helper.slider.positionTrackingHandle.called.should.be.true;
helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
});
}());
tests/specs/options-handling-test.js
View file @ 1542cfb2
This diff is collapsed.
tests/specs/ticks-test.js
View file @ 1542cfb2
......@@ -301,5 +301,248 @@
expect(secondTick.attr('uib-tooltip')).to.equal('tooltip for 10');
});
});
describe('Right to left Ticks - ', function() {
var helper,
RzSliderOptions,
$rootScope,
$timeout;
beforeEach(module('test-helper'));
beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
helper = TestHelper;
RzSliderOptions = _RzSliderOptions_;
$rootScope = _$rootScope_;
$timeout = _$timeout_;
}));
afterEach(function() {
helper.clean();
});
it('should set selected class to ticks below the model value if showSelectionBar is true', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
showTicks: true,
showSelectionBar: true,
rightToLeft: true
}
};
helper.createSlider(sliderConf);
var firstTick = angular.element(helper.element[0].querySelectorAll('.tick')[0]);
expect(firstTick.hasClass('selected')).to.be.false;
var sixthTick = angular.element(helper.element[0].querySelectorAll('.tick')[5]);
expect(sixthTick.hasClass('selected')).to.be.true;
var seventhTick = angular.element(helper.element[0].querySelectorAll('.tick')[6]);
expect(seventhTick.hasClass('selected')).to.be.true;
var lastTick = angular.element(helper.element[0].querySelectorAll('.tick')[10]);
expect(lastTick.hasClass('selected')).to.be.true;
});
it('should set selected class to ticks above the model value if showSelectionBarEnd is true', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
showTicks: true,
showSelectionBarEnd: true,
rightToLeft: true
}
};
helper.createSlider(sliderConf);
var firstTick = angular.element(helper.element[0].querySelectorAll('.tick')[0]);
expect(firstTick.hasClass('selected')).to.be.true;
var fifthTick = angular.element(helper.element[0].querySelectorAll('.tick')[4]);
expect(fifthTick.hasClass('selected')).to.be.true;
var sixthTick = angular.element(helper.element[0].querySelectorAll('.tick')[5]);
expect(sixthTick.hasClass('selected')).to.be.true;
var seventhTick = angular.element(helper.element[0].querySelectorAll('.tick')[6]);
expect(seventhTick.hasClass('selected')).to.be.false;
var lastTick = angular.element(helper.element[0].querySelectorAll('.tick')[10]);
expect(lastTick.hasClass('selected')).to.be.false;
});
it('should set selected class to correct ticks if showSelectionBarFromValue is used and the model is on the right', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
showTicks: true,
showSelectionBarFromValue: 30,
rightToLeft: true
}
};
helper.createSlider(sliderConf);
var firstTick = angular.element(helper.element[0].querySelectorAll('.tick')[0]);
expect(firstTick.hasClass('selected')).to.be.false;
var thirdTick = angular.element(helper.element[0].querySelectorAll('.tick')[2]);
expect(thirdTick.hasClass('selected')).to.be.false;
var fourthTick = angular.element(helper.element[0].querySelectorAll('.tick')[3]);
expect(fourthTick.hasClass('selected')).to.be.false;
var fifthTick = angular.element(helper.element[0].querySelectorAll('.tick')[4]);
expect(fifthTick.hasClass('selected')).to.be.false;
var sixthTick = angular.element(helper.element[0].querySelectorAll('.tick')[5]);
expect(sixthTick.hasClass('selected')).to.be.true;
var seventhTick = angular.element(helper.element[0].querySelectorAll('.tick')[6]);
expect(seventhTick.hasClass('selected')).to.be.true;
var lastTick = angular.element(helper.element[0].querySelectorAll('.tick')[10]);
expect(lastTick.hasClass('selected')).to.be.false;
});
it('should set selected class to correct ticks if showSelectionBarFromValue is used and the model is on the left', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
showTicks: true,
showSelectionBarFromValue: 70,
rightToLeft: true
}
};
helper.createSlider(sliderConf);
var firstTick = angular.element(helper.element[0].querySelectorAll('.tick')[0]);
expect(firstTick.hasClass('selected')).to.be.false;
var fifthTick = angular.element(helper.element[0].querySelectorAll('.tick')[4]);
expect(fifthTick.hasClass('selected')).to.be.true;
var sixthTick = angular.element(helper.element[0].querySelectorAll('.tick')[5]);
expect(sixthTick.hasClass('selected')).to.be.true;
var seventhTick = angular.element(helper.element[0].querySelectorAll('.tick')[6]);
expect(seventhTick.hasClass('selected')).to.be.false;
var eighthTick = angular.element(helper.element[0].querySelectorAll('.tick')[7]);
expect(eighthTick.hasClass('selected')).to.be.false;
var ninthTick = angular.element(helper.element[0].querySelectorAll('.tick')[8]);
expect(ninthTick.hasClass('selected')).to.be.false;
var lastTick = angular.element(helper.element[0].querySelectorAll('.tick')[10]);
expect(lastTick.hasClass('selected')).to.be.false;
});
it('should set the correct color to ticks when getSelectionBarColor is defined', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
showTicks: true,
showSelectionBar: true,
getSelectionBarColor: function(value) {
if (value <= 50)
return 'red';
else
return 'green';
},
rightToLeft: true
}
};
helper.createSlider(sliderConf);
var firstTick = angular.element(helper.element[0].querySelectorAll('.tick')[9]);
expect(firstTick.css('background-color')).to.equal('red');
helper.scope.slider.value = 100;
helper.scope.$digest();
expect(firstTick.css('background-color')).to.equal('green');
});
it('should set correct tooltip attributes if ticksTooltip is defined for a horizontal slider', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
showTicks: true,
ticksTooltip: function(value) {
return 'tooltip for ' + value;
},
rightToLeft: true
}
};
helper.createSlider(sliderConf);
var firstTick = angular.element(helper.element[0].querySelectorAll('.tick')[0]);
expect(firstTick.attr('uib-tooltip')).to.equal('tooltip for 100');
expect(firstTick.attr('tooltip-placement')).to.equal('top');
var secondTick = angular.element(helper.element[0].querySelectorAll('.tick')[1]);
expect(secondTick.attr('uib-tooltip')).to.equal('tooltip for 90');
});
it('should set correct tooltip attributes if ticksTooltip is defined for a vertical slider', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
vertical: true,
showTicks: true,
ticksTooltip: function(value) {
return 'tooltip for ' + value;
},
rightToLeft: true
}
};
helper.createSlider(sliderConf);
var firstTick = angular.element(helper.element[0].querySelectorAll('.tick')[0]);
expect(firstTick.attr('uib-tooltip')).to.equal('tooltip for 100');
expect(firstTick.attr('tooltip-placement')).to.equal('right');
var secondTick = angular.element(helper.element[0].querySelectorAll('.tick')[1]);
expect(secondTick.attr('uib-tooltip')).to.equal('tooltip for 90');
});
it('should set correct tooltip attributes on tick-value if ticksValuesTooltip is defined for a horizontal slider', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
showTicksValues: true,
ticksValuesTooltip: function(value) {
return 'tooltip for ' + value;
},
rightToLeft: true
}
};
helper.createSlider(sliderConf);
var firstTick = angular.element(helper.element[0].querySelectorAll('.tick-value')[0]);
expect(firstTick.attr('uib-tooltip')).to.equal('tooltip for 100');
expect(firstTick.attr('tooltip-placement')).to.equal('top');
var secondTick = angular.element(helper.element[0].querySelectorAll('.tick-value')[1]);
expect(secondTick.attr('uib-tooltip')).to.equal('tooltip for 90');
});
it('should set correct tooltip attributes on tick-value if ticksValuesTooltip is defined for a vertical slider', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
vertical: true,
showTicksValues: true,
ticksValuesTooltip: function(value) {
return 'tooltip for ' + value;
},
rightToLeft: true
}
};
helper.createSlider(sliderConf);
var firstTick = angular.element(helper.element[0].querySelectorAll('.tick-value')[0]);
expect(firstTick.attr('uib-tooltip')).to.equal('tooltip for 100');
expect(firstTick.attr('tooltip-placement')).to.equal('right');
var secondTick = angular.element(helper.element[0].querySelectorAll('.tick-value')[1]);
expect(secondTick.attr('uib-tooltip')).to.equal('tooltip for 90');
});
});
}());
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