Commit 9be2e098 authored by Leigh Stoller's avatar Leigh Stoller
parent eac47f50
/**
* Theme for jQRangeSlider
* Inspired by http://cssdeck.com/item/381/itunes-10-storage-bar
* and http://cssdeck.com/item/276/pure-css-arrow-with-border-tooltip
*/
.ui-rangeSlider{
height: 30px;
padding-top: 40px;
}
.ui-rangeSlider,
.ui-rangeSlider-container,
.ui-rangeSlider-arrow{
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
.ui-rangeSlider-withArrows .ui-rangeSlider-container{
margin: 0 15px;
}
.ui-rangeSlider-withArrows .ui-rangeSlider-container,
.ui-rangeSlider-noArrow .ui-rangeSlider-container,
.ui-rangeSlider-arrow{
-webkit-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
-moz-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
}
.ui-rangeSlider-disabled.ui-rangeSlider-withArrows .ui-rangeSlider-container,
.ui-rangeSlider-disabled.ui-rangeSlider-noArrow .ui-rangeSlider-container,
.ui-rangeSlider-disabled .ui-rangeSlider-arrow{
-webkit-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.3);
-moz-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.3);
box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.3);
}
.ui-rangeSlider-noArrow .ui-rangeSlider-container{
-moz-border-radius: 4px;
border-radius: 4px;
border-left: solid 1px #515862;
border-right: solid 1px #515862;
}
.ui-rangeSlider-disabled.ui-rangeSlider-noArrow .ui-rangeSlider-container{
border-color: #8490a3;
}
.ui-rangeSlider-container,
.ui-rangeSlider-arrow{
height: 30px;
border-top: solid 1px #232a32;
border-bottom: solid 1px #6a7179;
}
.ui-rangeSlider-disabled .ui-rangeSlider-container,
.ui-rangeSlider-disabled .ui-rangeSlider-arrow{
border-top-color: #49576b;
border-bottom-color: #9ca7b3;
}
.ui-rangeSlider-container,
.ui-rangeSlider-arrow,
.ui-rangeSlider-label{
background: #67707F;
background: -moz-linear-gradient(top, #67707F 0%, #888DA0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#67707F), color-stop(100%,#888DA0));
}
.ui-rangeSlider-disabled .ui-rangeSlider-container,
.ui-rangeSlider-disabled .ui-rangeSlider-arrow,
.ui-rangeSlider-disabled .ui-rangeSlider-label{
background: #95a4bd;
background: -moz-linear-gradient(top, #95a4bd 0%, #b2bbd8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#95a4bd), color-stop(100%,#b2bbd8));
}
.ui-rangeSlider-arrow{
width:14px;
cursor:pointer;
}
.ui-rangeSlider-leftArrow{
border-radius:4px 0 0 4px;
border-left: solid 1px #515862;
}
.ui-rangeSlider-disabled .ui-rangeSlider-leftArrow{
border-left-color: #8792a2;
}
.ui-rangeSlider-rightArrow{
border-radius:0 4px 4px 0;
border-right: solid 1px #515862;
}
.ui-rangeSlider-disabled .ui-rangeSlider-rightArrow{
border-right-color: #8792a2;
}
.ui-rangeSlider-arrow-inner{
position: absolute;
top: 50%;
border: 10px solid transparent;
width:0;
height:0;
margin-top: -10px;
}
.ui-rangeSlider-leftArrow .ui-rangeSlider-arrow-inner{
border-right:10px solid #a4a8b7;
left: 0;
margin-left: -8px;
}
.ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner{
border-right:10px solid #b3b6c2;
}
.ui-rangeSlider-disabled .ui-rangeSlider-leftArrow .ui-rangeSlider-arrow-inner,
.ui-rangeSlider-disabled .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner{
border-right-color: #bbc0cf;
}
.ui-rangeSlider-rightArrow .ui-rangeSlider-arrow-inner{
border-left:10px solid #a4a8b7;
right: 0;
margin-right: -8px;
}
.ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner{
border-left:10px solid #b3b6c2;
}
.ui-rangeSlider-disabled .ui-rangeSlider-rightArrow .ui-rangeSlider-arrow-inner,
.ui-rangeSlider-disabled .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner{
border-left-color: #bbc0cf;
}
.ui-rangeSlider-innerBar{
width: 110%;
height: 100%;
left: -10px;
overflow: hidden;
}
.ui-rangeSlider-bar{
background: #68a1d6;
height: 29px;
margin:1px 0;
-moz-border-radius: 4px;
border-radius: 4px;
cursor:move;
cursor:grab;
cursor: -moz-grab;
-webkit-box-shadow: inset 0 2px 6px RGBA(0,0,0,0.5);
-moz-box-shadow: inset 0 2px 6px RGBA(0,0,0,0.5);
box-shadow: inset 0 2px 6px RGBA(0,0,0,0.5);
}
.ui-rangeSlider-disabled .ui-rangeSlider-bar{
background: #93aeca;
-webkit-box-shadow: inset 0 2px 6px RGBA(0,0,0,0.3);
-moz-box-shadow: inset 0 2px 6px RGBA(0,0,0,0.3);
box-shadow: inset 0 2px 6px RGBA(0,0,0,0.3);
}
.ui-rangeSlider-handle{
width:10px;
height:30px;
background: transparent;
cursor:col-resize;
}
.ui-rangeSlider-label{
padding: 5px 10px;
bottom:40px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 1px 0px #c2c5d6;
-moz-box-shadow: 0px 1px 0px #c2c5d6;
box-shadow: 0px 1px 0px #c2c5d6;
color:white;
font-size:15px;
cursor:col-resize;
}
.ui-rangeSlider-label-inner{
position: absolute;
top: 100%;
left: 50%;
display: block;
z-index:99;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin-left: -10px;
border-top: 10px solid #888DA0;
}
.ui-rangeSlider-disabled .ui-rangeSlider-label-inner{
border-top-color: #b2bbd8;
}
.ui-editRangeSlider-inputValue{
width:2em;
text-align:center;
font-size:15px;
}
.ui-rangeSlider .ui-ruler-scale{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}
.ui-rangeSlider .ui-ruler-tick {
float: left;
}
.ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-inner{
color:white;
margin-top:1px;
border-left: 1px solid white;
height:29px;
padding-left:2px;
position:relative;
}
.ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-label{
position:absolute;
bottom: 6px;
}
.ui-rangeSlider .ui-ruler-scale1 .ui-ruler-tick-inner{
border-left:1px solid white;
margin-top: 25px;
height: 5px;
}
\ No newline at end of file
/**
* jQRangeSlider
* A javascript slider selector that supports dates
*
* Copyright (C) Guillaume Gautreau 2012
* Dual licensed under the MIT or GPL Version 2 licenses.
*
*/
(function ($, undefined) {
"use strict";
$.widget("ui.dateRangeSlider", $.ui.rangeSlider, {
options: {
bounds: {min: new Date(2010,0,1).valueOf(), max: new Date(2012,0,1).valueOf()},
defaultValues: {min: new Date(2010,1,11).valueOf(), max: new Date(2011,1,11).valueOf()}
},
_create: function(){
$.ui.rangeSlider.prototype._create.apply(this);
this.element.addClass("ui-dateRangeSlider");
},
destroy: function(){
this.element.removeClass("ui-dateRangeSlider");
$.ui.rangeSlider.prototype.destroy.apply(this);
},
_setDefaultValues: function(){
this._values = {
min: this.options.defaultValues.min.valueOf(),
max: this.options.defaultValues.max.valueOf()
};
},
_setRulerParameters: function(){
this.ruler.ruler({
min: new Date(this.options.bounds.min.valueOf()),
max: new Date(this.options.bounds.max.valueOf()),
scales: this.options.scales
});
},
_setOption: function(key, value){
if ((key === "defaultValues" || key === "bounds") && typeof value !== "undefined" && value !== null && this._isValidDate(value.min) && this._isValidDate(value.max)){
$.ui.rangeSlider.prototype._setOption.apply(this, [key, {min:value.min.valueOf(), max:value.max.valueOf()}]);
}else{
$.ui.rangeSlider.prototype._setOption.apply(this, this._toArray(arguments));
}
},
_handleType: function(){
return "dateRangeSliderHandle";
},
option: function(key){
if (key === "bounds" || key === "defaultValues"){
var result = $.ui.rangeSlider.prototype.option.apply(this, arguments);
return {min:new Date(result.min), max:new Date(result.max)};
}
return $.ui.rangeSlider.prototype.option.apply(this, this._toArray(arguments));
},
_defaultFormatter: function(value){
var month = value.getMonth() + 1,
day = value.getDate();
return "" + value.getFullYear() + "-" + (month < 10 ? "0" + month : month) + "-" + (day < 10 ? "0" + day : day);
},
_getFormatter: function(){
var formatter = this.options.formatter;
if (this.options.formatter === false || this.options.formatter === null){
formatter = this._defaultFormatter;
}
return (function(formatter){
return function(value){
return formatter(new Date(value));
};
}(formatter));
},
values: function(min, max){
var values = null;
if (this._isValidDate(min) && this._isValidDate(max))
{
values = $.ui.rangeSlider.prototype.values.apply(this, [min.valueOf(), max.valueOf()]);
}else{
values = $.ui.rangeSlider.prototype.values.apply(this, this._toArray(arguments));
}
return {min: new Date(values.min), max: new Date(values.max)};
},
min: function(min){
if (this._isValidDate(min)){
return new Date($.ui.rangeSlider.prototype.min.apply(this, [min.valueOf()]));
}
return new Date($.ui.rangeSlider.prototype.min.apply(this));
},
max: function(max){
if (this._isValidDate(max)){
return new Date($.ui.rangeSlider.prototype.max.apply(this, [max.valueOf()]));
}
return new Date($.ui.rangeSlider.prototype.max.apply(this));
},
bounds: function(min, max){
var result;
if (this._isValidDate(min) && this._isValidDate(max)) {
result = $.ui.rangeSlider.prototype.bounds.apply(this, [min.valueOf(), max.valueOf()]);
} else {
result = $.ui.rangeSlider.prototype.bounds.apply(this, this._toArray(arguments));
}
return {min: new Date(result.min), max: new Date(result.max)};
},
_isValidDate: function(value){
return typeof value !== "undefined" && value instanceof Date;
},
_toArray: function(argsObject){
return Array.prototype.slice.call(argsObject);
}
});
}(jQuery));
/**
* jQRangeSlider
* A javascript slider selector that supports dates
*
* Copyright (C) Guillaume Gautreau 2012
* Dual licensed under the MIT or GPL Version 2 licenses.
*
*/
(function($, undefined){
"use strict";
$.widget("ui.dateRangeSliderHandle", $.ui.rangeSliderHandle, {
_steps: false,
_boundsValues: {},
_create: function(){
this._createBoundsValues();
$.ui.rangeSliderHandle.prototype._create.apply(this);
},
_getValueForPosition: function(position){
var raw = this._getRawValueForPositionAndBounds(position, this.options.bounds.min.valueOf(), this.options.bounds.max.valueOf());
return this._constraintValue(new Date(raw));
},
_setOption: function(key, value){
if (key === "step"){
this.options.step = value;
this._createSteps();
this.update();
return;
}
$.ui.rangeSliderHandle.prototype._setOption.apply(this, [key, value]);
if (key === "bounds"){
this._createBoundsValues();
}
},
_createBoundsValues: function(){
this._boundsValues = {
min: this.options.bounds.min.valueOf(),
max: this.options.bounds.max.valueOf()
};
},
_bounds: function(){
return this._boundsValues;
},
_createSteps: function(){
if (this.options.step === false || !this._isValidStep()){
this._steps = false;
return;
}
var minDate = new Date(this.options.bounds.min.valueOf()),
maxDate = new Date(this.options.bounds.max.valueOf()),
stepDate = minDate,
i = 0,
previous = new Date();
this._steps = [];
while (stepDate <= maxDate && (i === 1 || previous.valueOf() !== stepDate.valueOf())){
previous = stepDate;
this._steps.push(stepDate.valueOf());
stepDate = this._addStep(minDate, i, this.options.step);
i++;
}
if (previous.valueOf() === stepDate.valueOf()){
this._steps = false;
}
},
_isValidStep: function(){
return typeof this.options.step === "object";
},
_addStep: function(reference, factor, step){
var result = new Date(reference.valueOf());
result = this._addThing(result, "FullYear", factor, step.years);
result = this._addThing(result, "Month", factor, step.months);
result = this._addThing(result, "Date", factor, step.weeks * 7);
result = this._addThing(result, "Date", factor, step.days);
result = this._addThing(result, "Hours", factor, step.hours);
result = this._addThing(result, "Minutes", factor, step.minutes);
result = this._addThing(result, "Seconds", factor, step.seconds);
return result;
},
_addThing: function(date, thing, factor, base){
if (factor === 0 || (base || 0) === 0){
return date;
}
date["set" + thing](
date["get" + thing]() + factor * (base || 0)
);
return date;
},
_round: function(value){
if (this._steps === false){
return value;
}
var max = this.options.bounds.max.valueOf(),
min = this.options.bounds.min.valueOf(),
ratio = Math.max(0, (value - min) / (max - min)),
index = Math.floor(this._steps.length * ratio),
before, after;
while (this._steps[index] > value){
index--;
}
while (index + 1 < this._steps.length && this._steps[index + 1] <= value){
index++;
}
if (index >= this._steps.length - 1){
return this._steps[this._steps.length - 1];
} else if (index === 0){
return this._steps[0];
}
before = this._steps[index];
after = this._steps[index + 1];
if (value - before < after - value){
return before;
}
return after;
},
update: function(){
this._createBoundsValues();
this._createSteps();
$.ui.rangeSliderHandle.prototype.update.apply(this);
},
add: function(date, step){
return this._addStep(new Date(date), 1, step).valueOf();
},
substract: function(date, step){
return this._addStep(new Date(date), -1, step).valueOf();
},
stepsBetween: function(date1, date2){
if (this.options.step === false){
return date2 - date1;
}
var min = Math.min(date1, date2),
max = Math.max(date1, date2),
steps = 0,
negative = false,
negativeResult = date1 > date2;
if (this.add(min, this.options.step) - min < 0){
negative = true;
}
while (min < max){
if (negative){
max = this.add(max, this.options.step);
}else{
min = this.add(min, this.options.step);
}
steps++;
}
return negativeResult ? -steps : steps;
},
multiplyStep: function(step, factor){
var result = {};
for (var name in step){
if (step.hasOwnProperty(name)){
result[name] = step[name] * factor;
}
}
return result;
},
stepRatio: function(){
if (this.options.step === false){
return 1;
}else{
var steps = this._steps.length;
return this.cache.parent.width / steps;
}
}
});
}(jQuery));
This diff is collapsed.
This diff is collapsed.
/**
* jQRangeSlider
* A javascript slider selector that supports dates
*
* Copyright (C) Guillaume Gautreau 2012
* Dual licensed under the MIT or GPL Version 2 licenses.
*/
(function($, undefined){
"use strict";
$.widget("ui.rangeSliderDraggable", $.ui.rangeSliderMouseTouch, {
cache: null,
options: {
containment: null
},
_create: function(){
$.ui.rangeSliderMouseTouch.prototype._create.apply(this);
setTimeout($.proxy(this._initElementIfNotDestroyed, this), 10);
},
destroy: function(){
this.cache = null;
$.ui.rangeSliderMouseTouch.prototype.destroy.apply(this);
},
_initElementIfNotDestroyed: function(){
if (this._mouseInit){
this._initElement();
}
},
_initElement: function(){
this._mouseInit();
this._cache();
},
_setOption: function(key, value){
if (key === "containment"){
if (value === null || $(value).length === 0){
this.options.containment = null
}else{
this.options.containment = $(value);
}
}
},
/*
* UI mouse widget
*/
_mouseStart: function(event){
this._cache();
this.cache.click = {
left: event.pageX,
top: event.pageY
};
this.cache.initialOffset = this.element.offset();
this._triggerMouseEvent("mousestart");
return true;
},
_mouseDrag: function(event){
var position = event.pageX - this.cache.click.left;
position = this._constraintPosition(position + this.cache.initialOffset.left);
this._applyPosition(position);
this._triggerMouseEvent("sliderDrag");
return false;
},
_mouseStop: function(){
this._triggerMouseEvent("stop");
},
/*
* To be overriden
*/
_constraintPosition: function(position){
if (this.element.parent().length !== 0 && this.cache.parent.offset !== null){
position = Math.min(position,
this.cache.parent.offset.left + this.cache.parent.width - this.cache.width.outer);
position = Math.max(position, this.cache.parent.offset.left);
}
return position;
},
_applyPosition: function(position){
var offset = {