mirror of https://github.com/ColorlibHQ/AdminLTE
updated bootstrap-slider to 10.6.2 (according to docs & package.json)
- updated bower.json - updated package.json & package-lock.json - added slider color options in build/less/miscellaneous.less - updated bower_components - updated pages/UI/sliders.html - updated plugins filespull/2268/head
REJack
parent
3e4b0cdcb7
commit
d3a213afda
|
|
@ -31,7 +31,6 @@
|
|||
"documentation"
|
||||
],
|
||||
"dependencies": {
|
||||
"bootstrap-slider": "bootstrap-slider#master",
|
||||
"chart.js": "^1.0",
|
||||
"ckeditor": "^4.7",
|
||||
"bootstrap-colorpicker": "^2.5.1",
|
||||
|
|
@ -57,7 +56,8 @@
|
|||
"jquery-sparkline": "^2.1.3",
|
||||
"font-awesome": "^4.7",
|
||||
"Ionicons": "ionicons#^2.0.1",
|
||||
"jquery-ui": "1.11.4"
|
||||
"jquery-ui": "1.11.4",
|
||||
"seiyria-bootstrap-slider": "^10.6.2"
|
||||
},
|
||||
"resolutions": {
|
||||
"jquery": "^3.2.1"
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
{
|
||||
"name": "bootstrap-slider",
|
||||
"main": [
|
||||
"bootstrap-slider.js",
|
||||
"slider.css"
|
||||
],
|
||||
"homepage": "https://github.com/pammacdotnet/bootstrap-slider",
|
||||
"authors": [
|
||||
"pammacdotnet"
|
||||
],
|
||||
"description": "Eyecon Slider for Bootstrap",
|
||||
"keywords": [
|
||||
"slider",
|
||||
"bootstrap"
|
||||
],
|
||||
"license": "Apache",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"_release": "879a98dcd0",
|
||||
"_resolution": {
|
||||
"type": "branch",
|
||||
"branch": "master",
|
||||
"commit": "879a98dcd0923107363861e56423f3cc1c2472e7"
|
||||
},
|
||||
"_source": "https://github.com/pammacdotnet/bootstrap-slider.git",
|
||||
"_target": "master",
|
||||
"_originalSource": "bootstrap-slider"
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
Bootstrap Slider
|
||||
=============
|
||||
|
||||
Fork of eyecon's [bootstrap-slider](http://www.eyecon.ro/bootstrap-slider/).
|
||||
|
||||
Specially remastered for iLIME Project @ UNIR Research. More info:
|
||||
[http://blogs.unir.net/elearning/telsock-research-group/](http://)
|
||||
|
||||
|
||||
|
||||
Changes
|
||||
----------
|
||||
Current changes include:
|
||||
|
||||
+ Better responsive support
|
||||
+ Updated look and feel
|
||||
+ Minor layout tweaks
|
||||
+ Removed built-in handle types
|
||||
+ Bower install
|
||||
+ Limits and locks
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,427 +0,0 @@
|
|||
/* =========================================================
|
||||
* bootstrap-slider.js v2.0.0
|
||||
* http://www.eyecon.ro/bootstrap-slider
|
||||
* =========================================================
|
||||
* Copyright 2012 Stefan Petre
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
* ========================================================= */
|
||||
|
||||
!function( $ ) {
|
||||
|
||||
var Slider = function(element, options) {
|
||||
this.dragLocked = false;
|
||||
this.limit = 100000;
|
||||
this.element = $(element).hide();
|
||||
this.picker = $('<div class="slider">'+
|
||||
'<div class="slider-track">'+
|
||||
'<div class="slider-selection"></div>'+
|
||||
'<div class="slider-handle"></div>'+
|
||||
'<div class="slider-handle"></div>'+
|
||||
'</div>'+
|
||||
'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'+
|
||||
'</div>')
|
||||
.insertBefore(this.element)
|
||||
.append(this.element);
|
||||
this.id = this.element.data('slider-id')||options.id;
|
||||
if (this.id) {
|
||||
this.picker[0].id = this.id;
|
||||
}
|
||||
|
||||
if (typeof Modernizr !== 'undefined' && Modernizr.touch) {
|
||||
this.touchCapable = true;
|
||||
}
|
||||
|
||||
var tooltip = this.element.data('slider-tooltip')||options.tooltip;
|
||||
|
||||
this.tooltip = this.picker.find('.tooltip');
|
||||
this.tooltipInner = this.tooltip.find('div.tooltip-inner');
|
||||
|
||||
this.orientation = this.element.data('slider-orientation')||options.orientation;
|
||||
switch(this.orientation) {
|
||||
case 'vertical':
|
||||
this.picker.addClass('slider-vertical');
|
||||
this.stylePos = 'top';
|
||||
this.mousePos = 'pageY';
|
||||
this.sizePos = 'offsetHeight';
|
||||
this.tooltip.addClass('right')[0].style.left = '100%';
|
||||
break;
|
||||
default:
|
||||
this.picker
|
||||
.addClass('slider-horizontal')
|
||||
.css('width', this.element.outerWidth());
|
||||
this.orientation = 'horizontal';
|
||||
this.stylePos = 'left';
|
||||
this.mousePos = 'pageX';
|
||||
this.sizePos = 'offsetWidth';
|
||||
this.tooltip.addClass('top')[0].style.top = -this.tooltip.outerHeight() - 14 + 'px';
|
||||
break;
|
||||
}
|
||||
|
||||
this.min = this.element.data('slider-min')||options.min;
|
||||
this.max = this.element.data('slider-max')||options.max;
|
||||
this.step = this.element.data('slider-step')||options.step;
|
||||
this.value = this.element.data('slider-value')||options.value;
|
||||
if (this.value[1]) {
|
||||
this.range = true;
|
||||
}
|
||||
|
||||
this.selection = this.element.data('slider-selection')||options.selection;
|
||||
this.selectionEl = this.picker.find('.slider-selection');
|
||||
if (this.selection === 'none') {
|
||||
this.selectionEl.addClass('hide');
|
||||
}
|
||||
this.selectionElStyle = this.selectionEl[0].style;
|
||||
|
||||
|
||||
this.handle1 = this.picker.find('.slider-handle:first');
|
||||
this.handle1Stype = this.handle1[0].style;
|
||||
this.handle2 = this.picker.find('.slider-handle:last');
|
||||
this.handle2Stype = this.handle2[0].style;
|
||||
|
||||
var handle = this.element.data('slider-handle')||options.handle;
|
||||
switch(handle) {
|
||||
case 'round':
|
||||
this.handle1.addClass('round');
|
||||
this.handle2.addClass('round');
|
||||
break
|
||||
case 'triangle':
|
||||
this.handle1.addClass('triangle');
|
||||
this.handle2.addClass('triangle');
|
||||
break
|
||||
}
|
||||
|
||||
if (this.range) {
|
||||
this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0]));
|
||||
this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1]));
|
||||
} else {
|
||||
this.value = [ Math.max(this.min, Math.min(this.max, this.value))];
|
||||
this.handle2.addClass('hide');
|
||||
if (this.selection == 'after') {
|
||||
this.value[1] = this.max;
|
||||
} else {
|
||||
this.value[1] = this.min;
|
||||
}
|
||||
}
|
||||
this.diff = this.max - this.min;
|
||||
this.percentage = [
|
||||
(this.value[0]-this.min)*100/this.diff,
|
||||
(this.value[1]-this.min)*100/this.diff,
|
||||
this.step*100/this.diff
|
||||
];
|
||||
|
||||
this.offset = this.picker.offset();
|
||||
this.size = this.picker[0][this.sizePos];
|
||||
|
||||
this.formater = options.formater;
|
||||
this.reversed = this.element.data('slider-reversed')||options.reversed;
|
||||
|
||||
this.layout();
|
||||
|
||||
if (this.touchCapable) {
|
||||
// Touch: Bind touch events:
|
||||
this.picker.on({
|
||||
touchstart: $.proxy(this.mousedown, this)
|
||||
});
|
||||
} else {
|
||||
this.picker.on({
|
||||
mousedown: $.proxy(this.mousedown, this)
|
||||
});
|
||||
}
|
||||
|
||||
if (tooltip === 'show') {
|
||||
this.picker.on({
|
||||
mouseenter: $.proxy(this.showTooltip, this),
|
||||
mouseleave: $.proxy(this.hideTooltip, this)
|
||||
});
|
||||
} else {
|
||||
this.tooltip.addClass('hide');
|
||||
}
|
||||
};
|
||||
|
||||
Slider.prototype = {
|
||||
constructor: Slider,
|
||||
|
||||
over: false,
|
||||
inDrag: false,
|
||||
|
||||
showTooltip: function(){
|
||||
this.tooltip.addClass('in');
|
||||
//var left = Math.round(this.percent*this.width);
|
||||
//this.tooltip.css('left', left - this.tooltip.outerWidth()/2);
|
||||
this.over = true;
|
||||
},
|
||||
|
||||
hideTooltip: function(){
|
||||
if (this.inDrag === false) {
|
||||
this.tooltip.removeClass('in');
|
||||
}
|
||||
this.over = false;
|
||||
},
|
||||
|
||||
layout: function(){
|
||||
var positionPercentages;
|
||||
|
||||
if(this.reversed) {
|
||||
positionPercentages = [ this.percentage[1] - this.percentage[0], this.percentage[1] ];
|
||||
} else {
|
||||
positionPercentages = [ this.percentage[0], this.percentage[1] ];
|
||||
}
|
||||
|
||||
this.handle1Stype[this.stylePos] = positionPercentages[0]+'%';
|
||||
this.handle2Stype[this.stylePos] = positionPercentages[1]+'%';
|
||||
if (this.orientation == 'vertical') {
|
||||
this.selectionElStyle.top = Math.min(positionPercentages[0], positionPercentages[1]) +'%';
|
||||
this.selectionElStyle.height = Math.abs(positionPercentages[0] - positionPercentages[1]) +'%';
|
||||
} else {
|
||||
this.selectionElStyle.left = Math.min(positionPercentages[0], positionPercentages[1]) +'%';
|
||||
this.selectionElStyle.width = Math.abs(positionPercentages[0] - positionPercentages[1]) +'%';
|
||||
}
|
||||
|
||||
if (this.range) {
|
||||
this.tooltipInner.text(
|
||||
this.formater(this.value[0]) +
|
||||
' : ' +
|
||||
this.formater(this.value[1])
|
||||
);
|
||||
this.tooltip[0].style[this.stylePos] = this.size * (positionPercentages[0] + (positionPercentages[1] - positionPercentages[0])/2)/100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight()/2 : this.tooltip.outerWidth()/2) +'px';
|
||||
} else {
|
||||
this.tooltipInner.text(
|
||||
this.formater(this.value[0])
|
||||
);
|
||||
this.tooltip[0].style[this.stylePos] = this.size * positionPercentages[0]/100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight()/2 : this.tooltip.outerWidth()/2) +'px';
|
||||
}
|
||||
},
|
||||
|
||||
mousedown: function(ev) {
|
||||
|
||||
if (!this.dragLocked){
|
||||
// Touch: Get the original event:
|
||||
if (this.touchCapable && ev.type === 'touchstart') {
|
||||
ev = ev.originalEvent;
|
||||
}
|
||||
|
||||
this.offset = this.picker.offset();
|
||||
this.size = this.picker[0][this.sizePos];
|
||||
|
||||
var percentage = this.getPercentage(ev);
|
||||
|
||||
if (this.range) {
|
||||
var diff1 = Math.abs(this.percentage[0] - percentage);
|
||||
var diff2 = Math.abs(this.percentage[1] - percentage);
|
||||
this.dragged = (diff1 < diff2) ? 0 : 1;
|
||||
} else {
|
||||
this.dragged = 0;
|
||||
}
|
||||
|
||||
this.percentage[this.dragged] = this.reversed ? this.percentage[1] - percentage : percentage;
|
||||
this.layout();
|
||||
|
||||
if (this.touchCapable) {
|
||||
// Touch: Bind touch events:
|
||||
$(document).on({
|
||||
touchmove: $.proxy(this.mousemove, this),
|
||||
touchend: $.proxy(this.mouseup, this)
|
||||
});
|
||||
} else {
|
||||
$(document).on({
|
||||
mousemove: $.proxy(this.mousemove, this),
|
||||
mouseup: $.proxy(this.mouseup, this)
|
||||
});
|
||||
}
|
||||
|
||||
this.inDrag = true;
|
||||
var val = this.calculateValue();
|
||||
|
||||
this.setValue(val);
|
||||
this.element.trigger({
|
||||
type: 'slideStart',
|
||||
value: val
|
||||
}).trigger({
|
||||
type: 'slide',
|
||||
value: val
|
||||
});
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
mousemove: function(ev) {
|
||||
// Touch: Get the original event:
|
||||
if (!this.dragLocked){
|
||||
if (this.touchCapable && ev.type === 'touchmove') {
|
||||
ev = ev.originalEvent;
|
||||
}
|
||||
|
||||
var percentage = this.getPercentage(ev);
|
||||
if (this.range) {
|
||||
if (this.dragged === 0 && this.percentage[1] < percentage) {
|
||||
this.percentage[0] = this.percentage[1];
|
||||
this.dragged = 1;
|
||||
} else if (this.dragged === 1 && this.percentage[0] > percentage) {
|
||||
this.percentage[1] = this.percentage[0];
|
||||
this.dragged = 0;
|
||||
}
|
||||
}
|
||||
x = this.reversed ? this.percentage[1] - percentage : percentage;
|
||||
if (x > this.limit) {
|
||||
return ;
|
||||
}
|
||||
this.percentage[this.dragged] = x;
|
||||
this.layout();
|
||||
var val = this.calculateValue();
|
||||
this.setValue(val);
|
||||
|
||||
this.element
|
||||
.trigger({
|
||||
type: 'slide',
|
||||
value: val
|
||||
})
|
||||
.data('value', val)
|
||||
.prop('value', val);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
mouseup: function(ev) {
|
||||
if (this.touchCapable) {
|
||||
// Touch: Bind touch events:
|
||||
$(document).off({
|
||||
touchmove: this.mousemove,
|
||||
touchend: this.mouseup
|
||||
});
|
||||
} else {
|
||||
$(document).off({
|
||||
mousemove: this.mousemove,
|
||||
mouseup: this.mouseup
|
||||
});
|
||||
}
|
||||
|
||||
this.inDrag = false;
|
||||
if (this.over == false) {
|
||||
this.hideTooltip();
|
||||
}
|
||||
this.element;
|
||||
var val = this.calculateValue();
|
||||
this.layout();
|
||||
this.element
|
||||
.trigger({
|
||||
type: 'slideStop',
|
||||
value: val
|
||||
})
|
||||
.data('value', val)
|
||||
.prop('value', val);
|
||||
return false;
|
||||
},
|
||||
|
||||
calculateValue: function() {
|
||||
var val;
|
||||
if (this.range) {
|
||||
val = [
|
||||
(this.min + Math.round((this.diff * this.percentage[0]/100)/this.step)*this.step),
|
||||
(this.min + Math.round((this.diff * this.percentage[1]/100)/this.step)*this.step)
|
||||
];
|
||||
this.value = val;
|
||||
} else {
|
||||
val = (this.min + Math.round((this.diff * this.percentage[0]/100)/this.step)*this.step);
|
||||
this.value = [val, this.value[1]];
|
||||
}
|
||||
return val;
|
||||
},
|
||||
|
||||
getPercentage: function(ev) {
|
||||
if (this.touchCapable) {
|
||||
ev = ev.touches[0];
|
||||
}
|
||||
var percentage = (ev[this.mousePos] - this.offset[this.stylePos])*100/this.size;
|
||||
percentage = Math.round(percentage/this.percentage[2])*this.percentage[2];
|
||||
return Math.max(0, Math.min(100, percentage));
|
||||
},
|
||||
|
||||
getValue: function() {
|
||||
if (this.range) {
|
||||
return this.value;
|
||||
}
|
||||
return this.value[0];
|
||||
},
|
||||
setLimit: function(val) {
|
||||
this.limit = val;
|
||||
},
|
||||
setDragLocked: function(val) {
|
||||
this.dragLocked = val;
|
||||
},
|
||||
getDragLocked: function(val) {
|
||||
return this.dragLocked;
|
||||
},
|
||||
setValue: function(val) {
|
||||
this.value = val;
|
||||
|
||||
if (this.range) {
|
||||
this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0]));
|
||||
this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1]));
|
||||
} else {
|
||||
this.value = [ Math.max(this.min, Math.min(this.max, this.value))];
|
||||
this.handle2.addClass('hide');
|
||||
if (this.selection == 'after') {
|
||||
this.value[1] = this.max;
|
||||
} else {
|
||||
this.value[1] = this.min;
|
||||
}
|
||||
}
|
||||
this.diff = this.max - this.min;
|
||||
this.percentage = [
|
||||
(this.value[0]-this.min)*100/this.diff,
|
||||
(this.value[1]-this.min)*100/this.diff,
|
||||
this.step*100/this.diff
|
||||
];
|
||||
this.layout();
|
||||
},
|
||||
destroy: function(){
|
||||
this.element.show().insertBefore(this.picker);
|
||||
this.picker.remove();
|
||||
},
|
||||
};
|
||||
|
||||
$.fn.slider = function ( option, val ) {
|
||||
return this.each(function () {
|
||||
var $this = $(this),
|
||||
data = $this.data('slider'),
|
||||
options = typeof option === 'object' && option;
|
||||
if (!data) {
|
||||
$this.data('slider', (data = new Slider(this, $.extend({}, $.fn.slider.defaults,options))));
|
||||
}
|
||||
if (typeof option == 'string') {
|
||||
data[option](val);
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
$.fn.slider.defaults = {
|
||||
min: 0,
|
||||
max: 10,
|
||||
step: 1,
|
||||
orientation: 'horizontal',
|
||||
value: 5,
|
||||
selection: 'before',
|
||||
tooltip: 'show',
|
||||
handle: 'round',
|
||||
reversed : false,
|
||||
limit: 100000,
|
||||
dragLocked: false,
|
||||
formater: function(value) {
|
||||
return value;
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.slider.Constructor = Slider;
|
||||
|
||||
}( window.jQuery );
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
{
|
||||
"name": "bootstrap-slider",
|
||||
"main": ["bootstrap-slider.js", "slider.css"],
|
||||
"version": "2.0.0",
|
||||
"homepage": "https://github.com/pammacdotnet/bootstrap-slider",
|
||||
"authors": [
|
||||
"pammacdotnet"
|
||||
],
|
||||
"description": "Eyecon Slider for Bootstrap",
|
||||
"keywords": [
|
||||
"slider",
|
||||
"bootstrap"
|
||||
],
|
||||
"license": "Apache",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB |
|
|
@ -1,178 +0,0 @@
|
|||
/*!
|
||||
* Slider for Bootstrap
|
||||
*
|
||||
* Copyright 2012 Stefan Petre
|
||||
* Licensed under the Apache License v2.0
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
*/
|
||||
.slider {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
.slider[class*="span"] {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.slider-horizontal {
|
||||
width: 210px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.slider-horizontal .slider-handle-container,
|
||||
.slider-horizontal .slider-track {
|
||||
height: 10px;
|
||||
margin-top: -5px;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.slider-horizontal .slider-track {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.slider-horizontal .slider-handle-container {
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.slider-horizontal .slider-selection {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.slider-horizontal .slider-handle {
|
||||
margin-left: -10px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.slider-vertical {
|
||||
height: 210px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.slider-vertical .slider-handle-container,
|
||||
.slider-vertical .slider-track {
|
||||
width: 10px;
|
||||
margin-left: -5px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.slider-vertical .slider-track {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.slider-vertical .slider-handle-container {
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.slider-vertical .slider-selection {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.slider-vertical .slider-handle {
|
||||
margin-left: -5px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.slider input,
|
||||
.slider input[class*="span"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.slider .tooltip-inner {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.slider-handle-container {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.slider-track {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
background-color: #f7f7f7;
|
||||
background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
|
||||
background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
|
||||
background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
|
||||
background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
|
||||
background-repeat: repeat-x;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.slider-selection {
|
||||
position: absolute;
|
||||
background-color: #e6e6e6;
|
||||
background-image: -moz-linear-gradient(top, #f0f0f0, #e0e0e0);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f0f0f0), to(#e0e0e0));
|
||||
background-image: -webkit-linear-gradient(top, #f0f0f0, #e0e0e0);
|
||||
background-image: -o-linear-gradient(top, #f0f0f0, #e0e0e0);
|
||||
background-image: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
|
||||
background-repeat: repeat-x;
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-border-radius: 20px;
|
||||
-moz-border-radius: 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.slider-handle {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slider-knob {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #f5f5f5;
|
||||
background-image: -moz-linear-gradient(top, #e6e6e6, #ffffff);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#ffffff));
|
||||
background-image: -webkit-linear-gradient(top, #e6e6e6, #ffffff);
|
||||
background-image: -o-linear-gradient(top, #e6e6e6, #ffffff);
|
||||
background-image: linear-gradient(to bottom, #e6e6e6, #ffffff);
|
||||
background-repeat: repeat-x;
|
||||
border: 1px solid #bbbbbb;
|
||||
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
border-bottom-color: #a2a2a2;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-webkit-border-radius: 20px;
|
||||
-moz-border-radius: 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.slider-handle:active .slider-knob,
|
||||
.slider-handle:hover .slider-knob {
|
||||
background-color: #e6e6e6;
|
||||
background-position: 0 5px;
|
||||
-webkit-transition: background-position 0.1s linear;
|
||||
-moz-transition: background-position 0.1s linear;
|
||||
-o-transition: background-position 0.1s linear;
|
||||
transition: background-position 0.1s linear;
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
{
|
||||
"name": "seiyria-bootstrap-slider",
|
||||
"version": "10.6.2",
|
||||
"homepage": "https://github.com/seiyria/bootstrap-slider",
|
||||
"authors": [
|
||||
"Kyle Kemp <kyle@seiyria.com>",
|
||||
"Rohit Kalkur <rohit.kalkur@gmail.com>"
|
||||
],
|
||||
"description": "a slider element for bootstrap 2/3",
|
||||
"main": [
|
||||
"dist/bootstrap-slider.js",
|
||||
"dist/css/bootstrap-slider.css"
|
||||
],
|
||||
"keywords": [
|
||||
"slider",
|
||||
"bootstrap2",
|
||||
"bootstrap3",
|
||||
"bootstrap"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components"
|
||||
],
|
||||
"_release": "10.6.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v10.6.2",
|
||||
"commit": "09c1c049f8309369f508e1ba496d6483523890e6"
|
||||
},
|
||||
"_source": "https://github.com/seiyria/bootstrap-slider.git",
|
||||
"_target": "^10.6.2",
|
||||
"_originalSource": "seiyria-bootstrap-slider",
|
||||
"_direct": true
|
||||
}
|
||||
|
|
@ -0,0 +1,333 @@
|
|||
10.6.2 / 2019-07-11
|
||||
==================
|
||||
* **Bug Fix:** Fixes bridget bug with empty jquery object. [See here for further details](https://github.com/seiyria/bootstrap-slider/issues/916). Thanks to [ollycross](https://github.com/ollycross)
|
||||
|
||||
10.6.1 / 2019-02-15
|
||||
==================
|
||||
* **Bug Fix:** Fixes slider for touch-enabled devices. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/899).
|
||||
* **Build Deployment:** Added `build-preview.sh` script for deploying API examples page for the purpose of testing aforementioned bug fix for touch-enabled devices.
|
||||
|
||||
10.6.0 / 2019-01-06
|
||||
==================
|
||||
* **New Feature:** Add new feature to persist the value after a refresh. See [Example 26](https://seiyria.com/bootstrap-slider/#example-26) for a demonstration. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/905).
|
||||
* **Bug Fix:** Fix unit tests to execute event callbacks asynchronously. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/902).
|
||||
* **Documentation:** Add link to Angular Bootstrap-Slider project. [Commit](https://github.com/seiyria/bootstrap-slider/commit/4899ce155c419892573269b98084655de40b1893).
|
||||
|
||||
10.5.0 / 2019-01-04
|
||||
==================
|
||||
* **New Feature:** Add lock to ticks feature. See [Example 25](https://seiyria.com/bootstrap-slider/#example-25) for a demonstration. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/744). Thanks to [Heidar](https://github.com/heidarsaleh).
|
||||
* **Bug Fix:** Fix mouseup event should trigger 'change' event. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/900). Thanks to [Michael Kriese](https://github.com/ViceIce).
|
||||
* **Update Copyright:** Update Copyright year references to 2019. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/904).
|
||||
|
||||
10.4.2 / 2018-12-18
|
||||
==================
|
||||
* **Bug Fix:** Fix 'change' event should trigger when either values change for range sliders. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/897). Thanks to [pimlie](https://github.com/pimlie).
|
||||
|
||||
10.4.1 / 2018-12-18
|
||||
==================
|
||||
* **Bug Fix:** Remove unnecessary call to `parseFloat()`. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/892).
|
||||
* **Bug Fix:** Fix namespace handling. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/893).
|
||||
* **Bug Fix:** Fix tooltip when option is set to 'always'. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/895)
|
||||
* **Bug Fix:** Fixes Issue #884: Hovering over ticks displays the tick index. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/891)
|
||||
|
||||
10.4.0 / 2018-12-12
|
||||
==================
|
||||
* **Minor API Update:** Update behaviour so that min/max tick values do not overwrite min/max settings. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/889).
|
||||
* **Bug Fix:** Remove unnecessary function calls. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/880).
|
||||
* **Bug Fix:** Fix calculation of percentage values. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/881).
|
||||
* **Bug Fix:** Recalculate the percentage on `mouseup` event. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/825). Thanks to [purpose233](https://github.com/purpose233).
|
||||
|
||||
10.3.4 / 2018-12-08
|
||||
==================
|
||||
* **Bug Fix:** Fix range slider values for `sliderStart` event. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/877).
|
||||
* **Bug Fix:** Properly check if slider values have changed. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/879).
|
||||
* **Bug Fix:** Correctly unset `aria-valuetext` attribute. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/885).
|
||||
* **Bug Fix:** Fix **Public Method** unit test. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/888). Thanks to [Xiaochen Wang](https://github.com/xwang345).
|
||||
* **Documentation Update:** Add a table of links for the Bootstrap-Slider API examples. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/886). Thanks to [Susan Truong](https://github.com/susantruong).
|
||||
|
||||
10.3.3 / 2018-12-05
|
||||
==================
|
||||
* **Bug Fix:** Add `_copyState()` function to create a temporary copy of slider state. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/883).
|
||||
|
||||
10.3.2 / 2018-11-28
|
||||
==================
|
||||
* **Bug Fix:** Allow range slider to snap to ticks within bounds. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/873). Thanks to [Michael Kriese](https://github.com/ViceIce).
|
||||
|
||||
10.3.1 / 2018-11-24
|
||||
==================
|
||||
* **Bug Fix:** Check if `getComputedStyle()` returns `null`. Addresses issue with Firefox browsers running version < 62. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/869). Thanks to [Tyler Wilding](https://github.com/xTVaser).
|
||||
|
||||
10.3.0 / 2018-11-24
|
||||
==================
|
||||
* **New Feature:** Add selection CSS classes to tick labels. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/752). Thanks to [Doug Lee](https://github.com/duggi).
|
||||
|
||||
10.2.4 / 2018-11-24
|
||||
==================
|
||||
* **Bug Fix:** Remove duplicate call to `relayout()` in `_layout()` function. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/872).
|
||||
* **Documentation Fix:** Fix a typo in Example 14 on the API examples page. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/871).
|
||||
* **Documentation Fix:** Fix a typo in Example 1 on the API examples page. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/870).
|
||||
|
||||
10.2.3 / 2018-11-05
|
||||
==================
|
||||
* **Bug Fix** Fixes an issue where sliding a min handle over the max handle causes a strange skip in the values. [See here for further details](https://github.com/seiyria/bootstrap-slider/issues/854). Thanks [Jeffrey Espiritu](https://github.com/jespirit).
|
||||
|
||||
10.2.2 / 2018-10-25
|
||||
==================
|
||||
* **Documentation Fix** Fix a typo to show tick position example correctly [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/866). Thanks [Jeffrey Espiritu](https://github.com/jespirit).
|
||||
|
||||
10.2.1 / 2018-09-25
|
||||
==================
|
||||
* **Bug Fix** Hovering next to slider does not show the tooltip. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/858). Thanks to [Alexa Schlegel](https://github.com/aschle).
|
||||
|
||||
10.2.0 / 2018-07-21
|
||||
==================
|
||||
* **New Feature** Show pointer cursor on slider ticks. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/849). Thanks to [Erik Demaine](https://github.com/edemaine).
|
||||
|
||||
10.1.0 / 2018-07-21
|
||||
==================
|
||||
* **Bug Fix** Allow any value on logarithmic scale. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/836). Fixes [this bug](https://github.com/seiyria/bootstrap-slider/issues/835). Thanks to [James Mason](https://github.com/bear454).
|
||||
* **Documentation Fix:** Adds note about lack of current Bootstrap 4 compatability. [See here for further details](https://github.com/seiyria/bootstrap-slider/issues/689). Thanks to [Anders Olsson](https://github.com/anderso).
|
||||
* **Documentation Fix:** Increases clarity around when alternate namespace is bound. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/838). Thanks to [putrefactio](https://github.com/putrefactio).
|
||||
* **New Feature** Show pointer cursor on slider handle. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/839). Thanks to [David Lesieur](https://github.com/davidlesieur).
|
||||
|
||||
|
||||
10.0.2 / 2018-04-28
|
||||
==================
|
||||
* **Bug Fix** Fixes an issue when determining mouse coords when pageXOffset >= 0 . [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/828). Fixes [this bug](https://github.com/seiyria/bootstrap-slider/issues/594). Thanks to [x-yuri](https://github.com/x-yuri).
|
||||
|
||||
10.0.1 / 2018-04-28
|
||||
==================
|
||||
* **Bug Fix** Fixing an issue where DOM elements were being selected on slide in FF and IE. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/829). Fixes [this bug](https://github.com/seiyria/bootstrap-slider/issues/746). Thanks to [Andreas Wulf](https://github.com/wulfsoft).
|
||||
|
||||
10.0.0 / 2017-11-09
|
||||
==================
|
||||
* **Bug Fix** Refactoring tooltip CSS to use `transform` for positioning. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/798). Fixes [this bug](https://github.com/seiyria/bootstrap-slider/issues/483). Thanks to [wismill](https://github.com/wismill).
|
||||
|
||||
9.10.0 / 2017-11-09
|
||||
==================
|
||||
* **Build pipeline change** Refactoring bootstrap files to come from `node_modules` instead of `dependencies` directory so latest changes are reflected. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/788). Thanks to [Sebastiaan ten Pas](https://github.com/patchman-sebastiaan).
|
||||
|
||||
9.9.1 / 2017-11-09
|
||||
==================
|
||||
* **Bug Fix** LESS/CSS: Bug fix for mixin. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/789). Thanks to [Arman Poghosyan](https://github.com/armpogart).
|
||||
|
||||
9.9.0 / 2017-09-23
|
||||
==================
|
||||
* **New Feature** LESS/CSS: refactor colors into variables file. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/779). Thanks to [Joseph Marikle](https://github.com/jmarikle).
|
||||
|
||||
9.8.1 / 2017-07-06
|
||||
==================
|
||||
* **Bug Fix** Addresses issue where the max value calculation was wrong due to the cutoff when the `max` option value was not a multiple of the `step` option value. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/759). Thanks to [Thomas Haitzer](https://github.com/thaitzer).
|
||||
|
||||
9.8.0 / 2017-04-24
|
||||
==================
|
||||
* **New Feature:** Ability to add a custom class to the ranges of a slider with the `rangeHightlights` option specified. [See the PR for further details.](https://github.com/seiyria/bootstrap-slider/pull/742). Thanks to [jccode](https://github.com/jccode).
|
||||
|
||||
Tooling Update / 2017-04-09
|
||||
==================
|
||||
* Updates [grunt](https://github.com/gruntjs/grunt) dependency from version `0.4.4` to `^0.4.5`.
|
||||
|
||||
9.7.3 / 2017-04-09
|
||||
==================
|
||||
* **Bug Fix** Resolves PhantomJS error that was occurring while running the unit test suite. [See here for further details](https://github.com/seiyria/bootstrap-slider/issues/696).
|
||||
* **Tooling Update** Updates unit test suite to [Jasmine 2.x.x](https://jasmine.github.io/2.2/introduction) by updating the [grunt-contrib-jasmine](https://github.com/gruntjs/grunt-contrib-jasmine) dependency from version `0.5.2` to `1.0.3`.
|
||||
|
||||
9.7.2 / 2017-02-10
|
||||
==================
|
||||
* **Bug Fix** Resolves accesibility issue in range sliders. [See here for further details](https://github.com/seiyria/bootstrap-slider/issues/687). Thanks to [Jerry (jerrylow)](https://github.com/jerrylow).
|
||||
|
||||
Tooling Update / 2017-02-02
|
||||
==================
|
||||
* Adds in [CodeClimate](https://codeclimate.com/) integration. Thanks to [Scott Larkin](https://github.com/larkinscott).
|
||||
|
||||
Tooling Update / 2017-02-01
|
||||
==================
|
||||
* Examples Page: Fixes code snippet for Example 6. Thanks to [Sergey Mezentsev](https://github.com/TheBits).
|
||||
|
||||
9.7.1 / 2017-01-29
|
||||
==================
|
||||
* **Bug Fix** Resolves "'slider' of undefined" error. [See here for further details](https://github.com/seiyria/bootstrap-slider/issues/587). Thanks to [Guto Sanches](https://github.com/gutosanches).
|
||||
|
||||
Tooling Update / 2017-01-06
|
||||
==================
|
||||
* Examples Page: Adds syntax highlighting to code snippets on Examples page
|
||||
* Examples Page: Adds anchor tags to each example. For example, navigating to http://seiyria.com/bootstrap-slider/#example-10 will now load the page at Example #10.
|
||||
* Examples Page: Fixed code snippet in Example #14 based on feedback from [this comment](https://github.com/seiyria/bootstrap-slider/issues/645#issuecomment-270751793).
|
||||
|
||||
9.7.0 / 2017-01-05
|
||||
==================
|
||||
* **Performance Enhancement** Use passive event listeners for touch-enabled devices. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/680). Thanks to [Chris Hallberg](https://github.com/crhallberg).
|
||||
|
||||
Tooling Update / 2017-01-05
|
||||
==================
|
||||
* Add an explicit `grunt lint` command to run Lint check on all source files and execute it in the NPM `pretest` script.
|
||||
|
||||
9.6.2 / 2017-01-04
|
||||
==================
|
||||
* Updating current year references in license from 2016 -> 2017.
|
||||
|
||||
Tooling Update / 2017-01-04
|
||||
==================
|
||||
* Adds in linting for SASS and LESS files in order to catch common syntax errors at CI step versus compile time.
|
||||
|
||||
9.6.1 / 2017-01-04
|
||||
==================
|
||||
* **Bug Fix:** Resolve issue with SASS file compilation. [See here for further details](https://github.com/seiyria/bootstrap-slider/issues/683). Thanks to [Schepotin](https://github.com/Schepotin) for reporting.
|
||||
|
||||
9.6.0 / 2017-01-03
|
||||
==================
|
||||
* **New Feature:** Adds ability to set direction (using HTML5 `dir` attribute). [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/679). Thanks to [Denis Chenu](https://github.com/Shnoulle).
|
||||
|
||||
9.5.4 / 2016-12-18
|
||||
==================
|
||||
* **Bug Fix:** Fixes issue where dragging slider handle outside of modal and releasing cursor would close the modal. [See original issue for further details](https://github.com/seiyria/bootstrap-slider/issues/339). Thanks to [ZeVS777](https://github.com/ZeVS777).
|
||||
|
||||
9.5.3 / 2016-12-01
|
||||
==================
|
||||
* **Bug Fix:** Fixes typo from previous update to SCSS rules. Thanks to [Julien Bachmann](https://github.com/julienbachmann).
|
||||
|
||||
9.5.2 / 2016-11-30
|
||||
==================
|
||||
* **Bug Fix:** Fixes SCSS rules. [See original issue for further details](https://github.com/seiyria/bootstrap-slider/issues/662). Thanks to [Julien Bachmann](https://github.com/julienbachmann).
|
||||
|
||||
9.5.1 / 2016-11-23
|
||||
==================
|
||||
* **Bug Fix:** Removes `'none'` classes after selection change. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/659). Thanks to [John Clarke](https://github.com/john-clarke).
|
||||
|
||||
9.5.0 / 2016-11-21
|
||||
==================
|
||||
* **New Feature:** Adds `aria-valuetext` attribute to each slider handle element, which is set to be the current formatted value of the slider (based on the `formatter` option). [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/646). Thanks to [mediaformat](https://github.com/mediaformat).
|
||||
|
||||
9.4.1 / 2016-11-04
|
||||
==================
|
||||
* **Documentation Fix:** Fixing an inconsistency with the licensing information in our source files. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/652). Thanks to [Tom Yue](https://github.com/yuethomas) for identifying this issue.
|
||||
|
||||
9.4.0 / 2016-10-31
|
||||
==================
|
||||
* **New Feature:** Adds the ability to set the slider value using stringified numbers. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/642). Thanks to [Ryan Bruns](https://github.com/snurby7)
|
||||
|
||||
9.3.2 / 2016-10-30
|
||||
==================
|
||||
* **Bug Fix:** Fixes reported bug where a slider was unable to be destroyed and re-created if there were event listeners bound to it. [See here for further details](https://github.com/seiyria/bootstrap-slider/issues/640).
|
||||
|
||||
9.3.0 / 2016-10-20
|
||||
==================
|
||||
* **New Feature:** Adds the ability to enable/disable tooltips when hovering over ticks via the `ticks_tooltip` option. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/638). Thanks to [Ryan Bruns](https://github.com/snurby7)
|
||||
|
||||
9.2.2 / 2016-10-18
|
||||
==================
|
||||
* **Bug Fix:** Resolves issue where range highlights were not being applied properly for reversed sliders. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/637). Thanks to [Bernard Gorman](https://github.com/gormanb)
|
||||
|
||||
9.2.0 / 2016-09-26
|
||||
==================
|
||||
* **New Feature:** Adding the ability to target certain ranges of the slider track via CSS in order to highlight them. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/619). Thanks to [lipoczkit](https://github.com/lipoczkit)
|
||||
|
||||
9.1.3 / 2016-08-06
|
||||
==================
|
||||
* **Bug Fix:** Checks for `window` object before attempting to attach `console` polyfills. [Resolves this issue](https://github.com/seiyria/bootstrap-slider/issues/607)
|
||||
|
||||
9.1.2 / 2016-08-06
|
||||
==================
|
||||
* Accidental publish
|
||||
|
||||
9.1.1 / 2016-07-15
|
||||
==================
|
||||
* **Bug Fix:** Adds `.npmignore` file to repository. [Resolves this issue](https://github.com/seiyria/bootstrap-slider/issues/601)
|
||||
|
||||
9.1.0 / 2016-07-14
|
||||
==================
|
||||
* **New Feature:** Always binding to the `$.fn.bootstrapSlider` namespace and printing a console warning when the `$.fn.slider` namespace is already bound. Idea came from discussion [in this issue](https://github.com/seiyria/bootstrap-slider/issues/575)
|
||||
|
||||
9.0.0 / 2016-07-13
|
||||
==================
|
||||
* **New Feature:** Wraps all of the ticks within a single container element with the class `.slider-tick-container` as opposed to being within the `.slider-track` element. This enables individual ticks to be more easily targeted with CSS selectors such as `nth-of-type(n)`. Idea came from discussion [in this issue](https://github.com/seiyria/bootstrap-slider/issues/500)
|
||||
|
||||
8.0.0 / 2016-07-13
|
||||
==================
|
||||
* **Revert:** Reverting bug fix made in `7.0.4 - 7.0.5` because it breaks UMD module definition and r.js build tool [as reported in this issue](https://github.com/seiyria/bootstrap-slider/issues/589#issuecomment-232429818). Updated README to address how to stub out optional JQuery dependency for Webpack builds.
|
||||
|
||||
7.1.0 - 7.1.1 / 2016-05-26
|
||||
==================
|
||||
* **New Feature:** Allow LESS/SASS variables to be overridden, but fall back to defaults if needed. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/579). Thanks to [Jonathan Rehm
|
||||
(jkrehm)](https://github.com/jkrehm)
|
||||
|
||||
7.0.4 - 7.0.5 / 2016-05-26
|
||||
==================
|
||||
* **Bug Fix:** Changes webpack AMD build error on define() for optional jQuery dependency to be a warning, which allows webpack builds to be completed. [See here for further details](https://github.com/seiyria/bootstrap-slider/issues/578). Thanks to [Tomi Saarinen (TomiS)](https://github.com/TomiS)
|
||||
|
||||
7.0.2 / 2016-04-05
|
||||
==================
|
||||
* **Bug Fix:** Fixes overlap issue with range slider. [See here for further details](https://github.com/seiyria/bootstrap-slider/issues/435). Thanks to [Jerry (jerrylow)](https://github.com/jerrylow)
|
||||
|
||||
7.0.0 / 2016-04-05
|
||||
==================
|
||||
* **Breaking Change:** Restructured and refactored SASS source files to eliminate compass dependency and be more organized. Thanks to [Jacob van Mourik
|
||||
(jcbvm)](https://github.com/jcbvm)
|
||||
|
||||
6.1.7 / 2016-04-03
|
||||
==================
|
||||
* **Bug Fix:** Fixes issue where slider accidently scrolls when user taps on mobile device. Thanks to [Jerry (jerrylow)](https://github.com/jerrylow)
|
||||
|
||||
6.1.5 / 2016-03-12
|
||||
==================
|
||||
* **Bug Fix:** Call resize() before layout() within relayout() method, which enables intially hidden sliders to be revealed and behave appropriately. Thanks to [Peter (MaZderMind)](https://github.com/MaZderMind)
|
||||
|
||||
6.1.3 / 2016-03-07
|
||||
==================
|
||||
* **Bug Fix:** Fixed horizontal centering issue with labels. Thanks to [Josh Guffey](https://github.com/jguffey)
|
||||
|
||||
6.1.0 / 2016-02-28
|
||||
==================
|
||||
* **New Feature:** Auto-registering/intializing slider via `data-provide="slider"` attribute. Thanks to [MaZderMind](https://github.com/MaZderMind)
|
||||
* Adding Github Templates for Issues, Pull Requests, and Contributions
|
||||
|
||||
6.0.16 / 2016-02-04
|
||||
==================
|
||||
* **Bug Fix:** Attempted Bug fix from 6.0.11 was refined to ensure so side effects.
|
||||
|
||||
6.0.15 / 2016-02-04
|
||||
==================
|
||||
* **Bug Fix:** _setText() defaults to `.textContent` vs `.innerHTML`. Thanks to [gio-js](https://github.com/gio-js)
|
||||
|
||||
6.0.13 / 2016-01-31
|
||||
==================
|
||||
* Reverted Bug fix from prior release
|
||||
|
||||
6.0.11 / 2016-01-31
|
||||
==================
|
||||
* **Bug fix:** Slider was not scrolling properly when nested inside of scrollable container. Thanks to [serbiant](https://github.com/serbiant)
|
||||
|
||||
|
||||
6.0.9 / 2016-01-26
|
||||
==================
|
||||
* **Bug fix:** Race condition in `setValue()` where slider value was being set after `change` and `slide` events were being triggered. Thanks to [glaszig](https://github.com/glaszig)
|
||||
|
||||
6.0.7 / 2016-01-22
|
||||
==================
|
||||
* **Bug fix:** When `tooltip_position` option is set to `"bottom"` on a slider with multiple split handles, position both tooltips below the slider. Thanks to [Martin Hesslund](https://github.com/kesse)
|
||||
|
||||
6.0.5 / 2016-01-20
|
||||
==================
|
||||
* bower.json: changing "main" to reference /dist/bootstrap-slider.js
|
||||
|
||||
6.0.2 / 2015-12-31
|
||||
==================
|
||||
* package.json: changing "main" to point at proper file path
|
||||
|
||||
6.0.0 / 2015-12-30
|
||||
==================
|
||||
* Moving all source code to `/src` directory
|
||||
* Transpiling JS with [Babel](https://babeljs.io/)
|
||||
* Adding `Other Guidelines` section to CONTRIBUTING.MD
|
||||
* Updating README with Grunt CLI tasks
|
||||
* Update postpublish script to reference transpiled code
|
||||
* Freezing dependency versions (this allows us to ensure the module and grunt tasks always have consistent/repeatable behavior)
|
||||
* Adding an `.nvmrc` file for Node 5.x.x. This version of node comes with NPM 3.x.x, which creates a flat dependency tree for `node_modules`, which basically eliminates the need for bower as our client-side deps management solution
|
||||
|
||||
5.3.6 / 2015-12-27
|
||||
==================
|
||||
* Restoring bootstrap depedency to bower.json file (Fixes issue with `grunt prod` task)
|
||||
|
||||
5.3.4 / 2015-12-27
|
||||
==================
|
||||
* **Bug fix:** Ticks now reposition themselves during window resize - Thanks to [Zachary Siswick](https://github.com/zsiswick)
|
||||
|
|
@ -0,0 +1,316 @@
|
|||
/*global module:false*/
|
||||
module.exports = function(grunt) {
|
||||
|
||||
var packageJSON = grunt.file.readJSON('package.json');
|
||||
var bumpFiles = ["package.json", "bower.json", "composer.json"];
|
||||
var commitFiles = bumpFiles.concat(["./dist/*"]);
|
||||
|
||||
// Project configuration.
|
||||
grunt.initConfig({
|
||||
// Metadata
|
||||
pkg: packageJSON,
|
||||
// Task configuration.
|
||||
header: {
|
||||
dist: {
|
||||
options: {
|
||||
text: "/*! =======================================================\n VERSION <%= pkg.version %> \n========================================================= */"
|
||||
},
|
||||
files: {
|
||||
'<%= pkg.gruntConfig.dist.js %>': '<%= pkg.gruntConfig.temp.js %>',
|
||||
'<%= pkg.gruntConfig.dist.jsMin %>': '<%= pkg.gruntConfig.temp.jsMin %>',
|
||||
'<%= pkg.gruntConfig.dist.css %>': '<%= pkg.gruntConfig.temp.css %>',
|
||||
'<%= pkg.gruntConfig.dist.cssMin %>': '<%= pkg.gruntConfig.temp.cssMin %>'
|
||||
}
|
||||
}
|
||||
},
|
||||
uglify: {
|
||||
options: {
|
||||
preserveComments: 'some'
|
||||
},
|
||||
dist: {
|
||||
src: '<%= pkg.gruntConfig.temp.js %>',
|
||||
dest: '<%= pkg.gruntConfig.temp.jsMin %>'
|
||||
}
|
||||
},
|
||||
babel: {
|
||||
options: {
|
||||
presets: ['es2015']
|
||||
},
|
||||
dist: {
|
||||
src: '<%= pkg.gruntConfig.js.slider %>',
|
||||
dest: '<%= pkg.gruntConfig.temp.js %>'
|
||||
}
|
||||
},
|
||||
jshint: {
|
||||
ignore_warning: {
|
||||
options: {
|
||||
'-W099': true
|
||||
},
|
||||
src: '<%= pkg.gruntConfig.js.slider %>'
|
||||
},
|
||||
options: {
|
||||
esnext: true,
|
||||
curly: true,
|
||||
eqeqeq: true,
|
||||
immed: true,
|
||||
latedef: false,
|
||||
newcap: true,
|
||||
noarg: true,
|
||||
sub: true,
|
||||
undef: true,
|
||||
unused: true,
|
||||
boss: true,
|
||||
eqnull: true,
|
||||
browser: true,
|
||||
globals: {
|
||||
$ : true,
|
||||
Modernizr : true,
|
||||
console: true,
|
||||
define: true,
|
||||
module: true,
|
||||
require: true
|
||||
},
|
||||
"-W099": true
|
||||
},
|
||||
gruntfile: {
|
||||
src: 'Gruntfile.js'
|
||||
},
|
||||
js: {
|
||||
src: '<%= pkg.gruntConfig.js.slider %>'
|
||||
},
|
||||
spec : {
|
||||
src: '<%= pkg.gruntConfig.spec %>',
|
||||
options : {
|
||||
globals : {
|
||||
document: true,
|
||||
console: false,
|
||||
Slider: false,
|
||||
$: false,
|
||||
jQuery: false,
|
||||
_: false,
|
||||
_V_: false,
|
||||
afterEach: false,
|
||||
beforeEach: false,
|
||||
confirm: false,
|
||||
context: false,
|
||||
describe: false,
|
||||
expect: false,
|
||||
it: false,
|
||||
jasmine: false,
|
||||
JSHINT: false,
|
||||
mostRecentAjaxRequest: false,
|
||||
qq: false,
|
||||
runs: false,
|
||||
spyOn: false,
|
||||
spyOnEvent: false,
|
||||
waitsFor: false,
|
||||
xdescribe: false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
sasslint: {
|
||||
options: {
|
||||
configFile: './.sass-lint.yml',
|
||||
},
|
||||
target: ['./src/sass/**/*.scss']
|
||||
},
|
||||
lesslint: {
|
||||
src: ['./src/less/bootstrap-slider.less']
|
||||
},
|
||||
jasmine : {
|
||||
src : '<%= pkg.gruntConfig.temp.js %>',
|
||||
options : {
|
||||
specs : '<%= pkg.gruntConfig.spec %>',
|
||||
vendor : ['<%= pkg.gruntConfig.js.jquery %>', '<%= pkg.gruntConfig.js.bindPolyfill %>'],
|
||||
styles : ['<%= pkg.gruntConfig.css.bootstrap %>', '<%= pkg.gruntConfig.temp.css %>'],
|
||||
template : '<%= pkg.gruntConfig.tpl.SpecRunner %>'
|
||||
}
|
||||
},
|
||||
template : {
|
||||
'generate-index-page' : {
|
||||
options : {
|
||||
data : {
|
||||
js : {
|
||||
highlightjs: '<%= pkg.gruntConfig.js.highlightjs %>',
|
||||
modernizr : '<%= pkg.gruntConfig.js.modernizr %>',
|
||||
jquery : '<%= pkg.gruntConfig.js.jquery %>',
|
||||
slider : '<%= pkg.gruntConfig.temp.js %>'
|
||||
},
|
||||
css : {
|
||||
highlightjs: '<%= pkg.gruntConfig.css.highlightjs %>',
|
||||
bootstrap : '<%= pkg.gruntConfig.css.bootstrap %>',
|
||||
slider : '<%= pkg.gruntConfig.temp.css %>'
|
||||
}
|
||||
}
|
||||
},
|
||||
files : {
|
||||
'index.html' : ['<%= pkg.gruntConfig.tpl.index %>']
|
||||
}
|
||||
},
|
||||
'generate-gh-pages' : {
|
||||
options : {
|
||||
data : {
|
||||
js : {
|
||||
highlightjs: '<%= pkg.gruntConfig.js.highlightjs %>',
|
||||
modernizr : '<%= pkg.gruntConfig.js.modernizr %>',
|
||||
jquery : '<%= pkg.gruntConfig.js.jquery %>',
|
||||
slider : 'js/bootstrap-slider.js'
|
||||
},
|
||||
css : {
|
||||
highlightjs: '<%= pkg.gruntConfig.css.highlightjs %>',
|
||||
bootstrap : 'css/bootstrap.min.css',
|
||||
slider : 'css/bootstrap-slider.css'
|
||||
}
|
||||
}
|
||||
},
|
||||
files : {
|
||||
'index.html' : ['<%= pkg.gruntConfig.tpl.index %>']
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
options: {
|
||||
livereload: true
|
||||
},
|
||||
js: {
|
||||
files: '<%= pkg.gruntConfig.js.slider %>',
|
||||
tasks: ['jshint:js', 'babel', 'jasmine']
|
||||
},
|
||||
gruntfile: {
|
||||
files: '<%= jshint.gruntfile %>',
|
||||
tasks: ['jshint:gruntfile']
|
||||
},
|
||||
spec: {
|
||||
files: '<%= pkg.gruntConfig.spec %>',
|
||||
tasks: ['jshint:spec', 'jasmine:src']
|
||||
},
|
||||
css: {
|
||||
files: [
|
||||
'<%= pkg.gruntConfig.less.slider %>',
|
||||
'<%= pkg.gruntConfig.less.rules %>',
|
||||
'<%= pkg.gruntConfig.less.variables %>'
|
||||
],
|
||||
tasks: ['less:development']
|
||||
},
|
||||
index: {
|
||||
files: '<%= pkg.gruntConfig.tpl.index %>',
|
||||
tasks: ['template:generate-index-page']
|
||||
}
|
||||
},
|
||||
connect: {
|
||||
server: {
|
||||
options: {
|
||||
port: "<%= pkg.gruntConfig.devPort %>"
|
||||
}
|
||||
}
|
||||
},
|
||||
open : {
|
||||
development : {
|
||||
path: 'http://localhost:<%= connect.server.options.port %>'
|
||||
}
|
||||
},
|
||||
less: {
|
||||
options: {
|
||||
paths: ["bower_components/bootstrap/less"]
|
||||
},
|
||||
development: {
|
||||
files: {
|
||||
'<%= pkg.gruntConfig.temp.css %>': '<%= pkg.gruntConfig.less.slider %>'
|
||||
}
|
||||
},
|
||||
production: {
|
||||
files: {
|
||||
'<%= pkg.gruntConfig.temp.css %>': '<%= pkg.gruntConfig.less.slider %>',
|
||||
}
|
||||
},
|
||||
"production-min": {
|
||||
options: {
|
||||
yuicompress: true
|
||||
},
|
||||
files: {
|
||||
'<%= pkg.gruntConfig.temp.cssMin %>': '<%= pkg.gruntConfig.less.slider %>'
|
||||
}
|
||||
}
|
||||
},
|
||||
clean: {
|
||||
dist: ["dist"],
|
||||
temp: ["temp"]
|
||||
},
|
||||
bump: {
|
||||
options: {
|
||||
files: bumpFiles,
|
||||
updateConfigs: [],
|
||||
commit: true,
|
||||
commitMessage: 'Release v%VERSION%',
|
||||
commitFiles: commitFiles,
|
||||
createTag: true,
|
||||
tagName: 'v%VERSION%',
|
||||
tagMessage: 'Version %VERSION%',
|
||||
push: false,
|
||||
pushTo: 'origin'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// These plugins provide necessary tasks.
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-contrib-jasmine');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-contrib-connect');
|
||||
grunt.loadNpmTasks('grunt-contrib-clean');
|
||||
grunt.loadNpmTasks('grunt-contrib-less');
|
||||
grunt.loadNpmTasks('grunt-open');
|
||||
grunt.loadNpmTasks('grunt-template');
|
||||
grunt.loadNpmTasks('grunt-header');
|
||||
grunt.loadNpmTasks('grunt-bump');
|
||||
grunt.loadNpmTasks('grunt-babel');
|
||||
grunt.loadNpmTasks('grunt-sass-lint');
|
||||
grunt.loadNpmTasks('grunt-lesslint');
|
||||
|
||||
// Create custom tasks
|
||||
grunt.registerTask('append-header', ['header', 'clean:temp']);
|
||||
grunt.registerTask('lint', [
|
||||
'jshint',
|
||||
'lesslint',
|
||||
'sasslint'
|
||||
]);
|
||||
grunt.registerTask('test', [
|
||||
'babel',
|
||||
'less:development',
|
||||
'jasmine',
|
||||
'clean:temp'
|
||||
]);
|
||||
grunt.registerTask('build', [
|
||||
'less:development',
|
||||
'test',
|
||||
'template:generate-index-page'
|
||||
]);
|
||||
grunt.registerTask('build-gh-pages', [
|
||||
'less:development',
|
||||
'babel',
|
||||
'template:generate-gh-pages'
|
||||
]);
|
||||
grunt.registerTask('dist', [
|
||||
'clean:dist',
|
||||
'less:production',
|
||||
'less:production-min',
|
||||
'babel',
|
||||
'uglify',
|
||||
'append-header'
|
||||
]);
|
||||
grunt.registerTask('development', [
|
||||
'less:development',
|
||||
'babel',
|
||||
'template:generate-index-page',
|
||||
'connect',
|
||||
'open:development',
|
||||
'watch'
|
||||
]);
|
||||
grunt.registerTask('production', ['dist']);
|
||||
grunt.registerTask('dev', 'development');
|
||||
grunt.registerTask('prod', 'production');
|
||||
grunt.registerTask('default', ['build']);
|
||||
|
||||
}; // End of module
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
----------------------------------------------------------------------
|
||||
bootstrap-slider is released under the MIT License
|
||||
Copyright (c) 2019 Kyle Kemp, Rohit Kalkur, and contributors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person
|
||||
obtaining a copy of this software and associated documentation
|
||||
files (the "Software"), to deal in the Software without
|
||||
restriction, including without limitation the rights to use,
|
||||
copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the
|
||||
Software is furnished to do so, subject to the following
|
||||
conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
|
@ -0,0 +1,312 @@
|
|||
bootstrap-slider [](https://travis-ci.org/seiyria/bootstrap-slider)
|
||||
================
|
||||
Originally began as a loose "fork" of bootstrap-slider found on http://www.eyecon.ro/ by Stefan Petre.
|
||||
|
||||
Over time, this project has diverged sigfinicantly from Stefan Petre's version and is now almost completely different.
|
||||
|
||||
__Please ensure that you are using this library instead of the Petre version before creating issues in the repository issue tracker!!__
|
||||
|
||||
__Note also that Bootstrap 4 is not yet supported, see issue [#689](https://github.com/seiyria/bootstrap-slider/issues/689).__
|
||||
|
||||
Installation
|
||||
============
|
||||
Want to use bower? `bower install seiyria-bootstrap-slider`
|
||||
|
||||
Want to use npm? `npm install bootstrap-slider`
|
||||
|
||||
Want to get it from a CDN? https://cdnjs.com/libraries/bootstrap-slider
|
||||
|
||||
Basic Setup
|
||||
============
|
||||
Grab the compiled JS/CSS (minified or non-minified versions) from the [/dist](https://github.com/seiyria/bootstrap-slider/tree/master/dist) directory, load them into your web page, and everything should work!
|
||||
|
||||
Remember to load the plugin code after loading the Bootstrap CSS and JQuery.
|
||||
|
||||
__JQuery is optional and the plugin can operate with or without it.__
|
||||
|
||||
Look below to see an example of how to interact with the non-JQuery interface.
|
||||
|
||||
Supported Browsers
|
||||
========
|
||||
__We only support modern browsers!!! Basically, anything below IE9 is not compatible with this plugin!__
|
||||
|
||||
Examples
|
||||
========
|
||||
You can see all of our API examples [here](http://seiyria.github.io/bootstrap-slider/).
|
||||
|
||||
Using bootstrap-slider (with JQuery)
|
||||
======================
|
||||
|
||||
### Using `.slider` namespace
|
||||
Create an input element and call .slider() on it:
|
||||
|
||||
```js
|
||||
// Instantiate a slider
|
||||
var mySlider = $("input.slider").slider();
|
||||
|
||||
// Call a method on the slider
|
||||
var value = mySlider.slider('getValue');
|
||||
|
||||
// For non-getter methods, you can chain together commands
|
||||
mySlider
|
||||
.slider('setValue', 5)
|
||||
.slider('setValue', 7);
|
||||
```
|
||||
|
||||
### Using `.bootstrapSlider` namespace
|
||||
Create an input element and call .bootstrapSlider() on it:
|
||||
|
||||
```js
|
||||
// Instantiate a slider
|
||||
var mySlider = $("input.slider").bootstrapSlider();
|
||||
|
||||
// Call a method on the slider
|
||||
var value = mySlider.bootstrapSlider('getValue');
|
||||
|
||||
// For non-getter methods, you can chain together commands
|
||||
mySlider
|
||||
.bootstrapSlider('setValue', 5)
|
||||
.bootstrapSlider('setValue', 7);
|
||||
```
|
||||
|
||||
Using bootstrap-slider (via `data-provide`-API)
|
||||
======================
|
||||
|
||||
Create an input element with the `data-provide="slider"` attribute automatically
|
||||
turns it into a slider. Options can be supplied via `data-slider-` attributes.
|
||||
|
||||
```html
|
||||
<input
|
||||
type="text"
|
||||
name="somename"
|
||||
data-provide="slider"
|
||||
data-slider-ticks="[1, 2, 3]"
|
||||
data-slider-ticks-labels='["short", "medium", "long"]'
|
||||
data-slider-min="1"
|
||||
data-slider-max="3"
|
||||
data-slider-step="1"
|
||||
data-slider-value="3"
|
||||
data-slider-tooltip="hide"
|
||||
>
|
||||
```
|
||||
|
||||
What if there is already a _slider_ plugin bound to the JQuery namespace?
|
||||
======================
|
||||
|
||||
If there is already a JQuery plugin named _slider_ bound to the JQuery namespace, then this plugin will provide an alternative namespace _bootstrapSlider_ and will emit a console warning telling you the _slider_ namespace has already been taken and will encourage you to use the alternate namespace instead. If the _slider_ namespace is available however, the _bootstrapSlider_ namespace will not exist.
|
||||
|
||||
```js
|
||||
// Instantiate a slider
|
||||
var mySlider = $("input.slider").bootstrapSlider();
|
||||
|
||||
// Call a method on the slider
|
||||
var value = mySlider.bootstrapSlider('getValue');
|
||||
|
||||
// For non-getter methods, you can chain together commands
|
||||
mySlider
|
||||
.bootstrapSlider('setValue', 5)
|
||||
.bootstrapSlider('setValue', 7);
|
||||
```
|
||||
|
||||
Using bootstrap-slider (without JQuery)
|
||||
======================
|
||||
|
||||
Create an input element in the DOM, and then create an instance of Slider, passing it a selector string referencing the input element.
|
||||
|
||||
```js
|
||||
// Instantiate a slider
|
||||
var mySlider = new Slider("input.slider", {
|
||||
// initial options object
|
||||
});
|
||||
|
||||
// Call a method on the slider
|
||||
var value = mySlider.getValue();
|
||||
|
||||
// For non-getter methods, you can chain together commands
|
||||
mySlider
|
||||
.setValue(5)
|
||||
.setValue(7);
|
||||
```
|
||||
|
||||
Using as CommonJS module
|
||||
=======
|
||||
bootstrap-slider can be loaded as a CommonJS module via [Browserify](https://github.com/substack/node-browserify), [Webpack](https://github.com/webpack/webpack), or some other build tool.
|
||||
|
||||
```js
|
||||
var Slider = require("bootstrap-slider");
|
||||
|
||||
var mySlider = new Slider();
|
||||
```
|
||||
|
||||
How do I exclude the optional JQuery dependency from my build?
|
||||
=======
|
||||
### Browserify
|
||||
__Note that the JQuery dependency is considered to be optional.__ For example, to exclude JQuery from being part of your Browserify build, you would call something like the following (assuming `main.js` is requiring bootstrap-slider as a dependency):
|
||||
|
||||
```BASH
|
||||
browserify --im -u jquery main.js > bundle.js
|
||||
```
|
||||
### Webpack
|
||||
To exclude JQuery from your Webpack build, you will have to go into the Webpack config file for your specific project and add something like the following to your `resolve.alias` section:
|
||||
|
||||
```js
|
||||
resolve: {
|
||||
alias: {
|
||||
"jquery": path.join(__dirname, "./jquery-stub.js")
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Then in your project, you will have to create a stub module for jquery that exports a `null` value. Whenever `require("jquery")` is mentioned in your project, it will load this stubbed module.
|
||||
|
||||
```js
|
||||
// Path: ./jquery-stub.js
|
||||
module.exports = null;
|
||||
```
|
||||
|
||||
### Other
|
||||
Please see the documentation for the specific module loader you are using to find out how to exclude dependencies.
|
||||
|
||||
Options
|
||||
=======
|
||||
Options can be passed either as a data (data-slider-foo) attribute, or as part of an object in the slider call. The only exception here is the formatter argument - that can not be passed as a data- attribute.
|
||||
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| ---- |:----:|:-------:|:----------- |
|
||||
| id | string | '' | set the id of the slider element when it's created |
|
||||
| min | float | 0 | minimum possible value |
|
||||
| max | float | 10 | maximum possible value |
|
||||
| step | float | 1 | increment step |
|
||||
| precision | float | number of digits after the decimal of _step_ value | The number of digits shown after the decimal. Defaults to the number of digits after the decimal of _step_ value. |
|
||||
| orientation | string | 'horizontal' | set the orientation. Accepts 'vertical' or 'horizontal' |
|
||||
| value | float,array | 5 | initial value. Use array to have a range slider. |
|
||||
| range | bool | false | make range slider. Optional if initial value is an array. If initial value is scalar, max will be used for second value. |
|
||||
| selection | string | 'before' | selection placement. Accepts: 'before', 'after' or 'none'. In case of a range slider, the selection will be placed between the handles |
|
||||
| tooltip | string | 'show' | whether to show the tooltip on drag, hide the tooltip, or always show the tooltip. Accepts: 'show', 'hide', or 'always' |
|
||||
| tooltip_split | bool | false | if false show one tootip if true show two tooltips one for each handler |
|
||||
| tooltip_position | string | null | Position of tooltip, relative to slider. Accepts 'top'/'bottom' for horizontal sliders and 'left'/'right' for vertically orientated sliders. Default positions are 'top' for horizontal and 'right' for vertical slider. |
|
||||
| handle | string | 'round' | handle shape. Accepts: 'round', 'square', 'triangle' or 'custom' |
|
||||
| reversed | bool | false | whether or not the slider should be reversed |
|
||||
| rtl | bool|string | 'auto' | whether or not the slider should be shown in rtl mode. Accepts true, false, 'auto'. Default 'auto' : use actual direction of HTML (`dir='rtl'`) |
|
||||
| enabled | bool | true | whether or not the slider is initially enabled |
|
||||
| formatter | function | returns the plain value | formatter callback. Return the value wanted to be displayed in the tooltip, useful for string values. If a string is returned it will be indicated in an `aria-valuetext` attribute. |
|
||||
| natural_arrow_keys | bool | false | The natural order is used for the arrow keys. Arrow up select the upper slider value for vertical sliders, arrow right the righter slider value for a horizontal slider - no matter if the slider was reversed or not. By default the arrow keys are oriented by arrow up/right to the higher slider value, arrow down/left to the lower slider value. |
|
||||
| ticks | array | [ ] | Used to define the values of ticks. Tick marks are indicators to denote special values in the range. This option overwrites min and max options. |
|
||||
| ticks_positions | array | [ ] | Defines the positions of the tick values in percentages. The first value should always be 0, the last value should always be 100 percent. |
|
||||
| ticks_labels | array | [ ] | Defines the labels below the tick marks. Accepts HTML input. |
|
||||
| ticks_snap_bounds | float | 0 | Used to define the snap bounds of a tick. Snaps to the tick if value is within these bounds. |
|
||||
| ticks_tooltip | bool | false | Used to allow for a user to hover over a given tick to see it's value. Useful if custom formatter passed in |
|
||||
| scale | string | 'linear' | Set to 'logarithmic' to use a logarithmic scale. Logarithmic scales will be calculated based on the difference between min to max; e.g. (0..10000) (-100..9900) both have a net range of 10001 and will slide in the same net increments. |
|
||||
| focus | bool | false | Focus the appropriate slider handle after a value change. |
|
||||
| labelledby | string,array | null | ARIA labels for the slider handle's, Use array for multiple values in a range slider. |
|
||||
| rangeHighlights | array | [] | Defines a range array that you want to highlight, for example: [{'start':val1, 'end': val2, 'class': 'optionalAdditionalClassName'}]. |
|
||||
| lock_to_ticks | bool | false | Lock the selection to the values defined at ticks array. |
|
||||
|
||||
Functions
|
||||
=========
|
||||
__NOTE:__ Optional parameters are italicized.
|
||||
|
||||
| Function | Parameters | Description |
|
||||
| -------- | ----------- | ----------- |
|
||||
| getValue | --- | Get the current value from the slider |
|
||||
| setValue | newValue, _triggerSlideEvent_, _triggerChangeEvent_ | Set a new value for the slider. If optional triggerSlideEvent parameter is _true_, 'slide' events will be triggered. If optional triggerChangeEvent parameter is _true_, 'change' events will be triggered. This function takes `newValue` as either a `Number`, `String`, `Array`. If the value is of type `String` it must be convertable to an integer or it will throw an error.|
|
||||
| getElement | --- | Get the div slider element |
|
||||
| destroy | --- | Properly clean up and remove the slider instance |
|
||||
| disable | ---| Disables the slider and prevents the user from changing the value |
|
||||
| enable | --- | Enables the slider |
|
||||
| toggle | --- | Toggles the slider between enabled and disabled |
|
||||
| isEnabled | --- |Returns true if enabled, false if disabled |
|
||||
| setAttribute | attribute, value | Updates the slider's [attributes](#options) |
|
||||
| getAttribute | attribute | Get the slider's [attributes](#options) |
|
||||
| refresh | _options_ | Refreshes the current slider and resets the slider's value to its default value on initial setup. To override this behaviour and instead maintain the slider's current value, pass the optional `options` parameter with the property `useCurrentValue` set to `true` (eg. `refresh({ useCurrentValue: true })`. |
|
||||
| on | eventType, callback | When the slider event _eventType_ is triggered, the callback function will be invoked |
|
||||
| off | eventType, callback | Removes the callback function from the slider event _eventType_ |
|
||||
| relayout | --- | Renders the tooltip again, after initialization. Useful in situations when the slider and tooltip are initially hidden. |
|
||||
|
||||
Events
|
||||
======
|
||||
| Event | Description | Value |
|
||||
| ----- | ----------- | ----- |
|
||||
| slide | This event fires when the slider is dragged | The new slider value |
|
||||
| slideStart | This event fires when dragging starts | The new slider value |
|
||||
| slideStop | This event fires when the dragging stops or has been clicked on | The new slider value |
|
||||
| change | This event fires when the slider value has changed | An object with 2 properties: "oldValue" and "newValue" |
|
||||
| slideEnabled | This event fires when the slider is enabled | N/A |
|
||||
| slideDisabled | This event fires when the slider is disabled | N/A |
|
||||
|
||||
|
||||
How Do I Run This Locally?
|
||||
======
|
||||
- Clone the repository
|
||||
- Run `nvm use` in your Terminal to switch to the proper Node/NPM version
|
||||
- Once you are on specified Node version, run `npm install`
|
||||
- Install the Grunt CLI: `npm install grunt-cli -g`
|
||||
- Type `grunt dev` to launch browser window with Examples page
|
||||
|
||||
Grunt Tasks
|
||||
======
|
||||
This plugin uses Grunt as its command-line task runner.
|
||||
|
||||
To install the Grunt CLI, type `npm install grunt-cli -g`.
|
||||
|
||||
To execute any of the commands, type `grunt <task-name>` in your terminal instance.
|
||||
|
||||
The following is a list of the commonly-used command line tasks:
|
||||
|
||||
* `grunt development`: Generates the `index.html`, compiles the LESS/JS to the `/temp` directory, and launches the index.html in your system's default browser. As changes are made to source code, the
|
||||
browser window will auto-refresh.
|
||||
* `grunt production`: Generates the `/dist` directory with minified and unminified assetts.
|
||||
* `grunt dev`: Alias for `grunt development`
|
||||
* `grunt prod`: Alias for `grunt production`
|
||||
* `grunt build`: Transpiles JavaScript source via Babel and compiles LESS source to CSS to `temp` directory.
|
||||
* `grunt lint`: Runs JSLint on the JavaScript source code files, SASS-Lint on the SASS source code files, and LESSLint on the LESS source code files.
|
||||
* `grunt test`: Runs unit tests contained in `/test` directory via Jasmine 2.x.x
|
||||
|
||||
|
||||
Version Bumping and Publishing (Maintainers Only)
|
||||
=======
|
||||
For versioning rules, we follow the [Semver convention](https://semver.org/).
|
||||
|
||||
To do the following release tasks:
|
||||
* bump the version
|
||||
* publish a new version to NPM
|
||||
* update the `gh-pages` branch
|
||||
* push a new `dist` bundle to the `master` branch on the remote `origin`
|
||||
* push new tags to the remote `origin`
|
||||
|
||||
Type the following command:
|
||||
|
||||
`npm run release <patch|minor|major>`
|
||||
|
||||
If you do not specify a version bump type, the script will automatically defer to a patch bump.
|
||||
|
||||
Updating Github.io Page
|
||||
===========================
|
||||
The Github.io page can be automatically updated by running the following command:
|
||||
|
||||
`npm run update-gh-pages`
|
||||
|
||||
This command will handle generating the latest versions of the JS/CSS and index.html page, and push them to the `gh-pages` branch.
|
||||
|
||||
Other Platforms & Libraries
|
||||
===========================
|
||||
- [Ruby on Rails](https://github.com/YourCursus/bootstrap-slider-rails)
|
||||
- [knockout.js](https://github.com/cosminstefanxp/bootstrap-slider-knockout-binding) ([@cosminstefanxp](https://github.com/cosminstefanxp), [#81](https://github.com/seiyria/bootstrap-slider/issues/81))
|
||||
- [AngularJS](https://github.com/seiyria/angular-bootstrap-slider)
|
||||
- [Angular](https://github.com/moritzvieli/ngx-bootstrap-slider) ([@moritzvieli](https://github.com/moritzvieli))
|
||||
- [EmberJS](https://github.com/lifegadget/ui-slider) ([@ksnyde](https://github.com/ksnyde))
|
||||
- [ReactJS](https://github.com/brownieboy/react-bootstrap-slider)
|
||||
- [NuGet](https://www.nuget.org/packages/bootstrap-slider/) ([@ChrisMissal](https://github.com/ChrisMissal))
|
||||
- [MeteorJS](https://github.com/kidovate/meteor-bootstrap-slider)
|
||||
- [Maven](http://mvnrepository.com/artifact/org.webjars.bower/seiyria-bootstrap-slider)
|
||||
- [Vue.js](https://github.com/pimlie/vue-bootstrap-slider) ([@pimlie](https://github.com/pimlie))
|
||||
|
||||
Maintainers
|
||||
============
|
||||
- Kyle Kemp
|
||||
* Twitter: [@seiyria](https://twitter.com/seiyria)
|
||||
* Github: [seiyria](https://github.com/seiyria)
|
||||
- Rohit Kalkur
|
||||
* Twitter: [@Rovolutionary](https://twitter.com/Rovolutionary)
|
||||
* Github: [rovolution](https://github.com/rovolution)
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"name": "seiyria-bootstrap-slider",
|
||||
"version": "10.6.2",
|
||||
"homepage": "https://github.com/seiyria/bootstrap-slider",
|
||||
"authors": [
|
||||
"Kyle Kemp <kyle@seiyria.com>",
|
||||
"Rohit Kalkur <rohit.kalkur@gmail.com>"
|
||||
],
|
||||
"description": "a slider element for bootstrap 2/3",
|
||||
"main": [
|
||||
"dist/bootstrap-slider.js",
|
||||
"dist/css/bootstrap-slider.css"
|
||||
],
|
||||
"keywords": [
|
||||
"slider",
|
||||
"bootstrap2",
|
||||
"bootstrap3",
|
||||
"bootstrap"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"name": "seiyria/bootstrap-slider",
|
||||
"type": "library",
|
||||
"version": "10.6.2",
|
||||
"description": "A less buggy fork of the original bootstrap slider found on http://www.eyecon.ro/ by Stefan Petre. It was forked so we could update the slider since the original wasn't under version control.",
|
||||
"keywords": ["slider", "css", "bootstrap", "javascript"],
|
||||
"homepage": "https://github.com/seiyria/bootstrap-slider",
|
||||
"require": {},
|
||||
"license": "MIT",
|
||||
"authors": [
|
||||
{
|
||||
"name": "Kyle Kemp",
|
||||
"email": "kyle@seiyria.com",
|
||||
"homepage": "http://seiyria.com",
|
||||
"role": "Developer"
|
||||
},
|
||||
{
|
||||
"name": "Rohit Kalkur",
|
||||
"email": "rohit.kalkur@gmail.com",
|
||||
"homepage": "http://www.rovolutionary.com",
|
||||
"role": "Developer"
|
||||
},
|
||||
{
|
||||
"name": "Lucas Zardo",
|
||||
"email": "lucas@deliverymuch.com.br",
|
||||
"homepage": "https://deliverymuch.com.br",
|
||||
"role": "Packagist Editor"
|
||||
}
|
||||
]
|
||||
}
|
||||
1
bower_components/seiyria-bootstrap-slider/dependencies/css/highlightjs-github-theme.css
vendored
Normal file
1
bower_components/seiyria-bootstrap-slider/dependencies/css/highlightjs-github-theme.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.hljs{display:block;overflow-x:auto;padding:0.5em;color:#333;background:#f8f8f8}.hljs-comment,.hljs-quote{color:#998;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#333;font-weight:bold}.hljs-number,.hljs-literal,.hljs-variable,.hljs-template-variable,.hljs-tag .hljs-attr{color:#008080}.hljs-string,.hljs-doctag{color:#d14}.hljs-title,.hljs-section,.hljs-selector-id{color:#900;font-weight:bold}.hljs-subst{font-weight:normal}.hljs-type,.hljs-class .hljs-title{color:#458;font-weight:bold}.hljs-tag,.hljs-name,.hljs-attribute{color:#000080;font-weight:normal}.hljs-regexp,.hljs-link{color:#009926}.hljs-symbol,.hljs-bullet{color:#990073}.hljs-built_in,.hljs-builtin-name{color:#0086b3}.hljs-meta{color:#999;font-weight:bold}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,328 @@
|
|||
/*! =======================================================
|
||||
VERSION 10.6.2
|
||||
========================================================= */
|
||||
/*! =========================================================
|
||||
* bootstrap-slider.js
|
||||
*
|
||||
* Maintainers:
|
||||
* Kyle Kemp
|
||||
* - Twitter: @seiyria
|
||||
* - Github: seiyria
|
||||
* Rohit Kalkur
|
||||
* - Twitter: @Rovolutionary
|
||||
* - Github: rovolution
|
||||
*
|
||||
* =========================================================
|
||||
*
|
||||
* bootstrap-slider is released under the MIT License
|
||||
* Copyright (c) 2019 Kyle Kemp, Rohit Kalkur, and contributors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person
|
||||
* obtaining a copy of this software and associated documentation
|
||||
* files (the "Software"), to deal in the Software without
|
||||
* restriction, including without limitation the rights to use,
|
||||
* copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the
|
||||
* Software is furnished to do so, subject to the following
|
||||
* conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be
|
||||
* included in all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
* OTHER DEALINGS IN THE SOFTWARE.
|
||||
*
|
||||
* ========================================================= */
|
||||
.slider {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
.slider.slider-horizontal {
|
||||
width: 210px;
|
||||
height: 20px;
|
||||
}
|
||||
.slider.slider-horizontal .slider-track {
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
margin-top: -5px;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
.slider.slider-horizontal .slider-selection,
|
||||
.slider.slider-horizontal .slider-track-low,
|
||||
.slider.slider-horizontal .slider-track-high {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.slider.slider-horizontal .slider-tick,
|
||||
.slider.slider-horizontal .slider-handle {
|
||||
margin-left: -10px;
|
||||
}
|
||||
.slider.slider-horizontal .slider-tick.triangle,
|
||||
.slider.slider-horizontal .slider-handle.triangle {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
border-width: 0 10px 10px 10px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom-color: #2e6da4;
|
||||
margin-top: 0;
|
||||
}
|
||||
.slider.slider-horizontal .slider-tick-container {
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.slider.slider-horizontal .slider-tick-label-container {
|
||||
white-space: nowrap;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.slider.slider-horizontal .slider-tick-label-container .slider-tick-label {
|
||||
padding-top: 4px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.slider.slider-horizontal .tooltip {
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.slider.slider-horizontal.slider-rtl .slider-track {
|
||||
left: initial;
|
||||
right: 0;
|
||||
}
|
||||
.slider.slider-horizontal.slider-rtl .slider-tick,
|
||||
.slider.slider-horizontal.slider-rtl .slider-handle {
|
||||
margin-left: initial;
|
||||
margin-right: -10px;
|
||||
}
|
||||
.slider.slider-horizontal.slider-rtl .slider-tick-container {
|
||||
left: initial;
|
||||
right: 0;
|
||||
}
|
||||
.slider.slider-horizontal.slider-rtl .tooltip {
|
||||
-ms-transform: translateX(50%);
|
||||
transform: translateX(50%);
|
||||
}
|
||||
.slider.slider-vertical {
|
||||
height: 210px;
|
||||
width: 20px;
|
||||
}
|
||||
.slider.slider-vertical .slider-track {
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
left: 25%;
|
||||
top: 0;
|
||||
}
|
||||
.slider.slider-vertical .slider-selection {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.slider.slider-vertical .slider-track-low,
|
||||
.slider.slider-vertical .slider-track-high {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.slider.slider-vertical .slider-tick,
|
||||
.slider.slider-vertical .slider-handle {
|
||||
margin-top: -10px;
|
||||
}
|
||||
.slider.slider-vertical .slider-tick.triangle,
|
||||
.slider.slider-vertical .slider-handle.triangle {
|
||||
border-width: 10px 0 10px 10px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border-left-color: #2e6da4;
|
||||
border-right-color: #2e6da4;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.slider.slider-vertical .slider-tick-label-container {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.slider.slider-vertical .slider-tick-label-container .slider-tick-label {
|
||||
padding-left: 4px;
|
||||
}
|
||||
.slider.slider-vertical .tooltip {
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.slider.slider-vertical.slider-rtl .slider-track {
|
||||
left: initial;
|
||||
right: 25%;
|
||||
}
|
||||
.slider.slider-vertical.slider-rtl .slider-selection {
|
||||
left: initial;
|
||||
right: 0;
|
||||
}
|
||||
.slider.slider-vertical.slider-rtl .slider-tick.triangle,
|
||||
.slider.slider-vertical.slider-rtl .slider-handle.triangle {
|
||||
border-width: 10px 10px 10px 0;
|
||||
}
|
||||
.slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label {
|
||||
padding-left: initial;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.slider.slider-disabled .slider-handle {
|
||||
background-image: -webkit-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
|
||||
background-image: -o-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
|
||||
background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.slider.slider-disabled .slider-track {
|
||||
background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
|
||||
background-image: -o-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
|
||||
background-image: linear-gradient(to bottom, #e5e5e5 0%, #e9e9e9 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffe9e9e9', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.slider input {
|
||||
display: none;
|
||||
}
|
||||
.slider .tooltip {
|
||||
pointer-events: none;
|
||||
}
|
||||
.slider .tooltip.top {
|
||||
margin-top: -36px;
|
||||
}
|
||||
.slider .tooltip-inner {
|
||||
white-space: nowrap;
|
||||
max-width: none;
|
||||
}
|
||||
.slider .hide {
|
||||
display: none;
|
||||
}
|
||||
.slider-track {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%);
|
||||
background-image: -o-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%);
|
||||
background-image: linear-gradient(to bottom, #f5f5f5 0%, #f9f9f9 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.slider-selection {
|
||||
position: absolute;
|
||||
background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
|
||||
background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
|
||||
background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.slider-selection.tick-slider-selection {
|
||||
background-image: -webkit-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
|
||||
background-image: -o-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
|
||||
background-image: linear-gradient(to bottom, #8ac1ef 0%, #82b3de 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef', endColorstr='#ff82b3de', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.slider-track-low,
|
||||
.slider-track-high {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.slider-handle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #337ab7;
|
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
|
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
|
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
filter: none;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
||||
border: 0px solid transparent;
|
||||
}
|
||||
.slider-handle:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.slider-handle.round {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.slider-handle.triangle {
|
||||
background: transparent none;
|
||||
}
|
||||
.slider-handle.custom {
|
||||
background: transparent none;
|
||||
}
|
||||
.slider-handle.custom::before {
|
||||
line-height: 20px;
|
||||
font-size: 20px;
|
||||
content: '\2605';
|
||||
color: #726204;
|
||||
}
|
||||
.slider-tick {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
|
||||
background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
|
||||
background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
filter: none;
|
||||
opacity: 0.8;
|
||||
border: 0px solid transparent;
|
||||
}
|
||||
.slider-tick.round {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.slider-tick.triangle {
|
||||
background: transparent none;
|
||||
}
|
||||
.slider-tick.custom {
|
||||
background: transparent none;
|
||||
}
|
||||
.slider-tick.custom::before {
|
||||
line-height: 20px;
|
||||
font-size: 20px;
|
||||
content: '\2605';
|
||||
color: #726204;
|
||||
}
|
||||
.slider-tick.in-selection {
|
||||
background-image: -webkit-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
|
||||
background-image: -o-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
|
||||
background-image: linear-gradient(to bottom, #8ac1ef 0%, #82b3de 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef', endColorstr='#ff82b3de', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
opacity: 1;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,101 @@
|
|||
{
|
||||
"name": "bootstrap-slider",
|
||||
"version": "10.6.2",
|
||||
"description": "Slider view component for Twitter Bootstrap.",
|
||||
"main": "dist/bootstrap-slider.js",
|
||||
"style": "dist/css/bootstrap-slider.css",
|
||||
"scripts": {
|
||||
"pretest": "grunt lint",
|
||||
"test": "grunt test",
|
||||
"release": "sh ./scripts/release.sh",
|
||||
"update-gh-pages": "sh ./scripts/update-gh-pages.sh"
|
||||
},
|
||||
"homepage": "http://github.com/seiyria/bootstrap-slider",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/seiyria/bootstrap-slider.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "http://github.com/seiyria/bootstrap-slider/issues"
|
||||
},
|
||||
"author": "bootstrap-slider ",
|
||||
"contributors": [
|
||||
{
|
||||
"name": "Kyle Kemp",
|
||||
"twitter": "@seiyria",
|
||||
"github": "seiyria"
|
||||
},
|
||||
{
|
||||
"name": "Rohit Kalkur",
|
||||
"twitter": "@Rovolutionary",
|
||||
"github": "rovolution"
|
||||
}
|
||||
],
|
||||
"keywords": [
|
||||
"slider",
|
||||
"bootstrap",
|
||||
"twitter",
|
||||
"slide"
|
||||
],
|
||||
"license": "MIT",
|
||||
"readmeFilename": "README.md",
|
||||
"gitHead": "67eb8fe3c26205efc94ae95b3ef37a469eef0b81",
|
||||
"dependencies": {},
|
||||
"engine": {},
|
||||
"devDependencies": {
|
||||
"babel-preset-es2015": "6.3.13",
|
||||
"bootstrap": "^3.3.6",
|
||||
"grunt": "^0.4.5",
|
||||
"grunt-babel": "6.0.0",
|
||||
"grunt-bump": "0.0.16",
|
||||
"grunt-cli": "^1.3.2",
|
||||
"grunt-contrib-clean": "0.6.0",
|
||||
"grunt-contrib-connect": "0.5.0",
|
||||
"grunt-contrib-jasmine": "1.0.3",
|
||||
"grunt-contrib-jshint": "0.11.3",
|
||||
"grunt-contrib-less": "0.7.0",
|
||||
"grunt-contrib-uglify": "0.2.4",
|
||||
"grunt-contrib-watch": "0.5.3",
|
||||
"grunt-header": "1.0.0",
|
||||
"grunt-lesslint": "^3.2.0",
|
||||
"grunt-open": "0.2.2",
|
||||
"grunt-sass-lint": "^0.2.2",
|
||||
"grunt-template": "0.2.0"
|
||||
},
|
||||
"gruntConfig": {
|
||||
"devPort": 9000,
|
||||
"js": {
|
||||
"highlightjs": "dependencies/js/highlight.min.js",
|
||||
"modernizr": "dependencies/js/modernizr.js",
|
||||
"jquery": "dependencies/js/jquery.min.js",
|
||||
"bindPolyfill": "test/phantom_bind_polyfill.js",
|
||||
"slider": "src/js/bootstrap-slider.js"
|
||||
},
|
||||
"less": {
|
||||
"slider": "src/less/bootstrap-slider.less",
|
||||
"rules": "src/less/rules.less",
|
||||
"variables": "src/less/variables.less"
|
||||
},
|
||||
"css": {
|
||||
"bootstrap": "node_modules/bootstrap/dist/css/bootstrap.min.css",
|
||||
"highlightjs": "dependencies/css/highlightjs-github-theme.css"
|
||||
},
|
||||
"tpl": {
|
||||
"SpecRunner": "tpl/SpecRunner.tpl",
|
||||
"index": "tpl/index.tpl"
|
||||
},
|
||||
"temp": {
|
||||
"js": "temp/bootstrap-slider.js",
|
||||
"jsMin": "temp/bootstrap-slider.min.js",
|
||||
"css": "temp/bootstrap-slider.css",
|
||||
"cssMin": "temp/bootstrap-slider.min.css"
|
||||
},
|
||||
"dist": {
|
||||
"js": "dist/bootstrap-slider.js",
|
||||
"jsMin": "dist/bootstrap-slider.min.js",
|
||||
"css": "dist/css/bootstrap-slider.css",
|
||||
"cssMin": "dist/css/bootstrap-slider.min.css"
|
||||
},
|
||||
"spec": "test/specs/**/*.js"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
#!/bin/bash
|
||||
|
||||
# this is run by netlify. there is no need to run this manually.
|
||||
|
||||
# log
|
||||
# Generate index.html and /temp assets for GH Pages branch
|
||||
npm i
|
||||
grunt build
|
||||
grunt build-gh-pages
|
||||
|
||||
mkdir css
|
||||
mkdir js
|
||||
|
||||
cp node_modules/bootstrap/dist/css/bootstrap.min.css css/bootstrap.min.css
|
||||
mv temp/bootstrap-slider.css css/bootstrap-slider.css
|
||||
mv temp/bootstrap-slider.js js/bootstrap-slider.js
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
#!/bin/bash
|
||||
|
||||
# Check if required CLI tools are available
|
||||
if ! [ -x "$(command -v grunt)" ]; then
|
||||
echo "Error: grunt-cli is not installed. Please type 'npm install grunt-cli -g' to install" >&2
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Validate arguments
|
||||
versionBumpType=${1:-patch};
|
||||
|
||||
if [ "$versionBumpType" != "major" ] && [ "$versionBumpType" != "minor" ] && [ "$versionBumpType" != "patch" ]; then
|
||||
echo "Invalid version bump argument: ${versionBumpType}. Option must be one of the following: major, minor, patch" >&2
|
||||
exit 1
|
||||
else
|
||||
echo "Publishing and bumping with ${versionBumpType} version bump"
|
||||
fi
|
||||
|
||||
echo "Running version bump + publish script..."
|
||||
echo "."
|
||||
echo "."
|
||||
echo "Generating /dist and push changes + tags to Github remote 'origin'"
|
||||
# Checkout master branch
|
||||
git checkout master
|
||||
# Version bump
|
||||
grunt bump-only:"$versionBumpType"
|
||||
# Generate new dist
|
||||
grunt prod
|
||||
# Generate new index.html page
|
||||
grunt template
|
||||
# Force add dist contents
|
||||
git add dist/* --force
|
||||
# Commit new release tag
|
||||
grunt bump-commit
|
||||
# Push commits/tags to master branch on remote 'origin'
|
||||
git push origin master:master && git push --tags
|
||||
|
||||
## Update Github.io page
|
||||
sh ./scripts/update-gh-pages.sh
|
||||
|
||||
## Publish to NPM
|
||||
echo "."
|
||||
echo "."
|
||||
echo "Publishing to NPM"
|
||||
echo "."
|
||||
echo "."
|
||||
npm publish
|
||||
|
||||
# Notify script is complete
|
||||
echo "."
|
||||
echo "."
|
||||
echo "Script complete"
|
||||
echo ""
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
#!/bin/bash
|
||||
|
||||
# log
|
||||
echo "..."
|
||||
echo "Updating Github.io page"
|
||||
echo "..."
|
||||
# Generate index.html and /temp assets for GH Pages branch
|
||||
grunt build-gh-pages
|
||||
# Create temporary copy of index file
|
||||
cp index.html index-temp.html
|
||||
# Checkout to `gh-pages` branch
|
||||
git checkout -B gh-pages origin/gh-pages
|
||||
git pull -r origin gh-pages
|
||||
# Replace current files with temporary files
|
||||
mv index-temp.html index.html
|
||||
cp node_modules/bootstrap/dist/css/bootstrap.min.css css/bootstrap.min.css
|
||||
mv temp/bootstrap-slider.css css/bootstrap-slider.css
|
||||
mv temp/bootstrap-slider.js js/bootstrap-slider.js
|
||||
# Remove /temp directory
|
||||
rm -rf temp
|
||||
# Stage new files for commit
|
||||
git add index.html css/bootstrap-slider.css js/bootstrap-slider.js css/bootstrap.min.css
|
||||
# Create commit with new files
|
||||
git commit -m "updates"
|
||||
# Push new source code to gh-pages branch
|
||||
git push origin gh-pages:gh-pages -f
|
||||
# Switch back to master branch
|
||||
git checkout master
|
||||
# log
|
||||
echo "..."
|
||||
echo "Github.io page updated"
|
||||
echo "..."
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,44 @@
|
|||
/*! =========================================================
|
||||
* bootstrap-slider.js
|
||||
*
|
||||
* Maintainers:
|
||||
* Kyle Kemp
|
||||
* - Twitter: @seiyria
|
||||
* - Github: seiyria
|
||||
* Rohit Kalkur
|
||||
* - Twitter: @Rovolutionary
|
||||
* - Github: rovolution
|
||||
*
|
||||
* =========================================================
|
||||
*
|
||||
* bootstrap-slider is released under the MIT License
|
||||
* Copyright (c) 2019 Kyle Kemp, Rohit Kalkur, and contributors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person
|
||||
* obtaining a copy of this software and associated documentation
|
||||
* files (the "Software"), to deal in the Software without
|
||||
* restriction, including without limitation the rights to use,
|
||||
* copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the
|
||||
* Software is furnished to do so, subject to the following
|
||||
* conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be
|
||||
* included in all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
* OTHER DEALINGS IN THE SOFTWARE.
|
||||
*
|
||||
* ========================================================= */
|
||||
|
||||
@import '../../node_modules/bootstrap/less/variables.less'; // Bootstrap variables
|
||||
@import '../../node_modules/bootstrap/less/mixins.less'; // Bootstrap mixins
|
||||
|
||||
@import 'variables.less'; // slider-specific variables
|
||||
@import 'rules.less'; // slider-specific rules
|
||||
|
|
@ -0,0 +1,251 @@
|
|||
.slider {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
&.slider-horizontal {
|
||||
width: @slider-horizontal-width;
|
||||
height: @slider-line-height;
|
||||
.slider-track {
|
||||
height: (@slider-line-height/2);
|
||||
width: 100%;
|
||||
margin-top: (-@slider-line-height/4);
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
.slider-selection, .slider-track-low, .slider-track-high {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.slider-tick,
|
||||
.slider-handle {
|
||||
margin-left: (-@slider-line-height/2);
|
||||
&.triangle {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
border-width: 0 (@slider-line-height/2) (@slider-line-height/2) (@slider-line-height/2);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom-color: @slider-primary-bottom;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.slider-tick-container {
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.slider-tick-label-container {
|
||||
white-space: nowrap;
|
||||
margin-top: @slider-line-height;
|
||||
|
||||
.slider-tick-label {
|
||||
padding-top: @slider-line-height * .2;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.tooltip {
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
&.slider-rtl {
|
||||
.slider-track {
|
||||
left: initial;
|
||||
right: 0;
|
||||
}
|
||||
.slider-tick,
|
||||
.slider-handle {
|
||||
margin-left: initial;
|
||||
margin-right: (-@slider-line-height/2);
|
||||
}
|
||||
.slider-tick-container {
|
||||
left: initial;
|
||||
right: 0;
|
||||
}
|
||||
.tooltip {
|
||||
-ms-transform: translateX(+50%);
|
||||
transform: translateX(+50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.slider-vertical {
|
||||
height: @slider-vertical-height;
|
||||
width: @slider-line-height;
|
||||
.slider-track {
|
||||
width: (@slider-line-height/2);
|
||||
height: 100%;
|
||||
left: 25%;
|
||||
top: 0;
|
||||
}
|
||||
.slider-selection {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.slider-track-low, .slider-track-high {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.slider-tick,
|
||||
.slider-handle {
|
||||
margin-top: (-@slider-line-height/2);
|
||||
&.triangle {
|
||||
border-width: (@slider-line-height/2) 0 (@slider-line-height/2) (@slider-line-height/2);
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border-left-color: @slider-primary-bottom;
|
||||
border-right-color: @slider-primary-bottom;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.slider-tick-label-container {
|
||||
white-space: nowrap;
|
||||
|
||||
.slider-tick-label {
|
||||
padding-left: @slider-line-height * .2;
|
||||
}
|
||||
}
|
||||
.tooltip {
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&.slider-rtl {
|
||||
.slider-track {
|
||||
left: initial;
|
||||
right: 25%;
|
||||
}
|
||||
.slider-selection {
|
||||
left: initial;
|
||||
right: 0;
|
||||
}
|
||||
.slider-tick,
|
||||
.slider-handle {
|
||||
&.triangle {
|
||||
border-width: (@slider-line-height/2) (@slider-line-height/2) (@slider-line-height/2) 0;
|
||||
}
|
||||
}
|
||||
.slider-tick-label-container {
|
||||
.slider-tick-label {
|
||||
padding-left: initial;
|
||||
padding-right: @slider-line-height * .2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.slider-disabled {
|
||||
.slider-handle {
|
||||
#gradient > .vertical(@slider-gray-2, @slider-gray-1);
|
||||
}
|
||||
.slider-track {
|
||||
#gradient > .vertical(@slider-gray-3, @slider-gray-4);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
.tooltip {
|
||||
pointer-events: none;
|
||||
&.top {
|
||||
margin-top: -36px;
|
||||
}
|
||||
}
|
||||
.tooltip-inner {
|
||||
white-space: nowrap;
|
||||
max-width: none;
|
||||
}
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.slider-track {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
#gradient > .vertical(@slider-gray-5, @slider-gray-6);
|
||||
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.slider-selection {
|
||||
position: absolute;
|
||||
#gradient > .vertical(@slider-gray-6, @slider-gray-5);
|
||||
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
|
||||
.box-sizing(border-box);
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.slider-selection.tick-slider-selection {
|
||||
#gradient > .vertical(@slider-secondary-top, @slider-secondary-bottom);
|
||||
}
|
||||
.slider-track-low, .slider-track-high {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
.box-sizing(border-box);
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.slider-handle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: @slider-line-height;
|
||||
height: @slider-line-height;
|
||||
background-color: @slider-primary;
|
||||
#gradient > .vertical(@slider-primary-top, @slider-primary-bottom);
|
||||
filter: none;
|
||||
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
|
||||
border: 0px solid transparent;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.round {
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.triangle {
|
||||
background: transparent none;
|
||||
}
|
||||
&.custom {
|
||||
background: transparent none;
|
||||
&::before{
|
||||
line-height: @slider-line-height;
|
||||
font-size: 20px;
|
||||
content: '\2605'; //unicode star character
|
||||
color: @slider-unicode-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slider-tick {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
width: @slider-line-height;
|
||||
height: @slider-line-height;
|
||||
#gradient.vertical(@slider-gray-6, @slider-gray-5);
|
||||
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
|
||||
.box-sizing(border-box);
|
||||
filter: none;
|
||||
opacity: 0.8;
|
||||
border: 0px solid transparent;
|
||||
&.round {
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.triangle {
|
||||
background: transparent none;
|
||||
}
|
||||
&.custom {
|
||||
background: transparent none;
|
||||
&::before{
|
||||
line-height: @slider-line-height;
|
||||
font-size: 20px;
|
||||
content: '\2605'; //unicode star character
|
||||
color: @slider-unicode-color;
|
||||
}
|
||||
}
|
||||
&.in-selection {
|
||||
#gradient > .vertical(@slider-secondary-top, @slider-secondary-bottom);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
@slider-line-height: @line-height-computed;
|
||||
@slider-horizontal-width: 210px;
|
||||
@slider-vertical-height: 210px;
|
||||
|
||||
// Primary colors
|
||||
// @brand-primary is set in ../../node_modules/bootstrap/less/variables.less and evaluates to #337ab7
|
||||
@slider-primary: @brand-primary;
|
||||
@slider-primary-top: @slider-primary;
|
||||
@slider-primary-bottom: darken(@slider-primary, 5%);
|
||||
@slider-secondary-top: saturate(lighten(@slider-primary, 28%), 20%);
|
||||
@slider-secondary-bottom: saturate(lighten(@slider-primary, 23%), 2%);
|
||||
|
||||
// grays for slider channel and disabled states
|
||||
@slider-gray-1: #BEBEBE;
|
||||
@slider-gray-2: #DFDFDF;
|
||||
@slider-gray-3: #E5E5E5;
|
||||
@slider-gray-4: #E9E9E9;
|
||||
@slider-gray-5: #F5F5F5;
|
||||
@slider-gray-6: #F9F9F9;
|
||||
|
||||
// unicode color for demo page
|
||||
@slider-unicode-color: #726204;
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
@mixin slider_background-image ($colorstart:#F5F5F5, $colorend:#F9F9F9, $backcolor: #F7F7F7) {
|
||||
background-color: $backcolor;
|
||||
background-image: -moz-linear-gradient(top, $colorstart, $colorend);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($colorstart), to($colorend));
|
||||
background-image: -webkit-linear-gradient(top, $colorstart, $colorend);
|
||||
background-image: -o-linear-gradient(top, $colorstart, $colorend);
|
||||
background-image: linear-gradient(to bottom, $colorstart, $colorend);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$colorstart}', endColorstr='#{$colorend}',GradientType=0);
|
||||
}
|
||||
@mixin slider_box-sizing ($value) {
|
||||
-webkit-box-sizing: $value;
|
||||
-moz-box-sizing: $value;
|
||||
box-sizing: $value;
|
||||
}
|
||||
@mixin slider_box-shadow ($value...) {
|
||||
-webkit-box-shadow: $value;
|
||||
-moz-box-shadow: $value;
|
||||
box-shadow: $value;
|
||||
}
|
||||
@mixin slider_border-radius ($value) {
|
||||
-webkit-border-radius: $value;
|
||||
-moz-border-radius: $value;
|
||||
border-radius: $value;
|
||||
}
|
||||
|
|
@ -0,0 +1,251 @@
|
|||
.slider {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
&.slider-horizontal {
|
||||
width: $slider-horizontal-width;
|
||||
height: $slider-line-height;
|
||||
.slider-track {
|
||||
height: $slider-line-height/2;
|
||||
width: 100%;
|
||||
margin-top: -$slider-line-height/4;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
.slider-selection, .slider-track-low, .slider-track-high {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.slider-tick,
|
||||
.slider-handle {
|
||||
margin-left: -$slider-line-height/2;
|
||||
&.triangle {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-width: 0 $slider-line-height/2 $slider-line-height/2 $slider-line-height/2;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom-color: $slider-primary-bottom;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.slider-tick-container {
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.slider-tick-label-container {
|
||||
white-space: nowrap;
|
||||
margin-top: $slider-line-height;
|
||||
.slider-tick-label {
|
||||
display: inline-block;
|
||||
padding-top: $slider-line-height * 1.2;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
&.slider-rtl {
|
||||
.slider-track {
|
||||
left: initial;
|
||||
right: 0;
|
||||
}
|
||||
.slider-tick,
|
||||
.slider-handle {
|
||||
margin-left: initial;
|
||||
margin-right: -$slider-line-height/2;
|
||||
}
|
||||
.slider-tick-container {
|
||||
left: initial;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.slider-vertical {
|
||||
height: $slider-vertical-height;
|
||||
width: $slider-line-height;
|
||||
.slider-track {
|
||||
width: $slider-line-height/2;
|
||||
height: 100%;
|
||||
left: 25%;
|
||||
top: 0;
|
||||
}
|
||||
.slider-selection {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.slider-track-low, .slider-track-high {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.slider-tick,
|
||||
.slider-handle {
|
||||
margin-top: -$slider-line-height/2;
|
||||
&.triangle {
|
||||
border-width: $slider-line-height/2 0 $slider-line-height/2 $slider-line-height/2;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border-left-color: $slider-primary-bottom;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.slider-tick-label-container {
|
||||
white-space: nowrap;
|
||||
.slider-tick-label {
|
||||
padding-left: $slider-line-height * .2;
|
||||
}
|
||||
}
|
||||
&.slider-rtl {
|
||||
.slider-track {
|
||||
left: initial;
|
||||
right: 25%;
|
||||
}
|
||||
.slider-selection {
|
||||
left: initial;
|
||||
right: 0;
|
||||
}
|
||||
.slider-tick,
|
||||
.slider-handle {
|
||||
&.triangle {
|
||||
border-width: $slider-line-height/2 $slider-line-height/2 $slider-line-height/2 0;
|
||||
}
|
||||
}
|
||||
.slider-tick-label-container {
|
||||
.slider-tick-label {
|
||||
padding-left: initial;
|
||||
padding-right: $slider-line-height * .2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.slider-disabled {
|
||||
.slider-handle {
|
||||
@include slider_background-image($slider-gray-2, $slider-gray-1, mix($slider-gray-2, $slider-gray-1));
|
||||
}
|
||||
.slider-track {
|
||||
@include slider_background-image($slider-gray-3, $slider-gray-4, mix($slider-gray-3, $slider-gray-4));
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
.tooltip-inner {
|
||||
white-space: nowrap;
|
||||
max-width: none;
|
||||
}
|
||||
.tooltip {
|
||||
pointer-events: none;
|
||||
|
||||
&.top {
|
||||
margin-top: -36px;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
white-space: nowrap;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-track {
|
||||
@include slider_background-image($slider-gray-5, $slider-gray-6, mix($slider-gray-5, $slider-gray-6));
|
||||
@include slider_box-shadow(inset 0 1px 2px rgba(0,0,0,0.1));
|
||||
@include slider_border-radius($slider-border-radius);
|
||||
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slider-selection {
|
||||
@include slider_background-image($slider-gray-6, $slider-gray-5, mix($slider-gray-6, $slider-gray-5));
|
||||
@include slider_box-shadow(inset 0 -1px 0 rgba(0,0,0,0.15));
|
||||
@include slider_box-sizing(border-box);
|
||||
@include slider_border-radius($slider-border-radius);
|
||||
|
||||
position: absolute;
|
||||
}
|
||||
.slider-selection.tick-slider-selection {
|
||||
@include slider_background-image($slider-secondary-top, $slider-secondary-bottom, mix($slider-secondary-top, $slider-secondary-bottom));
|
||||
}
|
||||
|
||||
.slider-track-low, .slider-track-high {
|
||||
@include slider_box-sizing(border-box);
|
||||
@include slider_border-radius($slider-border-radius);
|
||||
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.slider-handle {
|
||||
@include slider_background-image($slider-primary-top, $slider-primary-bottom, mix($slider-primary-top, $slider-primary-bottom));
|
||||
@include slider_box-shadow(inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05));
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: $slider-line-height;
|
||||
height: $slider-line-height;
|
||||
background-color: $slider-primary;
|
||||
border: 0px solid transparent;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.round {
|
||||
@include slider_border-radius($slider-line-height);
|
||||
}
|
||||
&.triangle {
|
||||
background: transparent none;
|
||||
}
|
||||
&.custom {
|
||||
background: transparent none;
|
||||
&::before{
|
||||
line-height: $slider-line-height;
|
||||
font-size: 20px;
|
||||
content: '\2605'; //unicode star character
|
||||
color: $slider-unicode-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-tick {
|
||||
@include slider_background-image($slider-gray-5, $slider-gray-6, mix($slider-gray-5, $slider-gray-6));
|
||||
@include slider_box-shadow(inset 0 -1px 0 rgba(0,0,0,0.15));
|
||||
@include slider_box-sizing(border-box);
|
||||
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
width: $slider-line-height;
|
||||
height: $slider-line-height;
|
||||
filter: none;
|
||||
opacity: 0.8;
|
||||
border: 0px solid transparent;
|
||||
|
||||
&.round {
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.triangle {
|
||||
background: transparent none;
|
||||
}
|
||||
&.custom {
|
||||
background: transparent none;
|
||||
&::before {
|
||||
line-height: $slider-line-height;
|
||||
font-size: 20px;
|
||||
content: '\2605'; //unicode star character
|
||||
color: $slider-unicode-color;
|
||||
}
|
||||
}
|
||||
&.in-selection {
|
||||
@include slider_background-image($slider-secondary-top, $slider-secondary-bottom, mix($slider-secondary-top, $slider-secondary-bottom));
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
$slider-line-height: 20px !default;
|
||||
$slider-border-radius: 4px !default;
|
||||
$slider-horizontal-width: 210px !default;
|
||||
$slider-vertical-height: 210px !default;
|
||||
|
||||
// Primary colors
|
||||
$slider-primary: null !default;
|
||||
@if variable-exists(brand-primary) {
|
||||
$slider-primary: $brand-primary !default;
|
||||
} @else {
|
||||
$slider-primary: #0480BE !default;
|
||||
}
|
||||
|
||||
$slider-primary-top: $slider-primary !default;
|
||||
$slider-primary-bottom: darken($slider-primary, 5%) !default;
|
||||
$slider-secondary-top: saturate(lighten($slider-primary, 28%), 20%) !default;
|
||||
$slider-secondary-bottom: saturate(lighten($slider-primary, 23%), 2%) !default;
|
||||
|
||||
// grays for slider channel and disabled states
|
||||
$slider-gray-1: #BEBEBE !default;
|
||||
$slider-gray-2: #DFDFDF !default;
|
||||
$slider-gray-3: #E5E5E5 !default;
|
||||
$slider-gray-4: #E9E9E9 !default;
|
||||
$slider-gray-5: #F5F5F5 !default;
|
||||
$slider-gray-6: #F9F9F9 !default;
|
||||
|
||||
// unicode color for demo page
|
||||
$slider-unicode-color: #726204 !default;
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/*! =========================================================
|
||||
* bootstrap-slider.js
|
||||
*
|
||||
* Maintainers:
|
||||
* Kyle Kemp
|
||||
* - Twitter: @seiyria
|
||||
* - Github: seiyria
|
||||
* Rohit Kalkur
|
||||
* - Twitter: @Rovolutionary
|
||||
* - Github: rovolution
|
||||
*
|
||||
* =========================================================
|
||||
*
|
||||
* bootstrap-slider is released under the MIT License
|
||||
* Copyright (c) 2019 Kyle Kemp, Rohit Kalkur, and contributors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person
|
||||
* obtaining a copy of this software and associated documentation
|
||||
* files (the "Software"), to deal in the Software without
|
||||
* restriction, including without limitation the rights to use,
|
||||
* copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the
|
||||
* Software is furnished to do so, subject to the following
|
||||
* conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be
|
||||
* included in all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
* OTHER DEALINGS IN THE SOFTWARE.
|
||||
*
|
||||
* ========================================================= */
|
||||
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "rules";
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
/////////////////////////////////////
|
||||
// Taken from ariya/phantomjs#10522
|
||||
//
|
||||
|
||||
|
||||
Function.prototype.bind = function bind(that) { // .length is 1
|
||||
var target = this;
|
||||
if (typeof target != "function") {
|
||||
throw new TypeError("Function.prototype.bind called on incompatible " + target);
|
||||
}
|
||||
var args = Array.prototype.slice.call(arguments, 1); // for normal call
|
||||
var bound = function () {
|
||||
|
||||
if (this instanceof bound) {
|
||||
|
||||
var result = target.apply(
|
||||
this,
|
||||
args.concat(Array.prototype.slice.call(arguments))
|
||||
);
|
||||
if (Object(result) === result) {
|
||||
return result;
|
||||
}
|
||||
return this;
|
||||
|
||||
} else {
|
||||
return target.apply(
|
||||
that,
|
||||
args.concat(Array.prototype.slice.call(arguments))
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
function Empty() {};
|
||||
if(target.prototype) {
|
||||
Empty.prototype = target.prototype;
|
||||
bound.prototype = new Empty();
|
||||
Empty.prototype = null;
|
||||
}
|
||||
return bound;
|
||||
};
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
describe("Accessibility Tests", function() {
|
||||
var sliderA;
|
||||
var sliderB;
|
||||
|
||||
it("Should have the slider role", function() {
|
||||
sliderA = $('#accessibilitySliderA').slider();
|
||||
sliderB = $('#accessibilitySliderB').slider();
|
||||
var $sliderElementA = $(sliderA.slider('getElement'));
|
||||
var $sliderElementB = $(sliderB.slider('getElement'));
|
||||
|
||||
expect($sliderElementA.find('.min-slider-handle').attr('role')).toBe('slider');
|
||||
expect($sliderElementB.find('.min-slider-handle').attr('role')).toBe('slider');
|
||||
expect($sliderElementB.find('.max-slider-handle').attr('role')).toBe('slider');
|
||||
|
||||
expect($sliderElementA.find('.tooltip-main').attr('role')).toBe('presentation');
|
||||
expect($sliderElementA.find('.tooltip-min').attr('role')).toBe('presentation');
|
||||
expect($sliderElementA.find('.tooltip-max').attr('role')).toBe('presentation');
|
||||
});
|
||||
|
||||
it('Should have an aria-labelledby attribute', function() {
|
||||
sliderA = $('#accessibilitySliderA').slider();
|
||||
sliderB = $('#accessibilitySliderB').slider();
|
||||
|
||||
expect($(sliderA.slider('getElement')).find('.min-slider-handle').attr('aria-labelledby')).toBe('accessibilitySliderLabelA');
|
||||
expect($(sliderB.slider('getElement')).find('.min-slider-handle').attr('aria-labelledby')).toBe('accessibilitySliderLabelA');
|
||||
expect($(sliderB.slider('getElement')).find('.max-slider-handle').attr('aria-labelledby')).toBe('accessibilitySliderLabelB');
|
||||
});
|
||||
|
||||
it('Should have an aria-valuemax and aria-valuemin value', function() {
|
||||
sliderA = $('#accessibilitySliderA').slider({ min: 5, max: 10 });
|
||||
sliderB = $('#accessibilitySliderB').slider({ min: 5, max: 10 });
|
||||
var $sliderElementA = $(sliderA.slider('getElement'));
|
||||
var $sliderElementB = $(sliderB.slider('getElement'));
|
||||
|
||||
expect($sliderElementA.find('.min-slider-handle').attr('aria-valuemin')).toBe('5');
|
||||
expect($sliderElementA.find('.min-slider-handle').attr('aria-valuemax')).toBe('10');
|
||||
expect($sliderElementB.find('.min-slider-handle').attr('aria-valuemin')).toBe('5');
|
||||
expect($sliderElementB.find('.min-slider-handle').attr('aria-valuemax')).toBe('10');
|
||||
expect($sliderElementB.find('.max-slider-handle').attr('aria-valuemin')).toBe('5');
|
||||
expect($sliderElementB.find('.max-slider-handle').attr('aria-valuemax')).toBe('10');
|
||||
});
|
||||
|
||||
it('Should have an aria-valuenow with the current value', function() {
|
||||
sliderA = $('#accessibilitySliderA').slider({ min: 5, value: 7 });
|
||||
sliderB = $('#accessibilitySliderB').slider({ min: 5, value: [2, 8] });
|
||||
var $sliderElementA = $(sliderA.slider('getElement'));
|
||||
var $sliderElementB = $(sliderB.slider('getElement'));
|
||||
|
||||
expect($sliderElementA.find('.min-slider-handle').attr('aria-valuenow')).toBe('7');
|
||||
expect($sliderElementB.find('.min-slider-handle').attr('aria-valuenow')).toBe('5');
|
||||
expect($sliderElementB.find('.max-slider-handle').attr('aria-valuenow')).toBe('8');
|
||||
|
||||
// Change the value and check if aria-valuenow is still the same
|
||||
sliderA.slider('setValue', 1);
|
||||
sliderB.slider('setValue', [4, 9]);
|
||||
|
||||
expect($sliderElementA.find('.min-slider-handle').attr('aria-valuenow')).toBe('5');
|
||||
expect($sliderElementB.find('.min-slider-handle').attr('aria-valuenow')).toBe('5');
|
||||
expect($sliderElementB.find('.max-slider-handle').attr('aria-valuenow')).toBe('9');
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(sliderA) { sliderA.slider('destroy'); }
|
||||
if(sliderB) { sliderB.slider('destroy'); }
|
||||
});
|
||||
|
||||
});
|
||||
114
bower_components/seiyria-bootstrap-slider/test/specs/AriaValueTextFormatterSpec.js
vendored
Normal file
114
bower_components/seiyria-bootstrap-slider/test/specs/AriaValueTextFormatterSpec.js
vendored
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
describe("Aria-valuetext Tests", function() {
|
||||
it("Sets the aria-valuetext to 'formatter' value", function() {
|
||||
var textValArrayA = new Array('Monday','Wednesday','Friday');
|
||||
var tooltipFormatterA = function(value) {
|
||||
var arrActiveValueA = value;
|
||||
return textValArrayA[arrActiveValueA-1];
|
||||
};
|
||||
|
||||
//Formatter is used
|
||||
var testSliderA = $("#accessibilitySliderA").slider({
|
||||
formatter : tooltipFormatterA
|
||||
});
|
||||
testSliderA.slider('setValue', 2);
|
||||
|
||||
var tooltipMessageA = $("#accessibilitySliderA").prev(".slider").children(".min-slider-handle").attr("aria-valuetext");
|
||||
var expectedMessageA = tooltipFormatterA(2);
|
||||
expect(tooltipMessageA).toBe(expectedMessageA);
|
||||
|
||||
$("#accessibilitySliderA").slider('destroy');
|
||||
});
|
||||
|
||||
it("Does not use aria-valuetext if 'formatter' is not used", function() {
|
||||
|
||||
//Formatter is not used
|
||||
var testSliderB = $("#accessibilitySliderB").slider({});
|
||||
testSliderB.slider('setValue', 1);
|
||||
|
||||
var ariaValueTextB = $("#accessibilitySliderB").prev(".slider").children(".min-slider-handle").attr("aria-valuetext");
|
||||
expect(ariaValueTextB).not.toBeDefined();
|
||||
|
||||
$("#accessibilitySliderB").slider('destroy');
|
||||
});
|
||||
|
||||
it("aria-valuetext if 'formatter' is used and has min & max value", function() {
|
||||
var textValArrayC = new Array('Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday');
|
||||
var tooltipFormatterC = function(value) {
|
||||
if(value[1]){
|
||||
var arrActiveValueC0 = value[0];
|
||||
var arrActiveValueC1 = value[1];
|
||||
return [ textValArrayC[arrActiveValueC0-1], textValArrayC[arrActiveValueC1-1] ];
|
||||
} else {
|
||||
var arrActiveValueC = value;
|
||||
return textValArrayC[arrActiveValueC-1];
|
||||
}
|
||||
};
|
||||
|
||||
//Formatter is used for ranges
|
||||
var testSliderC = $("#accessibilitySliderC").slider({
|
||||
range: true,
|
||||
formatter : tooltipFormatterC
|
||||
});
|
||||
var valuesToSet = [2,4];
|
||||
testSliderC.slider('setValue', valuesToSet);
|
||||
var expectedMessageC = tooltipFormatterC([2,4]);
|
||||
var ttminMessage = $("#accessibilitySliderC").prev(".slider").children(".min-slider-handle").attr("aria-valuetext");
|
||||
var ttmaxMessage = $("#accessibilitySliderC").prev(".slider").children(".max-slider-handle").attr("aria-valuetext");
|
||||
expect(ttminMessage).toBe(expectedMessageC[0]);
|
||||
expect(ttmaxMessage).toBe(expectedMessageC[1]);
|
||||
|
||||
$('#accessibilitySliderC').slider('destroy');
|
||||
});
|
||||
|
||||
describe("Unset 'aria-valuetext' attribute when value can be represented as a number", function() {
|
||||
var $testSliderC;
|
||||
var dayOfWeek;
|
||||
|
||||
var dayFormatter = function(value) {
|
||||
if (value[1]) {
|
||||
return [ dayOfWeek[value[0]-1], dayOfWeek[value[1]-1] ];
|
||||
}
|
||||
return dayOfWeek[value-1];
|
||||
};
|
||||
|
||||
beforeEach(function() {
|
||||
dayOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
|
||||
$testSliderC = $('#accessibilitySliderC').slider({
|
||||
id: 'testAccessbilitySlider',
|
||||
min: 1,
|
||||
max: 7,
|
||||
formatter : dayFormatter
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if ($testSliderC) {
|
||||
$testSliderC.slider('destroy');
|
||||
}
|
||||
});
|
||||
|
||||
it("Should unset 'aria-valuetext' attribute", function() {
|
||||
dayOfWeek[0] = '1';
|
||||
|
||||
var valueToSet = 1;
|
||||
$testSliderC.slider('setValue', valueToSet);
|
||||
var ariaValueText = $('#testAccessbilitySlider').find('.min-slider-handle')[0].getAttribute('aria-valuetext');
|
||||
expect(ariaValueText).toBeNull();
|
||||
});
|
||||
|
||||
it("Should unset 'aria-valuetext' attributes for range sliders", function() {
|
||||
dayOfWeek[0] = '1';
|
||||
dayOfWeek[6] = '7';
|
||||
$testSliderC.slider('setAttribute', 'range', true);
|
||||
$testSliderC.slider('refresh');
|
||||
|
||||
var valuesToSet = [1, 7];
|
||||
$testSliderC.slider('setValue', valuesToSet);
|
||||
var ariaValueText1 = $('#testAccessbilitySlider').find('.min-slider-handle')[0].getAttribute('aria-valuetext');
|
||||
var ariaValueText2 = $('#testAccessbilitySlider').find('.max-slider-handle')[0].getAttribute('aria-valuetext');
|
||||
expect(ariaValueText1).toBeNull();
|
||||
expect(ariaValueText2).toBeNull();
|
||||
});
|
||||
});
|
||||
});
|
||||
21
bower_components/seiyria-bootstrap-slider/test/specs/AutoRegisterDataProvideSpec.js
vendored
Normal file
21
bower_components/seiyria-bootstrap-slider/test/specs/AutoRegisterDataProvideSpec.js
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
describe("Auto register data-provide Tests", function() {
|
||||
it("checks that the autoregister Slider was automatically registerd", function() {
|
||||
var $el = $("#autoregisterSlider");
|
||||
|
||||
var sliderInstancesExists = $el.siblings().is(".slider");
|
||||
expect(sliderInstancesExists).toBeTruthy();
|
||||
|
||||
var sliderInstancesCount = $el.siblings(".slider").length;
|
||||
expect(sliderInstancesCount).toEqual(1);
|
||||
});
|
||||
|
||||
it("checks that the autoregistered Slider can be accessed", function() {
|
||||
var $el = $("#autoregisterSlider");
|
||||
|
||||
expect($el.slider('getValue')).toBe(1);
|
||||
|
||||
$el.slider('setValue', 2);
|
||||
|
||||
expect($el.slider('getValue')).toBe(2);
|
||||
});
|
||||
});
|
||||
73
bower_components/seiyria-bootstrap-slider/test/specs/ConflictingOptionsSpec.js
vendored
Normal file
73
bower_components/seiyria-bootstrap-slider/test/specs/ConflictingOptionsSpec.js
vendored
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
/*
|
||||
*************************
|
||||
|
||||
Conflicting Options Tests
|
||||
|
||||
*************************
|
||||
|
||||
This spec has tests for checking if two or more options do not conflict with one another
|
||||
As option conflicts are reported and resolved, write tests for them here.
|
||||
This will help ensure that they are accounted for and do not arise again.
|
||||
*/
|
||||
describe("Conflicting Options Tests", function() {
|
||||
|
||||
var testSlider;
|
||||
|
||||
it("Should have the value zero when it is slided to zero", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
value: 0,
|
||||
step: 1
|
||||
});
|
||||
var flag = false;
|
||||
var mouse = document.createEvent('MouseEvents');
|
||||
|
||||
testSlider.on('slide', function(slideEvt) {
|
||||
expect(slideEvt.value).toBe(0);
|
||||
flag = true;
|
||||
});
|
||||
|
||||
testSlider.data('slider')._mousemove(mouse);
|
||||
expect(flag).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should set the `precision` to be the number of digits after the decimal of the `step` (assuming no `precision` is specified)", function() {
|
||||
// Create Slider
|
||||
testSlider = $("#testSlider1").slider({
|
||||
value: 8.115,
|
||||
step: 0.01
|
||||
});
|
||||
// Retrieve slider value
|
||||
var value = testSlider.slider("getValue");
|
||||
// Run tests
|
||||
expect(value).toBe(8.12);
|
||||
});
|
||||
|
||||
it("should properly allow for a slider that has `range` set to true and `reversed` set to true", function() {
|
||||
// Create Slider
|
||||
testSlider = new Slider("#testSlider1", {
|
||||
reversed: true,
|
||||
range: true,
|
||||
min: -5,
|
||||
max: 20
|
||||
});
|
||||
|
||||
// Set Value
|
||||
testSlider.setValue([-5, 20]);
|
||||
|
||||
// Assert that selection slider section is 100% of slider width
|
||||
var selectedSectionWidth = testSlider.sliderElem.querySelector(".slider-selection").style.width;
|
||||
expect(selectedSectionWidth).toBe("100%");
|
||||
|
||||
// Cleanup
|
||||
testSlider.destroy();
|
||||
testSlider = null;
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
testSlider.slider('destroy');
|
||||
testSlider = null;
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,416 @@
|
|||
describe("'destroy()' Method tests", function() {
|
||||
var testSlider;
|
||||
|
||||
function createSliderFn() {
|
||||
testSlider = new Slider("#testSlider1", {
|
||||
id: "destroyMethodTestSlider"
|
||||
});
|
||||
}
|
||||
|
||||
it("removes the extra DOM elements associated with a slider", function() {
|
||||
|
||||
createSliderFn();
|
||||
|
||||
testSlider.destroy();
|
||||
|
||||
var sliderParentElement = $("#testSlider1").parent('div.slider').length;
|
||||
var sliderChildrenElements = $("#testSlider1").siblings('div.slider-track, div.tooltip').length;
|
||||
|
||||
expect(sliderParentElement).toBe(0);
|
||||
expect(sliderChildrenElements).toBe(0);
|
||||
});
|
||||
|
||||
describe("Destroy slider instance associated with <input> element", function() {
|
||||
var sourceJS = "temp/bootstrap-slider.js";
|
||||
var defaultNamespace = 'slider';
|
||||
var alternateNamespace = 'bootstrapSlider';
|
||||
|
||||
it("Should remove the instance associated with the <input> DOM element", function() {
|
||||
var $testSlider = $('#testSlider1').slider();
|
||||
|
||||
var sliderInst = $testSlider.data(defaultNamespace);
|
||||
expect(sliderInst).toBeTruthy();
|
||||
|
||||
$testSlider.slider('destroy');
|
||||
sliderInst = $testSlider.data(defaultNamespace);
|
||||
expect(sliderInst).toBeUndefined();
|
||||
});
|
||||
|
||||
describe("Check alternate namespace", function() {
|
||||
|
||||
afterEach(function(done) {
|
||||
$.fn.bootstrapSlider = undefined;
|
||||
$.fn.slider = undefined;
|
||||
|
||||
$.getScript(sourceJS, function() {
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("Should remove the instance associated with the <input> DOM element with alternate namespace", function(done) {
|
||||
$.fn.slider = function() {};
|
||||
|
||||
$.getScript(sourceJS, function() {
|
||||
var $testSlider = $('#testSlider1').bootstrapSlider();
|
||||
|
||||
$testSlider.bootstrapSlider('destroy');
|
||||
|
||||
var sliderInst = $testSlider.data(alternateNamespace);
|
||||
expect(sliderInst).toBeUndefined();
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("unbinds all slider events", function() {
|
||||
var flag, evtName;
|
||||
|
||||
beforeEach(function() {
|
||||
createSliderFn();
|
||||
flag = false;
|
||||
});
|
||||
|
||||
it("unbinds from 'slideStart' event", function() {
|
||||
evtName = 'slideStart';
|
||||
$("#destroyMethodTestSlider").on(evtName, function() {
|
||||
flag = true;
|
||||
});
|
||||
testSlider.destroy();
|
||||
$("#destroyMethodTestSlider").trigger(evtName);
|
||||
expect(flag).toBeFalsy();
|
||||
});
|
||||
|
||||
it("unbinds from 'slide' event", function() {
|
||||
evtName = 'slide';
|
||||
$("#destroyMethodTestSlider").on(evtName, function() {
|
||||
flag = true;
|
||||
});
|
||||
testSlider.destroy();
|
||||
$("#destroyMethodTestSlider").trigger(evtName);
|
||||
expect(flag).toBeFalsy();
|
||||
});
|
||||
|
||||
it("unbinds from 'slideStop' event", function() {
|
||||
evtName = 'slideStop';
|
||||
$("#destroyMethodTestSlider").on(evtName, function() {
|
||||
flag = true;
|
||||
});
|
||||
testSlider.destroy();
|
||||
$("#destroyMethodTestSlider").trigger(evtName);
|
||||
expect(flag).toBeFalsy();
|
||||
});
|
||||
|
||||
it("unbinds from 'slideChange' event", function() {
|
||||
evtName = 'slideChange';
|
||||
$("#destroyMethodTestSlider").on(evtName, function() {
|
||||
flag = true;
|
||||
});
|
||||
testSlider.destroy();
|
||||
$("#destroyMethodTestSlider").trigger(evtName);
|
||||
expect(flag).toBeFalsy();
|
||||
});
|
||||
|
||||
it("unbinds all slider events and allows you to re-create the slider without runtime error", function() {
|
||||
// Setup
|
||||
var createSliderAndBindEvent = function () {
|
||||
$("#testSlider1").bootstrapSlider({
|
||||
min: 0,
|
||||
max: 1000 * 1000,
|
||||
step: 1000
|
||||
});
|
||||
testSlider = $("#testSlider1").data("bootstrapSlider");
|
||||
testSlider.on("slideStop", function() {});
|
||||
};
|
||||
// Destroy existing slider from default bootstrap step
|
||||
testSlider.destroy();
|
||||
|
||||
// Create new Slider
|
||||
createSliderAndBindEvent();
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Re-create Slider and try to re-bind event
|
||||
var throwsRuntimeError = false;
|
||||
|
||||
try {
|
||||
createSliderAndBindEvent();
|
||||
}
|
||||
catch (e) {
|
||||
throwsRuntimeError = true;
|
||||
}
|
||||
|
||||
testSlider.destroy();
|
||||
|
||||
// reCreateSliderAndBindEvent(): Assert error is not thrown
|
||||
expect(throwsRuntimeError).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
describe("DOM event listener removal tests", function() {
|
||||
describe("When tooltips are always hidden for single value sliders", function() {
|
||||
beforeEach(function() {
|
||||
// Create slider
|
||||
testSlider = new Slider("#testSlider1", {
|
||||
id: "destroyMethodTestSlider",
|
||||
tooltip: "hide"
|
||||
});
|
||||
});
|
||||
|
||||
it("does not try to remove 'focus' event listener from handle1", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.handle1, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("focus", undefined, false);
|
||||
});
|
||||
|
||||
it("does not try to remove 'blur' event listener from handle1", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.handle1, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("blur", undefined, false);
|
||||
});
|
||||
|
||||
it("does not try to remove 'mouseenter' event listener from slider", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.sliderElem, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseenter", undefined, false);
|
||||
});
|
||||
|
||||
it("does not try to remove 'mouseleave' event listener from slider", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.sliderElem, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseleave", undefined, false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("When tooltips are always shown for single value sliders", function() {
|
||||
beforeEach(function() {
|
||||
// Create slider
|
||||
testSlider = new Slider("#testSlider1", {
|
||||
id: "destroyMethodTestSlider",
|
||||
tooltip: "always"
|
||||
});
|
||||
});
|
||||
|
||||
it("does not try to remove 'focus' event listener from handle1 when tooltip is always shown for single handle sliders", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.handle1, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("focus", undefined, false);
|
||||
});
|
||||
|
||||
it("does not try to remove 'blur' event listener from handle1 when tooltip is always shown for single handle sliders", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.handle1, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("blur", undefined, false);
|
||||
});
|
||||
|
||||
it("does not try to remove 'mouseenter' event listener from slider is always shown for single handle slider", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.handle1, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("mouseenter", undefined, false);
|
||||
});
|
||||
|
||||
it("does not try to remove 'mouseleave' event listener from slider is always shown for single handle slider", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.sliderElem, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseleave", undefined, false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("When tooltips are always hidden for range sliders", function() {
|
||||
beforeEach(function() {
|
||||
// Create slider
|
||||
testSlider = new Slider("#testSlider1", {
|
||||
id: "destroyMethodTestSlider",
|
||||
tooltip: "always",
|
||||
value: [2,5]
|
||||
});
|
||||
});
|
||||
|
||||
it("does not try to remove 'focus' event listener from handle1", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.handle1, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("focus", undefined, false);
|
||||
});
|
||||
|
||||
it("does not try to remove 'focus' event listener from handle2", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.handle2, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.handle2.removeEventListener).not.toHaveBeenCalledWith("focus", undefined, false);
|
||||
});
|
||||
|
||||
it("does not try to remove 'blur' event listener from handle1", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.handle1, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("blur", undefined, false);
|
||||
});
|
||||
|
||||
it("does not try to remove 'blur' event listener from handle2", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.handle2, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.handle2.removeEventListener).not.toHaveBeenCalledWith("blur", undefined, false);
|
||||
});
|
||||
|
||||
it("does not try to remove 'mouseenter' event listener from slider", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.sliderElem, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseenter", undefined, false);
|
||||
});
|
||||
|
||||
it("does not try to remove 'mouseleave' event listener from slider", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.sliderElem, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseleave", undefined, false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("When tooltips are always shown for range sliders", function() {
|
||||
beforeEach(function() {
|
||||
// Create slider
|
||||
testSlider = new Slider("#testSlider1", {
|
||||
id: "destroyMethodTestSlider",
|
||||
tooltip: "always",
|
||||
value: [2,5]
|
||||
});
|
||||
});
|
||||
|
||||
it("does not try to remove 'focus' event listener from handle1", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.handle1, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("focus", undefined, false);
|
||||
});
|
||||
|
||||
it("does not try to remove 'focus' event listener from handle2", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.handle2, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.handle2.removeEventListener).not.toHaveBeenCalledWith("focus", undefined, false);
|
||||
});
|
||||
|
||||
it("does not try to remove 'blur' event listener from handle1", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.handle1, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("blur", undefined, false);
|
||||
});
|
||||
|
||||
it("does not try to remove 'blur' event listener from handle1 and handle2", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.handle2, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.handle2.removeEventListener).not.toHaveBeenCalledWith("blur", undefined, false);
|
||||
});
|
||||
|
||||
it("does not try to remove 'mouseenter' event listener from slider", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.sliderElem, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseenter", undefined, false);
|
||||
});
|
||||
|
||||
it("does not try to remove 'mouseleave' event listener from slider", function() {
|
||||
// Set up spy on 'removeEventListener'
|
||||
spyOn(testSlider.sliderElem, "removeEventListener");
|
||||
|
||||
// Destroy slider
|
||||
testSlider.destroy();
|
||||
|
||||
// Assert
|
||||
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseleave", undefined, false);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
293
bower_components/seiyria-bootstrap-slider/test/specs/DraggingHandlesSpec.js
vendored
Normal file
293
bower_components/seiyria-bootstrap-slider/test/specs/DraggingHandlesSpec.js
vendored
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
describe("Dragging handles tests", function() {
|
||||
var testSlider;
|
||||
var mouseEventArguments;
|
||||
var tickOffsets;
|
||||
|
||||
// Create mouse events
|
||||
function mouseEvent(type, offset) {
|
||||
var ev = document.createEvent("MouseEvents");
|
||||
mouseEventArguments[0] = type;
|
||||
mouseEventArguments[7] = offset;
|
||||
ev.initMouseEvent.apply(ev, mouseEventArguments);
|
||||
return ev;
|
||||
}
|
||||
|
||||
beforeEach(function() {
|
||||
// Create slider
|
||||
testSlider = new Slider(document.getElementById("testSlider1"), {
|
||||
ticks: [0, 1, 2, 3, 4, 5, 6],
|
||||
value: [4, 5],
|
||||
step: 1,
|
||||
range: true,
|
||||
});
|
||||
// Set up default set of mouse event arguments
|
||||
mouseEventArguments = [
|
||||
'mousemove', // type
|
||||
true, // canBubble
|
||||
true, // cancelable
|
||||
document, // view,
|
||||
0, // detail
|
||||
0, // screenX
|
||||
0, // screenY
|
||||
undefined, // clientX
|
||||
testSlider.sliderElem.offsetTop, // clientY,
|
||||
false, // ctrlKey
|
||||
false, // altKey
|
||||
false, // shiftKey
|
||||
false, // metaKey,
|
||||
0, // button
|
||||
null // relatedTarget
|
||||
];
|
||||
// Calculate and store the 'clientX' for each tick in the slider
|
||||
tickOffsets = testSlider.ticks.map(function (tick) {
|
||||
return tick.offsetLeft + testSlider.sliderElem.offsetLeft;
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
if(testSlider instanceof Slider) { testSlider.destroy(); }
|
||||
testSlider = null;
|
||||
}
|
||||
});
|
||||
|
||||
describe("Dragging handles over each other", function() {
|
||||
it("should swap reliably given imprecision", function() {
|
||||
// Create mouse event with position to the left of problem tick
|
||||
var mouseLeft = document.createEvent('MouseEvents');
|
||||
mouseEventArguments[7] = tickOffsets[4]; // clientX
|
||||
mouseLeft.initMouseEvent.apply(mouseLeft, mouseEventArguments);
|
||||
// Create mouse event with position on problem tick
|
||||
var mouseOverlap = document.createEvent('MouseEvents');
|
||||
mouseEventArguments[7] = tickOffsets[5]; // clientX
|
||||
mouseOverlap.initMouseEvent.apply(mouseOverlap, mouseEventArguments);
|
||||
// Create mouse event with position to the right of problem tick
|
||||
var mouseRight = document.createEvent('MouseEvents');
|
||||
mouseEventArguments[7] = tickOffsets[6]; // clientX
|
||||
mouseRight.initMouseEvent.apply(mouseRight, mouseEventArguments);
|
||||
// Same offset as 'mouseLeft'
|
||||
var mouseUp = document.createEvent('MouseEvents');
|
||||
mouseEventArguments[7] = testSlider.ticks[4].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
|
||||
mouseUp.initMouseEvent.apply(mouseUp, mouseEventArguments);
|
||||
// Simulate drag without swapping
|
||||
testSlider.mousedown(mouseLeft);
|
||||
expect(testSlider._state.dragged).toBe(0);
|
||||
expect(testSlider.getValue()).toEqual([4, 5]);
|
||||
// Simulate handle overlap
|
||||
testSlider.mousemove(mouseOverlap);
|
||||
expect(testSlider._state.dragged).toBe(0);
|
||||
expect(testSlider.getValue()).toEqual([5, 5]);
|
||||
// Simulate left over right drag with imprecision in reported percentage
|
||||
testSlider.mousemove(mouseRight);
|
||||
expect(testSlider._state.dragged).toBe(1);
|
||||
expect(testSlider.getValue()).toEqual([5, 6]);
|
||||
// Simulate handle overlap
|
||||
testSlider.mousemove(mouseOverlap);
|
||||
expect(testSlider._state.dragged).toBe(1);
|
||||
expect(testSlider.getValue()).toEqual([5, 5]);
|
||||
// Simulator handle overlap with click
|
||||
testSlider.mousemove(mouseOverlap);
|
||||
testSlider.mousedown(mouseLeft);
|
||||
expect(testSlider._state.dragged).toBe(0);
|
||||
expect(testSlider.getValue()).toEqual([4, 5]);
|
||||
// Simulate right over left drag with imprecision in reported percentage
|
||||
testSlider.mousemove(mouseLeft);
|
||||
expect(testSlider._state.dragged).toBe(0);
|
||||
expect(testSlider.getValue()).toEqual([4, 5]);
|
||||
// End with mouse up
|
||||
testSlider.mouseup(mouseUp);
|
||||
expect(testSlider._state.dragged).toBeNull();
|
||||
expect(testSlider.getValue()).toEqual([4, 5]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Drag handles over each other and use keyboard to move handles over each other", function() {
|
||||
var keyboardEvent;
|
||||
|
||||
function createMouseEvent(type, tickIdx) {
|
||||
var mouseEvent = document.createEvent('MouseEvent');
|
||||
mouseEventArguments[0] = type;
|
||||
mouseEventArguments[7] = tickOffsets[tickIdx];
|
||||
mouseEvent.initMouseEvent.apply(mouseEvent, mouseEventArguments);
|
||||
return mouseEvent;
|
||||
}
|
||||
|
||||
beforeEach(function() {
|
||||
// Create keyboard event
|
||||
keyboardEvent = document.createEvent('Event');
|
||||
keyboardEvent.initEvent('keydown', true, true);
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
keyboardEvent = null;
|
||||
});
|
||||
|
||||
it("should drag and keydown handles properly to the right then back to the left", function() {
|
||||
// Simulate drag without swapping
|
||||
testSlider.mousedown(createMouseEvent('mousedown', 4));
|
||||
expect(testSlider._state.dragged).toBe(0);
|
||||
expect(testSlider.getValue()).toEqual([4, 5]);
|
||||
|
||||
// Simulate handle overlap
|
||||
testSlider.mousemove(createMouseEvent('mousemove', 5));
|
||||
expect(testSlider._state.dragged).toBe(0);
|
||||
expect(testSlider.getValue()).toEqual([5, 5]);
|
||||
|
||||
// Simulate left over right drag
|
||||
testSlider.mousemove(createMouseEvent('mousemove', 6));
|
||||
expect(testSlider._state.dragged).toBe(1);
|
||||
expect(testSlider.getValue()).toEqual([5, 6]);
|
||||
|
||||
// End with mouse up
|
||||
testSlider.mouseup(createMouseEvent('mouseup', 6));
|
||||
expect(testSlider._state.dragged).toBeNull();
|
||||
expect(testSlider.getValue()).toEqual([5, 6]);
|
||||
|
||||
// Now move the handles past each other with the Left arrow key
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 37;
|
||||
|
||||
// Move handle2 to the left with keyboard
|
||||
testSlider.handle2Keydown(keyboardEvent);
|
||||
expect(testSlider._state.keyCtrl).toBeUndefined();
|
||||
expect(testSlider.getValue()).toEqual([5, 5]);
|
||||
|
||||
// Move handle2 to the left again
|
||||
testSlider.handle2Keydown(keyboardEvent);
|
||||
expect(testSlider._state.keyCtrl).toBeUndefined();
|
||||
expect(testSlider.getValue()).toEqual([4, 5]);
|
||||
});
|
||||
|
||||
it("should drag and keydown handles properly to the left then back to the right", function() {
|
||||
// Simulate drag without swapping
|
||||
testSlider.mousedown(createMouseEvent('mousedown', 5));
|
||||
expect(testSlider._state.dragged).toBe(1);
|
||||
expect(testSlider.getValue()).toEqual([4, 5]);
|
||||
|
||||
// Simulate handle overlap
|
||||
testSlider.mousemove(createMouseEvent('mousemove', 4));
|
||||
expect(testSlider._state.dragged).toBe(1);
|
||||
expect(testSlider.getValue()).toEqual([4, 4]);
|
||||
|
||||
// Simulate left over right drag
|
||||
testSlider.mousemove(createMouseEvent('mousemove', 3));
|
||||
expect(testSlider._state.dragged).toBe(0);
|
||||
expect(testSlider.getValue()).toEqual([3, 4]);
|
||||
|
||||
// End with mouse up
|
||||
testSlider.mouseup(createMouseEvent('mouseup', 3));
|
||||
expect(testSlider._state.dragged).toBeNull();
|
||||
expect(testSlider.getValue()).toEqual([3, 4]);
|
||||
|
||||
// Now move the handles past each other with the Right arrow key
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 39;
|
||||
|
||||
// Move handle1 to the right with keyboard
|
||||
testSlider.handle1Keydown(keyboardEvent);
|
||||
expect(testSlider._state.keyCtrl).toBeUndefined();
|
||||
expect(testSlider.getValue()).toEqual([4, 4]);
|
||||
|
||||
// Move handle1 to the right again
|
||||
testSlider.handle1Keydown(keyboardEvent);
|
||||
expect(testSlider._state.keyCtrl).toBeUndefined();
|
||||
expect(testSlider.getValue()).toEqual([4, 5]);
|
||||
});
|
||||
});
|
||||
|
||||
it("Should snap to a tick within tick bounds when using the mouse navigation", function() {
|
||||
|
||||
testSlider.setAttribute('range', true);
|
||||
testSlider.setAttribute('ticks_snap_bounds', 0.45);
|
||||
testSlider.setAttribute('step', 0.1);
|
||||
testSlider.refresh();
|
||||
|
||||
// Create mouse events
|
||||
var mouseDown = document.createEvent("MouseEvents");
|
||||
mouseEventArguments[7] = tickOffsets[1];
|
||||
mouseDown.initMouseEvent.apply(mouseDown, mouseEventArguments);
|
||||
|
||||
var mouseRight = document.createEvent("MouseEvents");
|
||||
mouseEventArguments[7] = tickOffsets[2] - 2;
|
||||
mouseRight.initMouseEvent.apply(mouseRight, mouseEventArguments);
|
||||
|
||||
testSlider.mousedown(mouseDown);
|
||||
expect(testSlider.getValue()).toEqual([0.7, 5]);
|
||||
|
||||
testSlider.mousemove(mouseRight);
|
||||
expect(testSlider.getValue()).toEqual([2, 5]);
|
||||
|
||||
// FIXME: Use 'mouseup' event type
|
||||
// End with mouse up
|
||||
testSlider.mouseup(mouseRight);
|
||||
expect(testSlider.getValue()).toEqual([2, 5]);
|
||||
});
|
||||
|
||||
it("Should trigger change on mouseup", function(done) {
|
||||
var changes = 0;
|
||||
|
||||
testSlider.on('slideStop', function(){
|
||||
expect(changes).toBe(1);
|
||||
expect(testSlider.getValue()).toEqual([2, 5]);
|
||||
done();
|
||||
});
|
||||
|
||||
testSlider.mousedown(mouseEvent('mousedown', tickOffsets[1]));
|
||||
expect(testSlider.getValue()).toEqual([1, 5]);
|
||||
|
||||
testSlider.on('change', function(){
|
||||
changes++;
|
||||
});
|
||||
|
||||
testSlider.mouseup(mouseEvent('mouseup', tickOffsets[2]));
|
||||
});
|
||||
|
||||
describe("Test 'mousemove' and 'mouseup' produces correct results", function() {
|
||||
var $mySlider;
|
||||
var $handle1;
|
||||
|
||||
function arraysEqual(a, b) {
|
||||
if (a === b) { return true; }
|
||||
if (a == null || b == null) { return false; }
|
||||
if (a.length !== b.length) { return false; }
|
||||
|
||||
for (var i = 0; i < a.length; ++i) {
|
||||
if (a[i] !== b[i]) { return false; }
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
it("Last value changed in 'change' event should equal 'mouseup' event value for slider", function(done) {
|
||||
// Change attributes for 'testSlider'
|
||||
testSlider.setAttribute('value', 3);
|
||||
testSlider.setAttribute('range', false);
|
||||
testSlider.refresh();
|
||||
|
||||
$mySlider = $('#testSlider1');
|
||||
|
||||
function createMouseEvent(type, tickIdx) {
|
||||
var mouseEvent = document.createEvent('MouseEvent');
|
||||
mouseEventArguments[0] = type;
|
||||
mouseEventArguments[7] = tickOffsets[tickIdx];
|
||||
mouseEvent.initMouseEvent.apply(mouseEvent, mouseEventArguments);
|
||||
return mouseEvent;
|
||||
}
|
||||
|
||||
var lastValue = 99; // Dummy value
|
||||
$mySlider.on('change', function(eventData) {
|
||||
lastValue = eventData.value.newValue;
|
||||
});
|
||||
|
||||
$mySlider.on('slideStop', function(eventData) {
|
||||
var value = eventData.value;
|
||||
var isEqual = Array.isArray(value) ? arraysEqual(lastValue, value) : value === lastValue;
|
||||
expect(isEqual).toBe(true);
|
||||
done();
|
||||
});
|
||||
|
||||
// Simulate drag and release from tick[1] to tick[4]
|
||||
$handle1 = testSlider.$sliderElem.find('.slider-handle:first');
|
||||
$handle1[0].dispatchEvent(createMouseEvent('mousedown', 1));
|
||||
$handle1[0].dispatchEvent(createMouseEvent('mousemove', 4));
|
||||
$handle1[0].dispatchEvent(createMouseEvent('mouseup', 4));
|
||||
});
|
||||
});
|
||||
});
|
||||
211
bower_components/seiyria-bootstrap-slider/test/specs/ElementDataAttributesSpec.js
vendored
Normal file
211
bower_components/seiyria-bootstrap-slider/test/specs/ElementDataAttributesSpec.js
vendored
Normal file
|
|
@ -0,0 +1,211 @@
|
|||
describe("Element Data Attributes Tests", function() {
|
||||
var slider;
|
||||
|
||||
it("reads the 'data-slider-min' property and sets it on slider", function() {
|
||||
slider = $("#minSlider").slider();
|
||||
slider.slider('setValue', 1);
|
||||
|
||||
var sliderValue = slider.slider('getValue');
|
||||
expect(sliderValue).toBe(5);
|
||||
});
|
||||
|
||||
it("reads the 'data-slider-max' property and sets it on slider", function() {
|
||||
slider = $("#maxSlider").slider();
|
||||
slider.slider('setValue', 10);
|
||||
|
||||
var sliderValue = slider.slider('getValue');
|
||||
expect(sliderValue).toBe(5);
|
||||
});
|
||||
|
||||
it("reads the 'data-slider-step' property and sets it on slider", function() {
|
||||
|
||||
slider = $("#stepSlider").slider();
|
||||
//TODO How do you test this? Maybe manually trigger a slideChange event?
|
||||
expect(true).toBeTruthy();
|
||||
});
|
||||
|
||||
it("reads the 'data-slider-precision' property (which is set to 2) and sets it on slider", function() {
|
||||
slider = $("#precisionSlider").slider();
|
||||
slider.slider('setValue', 8.115);
|
||||
|
||||
var sliderValue = slider.slider('getValue');
|
||||
expect(sliderValue).toBe(8.12);
|
||||
});
|
||||
|
||||
it("reads the 'data-slider-orientation' property and sets it on slider", function() {
|
||||
slider = $("#orientationSlider").slider();
|
||||
|
||||
var orientationIsVertical = $("#orientationSlider").data('slider').options.orientation === 'vertical';
|
||||
expect(orientationIsVertical).toBeTruthy();
|
||||
});
|
||||
|
||||
it("reads the 'data-slider-value' property and sets it on slider", function() {
|
||||
slider = $("#valueSlider").slider();
|
||||
|
||||
var sliderValue = slider.slider('getValue');
|
||||
expect(sliderValue).toBe(5);
|
||||
});
|
||||
|
||||
it("reads the 'data-slider-ticks-labels' property and sets it on slider", function() {
|
||||
slider = $("#sliderWithTickMarksAndLabels").slider();
|
||||
|
||||
var ticksLabelsAreCorrect = arraysEqual($("#sliderWithTickMarksAndLabels").data('slider').options.ticks_labels, ['$0', '$100', '$200', '$300', '$400']);
|
||||
expect(ticksLabelsAreCorrect).toBeTruthy();
|
||||
|
||||
function arraysEqual(a, b) {
|
||||
if (a === b) {return true;}
|
||||
if (a == null || b == null){return false;}
|
||||
if (a.length !== b.length) {return false;}
|
||||
|
||||
for (var i = 0; i < a.length; ++i) {
|
||||
if (a[i] !== b[i]) {return false;}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
it("reads the 'data-slider-selection' property and sets it on slider", function() {
|
||||
slider = $("#selectionSlider").slider({
|
||||
id: "selectionSliderId"
|
||||
});
|
||||
slider.slider('setValue', 0);
|
||||
|
||||
var newSliderValue = slider.slider('getValue');
|
||||
expect(newSliderValue).toBe(0);
|
||||
});
|
||||
|
||||
it("reads the 'data-slider-tooltip' property and sets it on slider", function() {
|
||||
slider = $("#tooltipSlider").slider({
|
||||
id: "tooltipSliderElem"
|
||||
});
|
||||
var tooltipIsHidden = $("#tooltipSliderElem").children("div.tooltip").hasClass("hide");
|
||||
expect(tooltipIsHidden).toBeTruthy();
|
||||
});
|
||||
|
||||
describe("reads the 'data-slider-handle' property and sets it on slider", function() {
|
||||
it("applies 'triangle' class tag to handle", function() {
|
||||
slider = $("#handleSlider").slider({
|
||||
id: "handleSliderElem"
|
||||
});
|
||||
var handleIsSetToTriangle = $("#handleSliderElem div.slider-handle").hasClass("triangle");
|
||||
expect(handleIsSetToTriangle).toBeTruthy();
|
||||
});
|
||||
|
||||
it("applies 'custom' class tag to handle", function() {
|
||||
slider = $("#customHandleSlider").slider({
|
||||
id: "customHandleSliderElem"
|
||||
});
|
||||
var handleIsSetToCustom = $("#customHandleSliderElem div.slider-handle").hasClass("custom");
|
||||
expect(handleIsSetToCustom).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("reads the 'data-slider-reversed' property and sets it on slider", function() {
|
||||
slider = $("#reversedSlider").slider({
|
||||
id: "reversedSliderElem"
|
||||
});
|
||||
slider.slider('setValue', 10);
|
||||
|
||||
var sliderSelectionHeightAtMaxValue = $("#reversedSliderElem div.slider-track").children("div.slider-selection").width();
|
||||
expect(sliderSelectionHeightAtMaxValue).toBe(0);
|
||||
});
|
||||
|
||||
it("reads the 'data-slider-enabled' property and sets it on slider", function() {
|
||||
slider = $("#disabledSlider").slider();
|
||||
var isEnabled = slider.slider('isEnabled');
|
||||
expect(isEnabled).not.toBeTruthy();
|
||||
});
|
||||
|
||||
it("always sets the 'value' attribute of the original <input> element to be the current slider value", function() {
|
||||
var $slider = $("#testSliderGeneric");
|
||||
var val = 7;
|
||||
|
||||
slider = $slider.slider({
|
||||
value: val
|
||||
});
|
||||
var sliderValueAttrib = $slider.val();
|
||||
var valAsString = val.toString();
|
||||
|
||||
expect(sliderValueAttrib).toBe(valAsString);
|
||||
});
|
||||
|
||||
it("always sets the 'data-value' attribute of the original <input> element to be the current slider value", function() {
|
||||
// Setup
|
||||
var sliderInputElem = document.getElementById("testSliderGeneric");
|
||||
var val = 7;
|
||||
|
||||
slider = new Slider(sliderInputElem, {
|
||||
value: val
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(sliderInputElem.dataset.value).toBe( val.toString() );
|
||||
|
||||
// Cleanup
|
||||
slider.destroy();
|
||||
slider = null;
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(slider) { slider.slider('destroy'); }
|
||||
});
|
||||
|
||||
describe("Test element attribute values after calling 'setValue()'", function() {
|
||||
var sliderObj;
|
||||
|
||||
afterEach(function() {
|
||||
if (sliderObj) {
|
||||
sliderObj.destroy();
|
||||
sliderObj = null;
|
||||
}
|
||||
});
|
||||
|
||||
it("The 'data-value' attribute of the original <input> element should equal the new value", function() {
|
||||
// Setup
|
||||
var sliderInputElem = document.getElementById("testSliderGeneric");
|
||||
var newVal = 7;
|
||||
|
||||
sliderObj = new Slider(sliderInputElem, {
|
||||
min: 0,
|
||||
max: 10,
|
||||
value: 5
|
||||
});
|
||||
|
||||
sliderObj.setValue(newVal);
|
||||
|
||||
expect(sliderInputElem.dataset.value).toBe(newVal.toString());
|
||||
});
|
||||
|
||||
it("The 'value' attribute of the original <input> element should equal the new value", function() {
|
||||
var sliderInputElem = document.getElementById("testSliderGeneric");
|
||||
var newVal = 7;
|
||||
|
||||
sliderObj = new Slider(sliderInputElem, {
|
||||
min: 0,
|
||||
max: 10,
|
||||
value: 5
|
||||
});
|
||||
|
||||
sliderObj.setValue(newVal);
|
||||
|
||||
var sliderValueAttrib = sliderInputElem.getAttribute('value');
|
||||
|
||||
expect(sliderValueAttrib).toBe(newVal.toString());
|
||||
});
|
||||
|
||||
it("The 'value' property of the original <input> element should equal the new value", function() {
|
||||
var sliderInputElem = document.getElementById("testSliderGeneric");
|
||||
var newVal = 7;
|
||||
|
||||
sliderObj = new Slider(sliderInputElem, {
|
||||
min: 0,
|
||||
max: 10,
|
||||
value: 5
|
||||
});
|
||||
|
||||
sliderObj.setValue(newVal);
|
||||
|
||||
expect(sliderInputElem.value).toBe(newVal.toString());
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,493 @@
|
|||
describe("Event Tests", function() {
|
||||
var testSlider, flag, mouse;
|
||||
var sliderElem;
|
||||
|
||||
beforeEach(function() {
|
||||
flag = false;
|
||||
mouse = document.createEvent('MouseEvents');
|
||||
});
|
||||
|
||||
describe("JQuery version", function() {
|
||||
beforeEach(function() {
|
||||
testSlider = $("#testSlider2").slider({
|
||||
value: 1
|
||||
});
|
||||
sliderElem = testSlider.slider('getElement');
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
testSlider.slider('destroy');
|
||||
testSlider = null;
|
||||
}
|
||||
sliderElem = null;
|
||||
});
|
||||
|
||||
describe("Mouse Events", function() {
|
||||
var spy;
|
||||
|
||||
beforeEach(function() {
|
||||
spy = jasmine.createSpy('spy');
|
||||
});
|
||||
|
||||
it("'slideStart' event is triggered properly and can be binded to", function(done) {
|
||||
testSlider.on('slideStart', spy);
|
||||
testSlider.data('slider')._mousedown(mouse);
|
||||
setTimeout(function() {
|
||||
expect(spy).toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("'slide' event is triggered properly and can be binded to", function(done) {
|
||||
testSlider.on('slide', spy);
|
||||
testSlider.data('slider')._mousemove(mouse);
|
||||
setTimeout(function() {
|
||||
expect(spy).toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("'slide' event sets the right value on the input", function(done) {
|
||||
testSlider.on('slide', function() {
|
||||
expect(isNaN(testSlider.val())).not.toBeTruthy();
|
||||
done();
|
||||
});
|
||||
testSlider.data('slider')._mousemove(mouse);
|
||||
});
|
||||
|
||||
it("'slide' event value and input value properties are synchronous", function() {
|
||||
testSlider.on('slide', function(e) {
|
||||
expect(e.value.toString()).toEqual(this.value);
|
||||
});
|
||||
testSlider.slider("setValue", 3, true, false);
|
||||
});
|
||||
|
||||
it("'change' event value and input value properties are synchronous", function() {
|
||||
testSlider.on('change', function(e) {
|
||||
expect(e.value.newValue.toString()).toEqual(testSlider.val());
|
||||
});
|
||||
testSlider.slider("setValue", 3, false, true);
|
||||
});
|
||||
|
||||
it("'slideStop' event is triggered properly and can be binded to", function(done) {
|
||||
testSlider.on('slideStop', spy);
|
||||
testSlider.data('slider')._mouseup(mouse);
|
||||
setTimeout(function() {
|
||||
expect(spy).toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("slider should not have duplicate events after calling 'refresh'", function(done) {
|
||||
var numTimesFired = 0;
|
||||
var obj = {
|
||||
addOne: function() {
|
||||
numTimesFired++;
|
||||
}
|
||||
};
|
||||
spyOn(obj, 'addOne').and.callThrough();
|
||||
|
||||
testSlider.on('slideStop', obj.addOne);
|
||||
testSlider.slider('refresh');
|
||||
testSlider.data('slider')._mouseup(mouse);
|
||||
|
||||
setTimeout(function() {
|
||||
expect(numTimesFired).toBe(1);
|
||||
expect(obj.addOne.calls.count()).toBe(1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Disabled Slider Event Tests", function() {
|
||||
var spy;
|
||||
|
||||
beforeEach(function() {
|
||||
testSlider.slider('disable');
|
||||
spy = jasmine.createSpy('spy');
|
||||
});
|
||||
|
||||
it("should not trigger 'slideStart' event when disabled", function(done) {
|
||||
testSlider.on('slideStart', spy);
|
||||
testSlider.data('slider')._mousedown(mouse);
|
||||
window.setTimeout(function() {
|
||||
expect(spy).not.toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("should not trigger 'slide' event when disabled", function(done) {
|
||||
testSlider.on('slide', spy);
|
||||
testSlider.data('slider')._mousemove(mouse);
|
||||
window.setTimeout(function() {
|
||||
expect(spy).not.toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("should not trigger 'slideStop' event when disabled", function(done) {
|
||||
testSlider.on('slideStop', spy);
|
||||
testSlider.data('slider')._mouseup(mouse);
|
||||
window.setTimeout(function() {
|
||||
expect(spy).not.toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("Touch Events", function() {
|
||||
var touch;
|
||||
var spy;
|
||||
var coords;
|
||||
var touchStart;
|
||||
var touchMove;
|
||||
var touchEnd;
|
||||
|
||||
/*
|
||||
list can be either [[x, y], [x, y]] or [x, y]
|
||||
*/
|
||||
function createTouchList(target, list) {
|
||||
if (Array.isArray(list) && list[0] && !Array.isArray(list[0])) {
|
||||
list = [list];
|
||||
}
|
||||
list = list.map(function (entry, index) {
|
||||
var x = entry[0], y = entry[1], id = entry[2] ? entry[2] : index + 1;
|
||||
return createTouch(x, y, target, id);
|
||||
});
|
||||
return document.createTouchList.apply(document, list);
|
||||
}
|
||||
|
||||
function createTouch(x, y, target, id) {
|
||||
return document.createTouch(window, target,
|
||||
id || 1, //identifier
|
||||
x, //pageX / clientX
|
||||
y, //pageY / clientY
|
||||
x, //screenX
|
||||
y //screenY
|
||||
);
|
||||
}
|
||||
|
||||
function initTouchEvent(touchEvent, type, touches) {
|
||||
var touch1 = touches[0];
|
||||
return touchEvent.initTouchEvent(
|
||||
touches, //touches
|
||||
touches, //targetTouches
|
||||
touches, //changedTouches
|
||||
type, //type
|
||||
window, //view
|
||||
touch1.screenX, //screenX
|
||||
touch1.screenY, //screenY
|
||||
touch1.clientX, //clientX
|
||||
touch1.clientY, //clientY
|
||||
false, //ctrlKey
|
||||
false, //altKey
|
||||
false, //shiftKey
|
||||
false //metaKey
|
||||
);
|
||||
}
|
||||
|
||||
function createTouchEvent(elem, type, touches) {
|
||||
var touchEvent = document.createEvent('TouchEvent');
|
||||
if (Array.isArray(touches)) {
|
||||
touches = createTouchList(elem, touches);
|
||||
}
|
||||
|
||||
initTouchEvent(touchEvent, type, touches);
|
||||
return touchEvent;
|
||||
}
|
||||
|
||||
function calcTouchEventCoords(element) {
|
||||
var elementBB = element.getBoundingClientRect();
|
||||
|
||||
return {
|
||||
clientX: elementBB.left,
|
||||
clientY: elementBB.top
|
||||
};
|
||||
}
|
||||
|
||||
beforeEach(function() {
|
||||
touch = document.createEvent('Event');
|
||||
var dummyTouchEvent = document.createEvent('MouseEvents');
|
||||
touch.touches = [dummyTouchEvent];
|
||||
window.ontouchstart = true;
|
||||
spy = jasmine.createSpy('spy');
|
||||
|
||||
coords = calcTouchEventCoords(sliderElem);
|
||||
touchStart = createTouchEvent(sliderElem, 'touchstart', [coords.clientX, coords.clientY]);
|
||||
touchMove = createTouchEvent(sliderElem, 'touchmove', [coords.clientX, coords.clientY]);
|
||||
touchEnd = createTouchEvent(sliderElem, 'touchend', [[0, 0]]);
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
window.ontouchstart = null;
|
||||
});
|
||||
|
||||
it("'slideStart' event is triggered properly and can be binded to", function(done) {
|
||||
testSlider.on('slideStart', spy);
|
||||
|
||||
window.setTimeout(function() {
|
||||
expect(spy).toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
|
||||
sliderElem.dispatchEvent(touchStart);
|
||||
sliderElem.dispatchEvent(touchEnd);
|
||||
});
|
||||
|
||||
it("'slide' event is triggered properly and can be binded to", function(done) {
|
||||
testSlider.on('slide', spy);
|
||||
|
||||
window.setTimeout(function() {
|
||||
expect(spy).toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
|
||||
// Expect to fail if ONLY dispatching 'touchmove' because `preventDefault()` will prevent
|
||||
// the browser from sending the corresponding 'mousemove'.
|
||||
// The 'mousedown' event must happen first via 'touchstart'.
|
||||
sliderElem.dispatchEvent(touchStart);
|
||||
sliderElem.dispatchEvent(touchMove);
|
||||
// Always call 'touchend' to remove any touch event listeners on the document.
|
||||
sliderElem.dispatchEvent(touchEnd);
|
||||
});
|
||||
|
||||
it("'slide' event sets the right value on the input", function(done) {
|
||||
testSlider.on('slide', function() {
|
||||
expect(isNaN(testSlider.val())).not.toBeTruthy();
|
||||
done();
|
||||
});
|
||||
|
||||
sliderElem.dispatchEvent(touchStart);
|
||||
sliderElem.dispatchEvent(touchMove);
|
||||
sliderElem.dispatchEvent(touchEnd);
|
||||
});
|
||||
|
||||
it("'slide' event value and input value properties are synchronous", function() {
|
||||
testSlider.on('slide', function(e) {
|
||||
expect(e.value.toString()).toEqual(testSlider.val());
|
||||
});
|
||||
testSlider.slider("setValue", 3, true, false);
|
||||
});
|
||||
|
||||
it("'change' event value and input value properties are synchronous", function() {
|
||||
testSlider.on('change', function(e) {
|
||||
expect(e.value.newValue.toString()).toEqual(testSlider.val());
|
||||
});
|
||||
testSlider.slider("setValue", 3, false, true);
|
||||
});
|
||||
|
||||
it("'slideStop' event is triggered properly and can be binded to", function(done) {
|
||||
testSlider.on('slideStop', spy);
|
||||
|
||||
window.setTimeout(function() {
|
||||
expect(spy).toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
|
||||
sliderElem.dispatchEvent(touchStart);
|
||||
sliderElem.dispatchEvent(touchMove);
|
||||
sliderElem.dispatchEvent(touchEnd);
|
||||
});
|
||||
|
||||
it("slider should not have duplicate events after calling 'refresh'", function(done) {
|
||||
// FIXME: Should set `flag` to 0 and make sure spy is called only once
|
||||
testSlider.on('slideStop', spy);
|
||||
|
||||
window.setTimeout(function() {
|
||||
expect(spy).toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
|
||||
sliderElem.dispatchEvent(touchStart);
|
||||
sliderElem.dispatchEvent(touchMove);
|
||||
sliderElem.dispatchEvent(touchEnd);
|
||||
testSlider.slider('refresh');
|
||||
});
|
||||
|
||||
it("slider should not bind multiple touchstart events after calling 'refresh'", function(done) {
|
||||
flag = 0;
|
||||
var obj = {
|
||||
addOne: function() {
|
||||
flag++;
|
||||
}
|
||||
};
|
||||
spyOn(obj, 'addOne').and.callThrough();
|
||||
|
||||
touch.initEvent("touchstart", true, true);
|
||||
|
||||
testSlider.on('slideStart', obj.addOne);
|
||||
|
||||
var handleElem = $('#testSlider2').prev('div.slider').find('.slider-handle:first').get(0);
|
||||
handleElem.dispatchEvent(touchStart);
|
||||
handleElem.dispatchEvent(touchMove);
|
||||
handleElem.dispatchEvent(touchEnd);
|
||||
testSlider.slider('refresh');
|
||||
|
||||
window.setTimeout(function() {
|
||||
expect(flag).toBe(1);
|
||||
expect(obj.addOne.calls.count()).toBe(1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Disabled Slider Event Tests", function() {
|
||||
var spy;
|
||||
|
||||
beforeEach(function() {
|
||||
testSlider.slider('disable');
|
||||
spy = jasmine.createSpy('spy');
|
||||
});
|
||||
|
||||
it("should not trigger 'slideStart' event when disabled", function(done) {
|
||||
touch.initEvent("touchstart");
|
||||
|
||||
testSlider.on('slideStart', spy);
|
||||
testSlider.data('slider')._mousedown(touch);
|
||||
|
||||
window.setTimeout(function() {
|
||||
expect(spy).not.toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("should not trigger 'slide' event when disabled", function(done) {
|
||||
touch.initEvent("touchmove");
|
||||
|
||||
testSlider.on('slide', spy);
|
||||
testSlider.data('slider')._mousemove(touch);
|
||||
|
||||
window.setTimeout(function() {
|
||||
expect(spy).not.toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("should not trigger 'slideStop' event when disabled", function(done) {
|
||||
touch.initEvent("touchend");
|
||||
|
||||
testSlider.on('slideStop', spy);
|
||||
testSlider.data('slider')._mouseup(mouse);
|
||||
|
||||
window.setTimeout(function() {
|
||||
expect(spy).not.toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("Enabled/Disabled tests", function() {
|
||||
var spy;
|
||||
|
||||
beforeEach(function() {
|
||||
spy = jasmine.createSpy('spy');
|
||||
});
|
||||
|
||||
it("'slideDisabled' event is triggered properly and can be binded to", function(done) {
|
||||
testSlider.on('slideDisabled', spy);
|
||||
testSlider.slider('disable');
|
||||
window.setTimeout(function() {
|
||||
expect(spy).toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("'slideDisabled' event is triggered properly and can be binded to", function(done) {
|
||||
testSlider.on('slideEnabled', spy);
|
||||
testSlider.slider('disable');
|
||||
testSlider.slider('enable');
|
||||
window.setTimeout(function() {
|
||||
expect(spy).toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("'change' event is triggered properly and can be binded to", function(done) {
|
||||
testSlider.on('change', spy);
|
||||
testSlider.slider("setValue", 3, false, true);
|
||||
window.setTimeout(function() {
|
||||
expect(spy).toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
}); // End of JQuery version tests
|
||||
|
||||
describe("CommonJS version", function() {
|
||||
describe("Event repetition tests", function() {
|
||||
var testSlider, numTimesFired;
|
||||
var testObj;
|
||||
|
||||
beforeEach(function() {
|
||||
testSlider = new Slider("#testSlider2");
|
||||
numTimesFired = 0;
|
||||
testObj = {
|
||||
addOne: function() {
|
||||
numTimesFired++;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
testSlider.destroy();
|
||||
});
|
||||
|
||||
it("'slide' event is triggered only once per slide action", function(done) {
|
||||
spyOn(testObj, 'addOne').and.callThrough();
|
||||
|
||||
testSlider.on('slide', testObj.addOne);
|
||||
testSlider._mousemove(mouse);
|
||||
|
||||
setTimeout(function() {
|
||||
expect(numTimesFired).toBe(1);
|
||||
expect(testObj.addOne.calls.count()).toBe(1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("'slideStart' event is triggered only once per slide action", function(done) {
|
||||
spyOn(testObj, 'addOne').and.callThrough();
|
||||
|
||||
testSlider.on('slideStart', testObj.addOne);
|
||||
testSlider._mousedown(mouse);
|
||||
|
||||
setTimeout(function() {
|
||||
expect(numTimesFired).toBe(1);
|
||||
expect(testObj.addOne.calls.count()).toBe(1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("'slideStop' event is triggered only once per slide action", function(done) {
|
||||
spyOn(testObj, 'addOne').and.callThrough();
|
||||
|
||||
testSlider.on('slideStop', testObj.addOne);
|
||||
testSlider._mouseup(mouse);
|
||||
|
||||
setTimeout(function() {
|
||||
expect(numTimesFired).toBe(1);
|
||||
expect(testObj.addOne.calls.count()).toBe(1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("'change' event is triggered only once per value change action", function(done) {
|
||||
spyOn(testObj, 'addOne').and.callThrough();
|
||||
|
||||
testSlider.on('change', testObj.addOne);
|
||||
testSlider.setValue(3, false, true);
|
||||
|
||||
setTimeout(function() {
|
||||
expect(numTimesFired).toBe(1);
|
||||
expect(testObj.addOne.calls.count()).toBe(1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
}); // End of common JS tests
|
||||
|
||||
}); // End of spec
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
/*
|
||||
******************
|
||||
|
||||
Focus Option Tests
|
||||
|
||||
******************
|
||||
|
||||
This spec has tests for checking proper behavior of the focus option.
|
||||
*/
|
||||
|
||||
describe("Focus Option Tests", function() {
|
||||
|
||||
var testSlider;
|
||||
|
||||
var simulateMousedown = function(target, pos) {
|
||||
var myEvent = document.createEvent("MouseEvents");
|
||||
myEvent.initEvent("mousedown", true, true);
|
||||
myEvent.pageX = pos;
|
||||
myEvent.pageY = pos;
|
||||
target.dispatchEvent(myEvent);
|
||||
};
|
||||
|
||||
it("handle should not be focused after value change when 'focus' is false", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
min : 0,
|
||||
max : 10,
|
||||
value: 0,
|
||||
focus: false,
|
||||
id : "testSlider"
|
||||
});
|
||||
|
||||
var hasFocus;
|
||||
$("#testSlider").find(".min-slider-handle").focus(function() {
|
||||
hasFocus = true;
|
||||
});
|
||||
|
||||
simulateMousedown($("#testSlider").find(".slider-track-high").get(0), 1000);
|
||||
|
||||
expect(hasFocus).toBe(undefined);
|
||||
});
|
||||
|
||||
it("handle should be focused after value change when 'focus' is true", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
min : 0,
|
||||
max : 10,
|
||||
value: 0,
|
||||
focus: true,
|
||||
id : "testSlider"
|
||||
});
|
||||
|
||||
var hasFocus;
|
||||
$("#testSlider").find(".min-slider-handle").focus(function() {
|
||||
hasFocus = true;
|
||||
});
|
||||
|
||||
simulateMousedown($("#testSlider").find(".slider-track-high").get(0), 1000);
|
||||
|
||||
expect(hasFocus).toBe(true);
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if (testSlider) {
|
||||
testSlider.slider("destroy");
|
||||
testSlider = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
768
bower_components/seiyria-bootstrap-slider/test/specs/KeyboardSupportSpec.js
vendored
Normal file
768
bower_components/seiyria-bootstrap-slider/test/specs/KeyboardSupportSpec.js
vendored
Normal file
|
|
@ -0,0 +1,768 @@
|
|||
describe("Keyboard Support Tests", function() {
|
||||
var testSlider,
|
||||
handle1,
|
||||
handle2,
|
||||
keyboardEvent,
|
||||
initialMinVal = 0,
|
||||
initialMaxVal = 10,
|
||||
initialStepVal = 1,
|
||||
initialSliderVal = 5;
|
||||
|
||||
/*
|
||||
Before/After setup
|
||||
*/
|
||||
beforeEach(function() {
|
||||
// Create keyboard event
|
||||
keyboardEvent = document.createEvent("Events");
|
||||
keyboardEvent.initEvent("keydown", true, true);
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) { testSlider.slider('destroy'); }
|
||||
keyboardEvent = null;
|
||||
keyboardEvent = null;
|
||||
});
|
||||
|
||||
/*
|
||||
Begin Tests
|
||||
*/
|
||||
describe("Clicking on slider handle automatically gives it focus", function() {
|
||||
|
||||
beforeEach(function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
id: 'testSlider'
|
||||
});
|
||||
handle1 = $("#testSlider").find(".slider-handle:first");
|
||||
});
|
||||
|
||||
it("clicking on handle1 gives focus to handle1", function(done) {
|
||||
handle1.focus(function() {
|
||||
expect(true).toBeTruthy();
|
||||
done();
|
||||
});
|
||||
handle1.focus();
|
||||
});
|
||||
});
|
||||
|
||||
describe("When slider handle has TAB focus", function() {
|
||||
|
||||
it("should display it's tooltip if 'tooltip' option is set to 'show'", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
id: 'testSlider',
|
||||
tooltip: 'show'
|
||||
});
|
||||
handle1 = $("#testSlider").find(".slider-handle:first");
|
||||
|
||||
// Check for no tooltip before focus
|
||||
var tooltipIsShown = $("#testSlider").find("div.tooltip").hasClass("in");
|
||||
expect(tooltipIsShown).toBeFalsy();
|
||||
|
||||
handle1.focus();
|
||||
|
||||
// Tooltip should be present after focus
|
||||
tooltipIsShown = $("#testSlider").find("div.tooltip").hasClass("in");
|
||||
expect(tooltipIsShown).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should not display it's tooltip if 'tooltip' option is set to 'hide'", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
id: 'testSlider',
|
||||
tooltip: 'hide'
|
||||
});
|
||||
handle1 = $("#testSlider").find(".slider-handle:first");
|
||||
|
||||
// Check for hidden tooltip before focus
|
||||
var tooltipIsHidden = $("#testSlider").children("div.tooltip").hasClass("hide");
|
||||
expect(tooltipIsHidden).toBeTruthy();
|
||||
|
||||
handle1.focus();
|
||||
|
||||
// Tooltip should remain hidden after focus
|
||||
tooltipIsHidden = $("#testSlider").children("div.tooltip").hasClass("hide");
|
||||
expect(tooltipIsHidden).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should not affect the tooltip display if 'tooltip' option is set to 'always'", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
id: 'testSlider',
|
||||
tooltip: 'always'
|
||||
});
|
||||
handle1 = $("#testSlider").find(".slider-handle:first");
|
||||
var $tooltip = $("#testSlider").children("div.tooltip");
|
||||
|
||||
// Check for shown tooltip before focus
|
||||
var tooltipIsShown = $tooltip.hasClass("in");
|
||||
expect(tooltipIsShown).toBeTruthy();
|
||||
|
||||
handle1.focus();
|
||||
|
||||
// Tooltip should remain present after focus
|
||||
tooltipIsShown = $tooltip.hasClass("in");
|
||||
expect(tooltipIsShown).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe("For horizontal sliders where its handle has focus", function() {
|
||||
|
||||
beforeEach(function() {
|
||||
// Initialize the slider
|
||||
testSlider = $("#testSlider1").slider({
|
||||
id: 'testSlider',
|
||||
orientation: 'horizontal',
|
||||
min: initialMinVal,
|
||||
max: initialMaxVal,
|
||||
step: initialStepVal,
|
||||
value: initialSliderVal
|
||||
});
|
||||
// Focus on handle1
|
||||
handle1 = $("#testSlider .min-slider-handle");
|
||||
handle1.focus();
|
||||
});
|
||||
|
||||
it("moves to the left by the 'step' value when the LEFT arrow key is pressed", function(done) {
|
||||
handle1.on("keydown", function() {
|
||||
var sliderValue = $("#testSlider1").slider('getValue');
|
||||
var expectedSliderValue = initialSliderVal - initialStepVal;
|
||||
|
||||
expect(sliderValue).toBe(expectedSliderValue);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 37;
|
||||
handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
|
||||
it("moves to the right by the 'step' value when the RIGHT arrow key is pressed", function(done) {
|
||||
handle1.on("keydown", function() {
|
||||
var sliderValue = $("#testSlider1").slider('getValue');
|
||||
var expectedSliderValue = initialSliderVal + initialStepVal;
|
||||
|
||||
expect(sliderValue).toBe(expectedSliderValue);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 39;
|
||||
handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
|
||||
it("moves to the left by the 'step' value when the DOWN arrow key is pressed", function(done) {
|
||||
handle1.on("keydown", function() {
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
var expectedSliderValue = initialSliderVal - initialStepVal;
|
||||
|
||||
expect(sliderValue).toBe(expectedSliderValue);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 40;
|
||||
handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
|
||||
it("moves to the right by the 'step' value when the UP arrow key is pressed", function(done) {
|
||||
handle1.on("keydown", function() {
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
var expectedSliderValue = initialSliderVal + initialStepVal;
|
||||
|
||||
expect(sliderValue).toBe(expectedSliderValue);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 38;
|
||||
handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
});
|
||||
|
||||
describe("For vertical sliders where its handle has focus", function() {
|
||||
|
||||
beforeEach(function() {
|
||||
// Initialize the slider
|
||||
testSlider = $("#testSlider1").slider({
|
||||
id: 'testSlider',
|
||||
orientation: 'vertical',
|
||||
min: initialMinVal,
|
||||
max: initialMaxVal,
|
||||
step: initialStepVal,
|
||||
value: initialSliderVal
|
||||
});
|
||||
// Focus on handle1
|
||||
handle1 = $("#testSlider").find(".slider-handle:first");
|
||||
handle1.focus();
|
||||
});
|
||||
|
||||
it("moves down by the 'step' value when the LEFT arrow key is pressed", function(done) {
|
||||
handle1.on("keydown", function() {
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
var expectedSliderValue = initialSliderVal - initialStepVal;
|
||||
|
||||
expect(sliderValue).toBe(expectedSliderValue);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 37;
|
||||
handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
|
||||
it("moves up by the 'step' value when the RIGHT arrow key is pressed", function(done) {
|
||||
handle1.on("keydown", function() {
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
var expectedSliderValue = initialSliderVal + initialStepVal;
|
||||
|
||||
expect(sliderValue).toBe(expectedSliderValue);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 39;
|
||||
handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
|
||||
it("moves down by the 'step' value when the DOWN arrow key is pressed", function(done) {
|
||||
handle1.on("keydown", function() {
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
var expectedSliderValue = initialSliderVal - initialStepVal;
|
||||
|
||||
expect(sliderValue).toBe(expectedSliderValue);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 40;
|
||||
handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
|
||||
it("moves up by the 'step' value when the UP arrow key is pressed", function(done) {
|
||||
handle1.on("keydown", function() {
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
var expectedSliderValue = initialSliderVal + initialStepVal;
|
||||
|
||||
expect(sliderValue).toBe(expectedSliderValue);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 38;
|
||||
handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
});
|
||||
|
||||
describe("For a reversed slider (regardless of 'orientation')", function() {
|
||||
|
||||
beforeEach(function() {
|
||||
// Initialize the slider
|
||||
testSlider = $("#testSlider1").slider({
|
||||
id: 'testSlider',
|
||||
reversed: true,
|
||||
min: initialMinVal,
|
||||
max: initialMaxVal,
|
||||
step: initialStepVal,
|
||||
value: initialSliderVal
|
||||
});
|
||||
// Focus on handle1
|
||||
handle1 = $("#testSlider").find(".slider-handle:first");
|
||||
handle1.focus();
|
||||
});
|
||||
|
||||
it("moves to the left by the 'step' value when the LEFT arrow key is pressed", function(done) {
|
||||
handle1.on("keydown", function() {
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
var expectedSliderValue = initialSliderVal - initialStepVal;
|
||||
|
||||
expect(sliderValue).toBe(expectedSliderValue);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 37;
|
||||
handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
|
||||
it("moves to the right by the 'step' value when the RIGHT arrow key is pressed", function(done) {
|
||||
handle1.on("keydown", function() {
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
var expectedSliderValue = initialSliderVal + initialStepVal;
|
||||
|
||||
expect(sliderValue).toBe(expectedSliderValue);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 39;
|
||||
handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
|
||||
it("moves to the left by the 'step' value when the DOWN arrow key is pressed", function(done) {
|
||||
handle1.on("keydown", function() {
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
var expectedSliderValue = initialSliderVal - initialStepVal;
|
||||
|
||||
expect(sliderValue).toBe(expectedSliderValue);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 40;
|
||||
handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
|
||||
it("moves to the right by the 'step' value when the UP arrow key is pressed", function(done) {
|
||||
handle1.on("keydown", function() {
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
var expectedSliderValue = initialSliderVal + initialStepVal;
|
||||
|
||||
expect(sliderValue).toBe(expectedSliderValue);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 38;
|
||||
handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
});
|
||||
|
||||
describe("For a range slider (regardless of 'orientation')", function() {
|
||||
|
||||
beforeEach(function() {
|
||||
// Initialize the slider
|
||||
testSlider = $("#testSlider1").slider({
|
||||
id: 'testSlider',
|
||||
min: initialMinVal,
|
||||
max: initialMaxVal,
|
||||
step: initialStepVal,
|
||||
value: [initialSliderVal, initialSliderVal]
|
||||
});
|
||||
});
|
||||
|
||||
describe("when handle1 tries to overtake handle2 from the left", function() {
|
||||
beforeEach(function() {
|
||||
handle1 = $("#testSlider").find(".slider-handle:first");
|
||||
handle2 = $("#testSlider").find(".slider-handle:last");
|
||||
handle1.focus();
|
||||
});
|
||||
|
||||
it("handle2 moves to the right by the step value", function(done) {
|
||||
handle1.on("keydown", function() {
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
var expectedSliderValue = initialSliderVal + initialStepVal;
|
||||
|
||||
expect(sliderValue[1]).toBe(expectedSliderValue);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 39;
|
||||
handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
|
||||
it("handle1's value remains unchanged", function(done) {
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
|
||||
handle1.on("keydown", function() {
|
||||
expect(sliderValue[0]).toBe(initialSliderVal);
|
||||
done();
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 39;
|
||||
handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
|
||||
it("Should give focus to handle2 after overtaking from the left", function(done) {
|
||||
handle2.on("focus", function() {
|
||||
expect(true).toBe(true);
|
||||
done();
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 39;
|
||||
handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
});
|
||||
|
||||
describe("when handle2 tries to overtake handle1 from the right", function() {
|
||||
beforeEach(function() {
|
||||
handle1 = $("#testSlider").find(".slider-handle:first");
|
||||
handle2 = $("#testSlider").find(".slider-handle:last");
|
||||
handle2.focus();
|
||||
});
|
||||
|
||||
it("handle1 moves to the left by the step value", function(done) {
|
||||
handle2.on("keydown", function() {
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
var expectedSliderValue = initialSliderVal - initialStepVal;
|
||||
|
||||
expect(sliderValue[0]).toBe(expectedSliderValue);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 37;
|
||||
handle2[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
|
||||
it("handle2's value remains unchanged", function(done) {
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
|
||||
handle2.on("keydown", function() {
|
||||
expect(sliderValue[1]).toBe(initialSliderVal);
|
||||
done();
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 37;
|
||||
handle2[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
|
||||
it("Should give focus to handle1 after overtaking from the right", function(done) {
|
||||
handle1.on("focus", function() {
|
||||
expect(true).toBe(true);
|
||||
done();
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 37;
|
||||
handle2[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("For the natural arrow keys", function() {
|
||||
var testCases = [{
|
||||
reversed: false,
|
||||
keyEvent: 37,
|
||||
expectedSliderValue: initialSliderVal - initialStepVal,
|
||||
orientation: 'horizontal',
|
||||
key: 'left'
|
||||
}, {
|
||||
reversed: true,
|
||||
keyEvent: 37,
|
||||
expectedSliderValue: initialSliderVal + initialStepVal,
|
||||
orientation: 'horizontal',
|
||||
key: 'left'
|
||||
}, {
|
||||
reversed: false,
|
||||
keyEvent: 39,
|
||||
expectedSliderValue: initialSliderVal + initialStepVal,
|
||||
orientation: 'horizontal',
|
||||
key: 'right'
|
||||
}, {
|
||||
reversed: true,
|
||||
keyEvent: 39,
|
||||
expectedSliderValue: initialSliderVal - initialStepVal,
|
||||
orientation: 'horizontal',
|
||||
key: 'right'
|
||||
}, {
|
||||
reversed: false,
|
||||
keyEvent: 38,
|
||||
expectedSliderValue: initialSliderVal - initialStepVal,
|
||||
orientation: 'vertical',
|
||||
key: 'up'
|
||||
}, {
|
||||
reversed: true,
|
||||
keyEvent: 38,
|
||||
expectedSliderValue: initialSliderVal + initialStepVal,
|
||||
orientation: 'vertical',
|
||||
key: 'up'
|
||||
}, {
|
||||
reversed: false,
|
||||
keyEvent: 40,
|
||||
expectedSliderValue: initialSliderVal + initialStepVal,
|
||||
orientation: 'vertical',
|
||||
key: 'down'
|
||||
}, {
|
||||
reversed: true,
|
||||
keyEvent: 40,
|
||||
expectedSliderValue: initialSliderVal - initialStepVal,
|
||||
orientation: 'vertical',
|
||||
key: 'down'
|
||||
}];
|
||||
testCases.forEach(function(testCase) {
|
||||
describe("A"+((testCase.reversed)? " reversed" : "")+testCase.orientation+" slider is used for the arrow keys", function() {
|
||||
beforeEach(function() {
|
||||
// Initialize the slider
|
||||
testSlider = $("#testSlider1").slider({
|
||||
id: 'testSlider',
|
||||
min: initialMinVal,
|
||||
max: initialMaxVal,
|
||||
step: initialStepVal,
|
||||
value: initialSliderVal,
|
||||
natural_arrow_keys: true,
|
||||
reversed: testCase.reversed,
|
||||
orientation: testCase.orientation
|
||||
});
|
||||
handle1 = $("#testSlider").find(".slider-handle:first");
|
||||
handle1.focus();
|
||||
});
|
||||
|
||||
it("moves to the "+testCase.key+" by the 'step' value when the "+testCase.key+" arrow key is pressed", function(done) {
|
||||
handle1.on("keydown", function() {
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
var expectedSliderValue = testCase.expectedSliderValue;
|
||||
|
||||
expect(sliderValue).toBe(expectedSliderValue);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = testCase.keyEvent;
|
||||
handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("Navigating slider with the keyboard", function() {
|
||||
var mySlider;
|
||||
var keyboardEvent;
|
||||
var options;
|
||||
var $handle1;
|
||||
var $handle2;
|
||||
|
||||
describe("Does not trigger 'change' event when values do not change", function() {
|
||||
var initialValues = [0, 1];
|
||||
|
||||
beforeEach(function() {
|
||||
options = {
|
||||
id: 'mySlider',
|
||||
min: -100,
|
||||
max: 100,
|
||||
step: 1,
|
||||
value: initialValues,
|
||||
range: true
|
||||
};
|
||||
|
||||
// Create keyboard event
|
||||
keyboardEvent = document.createEvent('Event');
|
||||
keyboardEvent.initEvent('keydown', true, true);
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if (mySlider) {
|
||||
if (mySlider instanceof Slider) { mySlider.destroy(); }
|
||||
mySlider = null;
|
||||
}
|
||||
});
|
||||
|
||||
it("Should not trigger 'change' event", function(done) {
|
||||
var hasSlideStarted = false;
|
||||
var hasChanged = false;
|
||||
options.value = [-100, 0];
|
||||
mySlider = new Slider($('#testSlider1')[0], options);
|
||||
$handle1 = $('#mySlider').find('.slider-handle:first');
|
||||
|
||||
mySlider.on('slideStart', function() {
|
||||
hasSlideStarted = true;
|
||||
});
|
||||
|
||||
mySlider.on('change', function() {
|
||||
hasChanged = true;
|
||||
});
|
||||
|
||||
mySlider.on('slideStop', function() {
|
||||
var value = mySlider.getValue();
|
||||
expect(hasSlideStarted).toBe(true);
|
||||
expect(hasChanged).toBe(false);
|
||||
expect(value).toEqual([-100, 0]);
|
||||
done();
|
||||
});
|
||||
|
||||
// Move the handle to the left
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 37;
|
||||
$handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
|
||||
it("Should not trigger 'change' event via `setValue()`", function(done) {
|
||||
var isSliding = false;
|
||||
var hasChanged = false;
|
||||
mySlider = new Slider($('#testSlider1')[0], options);
|
||||
$handle1 = $('#mySlider').find('.slider-handle:first');
|
||||
|
||||
mySlider.on('slide', function() {
|
||||
isSliding = true;
|
||||
});
|
||||
|
||||
mySlider.on('change', function() {
|
||||
hasChanged = true;
|
||||
});
|
||||
|
||||
// Change both values of the range slider
|
||||
mySlider.setValue(initialValues, true, true);
|
||||
|
||||
window.setTimeout(function() {
|
||||
var value = mySlider.getValue();
|
||||
expect(isSliding).toBe(true);
|
||||
expect(hasChanged).toBe(false);
|
||||
expect(value).toEqual(initialValues);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("Does trigger 'change' event when either value changes for range sliders", function() {
|
||||
|
||||
beforeEach(function() {
|
||||
options = {
|
||||
id: 'mySlider',
|
||||
min: -100,
|
||||
max: 100,
|
||||
step: 1,
|
||||
value: [-10, 10],
|
||||
range: true
|
||||
};
|
||||
|
||||
// Create keyboard event
|
||||
keyboardEvent = document.createEvent('Event');
|
||||
keyboardEvent.initEvent('keydown', true, true);
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if (mySlider) {
|
||||
if (mySlider instanceof Slider) { mySlider.destroy(); }
|
||||
mySlider = null;
|
||||
}
|
||||
});
|
||||
|
||||
it("Should trigger 'change' event when the moving the lower handle", function(done) {
|
||||
var hasSlideStarted = false;
|
||||
var hasChanged = false;
|
||||
|
||||
mySlider = new Slider($('#testSlider1')[0], options);
|
||||
$handle1 = $('#mySlider').find('.slider-handle:first');
|
||||
|
||||
mySlider.on('slideStart', function() {
|
||||
hasSlideStarted = true;
|
||||
});
|
||||
|
||||
mySlider.on('change', function() {
|
||||
hasChanged = true;
|
||||
});
|
||||
|
||||
mySlider.on('slideStop', function() {
|
||||
var value = mySlider.getValue();
|
||||
expect(hasSlideStarted).toBe(true);
|
||||
expect(hasChanged).toBe(true);
|
||||
expect(value).toEqual([-11, 10]);
|
||||
done();
|
||||
});
|
||||
|
||||
// Move the handle to the left
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 37;
|
||||
$handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
|
||||
it("Should trigger 'change' event when moving the upper handle", function(done) {
|
||||
var hasSlideStarted = false;
|
||||
var hasChanged = false;
|
||||
|
||||
mySlider = new Slider($('#testSlider1')[0], options);
|
||||
$handle2 = $('#mySlider').find('.slider-handle:last');
|
||||
|
||||
mySlider.on('slideStart', function() {
|
||||
hasSlideStarted = true;
|
||||
});
|
||||
|
||||
mySlider.on('change', function() {
|
||||
hasChanged = true;
|
||||
});
|
||||
|
||||
mySlider.on('slideStop', function() {
|
||||
var value = mySlider.getValue();
|
||||
expect(hasSlideStarted).toBe(true);
|
||||
expect(hasChanged).toBe(true);
|
||||
expect(value).toEqual([-10, 11]);
|
||||
done();
|
||||
});
|
||||
|
||||
// Move the handle to the right
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 39;
|
||||
$handle2[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
|
||||
it("Should trigger 'change' event when both values change via `setValue()`", function(done) {
|
||||
var isSliding = false;
|
||||
|
||||
mySlider = new Slider($('#testSlider1')[0], options);
|
||||
$handle2 = $('#mySlider').find('.slider-handle:last');
|
||||
|
||||
mySlider.on('slide', function() {
|
||||
isSliding = true;
|
||||
});
|
||||
|
||||
mySlider.on('change', function() {
|
||||
var value = mySlider.getValue();
|
||||
expect(isSliding).toBe(true);
|
||||
expect(value).toEqual([-50, 50]);
|
||||
done();
|
||||
});
|
||||
|
||||
// Change both values of the range slider
|
||||
mySlider.setValue([-50, 50], true, true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("Navigating range sliders with the keyboard", function() {
|
||||
var mySlider;
|
||||
var keyboardEvent;
|
||||
var options;
|
||||
var $handle1;
|
||||
var $handle2;
|
||||
|
||||
describe("Range slider values", function() {
|
||||
|
||||
beforeEach(function() {
|
||||
options = {
|
||||
id: 'mySlider',
|
||||
min: -100,
|
||||
max: 100,
|
||||
step: 1,
|
||||
value: [0, 1],
|
||||
range: true
|
||||
};
|
||||
|
||||
// Create keyboard event
|
||||
keyboardEvent = document.createEvent('Event');
|
||||
keyboardEvent.initEvent('keydown', true, true);
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if (mySlider) {
|
||||
if (mySlider instanceof Slider) { mySlider.destroy(); }
|
||||
mySlider = null;
|
||||
}
|
||||
});
|
||||
|
||||
it("Should not go below minimum at 'slideStart'", function(done) {
|
||||
options.value = [-100, 0];
|
||||
mySlider = new Slider($('#testSlider1')[0], options);
|
||||
$handle1 = $('#mySlider').find('.slider-handle:first');
|
||||
|
||||
mySlider.on('slideStart', function(newVal) {
|
||||
expect(newVal).toEqual([-100, 0]);
|
||||
done();
|
||||
});
|
||||
|
||||
// Move the handle to the left
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 37;
|
||||
|
||||
$handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
|
||||
it("Should not go above maximum at 'slideStart'", function(done) {
|
||||
options.value = [0, 100];
|
||||
mySlider = new Slider($('#testSlider1')[0], options);
|
||||
$handle2 = $('#mySlider').find('.slider-handle:last');
|
||||
|
||||
mySlider.on('slideStart', function(newVal) {
|
||||
expect(newVal).toEqual([0, 100]);
|
||||
done();
|
||||
});
|
||||
|
||||
// Move the handle to the right
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 39;
|
||||
$handle2[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,699 @@
|
|||
/*
|
||||
*************************
|
||||
|
||||
Lock To Ticks Tests
|
||||
|
||||
*************************
|
||||
|
||||
Verify that the when lock_to_ticks is true, the selected values will be snapped to closest tick values
|
||||
|
||||
|
||||
*/
|
||||
describe("Slider with lock_to_ticks: true tests", function() {
|
||||
|
||||
var testSlider;
|
||||
|
||||
it("Should set `options.lock_to_ticks` to false when `ticks[]` is not set", function() {
|
||||
testSlider = $('#testSlider1').slider({
|
||||
lock_to_ticks: true
|
||||
});
|
||||
|
||||
var lockAttr = testSlider.slider('getAttribute', 'lock_to_ticks');
|
||||
expect(lockAttr).toBe(false);
|
||||
});
|
||||
|
||||
it("Should set the slider value when `ticks[]` is not set", function() {
|
||||
testSlider = $('#testSlider1').slider({
|
||||
min: 0,
|
||||
max: 10,
|
||||
value: 1,
|
||||
lock_to_ticks: true
|
||||
});
|
||||
|
||||
testSlider.slider('setValue', 5);
|
||||
|
||||
var value = testSlider.slider('getValue');
|
||||
expect(value).toBe(5);
|
||||
});
|
||||
|
||||
it("Should return a value (after calling `setAttribute()`)", function() {
|
||||
testSlider = $('#testSlider1').slider({
|
||||
min: 0,
|
||||
max: 10,
|
||||
value: 1,
|
||||
lock_to_ticks: true
|
||||
});
|
||||
|
||||
// Try to lock to ticks when there are no ticks[]
|
||||
testSlider.slider('setAttribute', 'lock_to_ticks', true);
|
||||
testSlider.slider('setValue', 5);
|
||||
|
||||
// Without proper checking, getValue() is going to return NaN in this case
|
||||
var value = testSlider.slider('getValue');
|
||||
expect(isNaN(value)).toBe(false);
|
||||
});
|
||||
|
||||
it("Should snap to closest tick value (single)", function() {
|
||||
testSlider = $('#testSlider1').slider({
|
||||
value: 1,
|
||||
ticks: [1, 10, 50, 200, 500, 1000, 5000, 10000],
|
||||
lock_to_ticks: true
|
||||
});
|
||||
|
||||
// Set a value that is not a tick
|
||||
testSlider.slider('setValue', 102);
|
||||
|
||||
var value = testSlider.slider('getValue');
|
||||
expect(value).toBe(50);
|
||||
});
|
||||
|
||||
it("Should snap to closest tick value (single, vertical)", function() {
|
||||
testSlider = $('#testSlider1').slider({
|
||||
value: 1,
|
||||
ticks: [1, 10, 50, 200, 500, 1000, 5000, 10000],
|
||||
lock_to_ticks: true,
|
||||
orientation: 'vertical'
|
||||
});
|
||||
|
||||
//selecting values that are not inside tickes
|
||||
testSlider.slider('setValue', 102);
|
||||
|
||||
//getting the actual values. They should be the closest values from ticks (which are 1 and 50 on this case)
|
||||
var value = testSlider.slider('getValue');
|
||||
expect(value).toBe(50);
|
||||
});
|
||||
|
||||
it("Should snap to closest tick value (range)", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
value: [1, 10000],
|
||||
ticks: [1, 10, 50, 200, 500, 1000, 5000, 10000],
|
||||
lock_to_ticks: true
|
||||
});
|
||||
|
||||
//selecting values that are not inside tickes
|
||||
testSlider.slider("setValue", [4, 102]);
|
||||
|
||||
//getting the actual values. They should be the closest values from ticks (which are 1 and 50 on this case)
|
||||
var values = testSlider.slider("getValue");
|
||||
expect(values[0]).toBe(1);
|
||||
expect(values[1]).toBe(50);
|
||||
});
|
||||
|
||||
it("Should snap to closest tick value (range, vertical)", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
value: [1, 10000],
|
||||
ticks: [1, 10, 50, 200, 500, 1000, 5000, 10000],
|
||||
lock_to_ticks: true,
|
||||
orientation: 'vertical'
|
||||
});
|
||||
|
||||
//selecting values that are not inside tickes
|
||||
testSlider.slider("setValue", [4, 102]);
|
||||
|
||||
//getting the actual values. They should be the closest values from ticks (which are 1 and 50 on this case)
|
||||
var values = testSlider.slider("getValue");
|
||||
expect(values[0]).toBe(1);
|
||||
expect(values[1]).toBe(50);
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
testSlider.slider('destroy');
|
||||
testSlider = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* The mouse navigation tests are based on the following slider properties:
|
||||
*
|
||||
* initial value: 3 or [3, 7]
|
||||
* ticks: [0, 3, 5, 7, 10]
|
||||
* step: 0.1
|
||||
*
|
||||
* When the values are in the range from 0 to 10 and the step is 0.1, every value
|
||||
* can be represented as 1% of the range. For example, 5.5 is 55% and 5.6 is 56%.
|
||||
* This makes it easier to test the behaviour of tick locking.
|
||||
*
|
||||
* The mouse clicks are based on a percentage that represents where the user clicked
|
||||
* on the slider (60% = 6.0). The percentage is then used to calculate the coordinates
|
||||
* for the mouse events (mousedown, mousemove, and mouseup).
|
||||
*
|
||||
* These tests are setup to test for all combinations of relevant slider configurations:
|
||||
* single/range, horizontal/vertical orientation, LTR/RTL, and ordered/reversed.
|
||||
* The tests also check that the handles have the correct positioning, which should
|
||||
* match the ticks that the handles lock to.
|
||||
*
|
||||
* The test data was carefully chosen based on following the test logic below.
|
||||
*
|
||||
* The test logic for sliders:
|
||||
* - Clicking to the left of the handle should not change its value
|
||||
* - Clicking to the left of the handle should change its value and lock to another tick
|
||||
* - Ditto for clicking to the right of the handle
|
||||
*
|
||||
* For range sliders, the same logic is applied except test both handle1 and handle2.
|
||||
*/
|
||||
describe("`lock_to_ticks: true` mouse navigation test cases", function() {
|
||||
var initialValue = 3;
|
||||
var initialRangeValues = [3, 7];
|
||||
var tickValues = [0, 3, 5, 7, 10];
|
||||
// Quick lookup from value to index
|
||||
var tickIndexes = {0: 0, 3: 1, 5: 2, 7: 3, 10: 4};
|
||||
var stepValue = 0.1;
|
||||
|
||||
var orientations = ['horizontal', 'vertical'];
|
||||
var reversed = [false, true];
|
||||
var sliderTypes = ['single', 'range'];
|
||||
var rtl = [false, true];
|
||||
var testCases = [];
|
||||
var mouseEventArguments;
|
||||
|
||||
function calcMouseEventCoords(sliderElem, orientation, per) {
|
||||
var sliderBB = sliderElem.getBoundingClientRect();
|
||||
|
||||
if (orientation === 'horizontal') {
|
||||
return {
|
||||
clientX: sliderBB.left + (sliderElem.offsetWidth * per / 100),
|
||||
clientY: sliderBB.top
|
||||
};
|
||||
}
|
||||
else if (orientation === 'vertical') {
|
||||
return {
|
||||
clientX: sliderBB.left,
|
||||
clientY: sliderBB.top + (sliderElem.offsetHeight * per / 100)
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
beforeEach(function() {
|
||||
// Set up default set of mouse event arguments
|
||||
mouseEventArguments = [
|
||||
'mousemove', // type
|
||||
true, // canBubble
|
||||
true, // cancelable
|
||||
document, // view,
|
||||
0, // detail
|
||||
0, // screenX
|
||||
0, // screenY
|
||||
undefined, // clientX
|
||||
undefined, // clientY,
|
||||
false, // ctrlKey
|
||||
false, // altKey
|
||||
false, // shiftKey
|
||||
false, // metaKey,
|
||||
0, // button
|
||||
null // relatedTarget
|
||||
];
|
||||
});
|
||||
|
||||
function createMouseEvent(type, clientX, clientY) {
|
||||
var mouseEvent = document.createEvent('MouseEvent');
|
||||
mouseEventArguments[0] = type;
|
||||
mouseEventArguments[7] = clientX;
|
||||
mouseEventArguments[8] = clientY;
|
||||
mouseEvent.initMouseEvent.apply(mouseEvent, mouseEventArguments);
|
||||
return mouseEvent;
|
||||
}
|
||||
|
||||
var mouseTestData = {
|
||||
single: {
|
||||
testData: [{
|
||||
willChange: false,
|
||||
expectedValue: initialValue,
|
||||
percent: 20
|
||||
}, {
|
||||
willChange: true,
|
||||
expectedValue: 0,
|
||||
percent: 10
|
||||
}, {
|
||||
willChange: false,
|
||||
expectedValue: initialValue,
|
||||
percent: 40
|
||||
}, {
|
||||
willChange: true,
|
||||
expectedValue: 5,
|
||||
percent: 45
|
||||
}],
|
||||
|
||||
// Modify test data for RTL and reversed situations.
|
||||
altTestData: [{
|
||||
willChange: false,
|
||||
expectedValue: initialValue,
|
||||
percent: 80
|
||||
}, {
|
||||
willChange: true,
|
||||
expectedValue: 0,
|
||||
percent: 90
|
||||
}, {
|
||||
willChange: false,
|
||||
expectedValue: initialValue,
|
||||
percent: 60
|
||||
}, {
|
||||
willChange: true,
|
||||
expectedValue: 5,
|
||||
percent: 55
|
||||
}],
|
||||
},
|
||||
|
||||
range: {
|
||||
testData: [{
|
||||
willChange: false,
|
||||
expectedValue: initialRangeValues,
|
||||
percent: 20
|
||||
}, {
|
||||
willChange: true,
|
||||
expectedValue: [0, 7],
|
||||
percent: 10
|
||||
}, {
|
||||
willChange: false,
|
||||
expectedValue: initialRangeValues,
|
||||
percent: 40
|
||||
}, {
|
||||
willChange: true,
|
||||
expectedValue: [5, 7],
|
||||
percent: 45
|
||||
},
|
||||
// More test data that will affect handle2
|
||||
{
|
||||
willChange: true,
|
||||
expectedValue: [3, 5],
|
||||
percent: 60
|
||||
}, {
|
||||
willChange: false,
|
||||
expectedValue: initialRangeValues,
|
||||
percent: 65
|
||||
}, {
|
||||
willChange: false,
|
||||
expectedValue: initialRangeValues,
|
||||
percent: 80
|
||||
}, {
|
||||
willChange: true,
|
||||
expectedValue: [3, 10],
|
||||
percent: 90
|
||||
}],
|
||||
|
||||
// Modify test data for RTL and reversed situations.
|
||||
// Here, the order of the ticks matter when locking a handle to a tick
|
||||
// when there are two ticks that are equal in distance to lock to.
|
||||
altTestData: [{
|
||||
willChange: false,
|
||||
expectedValue: initialRangeValues,
|
||||
percent: 20
|
||||
}, {
|
||||
willChange: true,
|
||||
expectedValue: [3, 10],
|
||||
percent: 10
|
||||
}, {
|
||||
willChange: true,
|
||||
expectedValue: [3, 5],
|
||||
percent: 40
|
||||
}, {
|
||||
willChange: false,
|
||||
expectedValue: initialRangeValues,
|
||||
percent: 35
|
||||
},
|
||||
// More test data that will affect handle2
|
||||
{
|
||||
willChange: false,
|
||||
expectedValue: initialRangeValues,
|
||||
percent: 60
|
||||
}, {
|
||||
willChange: true,
|
||||
expectedValue: [5, 7],
|
||||
percent: 55
|
||||
}, {
|
||||
willChange: false,
|
||||
expectedValue: initialRangeValues,
|
||||
percent: 80
|
||||
}, {
|
||||
willChange: true,
|
||||
expectedValue: [0, 7],
|
||||
percent: 90
|
||||
}],
|
||||
}
|
||||
};
|
||||
|
||||
sliderTypes.forEach(function(sliderType) {
|
||||
orientations.forEach(function(orientation) {
|
||||
rtl.forEach(function(isRTL) {
|
||||
reversed.forEach(function(isReversed) {
|
||||
var isHorizontal = orientation === 'horizontal';
|
||||
var isVertical = orientation === 'vertical';
|
||||
var isRange = sliderType === 'range';
|
||||
var whichData;
|
||||
var whichStyle;
|
||||
|
||||
whichData = mouseTestData[sliderType].testData;
|
||||
|
||||
if (isHorizontal) {
|
||||
// XOR
|
||||
// One or the other needs to be true
|
||||
if ((isRTL && !isReversed) || (isReversed && !isRTL)) {
|
||||
whichData = mouseTestData[sliderType].altTestData;
|
||||
}
|
||||
}
|
||||
else if (isVertical) {
|
||||
if (isReversed) {
|
||||
whichData = mouseTestData[sliderType].altTestData;
|
||||
}
|
||||
}
|
||||
|
||||
if (isHorizontal) {
|
||||
if (isRTL) {
|
||||
whichStyle = 'right';
|
||||
}
|
||||
else {
|
||||
whichStyle = 'left';
|
||||
}
|
||||
}
|
||||
else if (isVertical) {
|
||||
whichStyle = 'top';
|
||||
}
|
||||
|
||||
testCases.push({
|
||||
value: isRange ? initialRangeValues : initialValue,
|
||||
step: stepValue,
|
||||
range: isRange,
|
||||
orientation: orientation,
|
||||
reversed: isReversed,
|
||||
rtl: 'auto',
|
||||
isRTL: isRTL,
|
||||
inputId: isRTL ? 'rtlSlider' : 'testSlider1',
|
||||
testData: whichData,
|
||||
stylePos: whichStyle
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
testCases.forEach(function(testCase) {
|
||||
describe("range=" + testCase.range + ", orientation=" + testCase.orientation +
|
||||
", rtl=" + testCase.isRTL + ", reversed=" + testCase.reversed, function() {
|
||||
var $testSlider;
|
||||
var $handle1;
|
||||
var $handle2;
|
||||
var sliderId;
|
||||
var sliderOptions;
|
||||
var $tick1;
|
||||
var $tick2;
|
||||
var $ticks;
|
||||
|
||||
beforeEach(function() {
|
||||
sliderId = testCase.range ? 'myRangeSlider' : 'mySlider';
|
||||
|
||||
sliderOptions = {
|
||||
id: sliderId,
|
||||
step: testCase.step,
|
||||
orientation: testCase.orientation,
|
||||
value: testCase.value,
|
||||
range: testCase.range,
|
||||
lock_to_ticks: true,
|
||||
reversed: testCase.reversed,
|
||||
rtl: 'auto',
|
||||
ticks: tickValues,
|
||||
};
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if ($testSlider) {
|
||||
$testSlider.slider('destroy');
|
||||
$testSlider = null;
|
||||
}
|
||||
});
|
||||
|
||||
testCase.testData.forEach(function(testData) {
|
||||
it("Should snap to closest tick (percent=" + testData.percent + ", changed=" + testData.willChange + ")", function(done) {
|
||||
$testSlider = $('#'+testCase.inputId).slider(sliderOptions);
|
||||
var sliderElem = $('#'+sliderId)[0];
|
||||
$ticks = $('#'+sliderId).find('.slider-tick');
|
||||
$handle1 = $('#'+sliderId).find('.slider-handle:first');
|
||||
$handle2 = $('#'+sliderId).find('.slider-handle:last');
|
||||
|
||||
var coords = calcMouseEventCoords(sliderElem, testCase.orientation, testData.percent);
|
||||
|
||||
var checkMouseMove = function() {
|
||||
var value = $testSlider.slider('getValue');
|
||||
expect(value).toEqual(testData.expectedValue);
|
||||
if (testCase.range) {
|
||||
$tick1 = $ticks.eq(tickIndexes[testData.expectedValue[0]]);
|
||||
$tick2 = $ticks.eq(tickIndexes[testData.expectedValue[1]]);
|
||||
expect($handle1.css(testCase.stylePos)).toBe($tick1.css(testCase.stylePos));
|
||||
expect($handle2.css(testCase.stylePos)).toBe($tick2.css(testCase.stylePos));
|
||||
}
|
||||
else {
|
||||
$tick1 = $ticks.eq(tickIndexes[testData.expectedValue]);
|
||||
expect($handle1.css(testCase.stylePos)).toBe($tick1.css(testCase.stylePos));
|
||||
}
|
||||
};
|
||||
|
||||
var checkMouseUp = function() {
|
||||
var value = $testSlider.slider('getValue');
|
||||
expect(value).toEqual(testData.expectedValue);
|
||||
if (testCase.range) {
|
||||
$tick1 = $ticks.eq(tickIndexes[testData.expectedValue[0]]);
|
||||
$tick2 = $ticks.eq(tickIndexes[testData.expectedValue[1]]);
|
||||
expect($handle1.css(testCase.stylePos)).toBe($tick1.css(testCase.stylePos));
|
||||
expect($handle2.css(testCase.stylePos)).toBe($tick2.css(testCase.stylePos));
|
||||
}
|
||||
else {
|
||||
$tick1 = $ticks.eq(tickIndexes[testData.expectedValue]);
|
||||
expect($handle1.css(testCase.stylePos)).toBe($tick1.css(testCase.stylePos));
|
||||
}
|
||||
|
||||
document.removeEventListener('mousemove', checkMouseMove, false);
|
||||
document.removeEventListener('mouseup', checkMouseUp, false);
|
||||
done();
|
||||
};
|
||||
|
||||
sliderElem.addEventListener('mousedown', function() {
|
||||
var value = $testSlider.slider('getValue');
|
||||
expect(value).toEqual(testData.expectedValue);
|
||||
// Check position of handles
|
||||
if (testCase.range) {
|
||||
$tick1 = $ticks.eq(tickIndexes[testData.expectedValue[0]]);
|
||||
$tick2 = $ticks.eq(tickIndexes[testData.expectedValue[1]]);
|
||||
expect($handle1.css(testCase.stylePos)).toBe($tick1.css(testCase.stylePos));
|
||||
expect($handle2.css(testCase.stylePos)).toBe($tick2.css(testCase.stylePos));
|
||||
}
|
||||
else {
|
||||
$tick1 = $ticks.eq(tickIndexes[testData.expectedValue]);
|
||||
expect($handle1.css(testCase.stylePos)).toBe($tick1.css(testCase.stylePos));
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', checkMouseMove, false);
|
||||
document.addEventListener('mouseup', checkMouseUp, false);
|
||||
});
|
||||
|
||||
sliderElem.dispatchEvent(createMouseEvent('mousedown', coords.clientX, coords.clientY));
|
||||
document.dispatchEvent(createMouseEvent('mousemove', coords.clientX, coords.clientY));
|
||||
document.dispatchEvent(createMouseEvent('mouseup', coords.clientX, coords.clientY));
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* The keyboard navigation tests are based on the following slider properties:
|
||||
*
|
||||
* initial value: 3 or [3, 7]
|
||||
* ticks: [0, 3, 5, 7, 10]
|
||||
* step: 0.1
|
||||
*
|
||||
* See description for mouse navigation tests for explanation for test setup values.
|
||||
*
|
||||
* These tests are setup to test for all combinations of relevant slider configurations:
|
||||
* single/range, horizontal/vertical orientation, LTR/RTL, natural keys navigation,
|
||||
* ordered/reversed, and all key presses (left, up, right, down).
|
||||
*
|
||||
* The test data is fairly straightforward and passes most configurations except for
|
||||
* special cases when using natural key navigation. For these cases, the test data
|
||||
* had to be 'inverted'. For example, the test data had to be inverted when the
|
||||
* slider has a horizontal orientation with either RTL or reversed option set (but not both).
|
||||
*
|
||||
* The test logic for sliders:
|
||||
* - Key to the left should change the value and lock to the tick to the left
|
||||
* - Key to the right should change the value and lock to the tick to the right
|
||||
*
|
||||
* For range sliders, the same logic is applied except test both handle1 and handle2.
|
||||
*/
|
||||
describe("`lock_to_ticks: true` keyboard navigation test cases", function() {
|
||||
var initialValue = 3;
|
||||
var initialRangeValues = [3, 7];
|
||||
var tickValues = [0, 3, 5, 7, 10];
|
||||
var stepValue = 0.1;
|
||||
var keyData = {
|
||||
left: 37,
|
||||
up: 38,
|
||||
right: 39,
|
||||
down: 40
|
||||
};
|
||||
|
||||
var keys = ['left', 'up', 'right', 'down'];
|
||||
var orientations = ['horizontal', 'vertical'];
|
||||
var reversed = [false, true];
|
||||
var naturalKeys = [false, true];
|
||||
var ranged = [false, true];
|
||||
var rtl = [false, true];
|
||||
var rangeHandles = ['handle1', 'handle2'];
|
||||
var testCases = [];
|
||||
|
||||
orientations.forEach(function(orientation) {
|
||||
ranged.forEach(function(isRange) {
|
||||
rtl.forEach(function(isRTL) {
|
||||
naturalKeys.forEach(function(isNatural) {
|
||||
reversed.forEach(function(isReversed) {
|
||||
testCases.push({
|
||||
value: isRange ? initialRangeValues : initialValue,
|
||||
step: stepValue,
|
||||
range: isRange,
|
||||
orientation: orientation,
|
||||
reversed: isReversed,
|
||||
rtl: 'auto',
|
||||
natural_arrow_keys: isNatural,
|
||||
isRTL: isRTL,
|
||||
inputId: isRTL ? 'rtlSlider' : 'testSlider1',
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
testCases.forEach(function(testCase) {
|
||||
var handles = testCase.range ? rangeHandles : ['handle1'];
|
||||
|
||||
describe("orientation=" + testCase.orientation + ", range=" + testCase.range + ", rtl=" + testCase.isRTL +
|
||||
", natural_arrow_keys=" + testCase.natural_arrow_keys +
|
||||
", reversed=" + testCase.reversed, function() {
|
||||
var $testSlider;
|
||||
var $handle;
|
||||
var keyboardEvent;
|
||||
var sliderId;
|
||||
var sliderOptions;
|
||||
|
||||
beforeEach(function() {
|
||||
sliderId = testCase.range ? 'myRangeSlider' : 'mySlider';
|
||||
|
||||
sliderOptions = {
|
||||
id: sliderId,
|
||||
step: testCase.step,
|
||||
orientation: testCase.orientation,
|
||||
value: testCase.value,
|
||||
range: testCase.range,
|
||||
lock_to_ticks: true,
|
||||
reversed: testCase.reversed,
|
||||
rtl: 'auto',
|
||||
natural_arrow_keys: testCase.natural_arrow_keys,
|
||||
ticks: tickValues,
|
||||
};
|
||||
|
||||
// Create keyboard event
|
||||
keyboardEvent = document.createEvent('Event');
|
||||
keyboardEvent.initEvent('keydown', true, true);
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
keyboardEvent = null;
|
||||
if ($testSlider) {
|
||||
$testSlider.slider('destroy');
|
||||
$testSlider = null;
|
||||
}
|
||||
});
|
||||
|
||||
handles.forEach(function(handleKey) {
|
||||
keys.forEach(function(key) {
|
||||
var isHorizontal = testCase.orientation === 'horizontal';
|
||||
var isVertical = testCase.orientation === 'vertical';
|
||||
var isRange = testCase.range;
|
||||
var isRTL = testCase.isRTL;
|
||||
var isReversed = testCase.reversed;
|
||||
var isNatural = testCase.natural_arrow_keys;
|
||||
|
||||
var testData = {
|
||||
keyCode: keyData[key],
|
||||
handle1: {
|
||||
expectedValue: null
|
||||
},
|
||||
handle2: {
|
||||
expectedValue: null
|
||||
}
|
||||
};
|
||||
|
||||
if (isRange) {
|
||||
// If initial value is [3, 7] Then
|
||||
// These expected values will pass 96/128 tests (32 failures)
|
||||
if (key === 'left' || key === 'down') {
|
||||
testData.handle1.expectedValue = [0, 7];
|
||||
testData.handle2.expectedValue = [3, 5];
|
||||
}
|
||||
else if (key === 'right' || key === 'up') {
|
||||
testData.handle1.expectedValue = [5, 7];
|
||||
testData.handle2.expectedValue = [3, 10];
|
||||
}
|
||||
|
||||
// Special cases when using natural keys
|
||||
if (isNatural) {
|
||||
if ((isHorizontal && isReversed && !isRTL) ||
|
||||
(isHorizontal && isRTL && !isReversed) ||
|
||||
(isVertical && !isReversed))
|
||||
{
|
||||
if (key === 'left' || key === 'down') {
|
||||
testData.handle1.expectedValue = [5, 7];
|
||||
testData.handle2.expectedValue = [3, 10];
|
||||
}
|
||||
else if (key === 'right' || key === 'up') {
|
||||
testData.handle1.expectedValue = [0, 7];
|
||||
testData.handle2.expectedValue = [3, 5];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
// If initial value is 3 Then
|
||||
// These expected values will pass 48/64 tests (16 failures)
|
||||
if (key === 'left' || key === 'down') {
|
||||
testData.handle1.expectedValue = 0;
|
||||
}
|
||||
else if (key === 'right' || key === 'up') {
|
||||
testData.handle1.expectedValue = 5;
|
||||
}
|
||||
|
||||
// Special cases when using natural keys
|
||||
if (isNatural) {
|
||||
// XOR
|
||||
// One or the other needs to be true
|
||||
if ((isHorizontal && isReversed && !isRTL) ||
|
||||
(isHorizontal && isRTL && !isReversed) ||
|
||||
(isVertical && !isReversed))
|
||||
{
|
||||
if (key === 'left' || key === 'down') {
|
||||
testData.handle1.expectedValue = 5;
|
||||
}
|
||||
else if (key === 'right' || key === 'up') {
|
||||
testData.handle1.expectedValue = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
it("Should lock to tick (" + handleKey + ", key=" + key + ")", function(done) {
|
||||
$testSlider = $('#'+testCase.inputId).slider(sliderOptions);
|
||||
|
||||
$handle = $('#'+sliderId).find('.slider-handle:' + (handleKey === 'handle1' ? 'first' : 'last'));
|
||||
|
||||
$handle.on('keydown', function() {
|
||||
var value = $testSlider.slider('getValue');
|
||||
expect(value).toEqual(testData[handleKey].expectedValue);
|
||||
done();
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = testData.keyCode;
|
||||
$handle[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
92
bower_components/seiyria-bootstrap-slider/test/specs/LogarithmicScaleSpec.js
vendored
Normal file
92
bower_components/seiyria-bootstrap-slider/test/specs/LogarithmicScaleSpec.js
vendored
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
|
||||
/*
|
||||
*************************
|
||||
|
||||
Logarithmic Scale Tests
|
||||
|
||||
*************************
|
||||
|
||||
*/
|
||||
describe("Slider with logarithmic scale tests", function() {
|
||||
|
||||
var testSlider;
|
||||
|
||||
describe("Should properly position the slider", function() {
|
||||
|
||||
function testSliderPosition(min, max, value){
|
||||
testSlider = $("#testSlider1").slider({
|
||||
min: min,
|
||||
max: max,
|
||||
scale: 'logarithmic',
|
||||
value: value // This should be at 50%
|
||||
});
|
||||
var expectedPostition = 210 / 2 + 'px';
|
||||
var handle = $("#testSlider1").prev('div.slider').find('.min-slider-handle');
|
||||
expect(handle.css('left')).toBe(expectedPostition);
|
||||
}
|
||||
|
||||
it("with positive values", function() {
|
||||
testSliderPosition(1, 10000, 100);
|
||||
});
|
||||
|
||||
it("with zero", function() {
|
||||
testSliderPosition(0, 63, 7);
|
||||
});
|
||||
|
||||
it("with a negative value", function() {
|
||||
testSliderPosition(-7, 56, 0);
|
||||
});
|
||||
});
|
||||
|
||||
it("Should properly position the tick marks", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
min: 1,
|
||||
max: 100,
|
||||
scale: 'logarithmic',
|
||||
ticks: [1,10,20,50,100]
|
||||
});
|
||||
|
||||
// Position expected for the '10' tick
|
||||
var expectedTickOnePosition = 210 / 2 + 'px'; //should be at 50%
|
||||
|
||||
var handle = $("#testSlider1").prev('div.slider').find(".slider-tick").eq(1);
|
||||
expect(handle.css('left')).toBe(expectedTickOnePosition);
|
||||
});
|
||||
|
||||
it("Should use step size when navigating the keyboard", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
min: 1,
|
||||
max: 10000,
|
||||
scale: 'logarithmic',
|
||||
value: 100,
|
||||
step: 5
|
||||
});
|
||||
|
||||
// Focus on handle1
|
||||
var handle1 = $("#testSlider1").prev('div.slider').find('.slider-handle');
|
||||
handle1.focus();
|
||||
|
||||
// Create keyboard event
|
||||
var keyboardEvent = document.createEvent("Events");
|
||||
keyboardEvent.initEvent("keydown", true, true);
|
||||
|
||||
var keyPresses = 0;
|
||||
handle1.on("keydown", function() {
|
||||
keyPresses++;
|
||||
var value = $("#testSlider1").slider('getValue');
|
||||
expect(value).toBe(100 + keyPresses*5);
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 39; // RIGHT
|
||||
for (var i = 0; i < 5; i++) {
|
||||
handle1[0].dispatchEvent(keyboardEvent);
|
||||
}
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
testSlider.slider('destroy');
|
||||
testSlider = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
224
bower_components/seiyria-bootstrap-slider/test/specs/LowAndHighTrackSpec.js
vendored
Normal file
224
bower_components/seiyria-bootstrap-slider/test/specs/LowAndHighTrackSpec.js
vendored
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
/*
|
||||
**********************
|
||||
|
||||
Left/Right Track Tests
|
||||
|
||||
**********************
|
||||
|
||||
This spec has tests for checking that the widths of the left and right
|
||||
segments are the correct widths and colors, based on their CSS.
|
||||
*/
|
||||
describe("Low/High Track Tests", function() {
|
||||
|
||||
var unstyledID = "low-high-slider";
|
||||
var styledID = "low-high-slider-styled";
|
||||
|
||||
var testSlider;
|
||||
|
||||
describe("Single-value sliders, no styling", function() {
|
||||
|
||||
var id = unstyledID;
|
||||
|
||||
beforeEach(function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
id: id,
|
||||
min: 0,
|
||||
max: 10,
|
||||
value: 5
|
||||
});
|
||||
});
|
||||
|
||||
it("low track width is zero", function()
|
||||
{
|
||||
var leftTrack = $("#" + id + " .slider-track-low");
|
||||
expect($(leftTrack).css("width")).toBe("0px");
|
||||
});
|
||||
|
||||
it("high track width is 50%", function()
|
||||
{
|
||||
var rightTrack = $("#" + id + " .slider-track-high");
|
||||
var trackWidth = rightTrack.parent().width();
|
||||
expect($(rightTrack).css("width")).toBe((trackWidth / 2) + "px");
|
||||
});
|
||||
|
||||
it("high track is transparent", function()
|
||||
{
|
||||
var rightTrack = $("#" + id + " .slider-track-high");
|
||||
var rightColor = rightTrack.css("background-color");
|
||||
var isTransparent = rightColor.match(/rgba\([0-9]{1,3}, [0-9]{1,3}, [0-9]{1,3}, 0\)/);
|
||||
expect(isTransparent).toBeTruthy();
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
testSlider.slider('destroy');
|
||||
testSlider = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe("Single-value sliders, with styling", function() {
|
||||
|
||||
var id = styledID;
|
||||
|
||||
beforeEach(function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
id: id,
|
||||
min: 0,
|
||||
max: 10,
|
||||
value: 5
|
||||
});
|
||||
});
|
||||
|
||||
it("low track width is zero", function()
|
||||
{
|
||||
var leftTrack = $("#" + id + " .slider-track-low");
|
||||
expect($(leftTrack).css("width")).toBe("0px");
|
||||
});
|
||||
|
||||
it("high track width is 50%", function()
|
||||
{
|
||||
var rightTrack = $("#" + id + " .slider-track-high");
|
||||
var trackWidth = rightTrack.parent().width();
|
||||
expect($(rightTrack).css("width")).toBe((trackWidth / 2) + "px");
|
||||
});
|
||||
|
||||
it("high track is red", function()
|
||||
{
|
||||
var rightTrack = $("#" + id + " .slider-track-high");
|
||||
var rightColor = rightTrack.css("background-color");
|
||||
expect(rightColor).toBe("rgb(255, 0, 0)");
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
testSlider.slider('destroy');
|
||||
testSlider = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe("Range sliders, no styling", function() {
|
||||
|
||||
var id = unstyledID;
|
||||
var values = {
|
||||
min: 0,
|
||||
max: 10,
|
||||
values: [ 4, 6 ]
|
||||
};
|
||||
|
||||
beforeEach(function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
id: id,
|
||||
min: values.min,
|
||||
max: values.max,
|
||||
range: true,
|
||||
value: values.values
|
||||
});
|
||||
});
|
||||
|
||||
it("low track width is correct", function()
|
||||
{
|
||||
var leftTrack = $("#" + id + " .slider-track-low");
|
||||
|
||||
var trackWidth = leftTrack.parent().width();
|
||||
var expectedWidth = ((values.values[0] - values.min) / (values.max - values.min)) * trackWidth;
|
||||
|
||||
expect($(leftTrack).css("width")).toBe(expectedWidth + "px");
|
||||
});
|
||||
|
||||
it("high track width is correct", function()
|
||||
{
|
||||
var rightTrack = $("#" + id + " .slider-track-high");
|
||||
var trackWidth = rightTrack.parent().width();
|
||||
|
||||
var expectedWidth = ((values.max - values.values[1]) / (values.max - values.min)) * trackWidth;
|
||||
|
||||
expect($(rightTrack).css("width")).toBe(expectedWidth + "px");
|
||||
});
|
||||
|
||||
it("low track is transparent", function()
|
||||
{
|
||||
var leftTrack = $("#" + id + " .slider-track-low");
|
||||
var leftColor = leftTrack.css("background-color");
|
||||
var isTransparent = leftColor.match(/rgba\([0-9]{1,3}, [0-9]{1,3}, [0-9]{1,3}, 0\)/);
|
||||
expect(isTransparent).toBeTruthy();
|
||||
});
|
||||
|
||||
it("high track is transparent", function()
|
||||
{
|
||||
var rightTrack = $("#" + id + " .slider-track-high");
|
||||
var rightColor = rightTrack.css("background-color");
|
||||
var isTransparent = rightColor.match(/rgba\([0-9]{1,3}, [0-9]{1,3}, [0-9]{1,3}, 0\)/);
|
||||
expect(isTransparent).toBeTruthy();
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
testSlider.slider('destroy');
|
||||
testSlider = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe("Range sliders, with styling", function() {
|
||||
|
||||
var id = styledID;
|
||||
var values = {
|
||||
min: 0,
|
||||
max: 10,
|
||||
values: [ 4, 6 ]
|
||||
};
|
||||
|
||||
beforeEach(function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
id: id,
|
||||
min: values.min,
|
||||
max: values.max,
|
||||
range: true,
|
||||
value: values.values
|
||||
});
|
||||
});
|
||||
|
||||
it("low track width is correct", function()
|
||||
{
|
||||
var leftTrack = $("#" + id + " .slider-track-low");
|
||||
|
||||
var trackWidth = leftTrack.parent().width();
|
||||
var expectedWidth = ((values.values[0] - values.min) / (values.max - values.min)) * trackWidth;
|
||||
|
||||
expect($(leftTrack).css("width")).toBe(expectedWidth + "px");
|
||||
});
|
||||
|
||||
it("high track width is correct", function()
|
||||
{
|
||||
var rightTrack = $("#" + id + " .slider-track-high");
|
||||
var trackWidth = rightTrack.parent().width();
|
||||
|
||||
var expectedWidth = ((values.max - values.values[1]) / (values.max - values.min)) * trackWidth;
|
||||
|
||||
expect($(rightTrack).css("width")).toBe(expectedWidth + "px");
|
||||
});
|
||||
|
||||
it("low track is green", function()
|
||||
{
|
||||
var leftTrack = $("#" + id + " .slider-track-low");
|
||||
var leftColor = leftTrack.css("background-color");
|
||||
expect(leftColor).toBe("rgb(0, 255, 0)");
|
||||
});
|
||||
|
||||
it("high track is red", function()
|
||||
{
|
||||
var rightTrack = $("#" + id + " .slider-track-high");
|
||||
var rightColor = rightTrack.css("background-color");
|
||||
expect(rightColor).toBe("rgb(255, 0, 0)");
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
testSlider.slider('destroy');
|
||||
testSlider = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
describe("Namespace Tests", function() {
|
||||
var sourceJS = "temp/bootstrap-slider.js";
|
||||
var defaultNamespace = 'slider';
|
||||
var alternateNamespace = 'bootstrapSlider';
|
||||
|
||||
it("should always set the plugin namespace to 'bootstrapSlider'", function(done) {
|
||||
$.getScript(sourceJS, function() {
|
||||
expect($.fn.bootstrapSlider).toBeDefined();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("should set the plugin namespace to 'slider' if the namespace is available", function(done) {
|
||||
$.getScript(sourceJS, function() {
|
||||
expect($.fn.slider).toBeDefined();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("should print a console warning if the 'slider' namespace is already bound", function(done) {
|
||||
$.fn.slider = function() {};
|
||||
spyOn(window.console, "warn");
|
||||
|
||||
$.getScript(sourceJS, function() {
|
||||
var expectedWarningMessage = "bootstrap-slider.js - WARNING: $.fn.slider namespace is already bound. Use the $.fn.bootstrapSlider namespace instead.";
|
||||
expect(window.console.warn).toHaveBeenCalledWith(expectedWarningMessage);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("Should not create instance when 'slider' namespace is in use", function(done) {
|
||||
$.fn.slider = function() {}; // Overwrite temporarily
|
||||
|
||||
$.getScript(sourceJS, function() {
|
||||
var $testSlider = $('#testSlider1').bootstrapSlider();
|
||||
|
||||
var sliderInst = $testSlider.data(defaultNamespace);
|
||||
expect(sliderInst).toBeUndefined();
|
||||
|
||||
$testSlider.bootstrapSlider('destroy');
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it("Should create instance associated with the alternate 'bootstrapSlider' namespace", function(done) {
|
||||
$.fn.slider = function() {};
|
||||
|
||||
$.getScript(sourceJS, function() {
|
||||
var $testSlider = $('#testSlider1').bootstrapSlider();
|
||||
|
||||
var sliderInst = $testSlider.data(alternateNamespace);
|
||||
expect(sliderInst).toBeTruthy();
|
||||
|
||||
$testSlider.bootstrapSlider('destroy');
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function(done) {
|
||||
/*
|
||||
Set the namespaces back to undefined and reload slider
|
||||
So that namespace is returned to $.fn.slider
|
||||
*/
|
||||
$.fn.bootstrapSlider = undefined;
|
||||
$.fn.slider = undefined;
|
||||
|
||||
$.getScript(sourceJS, function() {
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
describe("Orientation Tests", function() {
|
||||
var testSlider;
|
||||
var sliderHandleTopPos;
|
||||
var sliderHandleLeftPos;
|
||||
|
||||
describe("Vertical", function() {
|
||||
beforeEach(function() {
|
||||
testSlider = new Slider("#orientationSlider", {
|
||||
id: "orientationSliderId",
|
||||
orientation: "vertical",
|
||||
min: 0,
|
||||
max: 10,
|
||||
value: 5
|
||||
});
|
||||
|
||||
var sliderHandleEl = document.querySelector("#orientationSliderId .slider-handle");
|
||||
var sliderHandleBoundingBoxInfo = sliderHandleEl.getBoundingClientRect();
|
||||
sliderHandleTopPos = sliderHandleBoundingBoxInfo.top;
|
||||
sliderHandleLeftPos = sliderHandleBoundingBoxInfo.left;
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
testSlider.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
it("slides up when handle moves upwards", function() {
|
||||
var mousemove = document.createEvent('MouseEvents');
|
||||
var mousemoveX = sliderHandleLeftPos;
|
||||
var mousemoveY = sliderHandleTopPos - 100;
|
||||
var newSliderValue;
|
||||
|
||||
mousemove.initMouseEvent(
|
||||
"mousedown",
|
||||
true /* bubble */,
|
||||
true /* cancelable */,
|
||||
window,
|
||||
null,
|
||||
0, 0, mousemoveX, mousemoveY, /* coordinates */
|
||||
false, false, false, false, /* modifier keys */
|
||||
0 /*left*/,
|
||||
null
|
||||
);
|
||||
testSlider.sliderElem.dispatchEvent(mousemove);
|
||||
newSliderValue = testSlider.getValue();
|
||||
|
||||
expect(newSliderValue).toBeLessThan(5);
|
||||
});
|
||||
|
||||
it("slides down when handle moves downwards", function() {
|
||||
var mousemove = document.createEvent('MouseEvents');
|
||||
var mousemoveX = sliderHandleLeftPos;
|
||||
var mousemoveY = sliderHandleTopPos + 100;
|
||||
var newSliderValue;
|
||||
|
||||
mousemove.initMouseEvent(
|
||||
"mousedown",
|
||||
true /* bubble */,
|
||||
true /* cancelable */,
|
||||
window,
|
||||
null,
|
||||
0, 0, mousemoveX, mousemoveY, /* coordinates */
|
||||
false, false, false, false, /* modifier keys */
|
||||
0 /*left*/,
|
||||
null
|
||||
);
|
||||
testSlider.sliderElem.dispatchEvent(mousemove);
|
||||
newSliderValue = testSlider.getValue();
|
||||
|
||||
expect(newSliderValue).toBeGreaterThan(5);
|
||||
});
|
||||
});
|
||||
|
||||
}); // End of spec
|
||||
|
|
@ -0,0 +1,660 @@
|
|||
describe("Public Method Tests", function() {
|
||||
var testSlider;
|
||||
|
||||
describe("slider constructor", function() {
|
||||
describe("returns a jQuery object if it is called on a jQuery object with zero or more matching elements", function() {
|
||||
it("returns a jQuery object if it is called on with no matching elements", function() {
|
||||
testSlider = $();
|
||||
expect(testSlider.slider() instanceof jQuery).toBe(true);
|
||||
});
|
||||
it("returns a jQuery object if it is called on with one matching element", function() {
|
||||
testSlider = $('#testSlider1');
|
||||
expect(testSlider.slider() instanceof jQuery).toBe(true);
|
||||
});
|
||||
it("returns a jQuery object if it is called on with multiple matching elements", function() {
|
||||
testSlider = $('#testSlider1, #testSlider2');
|
||||
expect(testSlider.slider() instanceof jQuery).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
it("reads and sets the 'id' attribute of the slider instance that is created", function() {
|
||||
var sliderId = "mySlider";
|
||||
|
||||
testSlider = $("#testSlider1").slider({
|
||||
id : sliderId
|
||||
});
|
||||
|
||||
var sliderInstanceHasExpectedId = $("#testSlider1").siblings("div.slider").is("#" + sliderId);
|
||||
expect(sliderInstanceHasExpectedId).toBeTruthy();
|
||||
});
|
||||
|
||||
it("generates multiple slider instances from selector", function() {
|
||||
$(".makeSlider").slider();
|
||||
var sliderInstancesExists = $(".makeSlider").siblings().is(".slider");
|
||||
expect(sliderInstancesExists).toBeTruthy();
|
||||
var sliderInstancesCount = $(".makeSlider").siblings(".slider").length;
|
||||
expect(sliderInstancesCount).toEqual(2);
|
||||
|
||||
$('.makeSlider').slider('destroy');
|
||||
});
|
||||
|
||||
it("reads and sets the 'min' option properly", function() {
|
||||
var minVal = -5;
|
||||
|
||||
testSlider = $("#testSlider1").slider({
|
||||
min : minVal
|
||||
});
|
||||
testSlider.slider('setValue', minVal);
|
||||
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
expect(sliderValue).toBe(minVal);
|
||||
});
|
||||
|
||||
it("reads and sets the 'max' option properly", function() {
|
||||
var maxVal = 15;
|
||||
|
||||
testSlider = $("#testSlider1").slider({
|
||||
max : maxVal
|
||||
});
|
||||
testSlider.slider('setValue', maxVal);
|
||||
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
expect(sliderValue).toBe(maxVal);
|
||||
});
|
||||
|
||||
it("reads and sets the 'precision' option properly", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
precision: 2
|
||||
});
|
||||
testSlider.slider('setValue', 8.115);
|
||||
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
expect(sliderValue).toBe(8.12);
|
||||
});
|
||||
|
||||
it("reads and sets the 'orientation' option properly", function() {
|
||||
var orientationVal = "vertical";
|
||||
|
||||
testSlider = $("#testSlider1").slider({
|
||||
orientation : orientationVal
|
||||
});
|
||||
|
||||
var orientationClassApplied = $("#testSlider1").siblings("div.slider").hasClass("slider-vertical");
|
||||
expect(orientationClassApplied).toBeTruthy();
|
||||
});
|
||||
|
||||
it("reads and sets the 'value' option properly", function() {
|
||||
var val = 8;
|
||||
|
||||
testSlider = $("#testSlider1").slider({
|
||||
value : val
|
||||
});
|
||||
testSlider.slider('setValue', val);
|
||||
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
expect(sliderValue).toBe(val);
|
||||
});
|
||||
|
||||
it("reads and sets the 'selection' option properly", function() {
|
||||
var selectionVal = "after",
|
||||
maxSliderVal = 10;
|
||||
|
||||
testSlider = $("#testSlider1").slider({
|
||||
selection : selectionVal
|
||||
});
|
||||
testSlider.slider('setValue', maxSliderVal);
|
||||
|
||||
var sliderSelectionWidthAtMaxValue = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-selection").width();
|
||||
expect(sliderSelectionWidthAtMaxValue).toBe(0);
|
||||
});
|
||||
|
||||
it("updates the 'selection' option properly", function() {
|
||||
var selectionVal = "none",
|
||||
maxSliderVal = 10;
|
||||
|
||||
testSlider = $("#testSlider1").slider({
|
||||
selection : selectionVal
|
||||
});
|
||||
testSlider.slider('setValue', maxSliderVal);
|
||||
testSlider.slider('refresh');
|
||||
|
||||
var sliderSelectionHasHideClass_A = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-track-low").hasClass('hide');
|
||||
expect(sliderSelectionHasHideClass_A).toBe(true);
|
||||
var sliderSelectionHasHideClass_B = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-selection").hasClass('hide');
|
||||
expect(sliderSelectionHasHideClass_B).toBe(true);
|
||||
var sliderSelectionHasHideClass_C = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-track-high").hasClass('hide');
|
||||
expect(sliderSelectionHasHideClass_C).toBe(true);
|
||||
|
||||
var newSelectionVal = 'after';
|
||||
testSlider.slider('setAttribute', 'selection', newSelectionVal);
|
||||
testSlider.slider('refresh');
|
||||
|
||||
var sliderSelectionHasHideClass_D = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-track-low").hasClass('hide');
|
||||
expect(sliderSelectionHasHideClass_D).toBe(false);
|
||||
var sliderSelectionHasHideClass_E = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-selection").hasClass('hide');
|
||||
expect(sliderSelectionHasHideClass_E).toBe(false);
|
||||
var sliderSelectionHasHideClass_F = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-track-high").hasClass('hide');
|
||||
expect(sliderSelectionHasHideClass_F).toBe(false);
|
||||
});
|
||||
it("reads and sets the 'handle' option properly", function() {
|
||||
var handleVal = "triangle";
|
||||
|
||||
testSlider = $("#testSlider1").slider({
|
||||
handle : handleVal
|
||||
});
|
||||
|
||||
var handleIsSetToTriangle = $("#testSlider1").siblings(".slider").children("div.slider-handle").hasClass("triangle");
|
||||
expect(handleIsSetToTriangle).toBeTruthy();
|
||||
});
|
||||
|
||||
it("reads and sets the 'reversed' option properly", function() {
|
||||
var reversedVal = true,
|
||||
maxSliderVal = 10;
|
||||
|
||||
testSlider = $("#testSlider1").slider({
|
||||
reversed : reversedVal
|
||||
});
|
||||
testSlider.slider('setValue', maxSliderVal);
|
||||
|
||||
var sliderSelectionHeightAtMaxValue = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-selection").width();
|
||||
expect(sliderSelectionHeightAtMaxValue).toBe(0);
|
||||
});
|
||||
|
||||
it("reads and sets the 'formatter' option properly", function() {
|
||||
var tooltipFormatter = function(value) {
|
||||
return 'Current value: ' + value;
|
||||
};
|
||||
|
||||
testSlider = $("#testSlider1").slider({
|
||||
formatter : tooltipFormatter
|
||||
});
|
||||
testSlider.slider('setValue', 9);
|
||||
|
||||
var tooltipMessage = $("#testSlider1").siblings(".slider").find("div.tooltip").children("div.tooltip-inner").text();
|
||||
var expectedMessage = tooltipFormatter(9);
|
||||
expect(tooltipMessage).toBe(expectedMessage);
|
||||
});
|
||||
|
||||
it("reads and sets the 'enabled' option properly", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
enabled: false
|
||||
});
|
||||
var isEnabled = testSlider.slider('isEnabled');
|
||||
expect(isEnabled).not.toBeTruthy();
|
||||
});
|
||||
|
||||
describe("reads and sets the 'tooltip' option properly", function() {
|
||||
it("tooltip is not shown if set to 'hide'", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
tooltip : "hide"
|
||||
});
|
||||
|
||||
var tooltipIsHidden = testSlider.siblings(".slider").children("div.tooltip").hasClass("hide");
|
||||
expect(tooltipIsHidden).toBeTruthy();
|
||||
});
|
||||
|
||||
it("tooltip is shown during sliding if set to 'show'", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
tooltip : "show"
|
||||
});
|
||||
|
||||
var tooltipIsHidden = !($("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in"));
|
||||
expect(tooltipIsHidden).toBeTruthy();
|
||||
|
||||
// Trigger hover
|
||||
var mouseenterEvent = document.createEvent("Events");
|
||||
mouseenterEvent.initEvent("mouseenter", true, true);
|
||||
testSlider.data('slider').sliderElem.dispatchEvent(mouseenterEvent);
|
||||
|
||||
var tooltipIsShownAfterSlide = $("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in");
|
||||
expect(tooltipIsShownAfterSlide).toBeTruthy();
|
||||
});
|
||||
|
||||
it("tooltip is shown on mouse over and hides correctly after mouse leave", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
tooltip : "show"
|
||||
});
|
||||
|
||||
var tooltipIsHidden = !($("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in"));
|
||||
expect(tooltipIsHidden).toBeTruthy();
|
||||
|
||||
// Trigger hover
|
||||
var mouseenterEvent = document.createEvent("Events");
|
||||
mouseenterEvent.initEvent("mouseenter", true, true);
|
||||
testSlider.data('slider').sliderElem.dispatchEvent(mouseenterEvent);
|
||||
|
||||
var tooltipIsShownAfterSlide = $("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in");
|
||||
expect(tooltipIsShownAfterSlide).toBeTruthy();
|
||||
|
||||
|
||||
// Trigger leave
|
||||
var mouseleaveEvent = document.createEvent("Events");
|
||||
mouseleaveEvent.initEvent("mouseleave", true, true);
|
||||
testSlider.data('slider').sliderElem.dispatchEvent(mouseleaveEvent);
|
||||
|
||||
var tooltipIsAgainHidden = !($("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in"));
|
||||
expect(tooltipIsAgainHidden).toBeTruthy();
|
||||
});
|
||||
|
||||
it("tooltip is always shown if set to 'always'", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
tooltip : "always"
|
||||
});
|
||||
|
||||
var tooltipIsShown = $("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in");
|
||||
expect(tooltipIsShown).toBeTruthy();
|
||||
});
|
||||
|
||||
it("defaults to 'show' option if invalid value is passed", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
tooltip : "invalid option value"
|
||||
});
|
||||
|
||||
var tooltipIsHidden = !($("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in"));
|
||||
expect(tooltipIsHidden).toBeTruthy();
|
||||
|
||||
// Trigger hover
|
||||
var mouseenterEvent = document.createEvent("Events");
|
||||
mouseenterEvent.initEvent("mouseenter", true, true);
|
||||
testSlider.data('slider').sliderElem.dispatchEvent(mouseenterEvent);
|
||||
|
||||
|
||||
var tooltipIsShownOnHover = $("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in");
|
||||
expect(tooltipIsShownOnHover).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe("'setValue()' tests", function() {
|
||||
var formatInvalidInputMsg = function(invalidValue) { return "Invalid input value '" + invalidValue + "' passed in"; };
|
||||
|
||||
describe("if slider is a single value slider", function() {
|
||||
beforeEach(function() {
|
||||
testSlider = $("#testSlider1").slider();
|
||||
});
|
||||
|
||||
it("properly sets the value of the slider when given a numeric value", function() {
|
||||
var valueToSet = 5;
|
||||
testSlider.slider('setValue', valueToSet);
|
||||
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
expect(sliderValue).toBe(valueToSet);
|
||||
});
|
||||
|
||||
it("properly sets the value of the slider when given a string value", function(){
|
||||
var valueToSet = "5";
|
||||
testSlider.slider('setValue', valueToSet);
|
||||
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
expect(sliderValue).toBe(5);
|
||||
});
|
||||
|
||||
it("if a value passed in is greater than the max (10), the slider only goes to the max", function() {
|
||||
var maxValue = 10,
|
||||
higherThanSliderMaxVal = maxValue + 5;
|
||||
|
||||
testSlider.slider('setValue', higherThanSliderMaxVal);
|
||||
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
expect(sliderValue).toBe(maxValue);
|
||||
});
|
||||
|
||||
it("if a value passed in is less than the min (0), the slider only goes to the min", function() {
|
||||
var minValue = 0,
|
||||
lowerThanSliderMaxVal = minValue - 5;
|
||||
|
||||
testSlider.slider('setValue', lowerThanSliderMaxVal);
|
||||
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
expect(sliderValue).toBe(minValue);
|
||||
});
|
||||
|
||||
it("sets the 'value' property of the slider <input> element", function() {
|
||||
var value = 9;
|
||||
testSlider.slider('setValue', value);
|
||||
|
||||
var currentValue = document.querySelector("#testSlider1").value;
|
||||
currentValue = parseFloat(currentValue);
|
||||
|
||||
expect(currentValue).toBe(value);
|
||||
});
|
||||
|
||||
it("sets the 'value' attribute of the slider <input> element", function() {
|
||||
var value = 9;
|
||||
testSlider.slider('setValue', value);
|
||||
|
||||
var currentValue = document.querySelector("#testSlider1").getAttribute("value");
|
||||
currentValue = parseFloat(currentValue);
|
||||
|
||||
expect(currentValue).toBe(value);
|
||||
});
|
||||
|
||||
describe("when an invalid value type is passed in", function() {
|
||||
var invalidValue;
|
||||
|
||||
beforeEach(function() {
|
||||
invalidValue = "a";
|
||||
});
|
||||
|
||||
it("throws an error and does not alter the slider value", function() {
|
||||
var originalSliderValue = testSlider.slider('getValue');
|
||||
|
||||
var settingValue = function() {
|
||||
testSlider.slider('setValue', invalidValue);
|
||||
};
|
||||
expect(settingValue).toThrow(new Error( formatInvalidInputMsg(invalidValue) ));
|
||||
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
expect(sliderValue).toBe(originalSliderValue);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("if slider is a range slider", function() {
|
||||
beforeEach(function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
value : [3, 8]
|
||||
});
|
||||
});
|
||||
|
||||
it("properly sets the values if both within the max and min", function() {
|
||||
var valuesToSet = [5, 7];
|
||||
testSlider.slider('setValue', valuesToSet);
|
||||
|
||||
var sliderValues = testSlider.slider('getValue');
|
||||
expect(sliderValues[0]).toBe(valuesToSet[0]);
|
||||
expect(sliderValues[1]).toBe(valuesToSet[1]);
|
||||
});
|
||||
|
||||
describe("caps values to the min if they are set to be less than the min", function() {
|
||||
var minValue = -5,
|
||||
otherValue = 7;
|
||||
|
||||
it("first value is capped to min", function() {
|
||||
testSlider.slider('setValue', [minValue, otherValue]);
|
||||
|
||||
var sliderValues = testSlider.slider('getValue');
|
||||
expect(sliderValues[0]).toBe(0);
|
||||
});
|
||||
|
||||
it("second value is capped to min", function() {
|
||||
testSlider.slider('setValue', [otherValue, minValue]);
|
||||
|
||||
var sliderValues = testSlider.slider('getValue');
|
||||
expect(sliderValues[1]).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe("caps values to the max if they are set to be higher than the max", function() {
|
||||
var maxValue = 15,
|
||||
otherValue = 7;
|
||||
|
||||
it("first value is capped to max", function() {
|
||||
testSlider.slider('setValue', [maxValue, otherValue]);
|
||||
|
||||
var sliderValues = testSlider.slider('getValue');
|
||||
expect(sliderValues[0]).toBe(10);
|
||||
});
|
||||
|
||||
it("second value is capped to max", function() {
|
||||
testSlider.slider('setValue', [otherValue, maxValue]);
|
||||
|
||||
var sliderValues = testSlider.slider('getValue');
|
||||
expect(sliderValues[1]).toBe(10);
|
||||
});
|
||||
});
|
||||
|
||||
describe("if either value is of invalid type", function() {
|
||||
var invalidValue = "a",
|
||||
otherValue = 7;
|
||||
|
||||
it("first value is of invalid type", function() {
|
||||
var setSliderValueFn = function() {
|
||||
testSlider.slider('setValue', [invalidValue, otherValue]);
|
||||
};
|
||||
expect(setSliderValueFn).toThrow(new Error( formatInvalidInputMsg(invalidValue) ));
|
||||
});
|
||||
it("second value is of invalid type", function() {
|
||||
var setSliderValueFn = function() {
|
||||
testSlider.slider('setValue', [otherValue, invalidValue]);
|
||||
};
|
||||
expect(setSliderValueFn).toThrow(new Error( formatInvalidInputMsg(invalidValue) ));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("triggerSlideEvent argument", function() {
|
||||
it("if triggerSlideEvent argument is true, the 'slide' event is triggered", function() {
|
||||
var testSlider = $("#testSlider1").slider({
|
||||
value : 3
|
||||
});
|
||||
|
||||
var newSliderVal = 5;
|
||||
|
||||
testSlider.on('slide', function(evt) {
|
||||
expect(newSliderVal).toEqual(evt.value);
|
||||
});
|
||||
|
||||
testSlider.slider('setValue', newSliderVal, true);
|
||||
});
|
||||
|
||||
it("if triggerSlideEvent argument is false, the 'slide' event is not triggered", function() {
|
||||
var newSliderVal = 5;
|
||||
var slideEventTriggered = false;
|
||||
var testSlider = $("#testSlider1").slider({
|
||||
value : 3
|
||||
});
|
||||
|
||||
testSlider.on('slide', function() {
|
||||
slideEventTriggered = true;
|
||||
});
|
||||
testSlider.slider('setValue', newSliderVal, false);
|
||||
|
||||
expect(slideEventTriggered).toEqual(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("triggerChangeEvent argument", function() {
|
||||
it("if triggerChangeEvent argument is true, the 'change' event is triggered", function() {
|
||||
var testSlider = $("#testSlider1").slider({
|
||||
value : 3
|
||||
});
|
||||
|
||||
var newSliderVal = 5;
|
||||
|
||||
testSlider.on('change', function(evt) {
|
||||
expect(newSliderVal).toEqual(evt.value.newValue);
|
||||
});
|
||||
|
||||
testSlider.slider('setValue', newSliderVal, true);
|
||||
});
|
||||
|
||||
it("if triggerChangeEvent argument is false, the 'change' event is not triggered", function() {
|
||||
var changeEventTriggered = false;
|
||||
var testSlider = $("#testSlider1").slider({
|
||||
value : 3
|
||||
});
|
||||
|
||||
testSlider.on('change', function() {
|
||||
changeEventTriggered = true;
|
||||
});
|
||||
testSlider.slider('setValue', 5, false);
|
||||
|
||||
expect(changeEventTriggered).toEqual(false);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
describe("'getValue()' tests", function() {
|
||||
it("returns the current value of the slider", function() {
|
||||
testSlider = $("#testSlider1").slider();
|
||||
|
||||
var valueToSet = 5;
|
||||
testSlider.slider('setValue', valueToSet);
|
||||
|
||||
var sliderValue = testSlider.slider('getValue');
|
||||
expect(sliderValue).toBe(valueToSet);
|
||||
});
|
||||
});
|
||||
|
||||
describe("'enable()' tests", function() {
|
||||
it("correctly enables a slider", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
enabled: false
|
||||
});
|
||||
testSlider.slider("enable");
|
||||
var isEnabled = testSlider.slider("isEnabled");
|
||||
expect(isEnabled).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe("'disable()' tests", function() {
|
||||
it("correctly disable a slider", function() {
|
||||
testSlider = $("#testSlider1").slider();
|
||||
testSlider.slider("disable");
|
||||
var isEnabled = testSlider.slider("isEnabled");
|
||||
expect(isEnabled).not.toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe("'toggle()' tests", function() {
|
||||
it("correctly enables a disabled slider", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
enabled: false
|
||||
});
|
||||
testSlider.slider("toggle");
|
||||
var isEnabled = testSlider.slider("isEnabled");
|
||||
expect(isEnabled).toBeTruthy();
|
||||
});
|
||||
|
||||
it("correctly disables an enabled slider", function() {
|
||||
testSlider = $("#testSlider1").slider();
|
||||
testSlider.slider("toggle");
|
||||
var isEnabled = testSlider.slider("isEnabled");
|
||||
expect(isEnabled).not.toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe("'isEnabled()' tests", function() {
|
||||
it("returns true for an enabled slider", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
id: "enabled",
|
||||
enabled: true
|
||||
});
|
||||
|
||||
var isEnabled = testSlider.slider("isEnabled");
|
||||
var $slider = testSlider.siblings("#enabled");
|
||||
var hasDisabledClass = $slider.hasClass("slider") && $slider.hasClass("#enabled");
|
||||
|
||||
expect(isEnabled).toBeTruthy();
|
||||
expect(hasDisabledClass).not.toBeTruthy();
|
||||
});
|
||||
|
||||
it("returns false for a disabled slider", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
id: "disabled",
|
||||
enabled: false
|
||||
});
|
||||
|
||||
var isEnabled = testSlider.slider("isEnabled");
|
||||
var $slider = testSlider.siblings("#disabled");
|
||||
var hasDisabledClass = $slider.hasClass("slider") && $slider.hasClass("slider-disabled");
|
||||
|
||||
expect(isEnabled).not.toBeTruthy();
|
||||
expect(hasDisabledClass).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("get attribute", function() {
|
||||
testSlider = $("#testSlider1").slider();
|
||||
|
||||
var sliderMaxValue = testSlider.slider('getAttribute', 'max');
|
||||
expect(sliderMaxValue).toBe(10);
|
||||
});
|
||||
|
||||
it("changes slider from basic to range", function() {
|
||||
testSlider = $("#makeRangeSlider").slider();
|
||||
testSlider.slider('setAttribute', 'range', true).slider('refresh');
|
||||
|
||||
var isRangeSlider = $("#changeOrientationSlider").parent("div.slider").find('.slider-handle').last().hasClass('hide');
|
||||
expect(isRangeSlider).toBeFalsy();
|
||||
});
|
||||
|
||||
it("setAttribute: changes the 'data-slider-orientation' property from horizontal to vertical", function() {
|
||||
testSlider = $("#changeOrientationSlider").slider({
|
||||
id: "changeOrientationSliderElem"
|
||||
});
|
||||
testSlider.slider('setAttribute', 'orientation', 'vertical').slider('refresh');
|
||||
|
||||
var $slider = $("#changeOrientationSliderElem");
|
||||
var orientationClassApplied = $slider.hasClass("slider-vertical");
|
||||
|
||||
expect(orientationClassApplied).toBeTruthy();
|
||||
});
|
||||
|
||||
it("relayout: if slider is not displayed on initialization and then displayed later on, relayout() will not adjust the margin-left of the tooltip", function() {
|
||||
// Setup
|
||||
testSlider = new Slider("#relayoutSliderInput", {
|
||||
id: "relayoutSlider",
|
||||
min: 0,
|
||||
max: 10,
|
||||
value: 5
|
||||
});
|
||||
var mainTooltipDOMRef = document.querySelector("#relayoutSlider .tooltip-main");
|
||||
var relayoutSliderContainerDOMRef = document.querySelector("#relayoutSliderContainer");
|
||||
var tooltipMarginLeft;
|
||||
// Main tooltip margin-left offset should not be set on slider intialization
|
||||
tooltipMarginLeft = parseFloat(mainTooltipDOMRef.style.marginLeft);
|
||||
expect(tooltipMarginLeft).toBeNaN();
|
||||
// Show slider and call relayout()
|
||||
relayoutSliderContainerDOMRef.style.display = "block";
|
||||
testSlider.relayout();
|
||||
// Main tooltip margin-left offset should not be set after relayout() is called.
|
||||
tooltipMarginLeft = Math.abs( parseFloat(mainTooltipDOMRef.style.marginLeft) );
|
||||
expect(tooltipMarginLeft).toBeNaN();
|
||||
});
|
||||
|
||||
it("relayout: if slider is not displayed on initialization and then displayed later on, relayout() will re-adjust the tick label width", function() {
|
||||
// Setup
|
||||
testSlider = new Slider("#relayoutSliderInputTickLabels", {
|
||||
id: "relayoutSliderTickLabels",
|
||||
min: 0,
|
||||
max: 10,
|
||||
ticks: [0, 5, 10],
|
||||
ticks_labels: ['low', 'mid', 'high'],
|
||||
value: 5
|
||||
});
|
||||
|
||||
var $ticks = $('#relayoutSliderTickLabels').find('.slider-tick-label');
|
||||
|
||||
// Tick-Width should be 0 on slider intialization
|
||||
var i, $tick;
|
||||
for (i = 0; i < $ticks.length; i++) {
|
||||
$tick = $($ticks[i]);
|
||||
expect( parseInt($tick.css('width')) ).toBe(0);
|
||||
}
|
||||
|
||||
// Show slider and call relayout()
|
||||
$('#relayoutSliderContainerTickLabels').css('display', 'block');
|
||||
testSlider.relayout();
|
||||
$('#relayoutSliderContainerTickLabels').css('display', 'none');
|
||||
|
||||
// Tick-Width should re-adjust to be > 0
|
||||
for (i = 0; i < $ticks.length; i++) {
|
||||
$tick = $($ticks[i]);
|
||||
expect( parseInt($tick.css('width')) ).toBeGreaterThan(0);
|
||||
}
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
if(testSlider instanceof jQuery) { testSlider.slider('destroy'); }
|
||||
if(testSlider instanceof Slider) { testSlider.destroy(); }
|
||||
testSlider = null;
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
224
bower_components/seiyria-bootstrap-slider/test/specs/RangeHighlightsSpec.js
vendored
Normal file
224
bower_components/seiyria-bootstrap-slider/test/specs/RangeHighlightsSpec.js
vendored
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
/*
|
||||
RangeHighlights Render Tests
|
||||
*/
|
||||
|
||||
describe("RangeHighlights Render Tests", function() {
|
||||
var testSlider1;
|
||||
var testSlider2;
|
||||
var testSlider3;
|
||||
var testSlider4;
|
||||
|
||||
//setup
|
||||
beforeEach(function() {
|
||||
var rangeHighlightsOpts1 = [
|
||||
{ "start": 2, "end": 5, "class": "category1" }, // left: 10%; width: 15%
|
||||
{ "start": 7, "end": 8, "class": "category2" }, // left: 35%; width: 5%
|
||||
{ "start": 17, "end": 19 }, // left: 85%; width: 10%
|
||||
{ "start": 17, "end": 24 }, //out of range - not visible
|
||||
{ "start": -3, "end": 19 } //out of range - not visible
|
||||
];
|
||||
|
||||
var rangeHighlightsOpts2 = [
|
||||
{ "start": 2, "end": 5, "class": "category1" }, // top: 10%; height: 15%
|
||||
{ "start": 7, "end": 8, "class": "category2" }, // top: 35%; height: 5%
|
||||
{ "start": 17, "end": 19 }, // top: 85%; height: 10%
|
||||
{ "start": 7, "end": -4 }, //out of range - not visible
|
||||
{ "start": 23, "end": 15 } //out of range - not visible
|
||||
];
|
||||
|
||||
testSlider1 = $('#testSlider1').slider({
|
||||
id: 'slider1',
|
||||
min: 0,
|
||||
max: 20,
|
||||
step: 1,
|
||||
value: 14,
|
||||
rangeHighlights: rangeHighlightsOpts1
|
||||
});
|
||||
|
||||
testSlider2 = $('#testSlider2').slider({
|
||||
id: 'slider2',
|
||||
min: 0,
|
||||
max: 20,
|
||||
step: 1,
|
||||
value: 14,
|
||||
orientation: 'vertical',
|
||||
rangeHighlights: rangeHighlightsOpts2
|
||||
});
|
||||
|
||||
testSlider3 = $('#testSlider3').slider({
|
||||
id: 'slider3',
|
||||
min: 0,
|
||||
max: 20,
|
||||
step: 1,
|
||||
value: 14,
|
||||
reversed: true,
|
||||
rangeHighlights: rangeHighlightsOpts1
|
||||
});
|
||||
|
||||
testSlider4 = $('#testSlider4').slider({
|
||||
id: 'slider4',
|
||||
min: 0,
|
||||
max: 20,
|
||||
step: 1,
|
||||
value: 14,
|
||||
reversed: true,
|
||||
orientation: 'vertical',
|
||||
rangeHighlights: rangeHighlightsOpts2
|
||||
});
|
||||
});
|
||||
|
||||
//cleanup
|
||||
afterEach(function() {
|
||||
testSlider1.slider('destroy');
|
||||
testSlider1 = null;
|
||||
|
||||
testSlider2.slider('destroy');
|
||||
testSlider2 = null;
|
||||
|
||||
testSlider3.slider('destroy');
|
||||
testSlider3 = null;
|
||||
|
||||
testSlider4.slider('destroy');
|
||||
testSlider4 = null;
|
||||
});
|
||||
|
||||
//test the visibility of ranges e.g. : { "start": 23, "end": 15 } - out of range - not visible
|
||||
function testHighlightedElements(sliderId, isHorizontal, expections) {
|
||||
|
||||
//check elements exist
|
||||
it("Highlighted ranges are rendered - " + sliderId, function() {
|
||||
expect($(sliderId).length).toBe(1);
|
||||
expect($(sliderId + ' .slider-rangeHighlight').length).toBe(5);
|
||||
expect($(sliderId + ' .slider-rangeHighlight.category1').length).toBe(1);
|
||||
expect($(sliderId + ' .slider-rangeHighlight.category2').length).toBe(1);
|
||||
});
|
||||
|
||||
//check elements exist within proper display value
|
||||
it("Highlighted ranges render inside the slider's bounds " + sliderId, function() {
|
||||
expect($(sliderId).length).toBe(1);
|
||||
|
||||
var ranges = $(sliderId + ' .slider-rangeHighlight');
|
||||
expect(ranges.length).toBe(5);
|
||||
|
||||
for (var i = 0; i < ranges.length; i++) {
|
||||
expect($(ranges[i]).is(":visible")).toBe(expections[i].isVisible);
|
||||
if (expections[i].isVisible) {
|
||||
if(isHorizontal) {
|
||||
expect(_getLeftPercent($(ranges[i]))).toBe(expections[i].start);
|
||||
expect(_getWidthPercent($(ranges[i]))).toBe(expections[i].size);
|
||||
} else {
|
||||
expect(_getTopPercent($(ranges[i]))).toBe(expections[i].start);
|
||||
expect(_getHeightPercent($(ranges[i]))).toBe(expections[i].size);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function _getLeftPercent(element) {
|
||||
return Math.round(100 * element.position().left / element.parent().width()) + '%';
|
||||
}
|
||||
|
||||
function _getWidthPercent(element) {
|
||||
var width = element.width();
|
||||
var parentWidth = element.offsetParent().width();
|
||||
return Math.round(100 * width / parentWidth) + '%';
|
||||
}
|
||||
|
||||
function _getTopPercent(element) {
|
||||
return Math.round(100 * element.position().top / element.parent().height()) + '%';
|
||||
}
|
||||
|
||||
function _getHeightPercent(element) {
|
||||
var height = element.height();
|
||||
var parentHeight = element.offsetParent().height();
|
||||
return Math.round(100 * height / parentHeight) + '%';
|
||||
}
|
||||
|
||||
//test both testSlider
|
||||
testHighlightedElements('#slider1', true, [{
|
||||
isVisible: true,
|
||||
start: '10%',
|
||||
size: '15%'
|
||||
}, {
|
||||
isVisible: true,
|
||||
start: '35%',
|
||||
size: '5%'
|
||||
}, {
|
||||
isVisible: true,
|
||||
start: '85%',
|
||||
size: '10%'
|
||||
}, {
|
||||
isVisible: false,
|
||||
start: '85%',
|
||||
size: '10%'
|
||||
}, {
|
||||
isVisible: false,
|
||||
start: '85%',
|
||||
size: '10%'
|
||||
}]);
|
||||
testHighlightedElements('#slider2', false, [{
|
||||
isVisible: true,
|
||||
start: '10%',
|
||||
size: '15%'
|
||||
}, {
|
||||
isVisible: true,
|
||||
start: '35%',
|
||||
size: '5%'
|
||||
}, {
|
||||
isVisible: true,
|
||||
start: '85%',
|
||||
size: '10%'
|
||||
}, {
|
||||
isVisible: false,
|
||||
start: '85%',
|
||||
size: '10%'
|
||||
}, {
|
||||
isVisible: false,
|
||||
start: '85%',
|
||||
size: '10%'
|
||||
}]);
|
||||
testHighlightedElements('#slider3', true, [{
|
||||
isVisible: true,
|
||||
start: '75%',
|
||||
size: '15%'
|
||||
}, {
|
||||
isVisible: true,
|
||||
start: '60%',
|
||||
size: '5%'
|
||||
}, {
|
||||
isVisible: true,
|
||||
start: '5%',
|
||||
size: '10%'
|
||||
}, {
|
||||
isVisible: false,
|
||||
start: '5%',
|
||||
size: '10%'
|
||||
}, {
|
||||
isVisible: false,
|
||||
start: '5%',
|
||||
size: '10%'
|
||||
}]);
|
||||
testHighlightedElements('#slider4', false, [{
|
||||
isVisible: true,
|
||||
start: '75%',
|
||||
size: '15%'
|
||||
}, {
|
||||
isVisible: true,
|
||||
start: '60%',
|
||||
size: '5%'
|
||||
}, {
|
||||
isVisible: true,
|
||||
start: '5%',
|
||||
size: '10%'
|
||||
}, {
|
||||
isVisible: false,
|
||||
start: '5%',
|
||||
size: '10%'
|
||||
}, {
|
||||
isVisible: false,
|
||||
start: '5%',
|
||||
size: '10%'
|
||||
}]);
|
||||
});
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
describe("refresh() Method Tests", function() {
|
||||
var testSlider;
|
||||
var $testSlider;
|
||||
var options;
|
||||
var initialValue, initialRangeValue;
|
||||
var newValue, newRangeValue;
|
||||
|
||||
beforeEach(function() {
|
||||
initialValue = 5;
|
||||
initialRangeValue = [4, 5];
|
||||
newValue = 7;
|
||||
newRangeValue = [7, 10];
|
||||
|
||||
options = {
|
||||
id: 'mySlider',
|
||||
min: 0,
|
||||
max: 10,
|
||||
step: 1,
|
||||
value: initialValue
|
||||
};
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
testSlider.destroy();
|
||||
testSlider = null;
|
||||
}
|
||||
if ($testSlider) {
|
||||
$testSlider.slider('destroy');
|
||||
$testSlider = null;
|
||||
}
|
||||
});
|
||||
|
||||
it("does not convert a non-range slider into a range slider when invoked", function() {
|
||||
// Initialize non-range slider
|
||||
testSlider = new Slider("#testSlider1", {
|
||||
min: 0,
|
||||
max: 10,
|
||||
value: 5
|
||||
});
|
||||
|
||||
// Assert that slider is non-range slider
|
||||
var initialValue = testSlider.getValue();
|
||||
var sliderIsRangeValue = initialValue instanceof Array;
|
||||
|
||||
expect(sliderIsRangeValue).toBeFalsy();
|
||||
|
||||
// Invoke refresh() method
|
||||
testSlider.refresh();
|
||||
|
||||
// Assert that slider remains a non-range slider
|
||||
var afterRefreshValue = testSlider.getValue();
|
||||
sliderIsRangeValue = afterRefreshValue instanceof Array;
|
||||
|
||||
expect(sliderIsRangeValue).toBeFalsy();
|
||||
});
|
||||
|
||||
it("should reset slider to its default value on refresh", function() {
|
||||
// Initialize non-range slider
|
||||
testSlider = new Slider('#testSlider1', options);
|
||||
|
||||
testSlider.setValue(newValue, true, true);
|
||||
testSlider.refresh();
|
||||
|
||||
expect(testSlider.getValue()).toBe(initialValue);
|
||||
});
|
||||
|
||||
it("should maintain its current value on refresh", function() {
|
||||
// Initialize non-range slider
|
||||
testSlider = new Slider('#testSlider1', options);
|
||||
|
||||
testSlider.setValue(newValue, true, true);
|
||||
testSlider.refresh({ useCurrentValue: true });
|
||||
|
||||
expect(testSlider.getValue()).toBe(newValue);
|
||||
});
|
||||
|
||||
it("should reset slider to its default value on refresh (jQuery)", function() {
|
||||
// Initialize non-range slider
|
||||
$testSlider = $('#testSlider1').slider(options);
|
||||
|
||||
$testSlider.slider('setValue', newValue, true, true);
|
||||
$testSlider.slider('refresh');
|
||||
|
||||
expect($testSlider.slider('getValue')).toBe(initialValue);
|
||||
});
|
||||
|
||||
it("should maintain its current value on refresh (jQuery)", function() {
|
||||
// Initialize non-range slider
|
||||
$testSlider = $('#testSlider1').slider(options);
|
||||
|
||||
$testSlider.slider('setValue', newValue, true, true);
|
||||
$testSlider.slider('refresh', { useCurrentValue: true });
|
||||
|
||||
expect($testSlider.slider('getValue')).toBe(newValue);
|
||||
});
|
||||
|
||||
it("should reset slider to its default value on refresh (range)", function() {
|
||||
// Initialize range slider
|
||||
options.value = initialRangeValue;
|
||||
options.range = true;
|
||||
testSlider = new Slider('#testSlider1', options);
|
||||
|
||||
testSlider.setValue(newRangeValue, true, true);
|
||||
testSlider.refresh();
|
||||
|
||||
expect(testSlider.getValue()).toBe(initialRangeValue);
|
||||
});
|
||||
|
||||
it("should maintain its current value on refresh (range)", function() {
|
||||
// Initialize range slider
|
||||
options.value = initialRangeValue;
|
||||
options.range = true;
|
||||
testSlider = new Slider('#testSlider1', options);
|
||||
|
||||
testSlider.setValue(newRangeValue, true, true);
|
||||
testSlider.refresh({ useCurrentValue: true });
|
||||
|
||||
expect(testSlider.getValue()).toBe(newRangeValue);
|
||||
});
|
||||
|
||||
}); // End of spec
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
describe("Resize Tests", function() {
|
||||
var testSlider, dataSlider;
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
testSlider.slider('destroy');
|
||||
testSlider = null;
|
||||
dataSlider = null;
|
||||
}
|
||||
});
|
||||
|
||||
describe("Tick Labels", function() {
|
||||
|
||||
var $el, options;
|
||||
|
||||
beforeEach(function() {
|
||||
var tick = [0, 100, 200, 300, 400];
|
||||
options = {
|
||||
ticks: tick,
|
||||
ticks_labels: ['$0', '$100', '$200', '$300', '$400']
|
||||
};
|
||||
});
|
||||
|
||||
it("should resize the tick labels when horizontal", function() {
|
||||
|
||||
$el = $("#resizeSlider");
|
||||
testSlider = $el.slider(options);
|
||||
dataSlider = testSlider.data('slider');
|
||||
|
||||
$('.slider').width(210);
|
||||
dataSlider._resize();
|
||||
expect($el.siblings('div.slider').find('.slider-tick-label:eq(0)').width()).toBe(53);
|
||||
|
||||
$('.slider').width(120);
|
||||
dataSlider._resize();
|
||||
expect($el.siblings('div.slider').find('.slider-tick-label:eq(0)').width()).toBe(30);
|
||||
|
||||
$('.slider').width(900);
|
||||
dataSlider._resize();
|
||||
expect($el.siblings('div.slider').find('.slider-tick-label:eq(1)').width()).toBe(225);
|
||||
|
||||
$('.slider').width(210);
|
||||
dataSlider._resize();
|
||||
expect($el.siblings('div.slider').find('.slider-tick-label:eq(0)').width()).toBe(53);
|
||||
});
|
||||
|
||||
it('should resize the tick labels when vertical', function() {
|
||||
|
||||
var $el = $("#resizeSliderVertical");
|
||||
testSlider = $el.slider(options);
|
||||
dataSlider = testSlider.data('slider');
|
||||
|
||||
$('.slider').height(210);
|
||||
dataSlider._resize();
|
||||
expect($el.siblings('div.slider').find('.slider-tick-label:eq(0)').height()).toBe(53);
|
||||
|
||||
$('.slider').height(120);
|
||||
dataSlider._resize();
|
||||
expect($el.siblings('div.slider').find('.slider-tick-label:eq(0)').height()).toBe(30);
|
||||
|
||||
$('.slider').height(900);
|
||||
dataSlider._resize();
|
||||
expect($el.siblings('div.slider').find('.slider-tick-label:eq(1)').height()).toBe(225);
|
||||
|
||||
$('.slider').height(210);
|
||||
dataSlider._resize();
|
||||
expect($el.siblings('div.slider').find('.slider-tick-label:eq(0)').height()).toBe(53);
|
||||
});
|
||||
});
|
||||
}); // End of spec
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
describe("RTL Tests", function() {
|
||||
var testSlider;
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
testSlider.destroy();
|
||||
testSlider = null;
|
||||
}
|
||||
});
|
||||
|
||||
describe("rtl slider tests", function() {
|
||||
it("should be rtl by default inside an rtl wrapper", function() {
|
||||
testSlider = new Slider("#rtlSlider");
|
||||
|
||||
var dirIsRtl = $("#rtlSlider").siblings().is(".slider-rtl");
|
||||
|
||||
expect(dirIsRtl).toBeTruthy();
|
||||
});
|
||||
|
||||
it("rtl to false inside an rtl wrapper", function() {
|
||||
testSlider = new Slider("#rtlSlider", {
|
||||
rtl: false
|
||||
});
|
||||
|
||||
var dirIsRtl = $("#rtlSlider").siblings().is(".slider-rtl");
|
||||
|
||||
expect(dirIsRtl).not.toBeTruthy();
|
||||
});
|
||||
|
||||
it("rtl to true inside an ltr wrapper", function() {
|
||||
testSlider = new Slider("#testSlider1", {
|
||||
rtl: true
|
||||
});
|
||||
|
||||
var dirIsRtl = $("#testSlider1").siblings().is(".slider-rtl");
|
||||
|
||||
expect(dirIsRtl).toBeTruthy();
|
||||
});
|
||||
|
||||
it("slider use inversed left and right inline style", function() {
|
||||
testSlider = new Slider("#rtlSlider", {
|
||||
min: 0,
|
||||
max: 10,
|
||||
value: 5
|
||||
});
|
||||
|
||||
var sliderTrackLowRight=$("#rtlSlider").siblings(".slider-rtl").children("div.slider-track").children("div.slider-track-low").css("right");
|
||||
var sliderSelectionRight=$("#rtlSlider").siblings(".slider-rtl").children("div.slider-track").children("div.slider-selection").css("right");
|
||||
var sliderTrackHighLeft=$("#rtlSlider").siblings(".slider-rtl").children("div.slider-track").children("div.slider-track-high").css("left");
|
||||
|
||||
expect(sliderTrackLowRight).toBe("0px");
|
||||
expect(sliderSelectionRight).toBe("0%");
|
||||
expect(sliderTrackHighLeft).toBe("0px");
|
||||
});
|
||||
|
||||
it("tooltip position must be inversed in vertical", function() {
|
||||
testSlider = new Slider("#rtlSlider", {
|
||||
orientation: "vertical",
|
||||
});
|
||||
|
||||
var mainTooltipHasClassLeft = testSlider.tooltip.classList.contains("left");
|
||||
|
||||
expect(mainTooltipHasClassLeft).toBeTruthy();
|
||||
expect(testSlider.tooltip.style.right).toBe("100%");
|
||||
});
|
||||
|
||||
it("tooltip position can be forced in vertical", function() {
|
||||
testSlider = new Slider("#rtlSlider", {
|
||||
orientation: "vertical",
|
||||
tooltip_position: "right",
|
||||
});
|
||||
|
||||
var mainTooltipHasClassRight = testSlider.tooltip.classList.contains("right");
|
||||
|
||||
expect(mainTooltipHasClassRight).toBeTruthy();
|
||||
expect(testSlider.tooltip.style.left).toBe("100%");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}); // End of spec
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
describe("Scrollable body test", function() {
|
||||
var testSlider;
|
||||
var sliderHandleTopPos;
|
||||
var sliderHandleLeftPos;
|
||||
|
||||
describe("Vertical scrolled body", function() {
|
||||
beforeEach(function() {
|
||||
testSlider = new Slider("#veryLowPositionedSlider", {
|
||||
id: "scrollTestSliderId",
|
||||
orientation: "vertical",
|
||||
min: 0,
|
||||
max: 20,
|
||||
value: 10,
|
||||
step: 1
|
||||
});
|
||||
|
||||
document.body.scrollTop = 2000;
|
||||
|
||||
var sliderHandleEl = document.querySelector("#scrollTestSliderId .slider-handle");
|
||||
var sliderHandleBoundingBoxInfo = sliderHandleEl.getBoundingClientRect();
|
||||
sliderHandleTopPos = sliderHandleBoundingBoxInfo.top;
|
||||
sliderHandleLeftPos = sliderHandleBoundingBoxInfo.left;
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
testSlider.destroy();
|
||||
}
|
||||
document.body.scrollTop = 0;
|
||||
});
|
||||
|
||||
// The difference between sliderHandleTopPos and mousemoveY is equal to 50 in both cases,
|
||||
// but difference between initial and final slider value is not equal (6 and 4).
|
||||
// It happens because we don't 'hit' the center of handle but the top left corner.
|
||||
|
||||
it("slides up when handle moves upwards after scroll page down", function() {
|
||||
var mousemove = document.createEvent('MouseEvents');
|
||||
var mousemoveX = sliderHandleLeftPos;
|
||||
var mousemoveY = sliderHandleTopPos - 50;
|
||||
var newSliderValue;
|
||||
|
||||
mousemove.initMouseEvent(
|
||||
"mousedown",
|
||||
true /* bubble */,
|
||||
true /* cancelable */,
|
||||
window,
|
||||
null,
|
||||
0, 0, mousemoveX, mousemoveY, /* coordinates */
|
||||
false, false, false, false, /* modifier keys */
|
||||
0 /*left*/,
|
||||
null
|
||||
);
|
||||
testSlider.sliderElem.dispatchEvent(mousemove);
|
||||
newSliderValue = testSlider.getValue();
|
||||
|
||||
expect(newSliderValue).toEqual(4);
|
||||
});
|
||||
|
||||
it("slides down when handle moves downwards after scroll page down", function() {
|
||||
var mousemove = document.createEvent('MouseEvents');
|
||||
var mousemoveX = sliderHandleLeftPos;
|
||||
var mousemoveY = sliderHandleTopPos + 50;
|
||||
var newSliderValue;
|
||||
|
||||
mousemove.initMouseEvent(
|
||||
"mousedown",
|
||||
true /* bubble */,
|
||||
true /* cancelable */,
|
||||
window,
|
||||
null,
|
||||
0, 0, mousemoveX, mousemoveY, /* coordinates */
|
||||
false, false, false, false, /* modifier keys */
|
||||
0 /*left*/,
|
||||
null
|
||||
);
|
||||
testSlider.sliderElem.dispatchEvent(mousemove);
|
||||
newSliderValue = testSlider.getValue();
|
||||
|
||||
expect(newSliderValue).toEqual(14);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('Horizontal scrolled body', function() {
|
||||
beforeEach(function() {
|
||||
testSlider = new Slider('#offRightEdgeSliderInput', {
|
||||
id: 'offRightEdgeSlider',
|
||||
orientation: 'horizontal',
|
||||
min: 0,
|
||||
max: 20,
|
||||
value: 10,
|
||||
step: 1,
|
||||
});
|
||||
|
||||
testSlider.sliderElem.scrollIntoView();
|
||||
|
||||
var handle = document.querySelector('#offRightEdgeSlider .slider-handle');
|
||||
var handleRect = handle.getBoundingClientRect();
|
||||
sliderHandleTopPos = handleRect.top;
|
||||
sliderHandleLeftPos = handleRect.left;
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if (testSlider) {
|
||||
testSlider.destroy();
|
||||
}
|
||||
window.scrollTo(0, 0);
|
||||
});
|
||||
|
||||
it('slides left when clicked on the left of the handle', function() {
|
||||
var x = sliderHandleLeftPos - 50;
|
||||
var y = sliderHandleTopPos;
|
||||
var mousedown, newSliderValue;
|
||||
|
||||
mousedown = createMouseDownEvent(x, y);
|
||||
testSlider.sliderElem.dispatchEvent(mousedown);
|
||||
newSliderValue = testSlider.getValue();
|
||||
|
||||
expect(newSliderValue).toEqual(4);
|
||||
});
|
||||
|
||||
it('slides right when clicked on the left of the handle', function() {
|
||||
var x = sliderHandleLeftPos + 50;
|
||||
var y = sliderHandleTopPos;
|
||||
var mousedown, newSliderValue;
|
||||
|
||||
mousedown = createMouseDownEvent(x, y);
|
||||
testSlider.sliderElem.dispatchEvent(mousedown);
|
||||
newSliderValue = testSlider.getValue();
|
||||
|
||||
expect(newSliderValue).toEqual(14);
|
||||
});
|
||||
|
||||
function createMouseDownEvent(x, y) {
|
||||
var mousedown = document.createEvent('MouseEvents');
|
||||
mousedown.initMouseEvent(
|
||||
'mousedown',
|
||||
false /* bubble */,
|
||||
true /* cancelable */,
|
||||
window, /* view */
|
||||
null, /* detail */
|
||||
0, 0, x, y, /* coordinates */
|
||||
false, false, false, false, /* modifier keys */
|
||||
0, /* button: left */
|
||||
null /* relatedTarget */
|
||||
);
|
||||
return mousedown;
|
||||
}
|
||||
});
|
||||
});
|
||||
85
bower_components/seiyria-bootstrap-slider/test/specs/ScrollableContainerSpec.js
vendored
Normal file
85
bower_components/seiyria-bootstrap-slider/test/specs/ScrollableContainerSpec.js
vendored
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
describe("Scrollable test", function() {
|
||||
var testSlider;
|
||||
var sliderHandleTopPos;
|
||||
var sliderHandleLeftPos;
|
||||
var scrollableContainer;
|
||||
|
||||
describe("Vertical inside scrollable container", function() {
|
||||
beforeEach(function() {
|
||||
testSlider = new Slider("#ex1", {
|
||||
id: "ex1Slider",
|
||||
orientation: "vertical",
|
||||
min: 0,
|
||||
max: 20,
|
||||
value: 10,
|
||||
step: 1
|
||||
});
|
||||
|
||||
scrollableContainer = document.querySelector('#scrollable-div');
|
||||
scrollableContainer.scrollTop = 145;
|
||||
|
||||
var sliderHandleEl = document.querySelector("#ex1Slider .slider-handle");
|
||||
var sliderHandleBoundingBoxInfo = sliderHandleEl.getBoundingClientRect();
|
||||
sliderHandleTopPos = sliderHandleBoundingBoxInfo.top;
|
||||
sliderHandleLeftPos = sliderHandleBoundingBoxInfo.left;
|
||||
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
testSlider.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
// The difference between sliderHandleTopPos and mousemoveY is equal to 50 in both cases,
|
||||
// but difference between initial and final slider value is not equal (6 and 4).
|
||||
// It happens because we don't 'hit' the center of handle but the top left corner.
|
||||
|
||||
it("slides up when handle moves upwards inside scrollable element after scrolling", function() {
|
||||
var mousemove = document.createEvent('MouseEvents');
|
||||
var mousemoveX = sliderHandleLeftPos;
|
||||
var mousemoveY = sliderHandleTopPos - 50;
|
||||
var newSliderValue;
|
||||
|
||||
mousemove.initMouseEvent(
|
||||
"mousedown",
|
||||
true /* bubble */,
|
||||
true /* cancelable */,
|
||||
window,
|
||||
null,
|
||||
0, 0, mousemoveX, mousemoveY, /* coordinates */
|
||||
false, false, false, false, /* modifier keys */
|
||||
0 /*left*/,
|
||||
null
|
||||
);
|
||||
testSlider.sliderElem.dispatchEvent(mousemove);
|
||||
newSliderValue = testSlider.getValue();
|
||||
|
||||
expect(newSliderValue).toEqual(4);
|
||||
});
|
||||
|
||||
it("slides down when handle moves downwards inside scrollable element after scrolling", function() {
|
||||
var mousemove = document.createEvent('MouseEvents');
|
||||
var mousemoveX = sliderHandleLeftPos;
|
||||
var mousemoveY = sliderHandleTopPos + 50;
|
||||
var newSliderValue;
|
||||
|
||||
mousemove.initMouseEvent(
|
||||
"mousedown",
|
||||
true /* bubble */,
|
||||
true /* cancelable */,
|
||||
window,
|
||||
null,
|
||||
0, 0, mousemoveX, mousemoveY, /* coordinates */
|
||||
false, false, false, false, /* modifier keys */
|
||||
0 /*left*/,
|
||||
null
|
||||
);
|
||||
testSlider.sliderElem.dispatchEvent(mousemove);
|
||||
newSliderValue = testSlider.getValue();
|
||||
|
||||
expect(newSliderValue).toEqual(14);
|
||||
});
|
||||
});
|
||||
|
||||
}); // End of spec
|
||||
61
bower_components/seiyria-bootstrap-slider/test/specs/StepReachMaxValueSpec.js
vendored
Normal file
61
bower_components/seiyria-bootstrap-slider/test/specs/StepReachMaxValueSpec.js
vendored
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
describe("TickMaxValueNotATickBehavior", function() {
|
||||
var SLIDER_ID = "testSlider1";
|
||||
var slider;
|
||||
var options;
|
||||
|
||||
describe('max value should be reached', function() {
|
||||
beforeEach(function() {
|
||||
options = {
|
||||
min: 40,
|
||||
max: 1310,
|
||||
step: 5,
|
||||
scale: "logarithmic",
|
||||
value: 44
|
||||
};
|
||||
slider = new Slider(document.getElementById(SLIDER_ID), options);
|
||||
});
|
||||
|
||||
it("Value should contain max value when slider is moved to outer right position", function() {
|
||||
var sliderLeft = slider.sliderElem.offsetLeft;
|
||||
var offsetY = slider.sliderElem.offsetTop;
|
||||
// I think the + 10 work because it is half of the handle size;
|
||||
var offsetX = sliderLeft + slider.sliderElem.clientWidth + 10;
|
||||
var expectedValue = slider.options.max;
|
||||
var mouseEvent = getMouseDownEvent(offsetX, offsetY);
|
||||
slider.mousedown(mouseEvent);
|
||||
// FIXME: Use 'mouseup' event type
|
||||
slider.mouseup(mouseEvent);
|
||||
expect(slider.getValue()).toBe(expectedValue);
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
slider.destroy();
|
||||
});
|
||||
|
||||
// helper functions
|
||||
function getMouseDownEvent(offsetXToClick, offsetYToClick) {
|
||||
var args = [
|
||||
'mousedown', // type
|
||||
true, // canBubble
|
||||
true, // cancelable
|
||||
document, // view,
|
||||
0, // detail
|
||||
0, // screenX
|
||||
0, // screenY
|
||||
offsetXToClick, // clientX
|
||||
offsetYToClick, // clientY,
|
||||
false, // ctrlKey
|
||||
false, // altKey
|
||||
false, // shiftKey
|
||||
false, // metaKey,
|
||||
0, // button
|
||||
null // relatedTarget
|
||||
];
|
||||
|
||||
var event = document.createEvent('MouseEvents');
|
||||
event.initMouseEvent.apply(event, args);
|
||||
return event;
|
||||
}
|
||||
|
||||
});
|
||||
108
bower_components/seiyria-bootstrap-slider/test/specs/TickClickingBehaviorSpec.js
vendored
Normal file
108
bower_components/seiyria-bootstrap-slider/test/specs/TickClickingBehaviorSpec.js
vendored
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
describe("TickClickingBehavior", function() {
|
||||
var SLIDER_ID = "testSlider1";
|
||||
var slider;
|
||||
var options;
|
||||
|
||||
describe('ticks start with 0', function() {
|
||||
beforeEach(function() {
|
||||
options = {
|
||||
ticks: [0, 1, 2, 3, 4],
|
||||
ticks_positions: [0, 25, 50, 75, 100],
|
||||
step: 1,
|
||||
value: 4
|
||||
};
|
||||
|
||||
slider = new Slider(document.getElementById(SLIDER_ID), options);
|
||||
});
|
||||
|
||||
it("Should set slider to corresponding value when ticks are clicked", function() {
|
||||
for (var i = 0; i < options.ticks.length; i++) {
|
||||
clickTickAtIndexAndVerify(slider, i);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('ticks start with positive value', function() {
|
||||
beforeEach(function() {
|
||||
options = {
|
||||
ticks: [1, 2, 3, 4, 5],
|
||||
ticks_positions: [0, 25, 50, 75, 100],
|
||||
step: 1,
|
||||
value: 5
|
||||
};
|
||||
|
||||
slider = new Slider(document.getElementById(SLIDER_ID), options);
|
||||
});
|
||||
|
||||
it("Should set slider to corresponding value when ticks are clicked", function() {
|
||||
for (var i = 0; i < options.ticks.length; i++) {
|
||||
clickTickAtIndexAndVerify(slider, i);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('ticks start with negative value', function() {
|
||||
beforeEach(function() {
|
||||
options = {
|
||||
ticks: [-5, -4, -3, -2, -1],
|
||||
ticks_positions: [0, 25, 50, 75, 100],
|
||||
step: 1,
|
||||
value: -1
|
||||
};
|
||||
|
||||
slider = new Slider(document.getElementById(SLIDER_ID), options);
|
||||
});
|
||||
|
||||
it("Should set slider to corresponding value when ticks are clicked", function() {
|
||||
for (var i = 0; i < options.ticks.length; i++) {
|
||||
clickTickAtIndexAndVerify(slider, i);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function() { slider.destroy(); });
|
||||
|
||||
// helper functions
|
||||
function clickTickAtIndexAndVerify(slider, tickIndex) {
|
||||
var sliderLeft = slider.sliderElem.offsetLeft;
|
||||
var tickLeft = slider.ticks[tickIndex].offsetLeft;
|
||||
var handleHalfWidth = $('.slider-handle.round').width() / 2;
|
||||
|
||||
var offsetX = sliderLeft + tickLeft + handleHalfWidth;
|
||||
var offsetY = slider.sliderElem.offsetTop;
|
||||
|
||||
var mouseEvent = getMouseDownEvent(offsetX, offsetY);
|
||||
|
||||
slider.mousedown(mouseEvent);
|
||||
// FIXME: Use 'mouseup' event type
|
||||
slider.mouseup(mouseEvent);
|
||||
|
||||
var expectedValue = slider.options.ticks[tickIndex];
|
||||
expect(slider.getValue()).toBe(expectedValue);
|
||||
}
|
||||
|
||||
function getMouseDownEvent(offsetXToClick, offsetYToClick) {
|
||||
var args = [
|
||||
'mousedown', // type
|
||||
true, // canBubble
|
||||
true, // cancelable
|
||||
document, // view,
|
||||
0, // detail
|
||||
0, // screenX
|
||||
0, // screenY
|
||||
offsetXToClick, // clientX
|
||||
offsetYToClick, // clientY,
|
||||
false, // ctrlKey
|
||||
false, // altKey
|
||||
false, // shiftKey
|
||||
false, // metaKey,
|
||||
0, // button
|
||||
null // relatedTarget
|
||||
];
|
||||
|
||||
var event = document.createEvent('MouseEvents');
|
||||
event.initMouseEvent.apply(event, args);
|
||||
|
||||
return event;
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,253 @@
|
|||
/*
|
||||
Tick label Render Tests - Tests that labels render in correct positions in both horizontal and vertical orientation
|
||||
*/
|
||||
|
||||
describe("Tick Label Render Tests", function() {
|
||||
var testSliderH;
|
||||
var testSliderV;
|
||||
|
||||
//setup
|
||||
beforeEach(function() {
|
||||
testSliderH = $('#testSlider1').slider({
|
||||
id: 'slider1',
|
||||
ticks: [0, 1, 2],
|
||||
ticks_labels:['x', 'y', 'z'],
|
||||
orientation:'horizontal'
|
||||
});
|
||||
|
||||
testSliderV = $('#testSlider2').slider({
|
||||
id: 'slider2',
|
||||
ticks: [0, 1, 2],
|
||||
ticks_labels:['x', 'y', 'z'],
|
||||
orientation:'vertical'
|
||||
});
|
||||
});
|
||||
|
||||
//cleanup
|
||||
afterEach(function() {
|
||||
testSliderH.slider('destroy');
|
||||
testSliderH = null;
|
||||
|
||||
testSliderV.slider('destroy');
|
||||
testSliderV = null;
|
||||
});
|
||||
|
||||
//e.g. testOrientation('horizontal', 2) will test the horizontal
|
||||
//code path using control with the id testSlider2
|
||||
function testOrientation(orientation) {
|
||||
var sliderIndex = orientation.toLowerCase() === 'horizontal' ? 1 : 2;
|
||||
var isVertical = orientation.toLowerCase() === 'horizontal' ? false : true;
|
||||
var sliderId = '#slider' + sliderIndex;
|
||||
|
||||
//check elements exist
|
||||
it("Tick labels are rendered - " + orientation, function() {
|
||||
expect($(sliderId).length).toBe(1);
|
||||
|
||||
var length = $(sliderId + ' .slider-tick-label').length;
|
||||
expect(length).toBe(3);
|
||||
});
|
||||
|
||||
//check elements exist within the bounds of the slider
|
||||
it("Tick labels render inside the slider's bounds" + orientation, function() {
|
||||
expect($(sliderId).length).toBe(1);
|
||||
|
||||
var sliderRect = $(sliderId)[0].getBoundingClientRect();
|
||||
var tickLabels = $(sliderId + ' .slider-tick-label');
|
||||
|
||||
for (var i = 0; i < tickLabels.length; i++) {
|
||||
var labelRect = tickLabels[i].getBoundingClientRect();
|
||||
|
||||
if (isVertical) {
|
||||
expect(labelRect.left).toBeGreaterThan(sliderRect.left);
|
||||
expect(labelRect.top + 10 >= sliderRect.top).toBeTruthy();
|
||||
} else {
|
||||
expect(labelRect.top + 10 >= sliderRect.top).toBeTruthy();
|
||||
expect(labelRect.width / 2 + labelRect.left >= sliderRect.left).toBeTruthy();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//test both horizontal and vertical orientations
|
||||
testOrientation('horizontal');
|
||||
testOrientation('vertical');
|
||||
});
|
||||
|
||||
describe("Tick Labels 'is-selection' and 'in-selection' Tests", function() {
|
||||
var $inputSlider;
|
||||
var options;
|
||||
var keyboardEvent;
|
||||
var $slider;
|
||||
var $handle1;
|
||||
var $handle2;
|
||||
var $tickLabels;
|
||||
var tickLabelCount;
|
||||
|
||||
// Setup
|
||||
beforeEach(function() {
|
||||
options = {
|
||||
id: 'slider1',
|
||||
ticks: [0, 1, 2, 3, 4],
|
||||
value: 2,
|
||||
ticks_labels:['$0', '$1', '$2', '$3', '$4'],
|
||||
};
|
||||
|
||||
tickLabelCount = options.ticks_labels.length;
|
||||
|
||||
// Create keyboard event
|
||||
keyboardEvent = document.createEvent('Event');
|
||||
keyboardEvent.initEvent('keydown', true, true);
|
||||
});
|
||||
|
||||
// Cleanup
|
||||
afterEach(function() {
|
||||
$inputSlider.slider('destroy');
|
||||
$inputSlider = null;
|
||||
});
|
||||
|
||||
describe("Tick Labels 'is-selection' Tests", function() {
|
||||
|
||||
describe("'options.selection = 'before'", function() {
|
||||
|
||||
beforeEach(function() {
|
||||
options.selection = 'before';
|
||||
$inputSlider = $('#testSlider1').slider(options);
|
||||
$slider = $('#slider1');
|
||||
$tickLabels = $slider.find('.slider-tick-label-container div.slider-tick-label');
|
||||
});
|
||||
|
||||
it("Should show the correct tick labels as 'is-selection'", function() {
|
||||
// There should only be one tick label with the 'label-is-selection' class
|
||||
expect($slider.find('.label-is-selection').length).toBe(1);
|
||||
// Only the third tick label should have the 'label-is-selection' class
|
||||
expect($tickLabels.eq(2).hasClass('label-is-selection')).toBe(true);
|
||||
});
|
||||
|
||||
it("Should show the correct tick labels as 'is-selection' when keying to the left", function(done) {
|
||||
$handle1 = $('#slider1').find('.slider-handle:first');
|
||||
|
||||
expect($slider.find('.label-is-selection').length).toBe(1);
|
||||
expect($tickLabels.eq(2).hasClass('label-is-selection')).toBe(true);
|
||||
|
||||
$handle1.on('keydown', function() {
|
||||
expect($slider.find('.label-is-selection').length).toBe(1);
|
||||
expect($tickLabels.eq(1).hasClass('label-is-selection')).toBe(true);
|
||||
done();
|
||||
});
|
||||
|
||||
// Move handle1 to the left with keyboard
|
||||
$handle1.focus();
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 37;
|
||||
$handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
});
|
||||
|
||||
describe("'options.selection = 'after'", function() {
|
||||
|
||||
beforeEach(function() {
|
||||
options.selection = 'after';
|
||||
$inputSlider = $('#testSlider1').slider(options);
|
||||
$slider = $('#slider1');
|
||||
$tickLabels = $slider.find('.slider-tick-label-container div.slider-tick-label');
|
||||
});
|
||||
|
||||
it("Should show the correct tick labels as 'is-selection'" , function() {
|
||||
expect($slider.find('.label-is-selection').length).toBe(1);
|
||||
expect($tickLabels.eq(2).hasClass('label-is-selection')).toBe(true);
|
||||
});
|
||||
|
||||
it("Should show the correct tick labels as 'is-selection' when keying to the right" , function(done) {
|
||||
$handle1 = $('#slider1').find('.slider-handle:first');
|
||||
|
||||
expect($slider.find('.label-is-selection').length).toBe(1);
|
||||
expect($tickLabels.eq(2).hasClass('label-is-selection')).toBe(true);
|
||||
|
||||
$handle1.on('keydown', function() {
|
||||
expect($slider.find('.label-is-selection').length).toBe(1);
|
||||
expect($tickLabels.eq(3).hasClass('label-is-selection')).toBe(true);
|
||||
done();
|
||||
});
|
||||
|
||||
// Move handle1 to the right with keyboard
|
||||
$handle1.focus();
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 39;
|
||||
$handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("Tick Labels 'in-selection' Tests", function() {
|
||||
|
||||
function checkTickLabels($labels, expectedLabels) {
|
||||
var next = 0;
|
||||
|
||||
// There are only 5 tick labels.
|
||||
expect($labels.length).toBe(tickLabelCount);
|
||||
|
||||
for (var i = 0; i < tickLabelCount; i++) {
|
||||
if (i === expectedLabels[next]) {
|
||||
expect($labels.eq(i).hasClass('label-in-selection')).toBe(true);
|
||||
next++;
|
||||
}
|
||||
else {
|
||||
expect($labels.eq(i).hasClass('label-in-selection')).toBe(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Setup
|
||||
beforeEach(function() {
|
||||
options.value = [1, 3];
|
||||
$inputSlider = $('#testSlider1').slider(options);
|
||||
$slider = $('#slider1');
|
||||
$tickLabels = $slider.find('.slider-tick-label-container div.slider-tick-label');
|
||||
});
|
||||
|
||||
it("Should show the correct tick labels as 'in-selection'", function() {
|
||||
expect($slider.find('.label-is-selection').length).toBe(3);
|
||||
checkTickLabels($tickLabels, [1, 2, 3]);
|
||||
});
|
||||
|
||||
it("Should show the correct tick labels as 'in-selection' when keying to the left", function(done) {
|
||||
$handle1 = $('#slider1').find('.slider-handle:first');
|
||||
|
||||
// There should be 3 tick labels with the 'label-in-selection' class
|
||||
expect($slider.find('.label-in-selection').length).toBe(3);
|
||||
|
||||
// Check that the correct tick labels have the 'label-in-selection' class
|
||||
checkTickLabels($tickLabels, [1, 2, 3]);
|
||||
|
||||
$handle1.on('keydown', function() {
|
||||
expect($slider.find('.label-in-selection').length).toBe(4);
|
||||
|
||||
// Check the labels again
|
||||
checkTickLabels($tickLabels, [0, 1, 2, 3]);
|
||||
done();
|
||||
});
|
||||
|
||||
// Move handle1 to the left with keyboard
|
||||
$handle1.focus();
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 37;
|
||||
$handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
|
||||
it("Should show the correct tick labels as 'in-selection' when keying to the right" , function(done) {
|
||||
$handle2 = $('#slider1').find('.slider-handle:last');
|
||||
|
||||
expect($slider.find('.label-in-selection').length).toBe(3);
|
||||
|
||||
checkTickLabels($tickLabels, [1, 2, 3]);
|
||||
|
||||
$handle2.on('keydown', function() {
|
||||
expect($slider.find('.label-in-selection').length).toBe(4);
|
||||
checkTickLabels($tickLabels, [1, 2, 3, 4]);
|
||||
done();
|
||||
});
|
||||
|
||||
// Move handle2 to the right with keyboard
|
||||
$handle2.focus();
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 39;
|
||||
$handle2[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,247 @@
|
|||
/*
|
||||
*************************
|
||||
|
||||
Tick Marks Tests
|
||||
|
||||
*************************
|
||||
|
||||
Verify that the number of tick marks matches what you set
|
||||
Verify the tick marks are at the correct intervals
|
||||
|
||||
|
||||
*/
|
||||
describe("Slider with ticks tests", function() {
|
||||
|
||||
var testSlider;
|
||||
|
||||
it("Should have the number of tick marks you specify", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
ticks: [100, 200, 300, 400, 500]
|
||||
});
|
||||
|
||||
var numTicks = $("#testSlider1").siblings('div.slider').find('.slider-tick').length;
|
||||
expect(numTicks).toBe(5);
|
||||
});
|
||||
|
||||
it("Should be at the default positions", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
ticks: [100, 200, 300, 400, 500]
|
||||
});
|
||||
|
||||
$("#testSlider1").siblings('div.slider').find('.slider-tick').each(function(i) {
|
||||
expect(this.style.left).toBe(100 * i / 4.0 + '%');
|
||||
});
|
||||
});
|
||||
|
||||
it("Should be at the positions you specify", function() {
|
||||
var tickPositions = [0, 10, 20, 30, 100];
|
||||
testSlider = $("#testSlider1").slider({
|
||||
ticks: [100, 200, 300, 400, 500],
|
||||
ticks_positions: tickPositions
|
||||
});
|
||||
|
||||
$("#testSlider1").siblings('div.slider').find('.slider-tick').each(function(i) {
|
||||
expect(this.style.left).toBe(tickPositions[i] + '%');
|
||||
});
|
||||
});
|
||||
|
||||
it("Should have the tick labels you specify", function() {
|
||||
var tickLabels = ['$0', '$100', '$200', '$300', '$400'];
|
||||
testSlider = $("#testSlider1").slider({
|
||||
ticks: [100, 200, 300, 400, 500],
|
||||
ticks_labels: tickLabels
|
||||
});
|
||||
|
||||
var tickLabelElements = $("#testSlider1").siblings('div.slider').find('.slider-tick-label');
|
||||
expect(tickLabelElements.length).toBe(tickLabels.length);
|
||||
tickLabelElements.each(function(i) {
|
||||
expect(this.innerHTML).toBe(tickLabels[i]);
|
||||
});
|
||||
});
|
||||
|
||||
it("Should not snap to a tick within tick bounds when using the keyboard navigation", function() {
|
||||
testSlider = $("#testSlider1").slider({
|
||||
ticks: [100, 200, 300, 400, 500],
|
||||
ticks_snap_bounds: 30
|
||||
});
|
||||
|
||||
// Focus on handle1
|
||||
var handle1 = $("#testSlider1").prev('div.slider').find('.slider-handle');
|
||||
handle1.focus();
|
||||
|
||||
// Create keyboard event
|
||||
var keyboardEvent = document.createEvent("Events");
|
||||
keyboardEvent.initEvent("keydown", true, true);
|
||||
|
||||
var keyPresses = 0;
|
||||
handle1.on("keydown", function() {
|
||||
keyPresses++;
|
||||
var value = $("#testSlider1").slider('getValue');
|
||||
expect(value).toBe(100 + keyPresses);
|
||||
});
|
||||
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 39; // RIGHT
|
||||
for (var i = 0; i < 5; i++) {
|
||||
handle1[0].dispatchEvent(keyboardEvent);
|
||||
}
|
||||
});
|
||||
|
||||
it("Should show the correct tick marks as 'in-selection', according to the `selection` property", function() {
|
||||
var options = {
|
||||
ticks: [100, 200, 300, 400, 500],
|
||||
value: 250,
|
||||
selection: 'after'
|
||||
},
|
||||
$el = $("#testSlider1");
|
||||
|
||||
testSlider = $el.slider(options);
|
||||
expect($el.siblings('div.slider').find('.in-selection').length).toBe(3);
|
||||
|
||||
testSlider.slider('destroy');
|
||||
|
||||
options.selection = 'before';
|
||||
testSlider = $el.slider(options);
|
||||
expect($el.siblings('div.slider').find('.in-selection').length).toBe(2);
|
||||
});
|
||||
|
||||
it("Should reverse the tick labels if `reversed` option is set to true", function() {
|
||||
var ticks = [100, 200, 300, 400, 500];
|
||||
var ticksLabels = ["$100", "$200", "$300", "$400", "$500"];
|
||||
|
||||
// Create reversed slider
|
||||
testSlider = $("#testSlider1").slider({
|
||||
id: "testSlider1Ref",
|
||||
ticks: ticks,
|
||||
ticks_labels: ticksLabels,
|
||||
ticks_snap_bounds: 30,
|
||||
reversed: true
|
||||
});
|
||||
|
||||
// Assert that tick marks are reversed
|
||||
var tickLabelsFromDOM = $("#testSlider1Ref .slider-tick-label-container")
|
||||
.children(".slider-tick-label")
|
||||
.map(function() { return $(this).text(); })
|
||||
.toArray();
|
||||
|
||||
var reversedTickLabels = ticksLabels.reverse();
|
||||
expect(tickLabelsFromDOM).toEqual(reversedTickLabels);
|
||||
});
|
||||
|
||||
it("Should reverse the tick labels if `reversed` option is set to true and `ticks_positions` is specified", function() {
|
||||
var ticks = [0, 100, 200, 300, 400];
|
||||
var ticksLabels = ["$0", "$100", "$200", "$300", "$400"];
|
||||
|
||||
// Create reversed slider
|
||||
testSlider = $("#testSlider1").slider({
|
||||
id: "testSlider1Ref",
|
||||
ticks: ticks,
|
||||
ticks_labels: ticksLabels,
|
||||
ticks_positions: [0, 30, 70, 90, 100],
|
||||
ticks_snap_bounds: 20,
|
||||
value: 200,
|
||||
reversed: true
|
||||
});
|
||||
|
||||
// Assert that tick marks are reversed
|
||||
var tickLabelsFromDOM = $("#testSlider1Ref .slider-tick-label-container .slider-tick-label")
|
||||
.sort(function(tickLabelElemA, tickLabelElemB) {
|
||||
var leftOffsetA = $(tickLabelElemA).position().left;
|
||||
var leftOffsetB = $(tickLabelElemB).position().left;
|
||||
|
||||
return leftOffsetA - leftOffsetB;
|
||||
})
|
||||
.map(function() { return $(this).text(); })
|
||||
.toArray();
|
||||
|
||||
var reversedTickLabels = ticksLabels.reverse();
|
||||
expect(tickLabelsFromDOM).toEqual(reversedTickLabels);
|
||||
});
|
||||
|
||||
it("should wrap all of the ticks within a div with classname '.slider-tick-container'", function() {
|
||||
// Create the slider with ticks
|
||||
var ticks = [0, 100, 200, 300, 400, 600];
|
||||
var $sliderDOMRef = $("#testSlider1");
|
||||
|
||||
// Create reversed slider
|
||||
testSlider = $sliderDOMRef.slider({
|
||||
id: "testSlider1Ref",
|
||||
ticks: ticks,
|
||||
ticks_positions: [0, 30, 70, 90, 100, 130]
|
||||
});
|
||||
|
||||
// Assert that the ticks are children of the container element
|
||||
var numTicks = $sliderDOMRef.siblings('div.slider').find('.slider-tick-container > .slider-tick').length;
|
||||
expect(numTicks).toBe(ticks.length);
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
testSlider.slider('destroy');
|
||||
testSlider = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe("Slider min/max settings", function() {
|
||||
var $inputSlider;
|
||||
|
||||
afterEach(function() {
|
||||
if ($inputSlider) {
|
||||
if ($inputSlider instanceof jQuery) {
|
||||
$inputSlider.slider('destroy');
|
||||
}
|
||||
$inputSlider = null;
|
||||
}
|
||||
});
|
||||
|
||||
it("Should use min/max tick values for min/max settings", function() {
|
||||
$inputSlider = $('#testSlider1').slider({
|
||||
ticks: [1, 2, 3]
|
||||
});
|
||||
|
||||
expect($inputSlider.slider('getAttribute', 'min')).toBe(1);
|
||||
expect($inputSlider.slider('getAttribute', 'max')).toBe(3);
|
||||
});
|
||||
|
||||
it("Should not overwrite 'min' setting", function() {
|
||||
$inputSlider = $('#testSlider1').slider({
|
||||
min: 0,
|
||||
ticks: [1, 2, 3]
|
||||
});
|
||||
|
||||
expect($inputSlider.slider('getAttribute', 'min')).toBe(0);
|
||||
expect($inputSlider.slider('getAttribute', 'max')).toBe(3);
|
||||
});
|
||||
|
||||
it("Should not overwrite 'max' setting", function() {
|
||||
$inputSlider = $('#testSlider1').slider({
|
||||
max: 5,
|
||||
ticks: [1, 2, 3]
|
||||
});
|
||||
|
||||
expect($inputSlider.slider('getAttribute', 'min')).toBe(1);
|
||||
expect($inputSlider.slider('getAttribute', 'max')).toBe(5);
|
||||
});
|
||||
|
||||
it("Should not overwrite 'min' or max' settings", function() {
|
||||
$inputSlider = $('#testSlider1').slider({
|
||||
min: 0,
|
||||
max: 5,
|
||||
ticks: [1, 2, 3]
|
||||
});
|
||||
|
||||
expect($inputSlider.slider('getAttribute', 'min')).toBe(0);
|
||||
expect($inputSlider.slider('getAttribute', 'max')).toBe(5);
|
||||
});
|
||||
|
||||
it("Should ignore the ticks when outside of min/max range", function() {
|
||||
$inputSlider = $("#testSlider1").slider({
|
||||
ticks: [100, 200, 300, 400, 500],
|
||||
min: 15000,
|
||||
max: 25000
|
||||
});
|
||||
|
||||
expect($inputSlider.slider('getAttribute', 'min')).toBe(15000);
|
||||
expect($inputSlider.slider('getAttribute', 'max')).toBe(25000);
|
||||
});
|
||||
});
|
||||
445
bower_components/seiyria-bootstrap-slider/test/specs/TooltipMouseOverOptionSpec.js
vendored
Normal file
445
bower_components/seiyria-bootstrap-slider/test/specs/TooltipMouseOverOptionSpec.js
vendored
Normal file
|
|
@ -0,0 +1,445 @@
|
|||
describe("'ticks_tooltip' Option tests", function() {
|
||||
var testSlider;
|
||||
var mouseEventArguments;
|
||||
|
||||
beforeEach(function() {
|
||||
// Set up default set of mouse event arguments
|
||||
mouseEventArguments = [
|
||||
'mousemove', // type
|
||||
true, // canBubble
|
||||
true, // cancelable
|
||||
document, // view,
|
||||
0, // detail
|
||||
0, // screenX
|
||||
0, // screenY
|
||||
undefined, // clientX
|
||||
undefined, // clientY,
|
||||
false, // ctrlKey
|
||||
false, // altKey
|
||||
false, // shiftKey
|
||||
false, // metaKey,
|
||||
0, // button
|
||||
null // relatedTarget
|
||||
];
|
||||
});
|
||||
|
||||
describe("ticks_tooltip states", function() {
|
||||
it("should have the tooltip above the last hovered over element", function() {
|
||||
testSlider = new Slider(document.getElementById("testSlider1"), {
|
||||
ticks: [0, 1, 2, 3, 4, 5, 6],
|
||||
ticks_positions: [0, 19, 29, 39, 49, 95, 100],
|
||||
step: 1,
|
||||
value: 4,
|
||||
ticks_tooltip: true,
|
||||
orientation: 'horizontal'
|
||||
});
|
||||
mouseEventArguments[8] = testSlider.sliderElem.offsetTop; // clientY
|
||||
var mouse49 = document.createEvent('MouseEvents');
|
||||
mouseEventArguments[7] = testSlider.ticks[4].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
|
||||
mouse49.initMouseEvent.apply(mouse49, mouseEventArguments);
|
||||
var mouse95 = document.createEvent('MouseEvents');
|
||||
mouseEventArguments[7] = testSlider.ticks[5].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
|
||||
mouse95.initMouseEvent.apply(mouse95, mouseEventArguments);
|
||||
var mouse100 = document.createEvent('MouseEvents');
|
||||
mouseEventArguments[7] = testSlider.ticks[6].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
|
||||
mouse100.initMouseEvent.apply(mouse100, mouseEventArguments);
|
||||
var mouseStart = document.createEvent('MouseEvents');
|
||||
mouseEventArguments[7] = testSlider.ticks[0].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
|
||||
mouseStart.initMouseEvent.apply(mouseStart, mouseEventArguments);
|
||||
|
||||
//Simulate random movements
|
||||
testSlider.mousedown(mouse49);
|
||||
testSlider.mousemove(mouse95);
|
||||
// FIXME: Use 'mouseup' event type
|
||||
testSlider.mouseup(mouse95);
|
||||
testSlider.mousedown(mouse49);
|
||||
testSlider.mousemove(mouse100);
|
||||
testSlider.mousemove(mouse95);
|
||||
testSlider.mousemove(mouse95);
|
||||
testSlider.mousemove(mouseStart);
|
||||
expect(testSlider.tooltip.style.left).toBe("0%");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Always show the tooltip", function() {
|
||||
it("Should always display the tooltip after hovering over a tick", function(done) {
|
||||
testSlider = new Slider(document.getElementById("testSlider1"), {
|
||||
id: 'mySlider',
|
||||
min: 0,
|
||||
max: 10,
|
||||
step: 1,
|
||||
value: 1,
|
||||
ticks: [0, 5, 10],
|
||||
tooltip: 'always',
|
||||
ticks_tooltip: true,
|
||||
orientation: 'horizontal'
|
||||
});
|
||||
var bigOffset = 100000;
|
||||
|
||||
var isTooltipVisible = $('#mySlider').find('.tooltip.tooltip-main').hasClass('in');
|
||||
expect(isTooltipVisible).toBe(true);
|
||||
|
||||
var mouseenter = document.createEvent('MouseEvent');
|
||||
mouseEventArguments[0] = 'mouseenter';
|
||||
mouseEventArguments[7] =
|
||||
testSlider.ticks[1].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
|
||||
mouseenter.initMouseEvent.apply(mouseenter, mouseEventArguments);
|
||||
|
||||
var mouseleave = document.createEvent('MouseEvent');
|
||||
mouseEventArguments[0] = 'mouseleave';
|
||||
mouseEventArguments[7] = testSlider.sliderElem.offsetLeft + bigOffset;
|
||||
mouseleave.initMouseEvent.apply(mouseleave, mouseEventArguments);
|
||||
|
||||
testSlider.ticks[1].addEventListener('mouseleave', function() {
|
||||
isTooltipVisible = $('#mySlider').find('.tooltip.tooltip-main').hasClass('in');
|
||||
expect(isTooltipVisible).toBe(true);
|
||||
done();
|
||||
});
|
||||
|
||||
testSlider.ticks[1].dispatchEvent(mouseenter);
|
||||
testSlider.ticks[1].dispatchEvent(mouseleave);
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
if(testSlider instanceof Slider) { testSlider.destroy(); }
|
||||
testSlider = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* The mouse navigation tests are based on the following slider properties:
|
||||
*
|
||||
* initial value: 3 or [3, 7]
|
||||
* ticks: [0, 3, 5, 7, 10]
|
||||
* step: 1
|
||||
*
|
||||
* When the `ticks_tooltip` option is set to `true`, hovering over the ticks or handles
|
||||
* should show the tooltip above it with the value of the tick/handle.
|
||||
*
|
||||
* The test logic for sliders:
|
||||
* 1. Hover over the 1st tick
|
||||
* 2. Check if the tooltip is positioned correctly (left, top, right)
|
||||
* 3. Check if the tooltip should be showing
|
||||
* 4. Check if the tooltip contains the correct value
|
||||
* 5. Check if the slider value(s) haven't changed
|
||||
*
|
||||
*/
|
||||
describe("`ticks_tooltip: true` mouse navigation test cases", function() {
|
||||
var initialValue = 3;
|
||||
var initialRangeValues = [3, 7];
|
||||
var tickValues = [0, 3, 5, 7, 10];
|
||||
var stepValue = 1;
|
||||
|
||||
var orientations = ['horizontal', 'vertical'];
|
||||
var reversed = [false, true];
|
||||
var sliderTypes = ['single', 'range'];
|
||||
var rtl = [false, true];
|
||||
var testCases = [];
|
||||
var mouseEventArguments;
|
||||
|
||||
function calcMouseEventCoords(element) {
|
||||
var elementBB = element.getBoundingClientRect();
|
||||
|
||||
return {
|
||||
clientX: elementBB.left,
|
||||
clientY: elementBB.top
|
||||
};
|
||||
}
|
||||
|
||||
function createMouseEvent(type, clientX, clientY) {
|
||||
var mouseEvent = document.createEvent('MouseEvent');
|
||||
mouseEventArguments[0] = type;
|
||||
mouseEventArguments[7] = clientX;
|
||||
mouseEventArguments[8] = clientY;
|
||||
mouseEvent.initMouseEvent.apply(mouseEvent, mouseEventArguments);
|
||||
return mouseEvent;
|
||||
}
|
||||
|
||||
beforeEach(function() {
|
||||
// Set up default set of mouse event arguments
|
||||
mouseEventArguments = [
|
||||
'mousemove', // type
|
||||
true, // canBubble
|
||||
true, // cancelable
|
||||
document, // view,
|
||||
0, // detail
|
||||
0, // screenX
|
||||
0, // screenY
|
||||
undefined, // clientX
|
||||
undefined, // clientY,
|
||||
false, // ctrlKey
|
||||
false, // altKey
|
||||
false, // shiftKey
|
||||
false, // metaKey,
|
||||
0, // button
|
||||
null // relatedTarget
|
||||
];
|
||||
});
|
||||
|
||||
sliderTypes.forEach(function(sliderType) {
|
||||
orientations.forEach(function(orientation) {
|
||||
rtl.forEach(function(isRTL) {
|
||||
reversed.forEach(function(isReversed) {
|
||||
var isHorizontal = orientation === 'horizontal';
|
||||
var isVertical = orientation === 'vertical';
|
||||
var isRange = sliderType === 'range';
|
||||
var whichStyle;
|
||||
|
||||
if (isHorizontal) {
|
||||
if (isRTL) {
|
||||
whichStyle = 'right';
|
||||
}
|
||||
else {
|
||||
whichStyle = 'left';
|
||||
}
|
||||
}
|
||||
else if (isVertical) {
|
||||
whichStyle = 'top';
|
||||
}
|
||||
|
||||
testCases.push({
|
||||
value: isRange ? initialRangeValues : initialValue,
|
||||
step: stepValue,
|
||||
range: isRange,
|
||||
orientation: orientation,
|
||||
reversed: isReversed,
|
||||
rtl: 'auto',
|
||||
isRTL: isRTL,
|
||||
inputId: isRTL ? 'rtlSlider' : 'testSlider1',
|
||||
expectedValue: isRange ? initialRangeValues : initialValue,
|
||||
stylePos: whichStyle
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
testCases.forEach(function(testCase) {
|
||||
describe("range=" + testCase.range + ", orientation=" + testCase.orientation +
|
||||
", rtl=" + testCase.isRTL + ", reversed=" + testCase.reversed, function() {
|
||||
var $testSlider;
|
||||
var sliderElem;
|
||||
var $handle1;
|
||||
var $handle2;
|
||||
var $ticks;
|
||||
var sliderId;
|
||||
var sliderOptions;
|
||||
var $tooltip;
|
||||
var $tooltipInner;
|
||||
var lastTickIndex;
|
||||
var mouseEventType = 'mouseenter';
|
||||
|
||||
beforeEach(function() {
|
||||
sliderId = testCase.range ? 'myRangeSlider' : 'mySlider';
|
||||
|
||||
sliderOptions = {
|
||||
id: sliderId,
|
||||
step: testCase.step,
|
||||
orientation: testCase.orientation,
|
||||
value: testCase.value,
|
||||
range: testCase.range,
|
||||
reversed: testCase.reversed,
|
||||
rtl: 'auto',
|
||||
ticks: tickValues,
|
||||
ticks_tooltip: true
|
||||
};
|
||||
|
||||
$testSlider = $('#'+testCase.inputId).slider(sliderOptions);
|
||||
sliderElem = $('#'+sliderId)[0];
|
||||
$ticks = $(sliderElem).find('.slider-tick');
|
||||
$handle1 = $(sliderElem).find('.slider-handle:first');
|
||||
$handle2 = $(sliderElem).find('.slider-handle:last');
|
||||
$tooltip = $(sliderElem).find('.tooltip.tooltip-main');
|
||||
$tooltipInner = $tooltip.find('.tooltip-inner');
|
||||
lastTickIndex = sliderOptions.ticks.length - 1;
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
// Clean up any associated event listeners
|
||||
$ticks = null;
|
||||
$handle1 = null;
|
||||
$handle2 = null;
|
||||
|
||||
if ($testSlider) {
|
||||
$testSlider.slider('destroy');
|
||||
$testSlider = null;
|
||||
}
|
||||
});
|
||||
|
||||
it("Should position the tooltip correctly", function(done) {
|
||||
$ticks.each(function(index, tickElem) {
|
||||
var coords = calcMouseEventCoords(tickElem);
|
||||
|
||||
var tickCallback = function() {
|
||||
// Check position
|
||||
expect($tooltip.css(testCase.stylePos)).toBe($(this).css(testCase.stylePos));
|
||||
|
||||
if (index === lastTickIndex) {
|
||||
done();
|
||||
}
|
||||
};
|
||||
|
||||
// Set up listener and dispatch event
|
||||
this.addEventListener(mouseEventType, tickCallback, false);
|
||||
this.dispatchEvent(createMouseEvent(mouseEventType, coords.clientX, coords.clientY));
|
||||
});
|
||||
});
|
||||
|
||||
it("Should show the tooltip", function(done) {
|
||||
$ticks.each(function(index, tickElem) {
|
||||
var coords = calcMouseEventCoords(tickElem);
|
||||
|
||||
var tickCallback = function() {
|
||||
// Check that tooltip shows
|
||||
expect($tooltip.hasClass('in')).toBe(true);
|
||||
|
||||
if (index === lastTickIndex) {
|
||||
done();
|
||||
}
|
||||
};
|
||||
|
||||
this.addEventListener(mouseEventType, tickCallback, false);
|
||||
this.dispatchEvent(createMouseEvent(mouseEventType, coords.clientX, coords.clientY));
|
||||
});
|
||||
});
|
||||
|
||||
it("Should not show the tooltip", function(done) {
|
||||
var bigOffset = 100000;
|
||||
|
||||
$ticks.each(function(index, tickElem) {
|
||||
var coords = calcMouseEventCoords(tickElem);
|
||||
|
||||
var tickCallback = function() {
|
||||
// Check that tooltip shows
|
||||
expect($tooltip.hasClass('in')).toBe(false);
|
||||
|
||||
if (index === lastTickIndex) {
|
||||
done();
|
||||
}
|
||||
};
|
||||
|
||||
this.addEventListener('mouseleave', tickCallback, false);
|
||||
this.dispatchEvent(createMouseEvent('mouseleave', coords.clientX + bigOffset, coords.clientY));
|
||||
});
|
||||
});
|
||||
|
||||
it("Should contain the correct value for the tooltip", function(done) {
|
||||
$ticks.each(function(index, tickElem) {
|
||||
var coords = calcMouseEventCoords(tickElem);
|
||||
|
||||
var tickCallback = function() {
|
||||
// Check value of tooltip
|
||||
expect($tooltipInner.text()).toBe(''+sliderOptions.ticks[index]);
|
||||
|
||||
if (index === lastTickIndex) {
|
||||
done();
|
||||
}
|
||||
};
|
||||
|
||||
this.addEventListener(mouseEventType, tickCallback, false);
|
||||
this.dispatchEvent(createMouseEvent(mouseEventType, coords.clientX, coords.clientY));
|
||||
});
|
||||
});
|
||||
|
||||
it("Should not modify the value(s) of the slider when displaying the tooltip", function(done) {
|
||||
$ticks.each(function(index, tickElem) {
|
||||
var coords = calcMouseEventCoords(tickElem);
|
||||
|
||||
var tickCallback = function() {
|
||||
var value = $testSlider.slider('getValue');
|
||||
|
||||
// Check value of slider
|
||||
expect(value).toEqual(testCase.expectedValue);
|
||||
|
||||
if (index === lastTickIndex) {
|
||||
done();
|
||||
}
|
||||
};
|
||||
|
||||
this.addEventListener(mouseEventType, tickCallback, false);
|
||||
this.dispatchEvent(createMouseEvent(mouseEventType, coords.clientX, coords.clientY));
|
||||
});
|
||||
});
|
||||
|
||||
describe("Test position and values of the tooltip when hovering over the handle(s)", function() {
|
||||
|
||||
if (testCase.range) {
|
||||
it("Should position for the tooltip correctly (range)", function(done) {
|
||||
var handleElems = [$handle1[0], $handle2[0]];
|
||||
|
||||
$.each(handleElems, function(index, handleElem) {
|
||||
var coords = calcMouseEventCoords(handleElem, testCase.orientation);
|
||||
|
||||
var handleCallback = function() {
|
||||
// Check position
|
||||
expect($tooltip.css(testCase.stylePos)).toBe($(handleElem).css(testCase.stylePos));
|
||||
|
||||
if (index === 1) {
|
||||
done();
|
||||
}
|
||||
};
|
||||
|
||||
handleElem.addEventListener(mouseEventType, handleCallback, false);
|
||||
handleElem.dispatchEvent(createMouseEvent(mouseEventType, coords.clientX, coords.clientY));
|
||||
});
|
||||
});
|
||||
|
||||
it("Should contain the correct values for the tooltip (range)", function(done) {
|
||||
var handleElems = [$handle1[0], $handle2[0]];
|
||||
|
||||
$.each(handleElems, function(index, handleElem) {
|
||||
var coords = calcMouseEventCoords(handleElem, testCase.orientation);
|
||||
|
||||
var handleCallback = function() {
|
||||
// Check value of tooltip
|
||||
expect($tooltipInner.text()).toBe(''+testCase.expectedValue[index]);
|
||||
|
||||
if (index === 1) {
|
||||
done();
|
||||
}
|
||||
};
|
||||
|
||||
handleElem.addEventListener(mouseEventType, handleCallback, false);
|
||||
handleElem.dispatchEvent(createMouseEvent(mouseEventType, coords.clientX, coords.clientY));
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
else {
|
||||
it("Should position for the tooltip correctly (single)", function(done) {
|
||||
var handleElem = $handle1[0];
|
||||
|
||||
var coords = calcMouseEventCoords(handleElem, testCase.orientation);
|
||||
|
||||
var handleCallback = function() {
|
||||
// Check position
|
||||
expect($tooltip.css(testCase.stylePos)).toBe($(handleElem).css(testCase.stylePos));
|
||||
done();
|
||||
};
|
||||
|
||||
handleElem.addEventListener(mouseEventType, handleCallback, false);
|
||||
handleElem.dispatchEvent(createMouseEvent(mouseEventType, coords.clientX, coords.clientY));
|
||||
});
|
||||
|
||||
it("Should contain the correct value for the tooltip (single)", function(done) {
|
||||
var handleElem = $handle1[0];
|
||||
|
||||
var coords = calcMouseEventCoords(handleElem, testCase.orientation);
|
||||
|
||||
var handleCallback = function() {
|
||||
// Check value of tooltip
|
||||
expect($tooltipInner.text()).toBe(''+testCase.expectedValue);
|
||||
done();
|
||||
};
|
||||
|
||||
handleElem.addEventListener(mouseEventType, handleCallback, false);
|
||||
handleElem.dispatchEvent(createMouseEvent(mouseEventType, coords.clientX, coords.clientY));
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
194
bower_components/seiyria-bootstrap-slider/test/specs/TooltipPositionOptionSpec.js
vendored
Normal file
194
bower_components/seiyria-bootstrap-slider/test/specs/TooltipPositionOptionSpec.js
vendored
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
/*
|
||||
*************************
|
||||
|
||||
tooltip_position Option Test
|
||||
|
||||
*************************
|
||||
*/
|
||||
describe("'tooltip_position' Option tests", function() {
|
||||
|
||||
var testSlider;
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
testSlider.destroy();
|
||||
testSlider = null;
|
||||
}
|
||||
});
|
||||
|
||||
describe("vertical slider tests", function() {
|
||||
|
||||
it("should be aligned to the left of the handle if set to 'left'", function() {
|
||||
// Create slider
|
||||
testSlider = new Slider("#testSlider1", {
|
||||
min: 0,
|
||||
max: 10,
|
||||
value: 5,
|
||||
tooltip_position: "left",
|
||||
orientation: "vertical"
|
||||
});
|
||||
|
||||
// Extract needed references/values
|
||||
var mainTooltipHasClassLeft = testSlider.tooltip.classList.contains("left");
|
||||
|
||||
// Assert
|
||||
expect(mainTooltipHasClassLeft).toBeTruthy();
|
||||
expect(testSlider.tooltip.style.right).toBe("100%");
|
||||
});
|
||||
|
||||
it("should be aligned to the right of the handle if set to 'right'", function() {
|
||||
// Create slider
|
||||
testSlider = new Slider("#testSlider1", {
|
||||
min: 0,
|
||||
max: 10,
|
||||
value: 5,
|
||||
tooltip_position: "right",
|
||||
orientation: "vertical"
|
||||
});
|
||||
|
||||
// Extract needed references/values
|
||||
var mainTooltipHasClassRight = testSlider.tooltip.classList.contains("right");
|
||||
|
||||
// Assert
|
||||
expect(mainTooltipHasClassRight).toBeTruthy();
|
||||
expect(testSlider.tooltip.style.left).toBe("100%");
|
||||
});
|
||||
|
||||
it("should default to 'right' if tooltip_position set to 'top'", function() {
|
||||
// Create slider
|
||||
testSlider = new Slider("#testSlider1", {
|
||||
min: 0,
|
||||
max: 10,
|
||||
value: 5,
|
||||
tooltip_position: "top",
|
||||
orientation: "vertical"
|
||||
});
|
||||
|
||||
// Extract needed references/values
|
||||
var mainTooltipHasClassRight = testSlider.tooltip.classList.contains("right");
|
||||
|
||||
// Assert
|
||||
expect(mainTooltipHasClassRight).toBeTruthy();
|
||||
expect(testSlider.tooltip.style.left).toBe("100%");
|
||||
});
|
||||
|
||||
it("should default to 'right' if tooltip_position set to 'bottom'", function() {
|
||||
// Create slider
|
||||
testSlider = new Slider("#testSlider1", {
|
||||
min: 0,
|
||||
max: 10,
|
||||
value: 5,
|
||||
tooltip_position: "bottom",
|
||||
orientation: "vertical"
|
||||
});
|
||||
|
||||
// Extract needed references/values
|
||||
var mainTooltipHasClassRight = testSlider.tooltip.classList.contains("right");
|
||||
|
||||
// Assert
|
||||
expect(mainTooltipHasClassRight).toBeTruthy();
|
||||
expect(testSlider.tooltip.style.left).toBe("100%");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
describe("horizontal slider tests", function() {
|
||||
|
||||
it("should be aligned above the handle if set to 'top'", function() {
|
||||
// Create slider
|
||||
testSlider = new Slider("#testSlider1", {
|
||||
min: 0,
|
||||
max: 10,
|
||||
value: 5,
|
||||
tooltip_position: "top",
|
||||
orientation: "horizontal"
|
||||
});
|
||||
|
||||
// Extract needed references/values
|
||||
var mainTooltipHasClassTop = testSlider.tooltip.classList.contains("top");
|
||||
|
||||
// Assert
|
||||
expect(mainTooltipHasClassTop).toBeTruthy();
|
||||
expect(testSlider.tooltip.style.top).toBe("");
|
||||
});
|
||||
|
||||
it("should be aligned below the handle if set to 'bottom'", function() {
|
||||
// Create slider
|
||||
testSlider = new Slider("#testSlider1", {
|
||||
min: 0,
|
||||
max: 10,
|
||||
value: 5,
|
||||
tooltip_position: "bottom",
|
||||
orientation: "horizontal"
|
||||
});
|
||||
|
||||
// Extract needed references/values
|
||||
var mainTooltipHasClassTop = testSlider.tooltip.classList.contains("bottom");
|
||||
|
||||
// Assert
|
||||
expect(mainTooltipHasClassTop).toBeTruthy();
|
||||
expect(testSlider.tooltip.style.top).toBe("22px");
|
||||
});
|
||||
|
||||
it("should be aligned below the handle if set to 'bottom' for range", function() {
|
||||
// Create slider
|
||||
testSlider = new Slider("#testSlider1", {
|
||||
min: 0,
|
||||
max: 20,
|
||||
value: [0, 10],
|
||||
range: true,
|
||||
tooltip_position: "bottom",
|
||||
orientation: "horizontal"
|
||||
});
|
||||
|
||||
// Extract needed references/values
|
||||
var mainTooltipHasClassTopMin = testSlider.tooltip_min.classList.contains("bottom");
|
||||
var mainTooltipHasClassTopMax = testSlider.tooltip_max.classList.contains("bottom");
|
||||
|
||||
// Assert
|
||||
expect(mainTooltipHasClassTopMin).toBeTruthy();
|
||||
expect(mainTooltipHasClassTopMax).toBeTruthy();
|
||||
expect(testSlider.tooltip_min.style.top).toBe("22px");
|
||||
expect(testSlider.tooltip_max.style.top).toBe("22px");
|
||||
});
|
||||
|
||||
it("should default to 'top' if tooltip_position set to 'left'", function() {
|
||||
// Create slider
|
||||
testSlider = new Slider("#testSlider1", {
|
||||
min: 0,
|
||||
max: 10,
|
||||
value: 5,
|
||||
tooltip_position: "left",
|
||||
orientation: "horizontal"
|
||||
});
|
||||
|
||||
// Extract needed references/values
|
||||
var mainTooltipHasClassTop = testSlider.tooltip.classList.contains("top");
|
||||
|
||||
// Assert
|
||||
expect(mainTooltipHasClassTop).toBeTruthy();
|
||||
expect(testSlider.tooltip.style.top).toBe("");
|
||||
});
|
||||
|
||||
it("should default to 'top' if tooltip_position set to 'right'", function() {
|
||||
// Create slider
|
||||
testSlider = new Slider("#testSlider1", {
|
||||
min: 0,
|
||||
max: 10,
|
||||
value: 5,
|
||||
tooltip_position: "right",
|
||||
orientation: "horizontal"
|
||||
});
|
||||
|
||||
// Extract needed references/values
|
||||
var mainTooltipHasClassTop = testSlider.tooltip.classList.contains("top");
|
||||
|
||||
// Assert
|
||||
expect(mainTooltipHasClassTop).toBeTruthy();
|
||||
expect(testSlider.tooltip.style.top).toBe("");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
71
bower_components/seiyria-bootstrap-slider/test/specs/TooltipSplitOptionSpec.js
vendored
Normal file
71
bower_components/seiyria-bootstrap-slider/test/specs/TooltipSplitOptionSpec.js
vendored
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
/*
|
||||
*************************
|
||||
|
||||
tooltip_split Option Test
|
||||
|
||||
*************************
|
||||
|
||||
This spec tests if tooltip_main, tooltip_min and tooltip_max
|
||||
behave correctly when tooltip_split option is set to true or false.
|
||||
*/
|
||||
describe("'tooltip_split' Option tests", function() {
|
||||
var testSlider, sliderId = "tooltipedSlider",
|
||||
$slider, $tooltipMain, $tooltipMin, $tooltipMax,
|
||||
sliderOptions = {id: sliderId, value: [0, 10], tooltip: "always"}; // for the sake of testing, always display the tooltip
|
||||
|
||||
describe("When 'tooltip_split' is false", function() {
|
||||
beforeEach(function() {
|
||||
testSlider = $("#testSlider1").slider($.extend(sliderOptions, {tooltip_split: false}));
|
||||
$slider = $("#"+sliderId);
|
||||
$tooltipMain = $slider.find(".tooltip-main");
|
||||
$tooltipMin = $slider.find(".tooltip-min");
|
||||
$tooltipMax = $slider.find(".tooltip-max");
|
||||
});
|
||||
|
||||
it("should have `tooltip-main` displayed with `in` class", function() {
|
||||
expect($tooltipMain.css("display")).not.toBe("none");
|
||||
expect($tooltipMain.hasClass("in")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should have `tooltip-min, tooltip-max` not displayed", function() {
|
||||
expect($tooltipMin.css("display")).toBe("none");
|
||||
expect($tooltipMin.hasClass("in")).toBeFalsy();
|
||||
expect($tooltipMax.css("display")).toBe("none");
|
||||
expect($tooltipMax.hasClass("in")).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
describe("When 'tooltip_split' is true", function() {
|
||||
beforeEach(function() {
|
||||
testSlider = $("#testSlider1").slider($.extend(sliderOptions, {tooltip_split: true}));
|
||||
$slider = $("#"+sliderId);
|
||||
$tooltipMain = $slider.find(".tooltip-main");
|
||||
$tooltipMin = $slider.find(".tooltip-min");
|
||||
$tooltipMax = $slider.find(".tooltip-max");
|
||||
});
|
||||
|
||||
it("should have `tooltip-min, tooltip-max` displayed with `in` class", function() {
|
||||
expect($tooltipMin.css("display")).not.toBe("none");
|
||||
expect($tooltipMin.hasClass("in")).toBeTruthy();
|
||||
expect($tooltipMax.css("display")).not.toBe("none");
|
||||
expect($tooltipMax.hasClass("in")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should have `tooltip-main` not displayed", function() {
|
||||
expect($tooltipMain.css("display")).toBe("none");
|
||||
expect($tooltipMain.hasClass("in")).toBeFalsy();
|
||||
});
|
||||
|
||||
it("should be aligned above the handle on init if set to 'top'", function() {
|
||||
expect($tooltipMin.hasClass("top")).toBeTruthy();
|
||||
expect($tooltipMax.hasClass("top")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
if(testSlider) {
|
||||
testSlider.slider('destroy');
|
||||
testSlider = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,571 @@
|
|||
/* The following functions are taken and slightly modified from mock-phantom-touch-events.
|
||||
*
|
||||
* The original mock-phantom-touch-events can be found at https://github.com/gardr/mock-phantom-touch-events
|
||||
*
|
||||
* mock-phantom-touch-events is licensed under:
|
||||
*
|
||||
* The MIT License (MIT)
|
||||
* Copyright (c) 2013 FINN.no AS
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
* this software and associated documentation files (the "Software"), to deal in
|
||||
* the Software without restriction, including without limitation the rights to
|
||||
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
* the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
* subject to the following conditions:
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
list can be either [[x, y], [x, y]] or [x, y]
|
||||
*/
|
||||
function createTouchList(target, list) {
|
||||
if (Array.isArray(list) && list[0] && !Array.isArray(list[0])) {
|
||||
list = [list];
|
||||
}
|
||||
list = list.map(function (entry, index) {
|
||||
var x = entry[0], y = entry[1], id = entry[2] ? entry[2] : index + 1;
|
||||
return createTouch(x, y, target, id);
|
||||
});
|
||||
return document.createTouchList.apply(document, list);
|
||||
}
|
||||
|
||||
function createTouch(x, y, target, id) {
|
||||
return document.createTouch(window, target,
|
||||
id || 1, //identifier
|
||||
x, //pageX / clientX
|
||||
y, //pageY / clientY
|
||||
x, //screenX
|
||||
y //screenY
|
||||
);
|
||||
}
|
||||
|
||||
function initTouchEvent(touchEvent, type, touches) {
|
||||
var touch1 = touches[0];
|
||||
return touchEvent.initTouchEvent(
|
||||
touches, //touches
|
||||
touches, //targetTouches
|
||||
touches, //changedTouches
|
||||
type, //type
|
||||
window, //view
|
||||
touch1.screenX, //screenX
|
||||
touch1.screenY, //screenY
|
||||
touch1.clientX, //clientX
|
||||
touch1.clientY, //clientY
|
||||
false, //ctrlKey
|
||||
false, //altKey
|
||||
false, //shiftKey
|
||||
false //metaKey
|
||||
);
|
||||
}
|
||||
|
||||
function createTouchEvent(elem, type, touches) {
|
||||
var touchEvent = document.createEvent('TouchEvent');
|
||||
if (Array.isArray(touches)) {
|
||||
touches = createTouchList(elem, touches);
|
||||
}
|
||||
|
||||
initTouchEvent(touchEvent, type, touches);
|
||||
return touchEvent;
|
||||
}
|
||||
|
||||
function calcTouchEventCoords(element) {
|
||||
var elementBB = element.getBoundingClientRect();
|
||||
|
||||
return {
|
||||
x: elementBB.left,
|
||||
y: elementBB.top
|
||||
};
|
||||
}
|
||||
|
||||
describe("Touch Capable Tests", function() {
|
||||
var touchStart;
|
||||
var touchMove;
|
||||
var touchEnd;
|
||||
|
||||
var $testSlider;
|
||||
var sliderInst;
|
||||
var inputId;
|
||||
var sliderId;
|
||||
var sliderOptions;
|
||||
|
||||
beforeEach(function() {
|
||||
inputId = 'testSlider1';
|
||||
sliderId = 'mySlider';
|
||||
|
||||
sliderOptions = {
|
||||
id: sliderId,
|
||||
step: 1,
|
||||
value: 5,
|
||||
ticks: [0, 3, 5, 7, 10]
|
||||
};
|
||||
|
||||
// Enable touch
|
||||
window.ontouchstart = true;
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
window.ontouchstart = null;
|
||||
|
||||
if ($testSlider) {
|
||||
$testSlider.slider('destroy');
|
||||
$testSlider = null;
|
||||
}
|
||||
});
|
||||
|
||||
describe("single slider", function() {
|
||||
|
||||
beforeEach(function() {
|
||||
// Initialize the slider
|
||||
$testSlider = $('#' + inputId).slider(sliderOptions);
|
||||
|
||||
// Get slider instance
|
||||
sliderInst = $testSlider.data('slider');
|
||||
});
|
||||
|
||||
// index= [0 1 2 3 4]
|
||||
// ticks= [0 3 5 7 10]
|
||||
it("should slide the handle to the left from 5 to 3", function(done) {
|
||||
var sliderElem = $testSlider.slider('getElement');
|
||||
$testSlider.on('slideStop', function() {
|
||||
var value = $testSlider.slider('getValue');
|
||||
expect(value).toBe(3);
|
||||
done();
|
||||
});
|
||||
|
||||
var tick = sliderInst.ticks[2]; // 5
|
||||
var sliderCoords = calcTouchEventCoords(sliderElem);
|
||||
var coords = [sliderCoords.x + tick.offsetLeft, sliderCoords.y];
|
||||
touchStart = createTouchEvent(sliderElem, 'touchstart', coords);
|
||||
|
||||
tick = sliderInst.ticks[1]; // 3
|
||||
coords = [sliderCoords.x + tick.offsetLeft, sliderCoords.y];
|
||||
touchMove = createTouchEvent(sliderElem, 'touchmove', coords);
|
||||
|
||||
touchEnd = createTouchEvent(sliderElem, 'touchend', coords);
|
||||
|
||||
sliderElem.dispatchEvent(touchStart);
|
||||
sliderElem.dispatchEvent(touchMove);
|
||||
sliderElem.dispatchEvent(touchEnd);
|
||||
});
|
||||
|
||||
it("should slide the handle to the right from 5 to 7", function(done) {
|
||||
var sliderElem = $testSlider.slider('getElement');
|
||||
$testSlider.on('slideStop', function() {
|
||||
var value = $testSlider.slider('getValue');
|
||||
expect(value).toBe(7);
|
||||
done();
|
||||
});
|
||||
|
||||
var tick = sliderInst.ticks[2]; // 5
|
||||
var sliderCoords = calcTouchEventCoords(sliderElem);
|
||||
var coords = [sliderCoords.x + tick.offsetLeft, sliderCoords.y];
|
||||
touchStart = createTouchEvent(sliderElem, 'touchstart', coords);
|
||||
|
||||
tick = sliderInst.ticks[3]; // 7
|
||||
coords = [sliderCoords.x + tick.offsetLeft, sliderCoords.y];
|
||||
touchMove = createTouchEvent(sliderElem, 'touchmove', coords);
|
||||
|
||||
touchEnd = createTouchEvent(sliderElem, 'touchend', coords);
|
||||
|
||||
sliderElem.dispatchEvent(touchStart);
|
||||
sliderElem.dispatchEvent(touchMove);
|
||||
sliderElem.dispatchEvent(touchEnd);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("single, vertical slider", function() {
|
||||
|
||||
beforeEach(function() {
|
||||
// Initialize the slider
|
||||
sliderOptions.orientation = 'vertical';
|
||||
$testSlider = $('#' + inputId).slider(sliderOptions);
|
||||
|
||||
// Get slider instance
|
||||
sliderInst = $testSlider.data('slider');
|
||||
});
|
||||
|
||||
// index= [0 1 2 3 4]
|
||||
// ticks= [0 3 5 7 10]
|
||||
it("should slide the handle to the top from 5 to 3", function(done) {
|
||||
var sliderElem = $testSlider.slider('getElement');
|
||||
$testSlider.on('slideStop', function() {
|
||||
var value = $testSlider.slider('getValue');
|
||||
expect(value).toBe(3);
|
||||
done();
|
||||
});
|
||||
|
||||
var tick = sliderInst.ticks[2]; // 5
|
||||
var sliderCoords = calcTouchEventCoords(sliderElem);
|
||||
var coords = [sliderCoords.x, sliderCoords.y + tick.offsetTop];
|
||||
touchStart = createTouchEvent(sliderElem, 'touchstart', coords);
|
||||
|
||||
tick = sliderInst.ticks[1]; // 3
|
||||
coords = [sliderCoords.x, sliderCoords.y + tick.offsetTop];
|
||||
touchMove = createTouchEvent(sliderElem, 'touchmove', coords);
|
||||
|
||||
touchEnd = createTouchEvent(sliderElem, 'touchend', coords);
|
||||
|
||||
sliderElem.dispatchEvent(touchStart);
|
||||
sliderElem.dispatchEvent(touchMove);
|
||||
sliderElem.dispatchEvent(touchEnd);
|
||||
});
|
||||
|
||||
it("should slide the handle to the bottom from 5 to 7", function(done) {
|
||||
var sliderElem = $testSlider.slider('getElement');
|
||||
$testSlider.on('slideStop', function() {
|
||||
var value = $testSlider.slider('getValue');
|
||||
expect(value).toBe(7);
|
||||
done();
|
||||
});
|
||||
|
||||
var tick = sliderInst.ticks[2]; // 5
|
||||
var sliderCoords = calcTouchEventCoords(sliderElem);
|
||||
var coords = [sliderCoords.x, sliderCoords.y + tick.offsetTop];
|
||||
touchStart = createTouchEvent(sliderElem, 'touchstart', coords);
|
||||
|
||||
tick = sliderInst.ticks[3]; // 7
|
||||
coords = [sliderCoords.x, sliderCoords.y + tick.offsetTop];
|
||||
touchMove = createTouchEvent(sliderElem, 'touchmove', coords);
|
||||
|
||||
touchEnd = createTouchEvent(sliderElem, 'touchend', coords);
|
||||
|
||||
sliderElem.dispatchEvent(touchStart);
|
||||
sliderElem.dispatchEvent(touchMove);
|
||||
sliderElem.dispatchEvent(touchEnd);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("range slider", function() {
|
||||
|
||||
beforeEach(function() {
|
||||
sliderOptions.range = true;
|
||||
sliderOptions.value = [3, 7];
|
||||
|
||||
// Initialize the slider
|
||||
$testSlider = $('#' + inputId).slider(sliderOptions);
|
||||
|
||||
// Get slider instance
|
||||
sliderInst = $testSlider.data('slider');
|
||||
});
|
||||
|
||||
// index= [0 1 2 3 4]
|
||||
// ticks= [0 3 5 7 10]
|
||||
it("should slide the first handle to the left from 3 to 0", function(done) {
|
||||
var sliderElem = $testSlider.slider('getElement');
|
||||
$testSlider.on('slideStop', function() {
|
||||
var value = $testSlider.slider('getValue');
|
||||
expect(value).toEqual([0, 7]);
|
||||
done();
|
||||
});
|
||||
|
||||
var tick = sliderInst.ticks[1]; // 3
|
||||
var sliderCoords = calcTouchEventCoords(sliderElem);
|
||||
var coords = [sliderCoords.x + tick.offsetLeft, sliderCoords.y];
|
||||
touchStart = createTouchEvent(sliderElem, 'touchstart', coords);
|
||||
|
||||
tick = sliderInst.ticks[0]; // 0
|
||||
coords = [sliderCoords.x + tick.offsetLeft, sliderCoords.y];
|
||||
touchMove = createTouchEvent(sliderElem, 'touchmove', coords);
|
||||
|
||||
touchEnd = createTouchEvent(sliderElem, 'touchend', coords);
|
||||
|
||||
sliderElem.dispatchEvent(touchStart);
|
||||
sliderElem.dispatchEvent(touchMove);
|
||||
sliderElem.dispatchEvent(touchEnd);
|
||||
});
|
||||
|
||||
it("should slide the second handle to the right from 7 to 10", function(done) {
|
||||
var sliderElem = $testSlider.slider('getElement');
|
||||
$testSlider.on('slideStop', function() {
|
||||
var value = $testSlider.slider('getValue');
|
||||
expect(value).toEqual([3, 10]);
|
||||
done();
|
||||
});
|
||||
|
||||
var tick = sliderInst.ticks[3]; // 7
|
||||
var sliderCoords = calcTouchEventCoords(sliderElem);
|
||||
var coords = [sliderCoords.x + tick.offsetLeft, sliderCoords.y];
|
||||
touchStart = createTouchEvent(sliderElem, 'touchstart', coords);
|
||||
|
||||
tick = sliderInst.ticks[4]; // 10
|
||||
coords = [sliderCoords.x + tick.offsetLeft, sliderCoords.y];
|
||||
touchMove = createTouchEvent(sliderElem, 'touchmove', coords);
|
||||
|
||||
touchEnd = createTouchEvent(sliderElem, 'touchend', coords);
|
||||
|
||||
sliderElem.dispatchEvent(touchStart);
|
||||
sliderElem.dispatchEvent(touchMove);
|
||||
sliderElem.dispatchEvent(touchEnd);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("range, vertical slider", function() {
|
||||
|
||||
beforeEach(function() {
|
||||
sliderOptions.range = true;
|
||||
sliderOptions.value = [3, 7];
|
||||
sliderOptions.orientation = 'vertical';
|
||||
|
||||
// Initialize the slider
|
||||
$testSlider = $('#' + inputId).slider(sliderOptions);
|
||||
|
||||
// Get slider instance
|
||||
sliderInst = $testSlider.data('slider');
|
||||
});
|
||||
|
||||
// index= [0 1 2 3 4]
|
||||
// ticks= [0 3 5 7 10]
|
||||
it("should slide the first handle to the top from 3 to 0", function(done) {
|
||||
var sliderElem = $testSlider.slider('getElement');
|
||||
$testSlider.on('slideStop', function() {
|
||||
var value = $testSlider.slider('getValue');
|
||||
expect(value).toEqual([0, 7]);
|
||||
done();
|
||||
});
|
||||
|
||||
var tick = sliderInst.ticks[1]; // 3
|
||||
var sliderCoords = calcTouchEventCoords(sliderElem);
|
||||
var coords = [sliderCoords.x, sliderCoords.y + tick.offsetTop];
|
||||
touchStart = createTouchEvent(sliderElem, 'touchstart', coords);
|
||||
|
||||
tick = sliderInst.ticks[0]; // 0
|
||||
coords = [sliderCoords.x, sliderCoords.y + tick.offsetTop];
|
||||
touchMove = createTouchEvent(sliderElem, 'touchmove', coords);
|
||||
|
||||
touchEnd = createTouchEvent(sliderElem, 'touchend', coords);
|
||||
|
||||
sliderElem.dispatchEvent(touchStart);
|
||||
sliderElem.dispatchEvent(touchMove);
|
||||
sliderElem.dispatchEvent(touchEnd);
|
||||
});
|
||||
|
||||
it("should slide the second handle to the bottom from 7 to 10", function(done) {
|
||||
var sliderElem = $testSlider.slider('getElement');
|
||||
$testSlider.on('slideStop', function() {
|
||||
var value = $testSlider.slider('getValue');
|
||||
expect(value).toEqual([3, 10]);
|
||||
done();
|
||||
});
|
||||
|
||||
var tick = sliderInst.ticks[3]; // 7
|
||||
var sliderCoords = calcTouchEventCoords(sliderElem);
|
||||
var coords = [sliderCoords.x, sliderCoords.y + tick.offsetTop];
|
||||
touchStart = createTouchEvent(sliderElem, 'touchstart', coords);
|
||||
|
||||
tick = sliderInst.ticks[4]; // 10
|
||||
coords = [sliderCoords.x, sliderCoords.y + tick.offsetTop];
|
||||
touchMove = createTouchEvent(sliderElem, 'touchmove', coords);
|
||||
|
||||
touchEnd = createTouchEvent(sliderElem, 'touchend', coords);
|
||||
|
||||
sliderElem.dispatchEvent(touchStart);
|
||||
sliderElem.dispatchEvent(touchMove);
|
||||
sliderElem.dispatchEvent(touchEnd);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("Tooltip tests", function() {
|
||||
var $tooltip;
|
||||
|
||||
describe("single slider", function() {
|
||||
|
||||
beforeEach(function() {
|
||||
// Initialize the slider
|
||||
$testSlider = $('#' + inputId).slider(sliderOptions);
|
||||
|
||||
// Get slider instance
|
||||
sliderInst = $testSlider.data('slider');
|
||||
});
|
||||
|
||||
// index= [0 1 2 3 4]
|
||||
// ticks= [0 3 5 7 10]
|
||||
it("should show the tooltip when touching the slider at value 5", function(done) {
|
||||
var sliderElem = $testSlider.slider('getElement');
|
||||
$tooltip = $(sliderElem).find('.tooltip.tooltip-main');
|
||||
|
||||
/* Note: You can't use $testSlider.on('slideStart', function() {}) because jQuery
|
||||
* maintains its own list of event handlers and you may get unexpected results
|
||||
* when you add event handlers using $.on() versus DOM.addEventListener()
|
||||
* as they are called in a different order.
|
||||
*
|
||||
* The browser will call the event handlers registered with addEventListener()
|
||||
* in the order in which they are registered. For example, you'll get the following
|
||||
* execution order when listening for "touchstart" events.
|
||||
*
|
||||
* 1) _touchstart()
|
||||
* 2) _showTooltip()
|
||||
* 3) your event handler here
|
||||
*/
|
||||
sliderElem.addEventListener('touchstart', function() {
|
||||
expect($tooltip.hasClass('in')).toBe(true);
|
||||
}, false);
|
||||
|
||||
$testSlider.on('slideStop', function() {
|
||||
expect($tooltip.hasClass('in')).toBe(false);
|
||||
done();
|
||||
});
|
||||
|
||||
var tick = sliderInst.ticks[2]; // 5
|
||||
var sliderCoords = calcTouchEventCoords(sliderElem);
|
||||
var coords = [sliderCoords.x + tick.offsetLeft, sliderCoords.y];
|
||||
touchStart = createTouchEvent(sliderElem, 'touchstart', coords);
|
||||
|
||||
touchEnd = createTouchEvent(sliderElem, 'touchend', coords);
|
||||
|
||||
sliderElem.dispatchEvent(touchStart);
|
||||
sliderElem.dispatchEvent(touchEnd);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("range slider", function() {
|
||||
var touchStart2;
|
||||
|
||||
beforeEach(function() {
|
||||
sliderOptions.range = true;
|
||||
sliderOptions.value = [3, 7];
|
||||
|
||||
// Initialize the slider
|
||||
$testSlider = $('#' + inputId).slider(sliderOptions);
|
||||
|
||||
// Get slider instance
|
||||
sliderInst = $testSlider.data('slider');
|
||||
});
|
||||
|
||||
// index= [0 1 2 3 4]
|
||||
// ticks= [0 3 5 7 10]
|
||||
it("should show the tooltip when touching the slider at value 3 and 7", function(done) {
|
||||
var sliderElem = $testSlider.slider('getElement');
|
||||
$tooltip = $(sliderElem).find('.tooltip.tooltip-main');
|
||||
|
||||
sliderElem.addEventListener('touchstart', function() {
|
||||
expect($tooltip.hasClass('in')).toBe(true);
|
||||
}, false);
|
||||
|
||||
$testSlider.on('slideStop', function() {
|
||||
expect($tooltip.hasClass('in')).toBe(false);
|
||||
done();
|
||||
});
|
||||
|
||||
var tick = sliderInst.ticks[1]; // 3
|
||||
var sliderCoords = calcTouchEventCoords(sliderElem);
|
||||
var coords = [sliderCoords.x + tick.offsetLeft, sliderCoords.y];
|
||||
touchStart = createTouchEvent(sliderElem, 'touchstart', coords);
|
||||
|
||||
// For second handle
|
||||
tick = sliderInst.ticks[3]; // 7
|
||||
coords = [sliderCoords.x + tick.offsetLeft, sliderCoords.y];
|
||||
touchStart2 = createTouchEvent(sliderElem, 'touchstart', coords);
|
||||
|
||||
touchEnd = createTouchEvent(sliderElem, 'touchend', coords);
|
||||
|
||||
sliderElem.dispatchEvent(touchStart);
|
||||
sliderElem.dispatchEvent(touchStart2);
|
||||
sliderElem.dispatchEvent(touchEnd);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("Scrolling tests", function() {
|
||||
|
||||
describe("horizontal sliding tests", function() {
|
||||
var horzScrollDiv;
|
||||
|
||||
beforeEach(function() {
|
||||
// Initialize the slider
|
||||
$testSlider = $('#' + inputId).slider(sliderOptions);
|
||||
|
||||
// Get slider instance
|
||||
sliderInst = $testSlider.data('slider');
|
||||
|
||||
horzScrollDiv = document.getElementById('horz-scroll-div');
|
||||
});
|
||||
|
||||
// index= [0 1 2 3 4]
|
||||
// ticks= [0 3 5 7 10]
|
||||
it("should not scroll the div horizontally while sliding the slider", function(done) {
|
||||
var sliderElem = $testSlider.slider('getElement');
|
||||
|
||||
$testSlider.on('slideStop', function() {
|
||||
expect(horzScrollDiv.scrollLeft).toBe(0);
|
||||
done();
|
||||
});
|
||||
|
||||
var tick = sliderInst.ticks[2]; // 5
|
||||
var sliderCoords = calcTouchEventCoords(sliderElem);
|
||||
var coords = [sliderCoords.x + tick.offsetLeft, sliderCoords.y];
|
||||
touchStart = createTouchEvent(sliderElem, 'touchstart', coords);
|
||||
|
||||
tick = sliderInst.ticks[3]; // 7
|
||||
coords = [sliderCoords.x + tick.offsetLeft, sliderCoords.y];
|
||||
touchMove = createTouchEvent(sliderElem, 'touchmove', coords);
|
||||
|
||||
touchEnd = createTouchEvent(sliderElem, 'touchend', coords);
|
||||
|
||||
sliderElem.dispatchEvent(touchStart);
|
||||
sliderElem.dispatchEvent(touchMove);
|
||||
sliderElem.dispatchEvent(touchEnd);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("vertical sliding tests", function() {
|
||||
var vertScrollDiv;
|
||||
|
||||
beforeEach(function() {
|
||||
sliderOptions.orientation = 'vertical';
|
||||
|
||||
// Initialize the slider
|
||||
$testSlider = $('#' + inputId).slider(sliderOptions);
|
||||
|
||||
// Get slider instance
|
||||
sliderInst = $testSlider.data('slider');
|
||||
|
||||
vertScrollDiv = document.getElementById('vert-scroll-div');
|
||||
});
|
||||
|
||||
// index= [0 1 2 3 4]
|
||||
// ticks= [0 3 5 7 10]
|
||||
it("should not scroll the div vertically while sliding the slider", function(done) {
|
||||
var sliderElem = $testSlider.slider('getElement');
|
||||
|
||||
$testSlider.on('slideStop', function() {
|
||||
expect(vertScrollDiv.scrollTop).toBe(0);
|
||||
done();
|
||||
});
|
||||
|
||||
var tick = sliderInst.ticks[2]; // 5
|
||||
var sliderCoords = calcTouchEventCoords(sliderElem);
|
||||
var coords = [sliderCoords.x + tick.offsetLeft, sliderCoords.y];
|
||||
touchStart = createTouchEvent(sliderElem, 'touchstart', coords);
|
||||
|
||||
tick = sliderInst.ticks[3]; // 7
|
||||
coords = [sliderCoords.x + tick.offsetLeft, sliderCoords.y];
|
||||
touchMove = createTouchEvent(sliderElem, 'touchmove', coords);
|
||||
|
||||
touchEnd = createTouchEvent(sliderElem, 'touchend', coords);
|
||||
|
||||
sliderElem.dispatchEvent(touchStart);
|
||||
sliderElem.dispatchEvent(touchMove);
|
||||
sliderElem.dispatchEvent(touchEnd);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
//--------------------------------------------------
|
||||
//--------------------------------------------------
|
||||
//-- Removes attached function from slider event --
|
||||
//--------------------------------------------------
|
||||
//--------------------------------------------------
|
||||
|
||||
|
||||
|
||||
describe("'off()' test", function() {
|
||||
var testSlider, eventHandlerTriggered, mouse;
|
||||
|
||||
var onStart = function(){
|
||||
eventHandlerTriggered = true;
|
||||
};
|
||||
|
||||
|
||||
beforeEach(function() {
|
||||
eventHandlerTriggered = false;
|
||||
mouse = document.createEvent('MouseEvents');
|
||||
});
|
||||
|
||||
|
||||
it("should properly unbind an event listener", function() {
|
||||
testSlider = $("#testSlider1").slider();
|
||||
|
||||
testSlider.on('slideStart', onStart);
|
||||
testSlider.off('slideStart', onStart);
|
||||
|
||||
testSlider.data('slider')._mousedown(mouse);
|
||||
|
||||
expect(eventHandlerTriggered).not.toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Jasmine Spec Runner</title>
|
||||
<% css.forEach(function(style){ %>
|
||||
<link rel="stylesheet" type="text/css" href="<%= style %>">
|
||||
<% }) %>
|
||||
<style type="text/css">
|
||||
#low-high-slider-styled .slider-track-low
|
||||
{
|
||||
background: rgb(0, 255, 0);
|
||||
}
|
||||
|
||||
#low-high-slider-styled .slider-track-high
|
||||
{
|
||||
background: rgb(255, 0, 0);
|
||||
}
|
||||
#scrollable-div {
|
||||
overflow-y: scroll;
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
}
|
||||
#low-div {
|
||||
padding: 2000px 0 500px 0;
|
||||
}
|
||||
|
||||
#horz-scroll-div {
|
||||
overflow-x: scroll;
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
}
|
||||
#vert-scroll-div {
|
||||
overflow-y: scroll;
|
||||
width: 150px;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="
|
||||
margin-left: 2000px;
|
||||
">
|
||||
<input id="offRightEdgeSliderInput" type="text"/>
|
||||
</div>
|
||||
|
||||
<input id="testSliderGeneric" type="text"/>
|
||||
|
||||
<!-- Slider used for PublicMethodsSpec and EventsSpec -->
|
||||
<input id="testSlider1" type="text"/>
|
||||
<input id="testSlider2" type="text"/>
|
||||
<input id="testSlider3" type="text"/>
|
||||
<input id="testSlider4" type="text"/>
|
||||
|
||||
<!-- Note: Two input elements with class 'makeSlider' are required for tests to run properly -->
|
||||
<input class="makeSlider" type="text"/>
|
||||
<input class="makeSlider" type="text"/>
|
||||
|
||||
<!-- Sliders used for ElementDataSttributesSpec -->
|
||||
<input id="minSlider" type="text" data-slider-min="5"/>
|
||||
|
||||
<input id="maxSlider" type="text" data-slider-max="5"/>
|
||||
|
||||
<input id="orientationSlider" type="text" data-slider-orientation="vertical"/>
|
||||
|
||||
<input id="stepSlider" type="text" data-slider-step="5"/>
|
||||
|
||||
<input id="precisionSlider" type="text" data-slider-precision="2"/>
|
||||
|
||||
<input id="valueSlider" type="text" data-slider-value="5"/>
|
||||
|
||||
<input id="sliderWithTickMarksAndLabels" type="text" data-slider-ticks="[0, 100, 200, 300, 400]" data-slider-ticks-labels='["$0", "$100", "$200", "$300", "$400"]'/>
|
||||
|
||||
<input id="selectionSlider" type="text" data-slider-selection="after"/>
|
||||
|
||||
<input id="tooltipSlider" type="text" data-slider-tooltip="hide"/>
|
||||
|
||||
<input id="handleSlider" type="text" data-slider-handle="triangle"/>
|
||||
|
||||
<input id="customHandleSlider" type="text" data-slider-handle="custom"/>
|
||||
|
||||
<input id="reversedSlider" type="text" data-slider-reversed="true"/>
|
||||
|
||||
<input id="disabledSlider" type="text" data-slider-enabled="false"/>
|
||||
|
||||
<input id="changeOrientationSlider" type="text"/>
|
||||
|
||||
<input id="makeRangeSlider" type="text"/>
|
||||
|
||||
<div id="autoregisterSliderContainer">
|
||||
<input id="autoregisterSlider" data-provide="slider" data-slider-value="1"/>
|
||||
</div>
|
||||
|
||||
<div id="relayoutSliderContainer" style="display: none">
|
||||
<input id="relayoutSliderInput" type="text"/>
|
||||
</div>
|
||||
|
||||
<div id="relayoutSliderContainerTickLabels" style="display: none">
|
||||
<input id="relayoutSliderInputTickLabels" type="text"/>
|
||||
</div>
|
||||
|
||||
<div id="scrollable-div">
|
||||
<p>just a row</p>
|
||||
<p>just a row</p>
|
||||
<input id="ex1" data-slider-id='ex1Slider' type="text"/>
|
||||
</div>
|
||||
|
||||
<div id="horz-scroll-div">
|
||||
<input id="horz-touch-slider" type="text"/>
|
||||
<div style="position: relative; left: 1000px">Text</div>
|
||||
</div>
|
||||
|
||||
<div id="vert-scroll-div">
|
||||
<input id="vert-touch-slider" type="text"/>
|
||||
<div style="position: relative; top: 1000px">More text</div>
|
||||
</div>
|
||||
|
||||
<div id="low-div">
|
||||
<input id="veryLowPositionedSlider" type="text"/>
|
||||
</div>
|
||||
|
||||
<!-- Sliders used by resize -->
|
||||
<input id="resizeSlider" type="text"/>
|
||||
<input id="resizeSliderVertical" data-slider-orientation="vertical" type="text"/>
|
||||
|
||||
<!-- Sliders used for AccessibilitySpec -->
|
||||
<div>
|
||||
<span id="accessibilitySliderLabelA">Label A</span>
|
||||
<span id="accessibilitySliderLabelB">Label B</span>
|
||||
<input id="accessibilitySliderA" type="text" data-slider-labelledby="accessibilitySliderLabelA" />
|
||||
<input id="accessibilitySliderB" type="text" data-slider-labelledby='["accessibilitySliderLabelA", "accessibilitySliderLabelB"]' />
|
||||
|
||||
<input id="accessibilitySliderC" type="text" />
|
||||
</div>
|
||||
<!-- Sliders used for rtl -->
|
||||
<div dir="rtl">
|
||||
<input id="rtlSlider" type="text" />
|
||||
</div>
|
||||
|
||||
<% with (scripts) { %>
|
||||
<% [].concat(polyfills, jasmine, boot, vendor, helpers, src, specs,reporters).forEach(function(script){ %>
|
||||
<script src="<%= script %>"></script>
|
||||
<% }) %>
|
||||
<% }; %>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -609,3 +609,29 @@
|
|||
hr {
|
||||
border-top: 1px solid @hr-border;
|
||||
}
|
||||
|
||||
// bootstrap slider
|
||||
|
||||
#red .slider-selection {
|
||||
background: #f56954;
|
||||
}
|
||||
|
||||
#blue .slider-selection {
|
||||
background: #3c8dbc;
|
||||
}
|
||||
|
||||
#green .slider-selection {
|
||||
background: #00a65a;
|
||||
}
|
||||
|
||||
#yellow .slider-selection {
|
||||
background: #f39c12;
|
||||
}
|
||||
|
||||
#aqua .slider-selection {
|
||||
background: #00c0ef;
|
||||
}
|
||||
|
||||
#purple .slider-selection {
|
||||
background: #932ab6;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5489,6 +5489,24 @@ fieldset[disabled] .btn-yahoo.focus {
|
|||
hr {
|
||||
border-top: 1px solid #555555;
|
||||
}
|
||||
#red .slider-selection {
|
||||
background: #f56954;
|
||||
}
|
||||
#blue .slider-selection {
|
||||
background: #3c8dbc;
|
||||
}
|
||||
#green .slider-selection {
|
||||
background: #00a65a;
|
||||
}
|
||||
#yellow .slider-selection {
|
||||
background: #f39c12;
|
||||
}
|
||||
#aqua .slider-selection {
|
||||
background: #00c0ef;
|
||||
}
|
||||
#purple .slider-selection {
|
||||
background: #932ab6;
|
||||
}
|
||||
/*
|
||||
* Misc: print
|
||||
* -----------
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4015,6 +4015,24 @@ table.text-center th {
|
|||
hr {
|
||||
border-top: 1px solid #555555;
|
||||
}
|
||||
#red .slider-selection {
|
||||
background: #f56954;
|
||||
}
|
||||
#blue .slider-selection {
|
||||
background: #3c8dbc;
|
||||
}
|
||||
#green .slider-selection {
|
||||
background: #00a65a;
|
||||
}
|
||||
#yellow .slider-selection {
|
||||
background: #f39c12;
|
||||
}
|
||||
#aqua .slider-selection {
|
||||
background: #00c0ef;
|
||||
}
|
||||
#purple .slider-selection {
|
||||
background: #932ab6;
|
||||
}
|
||||
/*
|
||||
* Misc: print
|
||||
* -----------
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "admin-lte",
|
||||
"version": "2.4.15",
|
||||
"version": "2.4.16-pre",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
"bootstrap-colorpicker": "^2.5.3",
|
||||
"bootstrap-datepicker": "^1.8",
|
||||
"bootstrap-daterangepicker": "^2.1.25",
|
||||
"bootstrap-slider": "^9.8",
|
||||
"bootstrap-slider": "^9.10.0",
|
||||
"bootstrap-timepicker": "^0.5.2",
|
||||
"chart.js": "^1",
|
||||
"ckeditor": "^4.11.2",
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<!-- Ionicons -->
|
||||
<link rel="stylesheet" href="../../bower_components/Ionicons/css/ionicons.min.css">
|
||||
<!-- bootstrap slider -->
|
||||
<link rel="stylesheet" href="../../plugins/bootstrap-slider/slider.css">
|
||||
<link rel="stylesheet" href="../../plugins/seiyria-bootstrap-slider/css/bootstrap-slider.min.css">
|
||||
<!-- Theme style -->
|
||||
<link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">
|
||||
<!-- AdminLTE Skins. Choose a skin from the css/skins
|
||||
|
|
@ -810,7 +810,7 @@
|
|||
<!-- AdminLTE for demo purposes -->
|
||||
<script src="../../dist/js/demo.js"></script>
|
||||
<!-- Bootstrap slider -->
|
||||
<script src="../../plugins/bootstrap-slider/bootstrap-slider.js"></script>
|
||||
<script src="../../plugins/seiyria-bootstrap-slider/bootstrap-slider.min.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
/* BOOTSTRAP SLIDER */
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,328 @@
|
|||
/*! =======================================================
|
||||
VERSION 10.6.2
|
||||
========================================================= */
|
||||
/*! =========================================================
|
||||
* bootstrap-slider.js
|
||||
*
|
||||
* Maintainers:
|
||||
* Kyle Kemp
|
||||
* - Twitter: @seiyria
|
||||
* - Github: seiyria
|
||||
* Rohit Kalkur
|
||||
* - Twitter: @Rovolutionary
|
||||
* - Github: rovolution
|
||||
*
|
||||
* =========================================================
|
||||
*
|
||||
* bootstrap-slider is released under the MIT License
|
||||
* Copyright (c) 2019 Kyle Kemp, Rohit Kalkur, and contributors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person
|
||||
* obtaining a copy of this software and associated documentation
|
||||
* files (the "Software"), to deal in the Software without
|
||||
* restriction, including without limitation the rights to use,
|
||||
* copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the
|
||||
* Software is furnished to do so, subject to the following
|
||||
* conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be
|
||||
* included in all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
* OTHER DEALINGS IN THE SOFTWARE.
|
||||
*
|
||||
* ========================================================= */
|
||||
.slider {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
.slider.slider-horizontal {
|
||||
width: 210px;
|
||||
height: 20px;
|
||||
}
|
||||
.slider.slider-horizontal .slider-track {
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
margin-top: -5px;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
.slider.slider-horizontal .slider-selection,
|
||||
.slider.slider-horizontal .slider-track-low,
|
||||
.slider.slider-horizontal .slider-track-high {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.slider.slider-horizontal .slider-tick,
|
||||
.slider.slider-horizontal .slider-handle {
|
||||
margin-left: -10px;
|
||||
}
|
||||
.slider.slider-horizontal .slider-tick.triangle,
|
||||
.slider.slider-horizontal .slider-handle.triangle {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
border-width: 0 10px 10px 10px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom-color: #2e6da4;
|
||||
margin-top: 0;
|
||||
}
|
||||
.slider.slider-horizontal .slider-tick-container {
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.slider.slider-horizontal .slider-tick-label-container {
|
||||
white-space: nowrap;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.slider.slider-horizontal .slider-tick-label-container .slider-tick-label {
|
||||
padding-top: 4px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.slider.slider-horizontal .tooltip {
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.slider.slider-horizontal.slider-rtl .slider-track {
|
||||
left: initial;
|
||||
right: 0;
|
||||
}
|
||||
.slider.slider-horizontal.slider-rtl .slider-tick,
|
||||
.slider.slider-horizontal.slider-rtl .slider-handle {
|
||||
margin-left: initial;
|
||||
margin-right: -10px;
|
||||
}
|
||||
.slider.slider-horizontal.slider-rtl .slider-tick-container {
|
||||
left: initial;
|
||||
right: 0;
|
||||
}
|
||||
.slider.slider-horizontal.slider-rtl .tooltip {
|
||||
-ms-transform: translateX(50%);
|
||||
transform: translateX(50%);
|
||||
}
|
||||
.slider.slider-vertical {
|
||||
height: 210px;
|
||||
width: 20px;
|
||||
}
|
||||
.slider.slider-vertical .slider-track {
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
left: 25%;
|
||||
top: 0;
|
||||
}
|
||||
.slider.slider-vertical .slider-selection {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.slider.slider-vertical .slider-track-low,
|
||||
.slider.slider-vertical .slider-track-high {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.slider.slider-vertical .slider-tick,
|
||||
.slider.slider-vertical .slider-handle {
|
||||
margin-top: -10px;
|
||||
}
|
||||
.slider.slider-vertical .slider-tick.triangle,
|
||||
.slider.slider-vertical .slider-handle.triangle {
|
||||
border-width: 10px 0 10px 10px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border-left-color: #2e6da4;
|
||||
border-right-color: #2e6da4;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.slider.slider-vertical .slider-tick-label-container {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.slider.slider-vertical .slider-tick-label-container .slider-tick-label {
|
||||
padding-left: 4px;
|
||||
}
|
||||
.slider.slider-vertical .tooltip {
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.slider.slider-vertical.slider-rtl .slider-track {
|
||||
left: initial;
|
||||
right: 25%;
|
||||
}
|
||||
.slider.slider-vertical.slider-rtl .slider-selection {
|
||||
left: initial;
|
||||
right: 0;
|
||||
}
|
||||
.slider.slider-vertical.slider-rtl .slider-tick.triangle,
|
||||
.slider.slider-vertical.slider-rtl .slider-handle.triangle {
|
||||
border-width: 10px 10px 10px 0;
|
||||
}
|
||||
.slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label {
|
||||
padding-left: initial;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.slider.slider-disabled .slider-handle {
|
||||
background-image: -webkit-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
|
||||
background-image: -o-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
|
||||
background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.slider.slider-disabled .slider-track {
|
||||
background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
|
||||
background-image: -o-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
|
||||
background-image: linear-gradient(to bottom, #e5e5e5 0%, #e9e9e9 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffe9e9e9', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.slider input {
|
||||
display: none;
|
||||
}
|
||||
.slider .tooltip {
|
||||
pointer-events: none;
|
||||
}
|
||||
.slider .tooltip.top {
|
||||
margin-top: -36px;
|
||||
}
|
||||
.slider .tooltip-inner {
|
||||
white-space: nowrap;
|
||||
max-width: none;
|
||||
}
|
||||
.slider .hide {
|
||||
display: none;
|
||||
}
|
||||
.slider-track {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%);
|
||||
background-image: -o-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%);
|
||||
background-image: linear-gradient(to bottom, #f5f5f5 0%, #f9f9f9 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.slider-selection {
|
||||
position: absolute;
|
||||
background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
|
||||
background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
|
||||
background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.slider-selection.tick-slider-selection {
|
||||
background-image: -webkit-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
|
||||
background-image: -o-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
|
||||
background-image: linear-gradient(to bottom, #8ac1ef 0%, #82b3de 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef', endColorstr='#ff82b3de', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.slider-track-low,
|
||||
.slider-track-high {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.slider-handle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #337ab7;
|
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
|
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
|
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
filter: none;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
||||
border: 0px solid transparent;
|
||||
}
|
||||
.slider-handle:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.slider-handle.round {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.slider-handle.triangle {
|
||||
background: transparent none;
|
||||
}
|
||||
.slider-handle.custom {
|
||||
background: transparent none;
|
||||
}
|
||||
.slider-handle.custom::before {
|
||||
line-height: 20px;
|
||||
font-size: 20px;
|
||||
content: '\2605';
|
||||
color: #726204;
|
||||
}
|
||||
.slider-tick {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
|
||||
background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
|
||||
background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
filter: none;
|
||||
opacity: 0.8;
|
||||
border: 0px solid transparent;
|
||||
}
|
||||
.slider-tick.round {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.slider-tick.triangle {
|
||||
background: transparent none;
|
||||
}
|
||||
.slider-tick.custom {
|
||||
background: transparent none;
|
||||
}
|
||||
.slider-tick.custom::before {
|
||||
line-height: 20px;
|
||||
font-size: 20px;
|
||||
content: '\2605';
|
||||
color: #726204;
|
||||
}
|
||||
.slider-tick.in-selection {
|
||||
background-image: -webkit-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
|
||||
background-image: -o-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
|
||||
background-image: linear-gradient(to bottom, #8ac1ef 0%, #82b3de 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef', endColorstr='#ff82b3de', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
opacity: 1;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue