Skip to content

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

Improvement - force labels to stay contained within element containing slider.… 

Improvement - force labels to stay contained within element containing slider. Closes #182. Thanks to @karelcallens for it.
parent 9a1e284d
Hide whitespace changes
Inline Side-by-side
Showing with 2404 additions and 2398 deletions
dist/rzslider.js
View file @ fb02c4ca
...@@ -31,1329 +31,1332 @@ ...@@ -31,1329 +31,1332 @@
'use strict'; 'use strict';
var module = angular.module('rzModule', []) var module = angular.module('rzModule', [])
.factory('RzSliderOptions', function() { .factory('RzSliderOptions', function() {
var defaultOptions = { var defaultOptions = {
floor: 0, floor: 0,
ceil: null, //defaults to rz-slider-model ceil: null, //defaults to rz-slider-model
step: 1, step: 1,
precision: 0, precision: 0,
id: null, id: null,
translate: null, translate: null,
stepsArray: null, stepsArray: null,
draggableRange: false, draggableRange: false,
showSelectionBar: false, showSelectionBar: false,
hideLimitLabels: false, hideLimitLabels: false,
readOnly: false, readOnly: false,
disabled: false, disabled: false,
interval: 350, interval: 350,
showTicks: false, showTicks: false,
showTicksValues: false, showTicksValues: false,
ticksValuesTooltip: null, ticksValuesTooltip: null,
scale: 1, scale: 1,
onStart: null, onStart: null,
onChange: null, onChange: null,
onEnd: null onEnd: null
};
var globalOptions = {};
var factory = {};
/**
* `options({})` allows global configuration of all sliders in the
* application.
*
* var app = angular.module( 'App', ['rzModule'], function( RzSliderOptions ) {
* // show ticks for all sliders
* RzSliderOptions.options( { showTicks: true } );
* });
*/
factory.options = function(value) {
angular.extend(globalOptions, value);
};
factory.getOptions = function(options) {
return angular.extend({}, defaultOptions, globalOptions, options);
};
return factory;
})
.value('rzThrottle',
/**
* rzThrottle
*
* Taken from underscore project
*
* @param {Function} func
* @param {number} wait
* @param {ThrottleOptions} options
* @returns {Function}
*/
function throttle(func, wait, options) {
'use strict';
var getTime = (Date.now || function() {
return new Date().getTime();
});
var context, args, result;
var timeout = null;
var previous = 0;
options = options || {};
var later = function() {
previous = options.leading === false ? 0 : getTime();
timeout = null;
result = func.apply(context, args);
context = args = null;
}; };
return function() { var globalOptions = {};
var now = getTime();
if (!previous && options.leading === false) {
previous = now;
}
var remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0) {
clearTimeout(timeout);
timeout = null;
previous = now;
result = func.apply(context, args);
context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
})
.factory('RzSlider', ['$timeout', '$document', '$window', '$compile', 'RzSliderOptions', 'rzThrottle', function($timeout, $document, $window, $compile, RzSliderOptions, rzThrottle) {
'use strict';
/**
* Slider
*
* @param {ngScope} scope The AngularJS scope
* @param {Element} sliderElem The slider directive element wrapped in jqLite
* @constructor
*/
var Slider = function(scope, sliderElem) {
/**
* The slider's scope
*
* @type {ngScope}
*/
this.scope = scope;
var factory = {};
/** /**
* Slider element wrapped in jqLite * `options({})` allows global configuration of all sliders in the
* application.
* *
* @type {jqLite} * var app = angular.module( 'App', ['rzModule'], function( RzSliderOptions ) {
*/ * // show ticks for all sliders
this.sliderElem = sliderElem; * RzSliderOptions.options( { showTicks: true } );
* });
/**
* Slider type
*
* @type {boolean} Set to true for range slider
*/
this.range = this.scope.rzSliderModel !== undefined && this.scope.rzSliderHigh !== undefined;
/**
* Values recorded when first dragging the bar
*
* @type {Object}
*/ */
this.dragging = { factory.options = function(value) {
active: false, angular.extend(globalOptions, value);
value: 0,
difference: 0,
offset: 0,
lowDist: 0,
highDist: 0
}; };
/** factory.getOptions = function(options) {
* Half of the width of the slider handles return angular.extend({}, defaultOptions, globalOptions, options);
* };
* @type {number}
*/
this.handleHalfWidth = 0;
/**
* Maximum left the slider handle can have
*
* @type {number}
*/
this.maxLeft = 0;
/**
* Precision
*
* @type {number}
*/
this.precision = 0;
/**
* Step
*
* @type {number}
*/
this.step = 0;
/**
* The name of the handle we are currently tracking
*
* @type {string}
*/
this.tracking = '';
/**
* Minimum value (floor) of the model
*
* @type {number}
*/
this.minValue = 0;
/**
* Maximum value (ceiling) of the model
*
* @type {number}
*/
this.maxValue = 0;
/** return factory;
* The delta between min and max value })
*
* @type {number}
*/
this.valueRange = 0;
.value('rzThrottle',
/** /**
* Set to true if init method already executed * rzThrottle
* *
* @type {boolean} * Taken from underscore project
*/
this.initHasRun = false;
// Slider DOM elements wrapped in jqLite
this.fullBar = null; // The whole slider bar
this.selBar = null; // Highlight between two handles
this.minH = null; // Left slider handle
this.maxH = null; // Right slider handle
this.flrLab = null; // Floor label
this.ceilLab = null; // Ceiling label
this.minLab = null; // Label above the low value
this.maxLab = null; // Label above the high value
this.cmbLab = null; // Combined label
this.ticks = null; // The ticks
// Initialize slider
this.init();
};
// Add instance methods
Slider.prototype = {
/**
* Initialize slider
* *
* @returns {undefined} * @param {Function} func
* @param {number} wait
* @param {ThrottleOptions} options
* @returns {Function}
*/ */
init: function() { function throttle(func, wait, options) {
var thrLow, thrHigh, 'use strict';
calcDimFn = angular.bind(this, this.calcViewDimensions), var getTime = (Date.now || function() {
self = this; return new Date().getTime();
this.applyOptions();
this.initElemHandles();
this.manageElementsStyle();
this.addAccessibility();
this.manageEventsBindings();
this.setDisabledState();
this.calcViewDimensions();
this.setMinAndMax();
$timeout(function() {
self.updateCeilLab();
self.updateFloorLab();
self.initHandles();
self.bindEvents();
}); });
var context, args, result;
// Recalculate slider view dimensions var timeout = null;
this.scope.$on('reCalcViewDimensions', calcDimFn); var previous = 0;
options = options || {};
// Recalculate stuff if view port dimensions have changed var later = function() {
angular.element($window).on('resize', calcDimFn); previous = options.leading === false ? 0 : getTime();
timeout = null;
this.initHasRun = true; result = func.apply(context, args);
context = args = null;
// Watch for changes to the model };
return function() {
thrLow = rzThrottle(function() { var now = getTime();
self.setMinAndMax(); if (!previous && options.leading === false) {
self.updateLowHandle(self.valueToOffset(self.scope.rzSliderModel)); previous = now;
self.updateSelectionBar();
self.updateTicksScale();
if (self.range) {
self.updateCmbLabel();
}
}, self.options.interval);
thrHigh = rzThrottle(function() {
self.setMinAndMax();
self.updateHighHandle(self.valueToOffset(self.scope.rzSliderHigh));
self.updateSelectionBar();
self.updateTicksScale();
self.updateCmbLabel();
}, self.options.interval);
this.scope.$on('rzSliderForceRender', function() {
self.resetLabelsValue();
thrLow();
if (self.range) {
thrHigh();
} }
self.resetSlider(); var remaining = wait - (now - previous);
}); context = this;
args = arguments;
// Watchers if (remaining <= 0) {
this.scope.$watch('rzSliderModel', function(newValue, oldValue) { clearTimeout(timeout);
if (newValue === oldValue) timeout = null;
return; previous = now;
thrLow(); result = func.apply(context, args);
}); context = args = null;
} else if (!timeout && options.trailing !== false) {
this.scope.$watch('rzSliderHigh', function(newValue, oldValue) { timeout = setTimeout(later, remaining);
if (newValue === oldValue)
return;
if (newValue != null)
thrHigh();
if (self.range && newValue == null || !self.range && newValue != null) {
self.applyOptions();
self.resetSlider();
} }
}); return result;
};
this.scope.$watch('rzSliderOptions', function(newValue, oldValue) { })
if (newValue === oldValue)
return;
self.applyOptions();
self.resetSlider();
}, true);
this.scope.$on('$destroy', function() {
self.unbindEvents();
angular.element($window).off('resize', calcDimFn);
});
},
/**
* Read the user options and apply them to the slider model
*/
applyOptions: function() {
this.options = RzSliderOptions.getOptions(this.scope.rzSliderOptions);
if (this.options.step <= 0)
this.options.step = 1;
this.range = this.scope.rzSliderModel !== undefined && this.scope.rzSliderHigh !== undefined;
this.options.draggableRange = this.range && this.options.draggableRange;
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
if (this.options.stepsArray) {
this.options.floor = 0;
this.options.ceil = this.options.stepsArray.length - 1;
this.options.step = 1;
this.customTrFn = function(value) {
return this.options.stepsArray[value];
};
} else if (this.options.translate)
this.customTrFn = this.options.translate;
else
this.customTrFn = function(value) {
return String(value);
};
},
/** .factory('RzSlider', ['$timeout', '$document', '$window', '$compile', 'RzSliderOptions', 'rzThrottle', function($timeout, $document, $window, $compile, RzSliderOptions, rzThrottle) {
* Resets slider 'use strict';
*
* @returns {undefined}
*/
resetSlider: function() {
this.manageElementsStyle();
this.setMinAndMax();
this.updateCeilLab();
this.updateFloorLab();
this.unbindEvents();
this.manageEventsBindings();
this.setDisabledState();
this.calcViewDimensions();
},
/** /**
* Set the slider children to variables for easy access * Slider
*
* Run only once during initialization
* *
* @returns {undefined} * @param {ngScope} scope The AngularJS scope
* @param {Element} sliderElem The slider directive element wrapped in jqLite
* @constructor
*/ */
initElemHandles: function() { var Slider = function(scope, sliderElem) {
// Assign all slider elements to object properties for easy access /**
angular.forEach(this.sliderElem.children(), function(elem, index) { * The slider's scope
var jElem = angular.element(elem); *
* @type {ngScope}
switch (index) { */
case 0: this.scope = scope;
this.fullBar = jElem;
break;
case 1:
this.selBar = jElem;
break;
case 2:
this.minH = jElem;
break;
case 3:
this.maxH = jElem;
break;
case 4:
this.flrLab = jElem;
break;
case 5:
this.ceilLab = jElem;
break;
case 6:
this.minLab = jElem;
break;
case 7:
this.maxLab = jElem;
break;
case 8:
this.cmbLab = jElem;
break;
case 9:
this.ticks = jElem;
break;
}
}, this);
// Initialize offset cache properties
this.selBar.rzsl = 0;
this.minH.rzsl = 0;
this.maxH.rzsl = 0;
this.flrLab.rzsl = 0;
this.ceilLab.rzsl = 0;
this.minLab.rzsl = 0;
this.maxLab.rzsl = 0;
this.cmbLab.rzsl = 0;
},
/** Update each elements style based on options /**
* * Slider element wrapped in jqLite
*/ *
manageElementsStyle: function() { * @type {jqLite}
*/
if (!this.range) this.sliderElem = sliderElem;
this.maxH.css('display', 'none');
else
this.maxH.css('display', null);
this.alwaysHide(this.flrLab, this.options.showTicksValues || this.options.hideLimitLabels);
this.alwaysHide(this.ceilLab, this.options.showTicksValues || this.options.hideLimitLabels);
this.alwaysHide(this.minLab, this.options.showTicksValues);
this.alwaysHide(this.maxLab, this.options.showTicksValues || !this.range);
this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range);
this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
if (!this.options.showTicks)
this.ticks.html('');
if (this.options.draggableRange)
this.selBar.addClass('rz-draggable');
else
this.selBar.removeClass('rz-draggable');
},
alwaysHide: function(el, hide) {
el.rzAlwaysHide = hide;
if (hide)
this.hideEl(el);
else
this.showEl(el)
},
/** /**
* Manage the events bindings based on readOnly and disabled options * Slider type
* *
* @returns {undefined} * @type {boolean} Set to true for range slider
*/ */
manageEventsBindings: function() { this.range = this.scope.rzSliderModel !== undefined && this.scope.rzSliderHigh !== undefined;
if (this.options.disabled || this.options.readOnly)
this.unbindEvents();
else if (!this.options.disabled || !this.options.readOnly)
this.bindEvents();
},
/** /**
* Set the disabled state based on rzSliderDisabled * Values recorded when first dragging the bar
* *
* @returns {undefined} * @type {Object}
*/ */
setDisabledState: function() { this.dragging = {
if (this.options.disabled) { active: false,
this.sliderElem.attr('disabled', 'disabled'); value: 0,
} else { difference: 0,
this.sliderElem.attr('disabled', null); offset: 0,
} lowDist: 0,
}, highDist: 0
};
/** /**
* Reset label values * Half of the width of the slider handles
* *
* @return {undefined} * @type {number}
*/ */
resetLabelsValue: function() { this.handleHalfWidth = 0;
this.minLab.rzsv = undefined;
this.maxLab.rzsv = undefined;
},
/** /**
* Initialize slider handles positions and labels * Maximum left the slider handle can have
* *
* Run only once during initialization and every time view port changes size * @type {number}
* */
* @returns {undefined} this.maxLeft = 0;
*/
initHandles: function() {
this.updateLowHandle(this.valueToOffset(this.scope.rzSliderModel));
/* /**
the order here is important since the selection bar should be * Precision
updated after the high handle but before the combined label *
* @type {number}
*/ */
if (this.range) this.precision = 0;
this.updateHighHandle(this.valueToOffset(this.scope.rzSliderHigh));
this.updateSelectionBar();
if (this.range)
this.updateCmbLabel();
this.updateTicksScale(); /**
}, * Step
*
* @type {number}
*/
this.step = 0;
/** /**
* Translate value to human readable format * The name of the handle we are currently tracking
* *
* @param {number|string} value * @type {string}
* @param {jqLite} label */
* @param {boolean} [useCustomTr] this.tracking = '';
* @returns {undefined}
*/
translateFn: function(value, label, useCustomTr) {
useCustomTr = useCustomTr === undefined ? true : useCustomTr;
var valStr = String((useCustomTr ? this.customTrFn(value, this.options.id) : value)), /**
getWidth = false; * Minimum value (floor) of the model
*
* @type {number}
*/
this.minValue = 0;
if (label.rzsv === undefined || label.rzsv.length !== valStr.length || (label.rzsv.length > 0 && label.rzsw === 0)) { /**
getWidth = true; * Maximum value (ceiling) of the model
label.rzsv = valStr; *
} * @type {number}
*/
this.maxValue = 0;
label.text(valStr);
// Update width only when length of the label have changed /**
if (getWidth) { * The delta between min and max value
this.getWidth(label); *
} * @type {number}
}, */
this.valueRange = 0;
/** /**
* Set maximum and minimum values for the slider and ensure the model and high * Set to true if init method already executed
* value match these limits *
* @returns {undefined} * @type {boolean}
*/ */
setMinAndMax: function() { this.initHasRun = false;
// Slider DOM elements wrapped in jqLite
this.fullBar = null; // The whole slider bar
this.selBar = null; // Highlight between two handles
this.minH = null; // Left slider handle
this.maxH = null; // Right slider handle
this.flrLab = null; // Floor label
this.ceilLab = null; // Ceiling label
this.minLab = null; // Label above the low value
this.maxLab = null; // Label above the high value
this.cmbLab = null; // Combined label
this.ticks = null; // The ticks
// Initialize slider
this.init();
};
this.step = +this.options.step; // Add instance methods
this.precision = +this.options.precision; Slider.prototype = {
this.scope.rzSliderModel = this.roundStep(this.scope.rzSliderModel); /**
if (this.range) * Initialize slider
this.scope.rzSliderHigh = this.roundStep(this.scope.rzSliderHigh); *
* @returns {undefined}
*/
init: function() {
var thrLow, thrHigh,
calcDimFn = angular.bind(this, this.calcViewDimensions),
self = this;
this.applyOptions();
this.initElemHandles();
this.manageElementsStyle();
this.addAccessibility();
this.manageEventsBindings();
this.setDisabledState();
this.calcViewDimensions();
this.setMinAndMax();
this.minValue = this.roundStep(+this.options.floor); $timeout(function() {
self.updateCeilLab();
self.updateFloorLab();
self.initHandles();
self.bindEvents();
});
if (this.options.ceil != null) // Recalculate slider view dimensions
this.maxValue = this.roundStep(+this.options.ceil); this.scope.$on('reCalcViewDimensions', calcDimFn);
else
this.maxValue = this.options.ceil = this.range ? this.scope.rzSliderHigh : this.scope.rzSliderModel;
this.valueRange = this.maxValue - this.minValue; // Recalculate stuff if view port dimensions have changed
}, angular.element($window).on('resize', calcDimFn);
/** this.initHasRun = true;
* Adds accessibility atributes
*
* Run only once during initialization
*
* @returns {undefined}
*/
addAccessibility: function() {
this.sliderElem.attr("role", "slider");
},
/** // Watch for changes to the model
* Calculate dimensions that are dependent on view port size
*
* Run once during initialization and every time view port changes size.
*
* @returns {undefined}
*/
calcViewDimensions: function() {
var handleWidth = this.getWidth(this.minH);
this.handleHalfWidth = handleWidth / 2; thrLow = rzThrottle(function() {
this.barWidth = this.getWidth(this.fullBar); self.setMinAndMax();
self.updateLowHandle(self.valueToOffset(self.scope.rzSliderModel));
self.updateSelectionBar();
self.updateTicksScale();
this.maxLeft = this.barWidth - handleWidth; if (self.range) {
self.updateCmbLabel();
}
this.getWidth(this.sliderElem); }, self.options.interval);
this.sliderElem.rzsl = this.sliderElem[0].getBoundingClientRect().left;
if (this.initHasRun) { thrHigh = rzThrottle(function() {
this.updateFloorLab(); self.setMinAndMax();
this.updateCeilLab(); self.updateHighHandle(self.valueToOffset(self.scope.rzSliderHigh));
this.initHandles(); self.updateSelectionBar();
} self.updateTicksScale();
}, self.updateCmbLabel();
}, self.options.interval);
/** this.scope.$on('rzSliderForceRender', function() {
* Update the ticks position self.resetLabelsValue();
* thrLow();
* @returns {undefined} if (self.range) {
*/ thrHigh();
updateTicksScale: function() {
if (!this.options.showTicks) return;
if (!this.step) return; //if step is 0, the following loop will be endless.
var positions = '',
ticksCount = Math.round((this.maxValue - this.minValue) / this.step) + 1;
for (var i = 0; i < ticksCount; i++) {
var value = this.roundStep(this.minValue + i * this.step);
var selectedClass = this.isTickSelected(value) ? 'selected' : '';
positions += '<li class="tick ' + selectedClass + '">';
if (this.options.showTicksValues) {
var tooltip = '';
if (this.options.ticksValuesTooltip) {
tooltip = 'uib-tooltip="' + this.options.ticksValuesTooltip(value) + '"';
} }
positions += '<span ' + tooltip + ' class="tick-value">' + this.getDisplayValue(value) + '</span>'; self.resetSlider();
} });
positions += '</li>';
}
this.ticks.html(positions);
if (this.options.ticksValuesTooltip)
$compile(this.ticks.contents())(this.scope);
},
isTickSelected: function(value) {
if (!this.range && this.options.showSelectionBar && value <= this.scope.rzSliderModel)
return true;
if (this.range && value >= this.scope.rzSliderModel && value <= this.scope.rzSliderHigh)
return true;
return false;
},
/**
* Update position of the ceiling label
*
* @returns {undefined}
*/
updateCeilLab: function() {
this.translateFn(this.maxValue, this.ceilLab);
this.setLeft(this.ceilLab, this.barWidth - this.ceilLab.rzsw);
this.getWidth(this.ceilLab);
},
/**
* Update position of the floor label
*
* @returns {undefined}
*/
updateFloorLab: function() {
this.translateFn(this.minValue, this.flrLab);
this.getWidth(this.flrLab);
},
/** // Watchers
* Call the onStart callback if defined this.scope.$watch('rzSliderModel', function(newValue, oldValue) {
* if (newValue === oldValue)
* @returns {undefined} return;
*/ thrLow();
callOnStart: function() {
if (this.options.onStart) {
var self = this;
$timeout(function() {
self.options.onStart();
}); });
}
},
/** this.scope.$watch('rzSliderHigh', function(newValue, oldValue) {
* Call the onChange callback if defined if (newValue === oldValue)
* return;
* @returns {undefined} if (newValue != null)
*/ thrHigh();
callOnChange: function() { if (self.range && newValue == null || !self.range && newValue != null) {
if (this.options.onChange) { self.applyOptions();
var self = this; self.resetSlider();
$timeout(function() { }
self.options.onChange();
}); });
}
},
/** this.scope.$watch('rzSliderOptions', function(newValue, oldValue) {
* Call the onEnd callback if defined if (newValue === oldValue)
* return;
* @returns {undefined} self.applyOptions();
*/ self.resetSlider();
callOnEnd: function() { }, true);
if (this.options.onEnd) {
var self = this; this.scope.$on('$destroy', function() {
$timeout(function() { self.unbindEvents();
self.options.onEnd(); angular.element($window).off('resize', calcDimFn);
}); });
} },
},
/** /**
* Update slider handles and label positions * Read the user options and apply them to the slider model
* */
* @param {string} which applyOptions: function() {
* @param {number} newOffset this.options = RzSliderOptions.getOptions(this.scope.rzSliderOptions);
*/
updateHandles: function(which, newOffset) { if (this.options.step <= 0)
if (which === 'rzSliderModel') { this.options.step = 1;
this.updateLowHandle(newOffset); this.range = this.scope.rzSliderModel !== undefined && this.scope.rzSliderHigh !== undefined;
this.updateSelectionBar(); this.options.draggableRange = this.range && this.options.draggableRange;
this.updateTicksScale(); this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
if (this.options.stepsArray) {
this.options.floor = 0;
this.options.ceil = this.options.stepsArray.length - 1;
this.options.step = 1;
this.customTrFn = function(value) {
return this.options.stepsArray[value];
};
} else if (this.options.translate)
this.customTrFn = this.options.translate;
else
this.customTrFn = function(value) {
return String(value);
};
},
/**
* Resets slider
*
* @returns {undefined}
*/
resetSlider: function() {
this.manageElementsStyle();
this.setMinAndMax();
this.updateCeilLab();
this.updateFloorLab();
this.unbindEvents();
this.manageEventsBindings();
this.setDisabledState();
this.calcViewDimensions();
},
/**
* Set the slider children to variables for easy access
*
* Run only once during initialization
*
* @returns {undefined}
*/
initElemHandles: function() {
// Assign all slider elements to object properties for easy access
angular.forEach(this.sliderElem.children(), function(elem, index) {
var jElem = angular.element(elem);
switch (index) {
case 0:
this.fullBar = jElem;
break;
case 1:
this.selBar = jElem;
break;
case 2:
this.minH = jElem;
break;
case 3:
this.maxH = jElem;
break;
case 4:
this.flrLab = jElem;
break;
case 5:
this.ceilLab = jElem;
break;
case 6:
this.minLab = jElem;
break;
case 7:
this.maxLab = jElem;
break;
case 8:
this.cmbLab = jElem;
break;
case 9:
this.ticks = jElem;
break;
}
if (this.range) { }, this);
this.updateCmbLabel();
// Initialize offset cache properties
this.selBar.rzsl = 0;
this.minH.rzsl = 0;
this.maxH.rzsl = 0;
this.flrLab.rzsl = 0;
this.ceilLab.rzsl = 0;
this.minLab.rzsl = 0;
this.maxLab.rzsl = 0;
this.cmbLab.rzsl = 0;
},
/** Update each elements style based on options
*
*/
manageElementsStyle: function() {
if (!this.range)
this.maxH.css('display', 'none');
else
this.maxH.css('display', null);
this.alwaysHide(this.flrLab, this.options.showTicksValues || this.options.hideLimitLabels);
this.alwaysHide(this.ceilLab, this.options.showTicksValues || this.options.hideLimitLabels);
this.alwaysHide(this.minLab, this.options.showTicksValues);
this.alwaysHide(this.maxLab, this.options.showTicksValues || !this.range);
this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range);
this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
if (!this.options.showTicks)
this.ticks.html('');
if (this.options.draggableRange)
this.selBar.addClass('rz-draggable');
else
this.selBar.removeClass('rz-draggable');
},
alwaysHide: function(el, hide) {
el.rzAlwaysHide = hide;
if (hide)
this.hideEl(el);
else
this.showEl(el)
},
/**
* Manage the events bindings based on readOnly and disabled options
*
* @returns {undefined}
*/
manageEventsBindings: function() {
if (this.options.disabled || this.options.readOnly)
this.unbindEvents();
else if (!this.options.disabled || !this.options.readOnly)
this.bindEvents();
},
/**
* Set the disabled state based on rzSliderDisabled
*
* @returns {undefined}
*/
setDisabledState: function() {
if (this.options.disabled) {
this.sliderElem.attr('disabled', 'disabled');
} else {
this.sliderElem.attr('disabled', null);
} }
return; },
}
if (which === 'rzSliderHigh') { /**
this.updateHighHandle(newOffset); * Reset label values
*
* @return {undefined}
*/
resetLabelsValue: function() {
this.minLab.rzsv = undefined;
this.maxLab.rzsv = undefined;
},
/**
* Initialize slider handles positions and labels
*
* Run only once during initialization and every time view port changes size
*
* @returns {undefined}
*/
initHandles: function() {
this.updateLowHandle(this.valueToOffset(this.scope.rzSliderModel));
/*
the order here is important since the selection bar should be
updated after the high handle but before the combined label
*/
if (this.range)
this.updateHighHandle(this.valueToOffset(this.scope.rzSliderHigh));
this.updateSelectionBar(); this.updateSelectionBar();
this.updateTicksScale(); if (this.range)
if (this.range) {
this.updateCmbLabel(); this.updateCmbLabel();
}
return;
}
// Update both this.updateTicksScale();
this.updateLowHandle(newOffset); },
this.updateHighHandle(newOffset);
this.updateSelectionBar(); /**
this.updateTicksScale(); * Translate value to human readable format
this.updateCmbLabel(); *
}, * @param {number|string} value
* @param {jqLite} label
* @param {boolean} [useCustomTr]
* @returns {undefined}
*/
translateFn: function(value, label, useCustomTr) {
useCustomTr = useCustomTr === undefined ? true : useCustomTr;
/** var valStr = String((useCustomTr ? this.customTrFn(value, this.options.id) : value)),
* Update low slider handle position and label getWidth = false;
*
* @param {number} newOffset
* @returns {undefined}
*/
updateLowHandle: function(newOffset) {
this.setLeft(this.minH, newOffset);
this.translateFn(this.scope.rzSliderModel, this.minLab);
this.setLeft(this.minLab, newOffset - this.minLab.rzsw / 2 + this.handleHalfWidth);
this.shFloorCeil(); if (label.rzsv === undefined || label.rzsv.length !== valStr.length || (label.rzsv.length > 0 && label.rzsw === 0)) {
}, getWidth = true;
label.rzsv = valStr;
}
/** label.text(valStr);
* Update high slider handle position and label
*
* @param {number} newOffset
* @returns {undefined}
*/
updateHighHandle: function(newOffset) {
this.setLeft(this.maxH, newOffset);
this.translateFn(this.scope.rzSliderHigh, this.maxLab);
this.setLeft(this.maxLab, newOffset - this.maxLab.rzsw / 2 + this.handleHalfWidth);
this.shFloorCeil(); // Update width only when length of the label have changed
}, if (getWidth) {
this.getWidth(label);
}
},
/** /**
* Show / hide floor / ceiling label * Set maximum and minimum values for the slider and ensure the model and high
* * value match these limits
* @returns {undefined} * @returns {undefined}
*/ */
shFloorCeil: function() { setMinAndMax: function() {
var flHidden = false,
clHidden = false;
if (this.minLab.rzsl <= this.flrLab.rzsl + this.flrLab.rzsw + 5) {
flHidden = true;
this.hideEl(this.flrLab);
} else {
flHidden = false;
this.showEl(this.flrLab);
}
if (this.minLab.rzsl + this.minLab.rzsw >= this.ceilLab.rzsl - this.handleHalfWidth - 10) { this.step = +this.options.step;
clHidden = true; this.precision = +this.options.precision;
this.hideEl(this.ceilLab);
} else {
clHidden = false;
this.showEl(this.ceilLab);
}
if (this.range) { this.scope.rzSliderModel = this.roundStep(this.scope.rzSliderModel);
if (this.maxLab.rzsl + this.maxLab.rzsw >= this.ceilLab.rzsl - 10) { if (this.range)
this.hideEl(this.ceilLab); this.scope.rzSliderHigh = this.roundStep(this.scope.rzSliderHigh);
} else if (!clHidden) {
this.showEl(this.ceilLab);
}
// Hide or show floor label this.minValue = this.roundStep(+this.options.floor);
if (this.maxLab.rzsl <= this.flrLab.rzsl + this.flrLab.rzsw + this.handleHalfWidth) {
this.hideEl(this.flrLab);
} else if (!flHidden) {
this.showEl(this.flrLab);
}
}
},
/** if (this.options.ceil != null)
* Update slider selection bar, combined label and range label this.maxValue = this.roundStep(+this.options.ceil);
* else
* @returns {undefined} this.maxValue = this.options.ceil = this.range ? this.scope.rzSliderHigh : this.scope.rzSliderModel;
*/
updateSelectionBar: function() {
this.setWidth(this.selBar, Math.abs(this.maxH.rzsl - this.minH.rzsl) + this.handleHalfWidth);
this.setLeft(this.selBar, this.range ? this.minH.rzsl + this.handleHalfWidth : 0);
},
/** this.valueRange = this.maxValue - this.minValue;
* Update combined label position and value },
*
* @returns {undefined}
*/
updateCmbLabel: function() {
var lowTr, highTr;
if (this.minLab.rzsl + this.minLab.rzsw + 10 >= this.maxLab.rzsl) {
lowTr = this.getDisplayValue(this.scope.rzSliderModel);
highTr = this.getDisplayValue(this.scope.rzSliderHigh);
this.translateFn(lowTr + ' - ' + highTr, this.cmbLab, false);
this.setLeft(this.cmbLab, this.selBar.rzsl + this.selBar.rzsw / 2 - this.cmbLab.rzsw / 2);
this.hideEl(this.minLab);
this.hideEl(this.maxLab);
this.showEl(this.cmbLab);
} else {
this.showEl(this.maxLab);
this.showEl(this.minLab);
this.hideEl(this.cmbLab);
}
},
/** /**
* Return the translated value if a translate function is provided else the original value * Adds accessibility atributes
* @param value *
* @returns {*} * Run only once during initialization
*/ *
getDisplayValue: function(value) { * @returns {undefined}
return this.customTrFn(value, this.options.id); */
}, addAccessibility: function() {
this.sliderElem.attr("role", "slider");
},
/**
* Calculate dimensions that are dependent on view port size
*
* Run once during initialization and every time view port changes size.
*
* @returns {undefined}
*/
calcViewDimensions: function() {
var handleWidth = this.getWidth(this.minH);
/** this.handleHalfWidth = handleWidth / 2;
* Round value to step and precision this.barWidth = this.getWidth(this.fullBar);
*
* @param {number} value
* @returns {number}
*/
roundStep: function(value) {
var step = this.step,
remainder = +((value - this.minValue) % step).toFixed(3),
steppedValue = remainder > (step / 2) ? value + step - remainder : value - remainder;
steppedValue = steppedValue.toFixed(this.precision); this.maxLeft = this.barWidth - handleWidth;
return +steppedValue;
},
/** this.getWidth(this.sliderElem);
* Hide element this.sliderElem.rzsl = this.sliderElem[0].getBoundingClientRect().left;
*
* @param element
* @returns {jqLite} The jqLite wrapped DOM element
*/
hideEl: function(element) {
return element.css({
opacity: 0
});
},
/** if (this.initHasRun) {
* Show element this.updateFloorLab();
* this.updateCeilLab();
* @param element The jqLite wrapped DOM element this.initHandles();
* @returns {jqLite} The jqLite }
*/ },
showEl: function(element) {
if (!!element.rzAlwaysHide) {
return element;
}
return element.css({ /**
opacity: 1 * Update the ticks position
}); *
}, * @returns {undefined}
*/
updateTicksScale: function() {
if (!this.options.showTicks) return;
if (!this.step) return; //if step is 0, the following loop will be endless.
var positions = '',
ticksCount = Math.round((this.maxValue - this.minValue) / this.step) + 1;
for (var i = 0; i < ticksCount; i++) {
var value = this.roundStep(this.minValue + i * this.step);
var selectedClass = this.isTickSelected(value) ? 'selected' : '';
positions += '<li class="tick ' + selectedClass + '">';
if (this.options.showTicksValues) {
var tooltip = '';
if (this.options.ticksValuesTooltip) {
tooltip = 'uib-tooltip="' + this.options.ticksValuesTooltip(value) + '"';
}
positions += '<span ' + tooltip + ' class="tick-value">' + this.getDisplayValue(value) + '</span>';
}
positions += '</li>';
}
this.ticks.html(positions);
if (this.options.ticksValuesTooltip)
$compile(this.ticks.contents())(this.scope);
},
isTickSelected: function(value) {
if (!this.range && this.options.showSelectionBar && value <= this.scope.rzSliderModel)
return true;
if (this.range && value >= this.scope.rzSliderModel && value <= this.scope.rzSliderHigh)
return true;
return false;
},
/**
* Update position of the ceiling label
*
* @returns {undefined}
*/
updateCeilLab: function() {
this.translateFn(this.maxValue, this.ceilLab);
this.setLeft(this.ceilLab, this.barWidth - this.ceilLab.rzsw);
this.getWidth(this.ceilLab);
},
/**
* Update position of the floor label
*
* @returns {undefined}
*/
updateFloorLab: function() {
this.translateFn(this.minValue, this.flrLab);
this.getWidth(this.flrLab);
},
/**
* Call the onStart callback if defined
*
* @returns {undefined}
*/
callOnStart: function() {
if (this.options.onStart) {
var self = this;
$timeout(function() {
self.options.onStart();
});
}
},
/** /**
* Set element left offset * Call the onChange callback if defined
* *
* @param {jqLite} elem The jqLite wrapped DOM element * @returns {undefined}
* @param {number} left */
* @returns {number} callOnChange: function() {
*/ if (this.options.onChange) {
setLeft: function(elem, left) { var self = this;
elem.rzsl = left; $timeout(function() {
elem.css({ self.options.onChange();
left: left + 'px' });
}); }
return left; },
},
/** /**
* Get element width * Call the onEnd callback if defined
* *
* @param {jqLite} elem The jqLite wrapped DOM element * @returns {undefined}
* @returns {number} */
*/ callOnEnd: function() {
getWidth: function(elem) { if (this.options.onEnd) {
var val = elem[0].getBoundingClientRect(); var self = this;
elem.rzsw = (val.right - val.left) * this.options.scale; $timeout(function() {
return elem.rzsw; self.options.onEnd();
}, });
}
},
/** /**
* Set element width * Update slider handles and label positions
* *
* @param {jqLite} elem The jqLite wrapped DOM element * @param {string} which
* @param {number} width * @param {number} newOffset
* @returns {number} */
*/ updateHandles: function(which, newOffset) {
setWidth: function(elem, width) { if (which === 'rzSliderModel') {
elem.rzsw = width; this.updateLowHandle(newOffset);
elem.css({ this.updateSelectionBar();
width: width + 'px' this.updateTicksScale();
});
return width; if (this.range) {
}, this.updateCmbLabel();
}
return;
}
/** if (which === 'rzSliderHigh') {
* Translate value to pixel offset this.updateHighHandle(newOffset);
* this.updateSelectionBar();
* @param {number} val this.updateTicksScale();
* @returns {number}
*/
valueToOffset: function(val) {
return (this.sanitizeOffsetValue(val) - this.minValue) * this.maxLeft / this.valueRange || 0;
},
/** if (this.range) {
* Ensure that the position rendered is within the slider bounds, even if the value is not this.updateCmbLabel();
* }
* @param {number} val return;
* @returns {number} }
*/
sanitizeOffsetValue: function(val) {
return Math.min(Math.max(val, this.minValue), this.maxValue);
},
/** // Update both
* Translate offset to model value this.updateLowHandle(newOffset);
* this.updateHighHandle(newOffset);
* @param {number} offset this.updateSelectionBar();
* @returns {number} this.updateTicksScale();
*/ this.updateCmbLabel();
offsetToValue: function(offset) { },
return (offset / this.maxLeft) * this.valueRange + this.minValue;
},
// Events /**
* Update low slider handle position and label
*
* @param {number} newOffset
* @returns {undefined}
*/
updateLowHandle: function(newOffset) {
this.setLeft(this.minH, newOffset);
this.translateFn(this.scope.rzSliderModel, this.minLab);
var left = Math.min(Math.max(newOffset - this.minLab.rzsw / 2 + this.handleHalfWidth, 0), this.barWidth - this.ceilLab.rzsw);
this.setLeft(this.minLab, left);
this.shFloorCeil();
},
/**
* Update high slider handle position and label
*
* @param {number} newOffset
* @returns {undefined}
*/
updateHighHandle: function(newOffset) {
this.setLeft(this.maxH, newOffset);
this.translateFn(this.scope.rzSliderHigh, this.maxLab);
var left = Math.min((newOffset - this.maxLab.rzsw / 2 + this.handleHalfWidth), (this.barWidth - this.ceilLab.rzsw));
this.setLeft(this.maxLab, left);
this.shFloorCeil();
},
/**
* Show / hide floor / ceiling label
*
* @returns {undefined}
*/
shFloorCeil: function() {
var flHidden = false,
clHidden = false;
/** if (this.minLab.rzsl <= this.flrLab.rzsl + this.flrLab.rzsw + 5) {
* Get the X-coordinate of an event flHidden = true;
* this.hideEl(this.flrLab);
* @param {Object} event The event } else {
* @returns {number} flHidden = false;
*/ this.showEl(this.flrLab);
getEventX: function(event) { }
/* http://stackoverflow.com/a/12336075/282882 */
//noinspection JSLint
if ('clientX' in event) {
return event.clientX;
}
return event.originalEvent === undefined ? if (this.minLab.rzsl + this.minLab.rzsw >= this.ceilLab.rzsl - this.handleHalfWidth - 10) {
event.touches[0].clientX : event.originalEvent.touches[0].clientX; clHidden = true;
}, this.hideEl(this.ceilLab);
} else {
clHidden = false;
this.showEl(this.ceilLab);
}
/** if (this.range) {
* Get the handle closest to an event. if (this.maxLab.rzsl + this.maxLab.rzsw >= this.ceilLab.rzsl - 10) {
* this.hideEl(this.ceilLab);
* @param event {Event} The event } else if (!clHidden) {
* @returns {jqLite} The handle closest to the event. this.showEl(this.ceilLab);
*/ }
getNearestHandle: function(event) {
if (!this.range) {
return this.minH;
}
var offset = (this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth) * this.options.scale;
return Math.abs(offset - this.minH.rzsl) < Math.abs(offset - this.maxH.rzsl) ? this.minH : this.maxH;
},
/** // Hide or show floor label
* Bind mouse and touch events to slider handles if (this.maxLab.rzsl <= this.flrLab.rzsl + this.flrLab.rzsw + this.handleHalfWidth) {
* this.hideEl(this.flrLab);
* @returns {undefined} } else if (!flHidden) {
*/ this.showEl(this.flrLab);
bindEvents: function() { }
if (this.options.readOnly || this.options.disabled) return; }
var barTracking, barStart, barMove; },
if (this.options.draggableRange) {
barTracking = 'rzSliderDrag';
barStart = this.onDragStart;
barMove = this.onDragMove;
} else {
barTracking = 'rzSliderModel';
barStart = this.onStart;
barMove = this.onMove;
}
this.minH.on('mousedown', angular.bind(this, this.onStart, this.minH, 'rzSliderModel')); /**
if (this.range) { * Update slider selection bar, combined label and range label
this.maxH.on('mousedown', angular.bind(this, this.onStart, this.maxH, 'rzSliderHigh')); *
} * @returns {undefined}
this.fullBar.on('mousedown', angular.bind(this, this.onStart, null, null)); */
this.fullBar.on('mousedown', angular.bind(this, this.onMove, this.fullBar)); updateSelectionBar: function() {
this.selBar.on('mousedown', angular.bind(this, barStart, null, barTracking)); this.setWidth(this.selBar, Math.abs(this.maxH.rzsl - this.minH.rzsl) + this.handleHalfWidth);
this.selBar.on('mousedown', angular.bind(this, barMove, this.selBar)); this.setLeft(this.selBar, this.range ? this.minH.rzsl + this.handleHalfWidth : 0);
this.ticks.on('mousedown', angular.bind(this, this.onStart, null, null)); },
this.ticks.on('mousedown', angular.bind(this, this.onMove, this.ticks));
/**
this.minH.on('touchstart', angular.bind(this, this.onStart, this.minH, 'rzSliderModel')); * Update combined label position and value
if (this.range) { *
this.maxH.on('touchstart', angular.bind(this, this.onStart, this.maxH, 'rzSliderHigh')); * @returns {undefined}
} */
this.fullBar.on('touchstart', angular.bind(this, this.onStart, null, null)); updateCmbLabel: function() {
this.fullBar.on('touchstart', angular.bind(this, this.onMove, this.fullBar)); var lowTr, highTr;
this.selBar.on('touchstart', angular.bind(this, barStart, null, barTracking));
this.selBar.on('touchstart', angular.bind(this, barMove, this.selBar)); if (this.minLab.rzsl + this.minLab.rzsw + 10 >= this.maxLab.rzsl) {
this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null)); lowTr = this.getDisplayValue(this.scope.rzSliderModel);
this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks)); highTr = this.getDisplayValue(this.scope.rzSliderHigh);
},
this.translateFn(lowTr + ' - ' + highTr, this.cmbLab, false);
var left = Math.min(Math.max((this.selBar.rzsl + this.selBar.rzsw / 2 - this.cmbLab.rzsw / 2),0),(this.barWidth - this.cmbLab.rzsw));
this.setLeft(this.cmbLab, left);
this.hideEl(this.minLab);
this.hideEl(this.maxLab);
this.showEl(this.cmbLab);
} else {
this.showEl(this.maxLab);
this.showEl(this.minLab);
this.hideEl(this.cmbLab);
}
},
/** /**
* Unbind mouse and touch events to slider handles * Return the translated value if a translate function is provided else the original value
* * @param value
* @returns {undefined} * @returns {*}
*/ */
unbindEvents: function() { getDisplayValue: function(value) {
this.minH.off(); return this.customTrFn(value, this.options.id);
this.maxH.off(); },
this.fullBar.off();
this.selBar.off(); /**
this.ticks.off(); * Round value to step and precision
}, *
* @param {number} value
* @returns {number}
*/
roundStep: function(value) {
var step = this.step,
remainder = +((value - this.minValue) % step).toFixed(3),
steppedValue = remainder > (step / 2) ? value + step - remainder : value - remainder;
steppedValue = steppedValue.toFixed(this.precision);
return +steppedValue;
},
/**
* Hide element
*
* @param element
* @returns {jqLite} The jqLite wrapped DOM element
*/
hideEl: function(element) {
return element.css({
opacity: 0
});
},
/** /**
* onStart event handler * Show element
* *
* @param {?Object} pointer The jqLite wrapped DOM element; if null, the closest handle is used * @param element The jqLite wrapped DOM element
* @param {?string} ref The name of the handle being changed; if null, the closest handle's value is modified * @returns {jqLite} The jqLite
* @param {Event} event The event */
* @returns {undefined} showEl: function(element) {
*/ if (!!element.rzAlwaysHide) {
onStart: function(pointer, ref, event) { return element;
var ehMove, ehEnd, }
eventNames = this.getEventNames(event);
event.stopPropagation(); return element.css({
event.preventDefault(); opacity: 1
});
},
/**
* Set element left offset
*
* @param {jqLite} elem The jqLite wrapped DOM element
* @param {number} left
* @returns {number}
*/
setLeft: function(elem, left) {
elem.rzsl = left;
elem.css({
left: left + 'px'
});
return left;
},
/**
* Get element width
*
* @param {jqLite} elem The jqLite wrapped DOM element
* @returns {number}
*/
getWidth: function(elem) {
var val = elem[0].getBoundingClientRect();
elem.rzsw = (val.right - val.left) * this.options.scale;
return elem.rzsw;
},
/**
* Set element width
*
* @param {jqLite} elem The jqLite wrapped DOM element
* @param {number} width
* @returns {number}
*/
setWidth: function(elem, width) {
elem.rzsw = width;
elem.css({
width: width + 'px'
});
return width;
},
/**
* Translate value to pixel offset
*
* @param {number} val
* @returns {number}
*/
valueToOffset: function(val) {
return (this.sanitizeOffsetValue(val) - this.minValue) * this.maxLeft / this.valueRange || 0;
},
/**
* Ensure that the position rendered is within the slider bounds, even if the value is not
*
* @param {number} val
* @returns {number}
*/
sanitizeOffsetValue: function(val) {
return Math.min(Math.max(val, this.minValue), this.maxValue);
},
/**
* Translate offset to model value
*
* @param {number} offset
* @returns {number}
*/
offsetToValue: function(offset) {
return (offset / this.maxLeft) * this.valueRange + this.minValue;
},
if (this.tracking !== '') { // Events
return;
}
// We have to do this in case the HTML where the sliders are on /**
// have been animated into view. * Get the X-coordinate of an event
this.calcViewDimensions(); *
* @param {Object} event The event
* @returns {number}
*/
getEventX: function(event) {
/* http://stackoverflow.com/a/12336075/282882 */
//noinspection JSLint
if ('clientX' in event) {
return event.clientX;
}
if (pointer) { return event.originalEvent === undefined ?
this.tracking = ref; event.touches[0].clientX : event.originalEvent.touches[0].clientX;
} else { },
pointer = this.getNearestHandle(event);
this.tracking = pointer === this.minH ? 'rzSliderModel' : 'rzSliderHigh';
}
pointer.addClass('rz-active'); /**
* Get the handle closest to an event.
*
* @param event {Event} The event
* @returns {jqLite} The handle closest to the event.
*/
getNearestHandle: function(event) {
if (!this.range) {
return this.minH;
}
var offset = (this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth) * this.options.scale;
return Math.abs(offset - this.minH.rzsl) < Math.abs(offset - this.maxH.rzsl) ? this.minH : this.maxH;
},
/**
* Bind mouse and touch events to slider handles
*
* @returns {undefined}
*/
bindEvents: function() {
if (this.options.readOnly || this.options.disabled) return;
var barTracking, barStart, barMove;
if (this.options.draggableRange) {
barTracking = 'rzSliderDrag';
barStart = this.onDragStart;
barMove = this.onDragMove;
} else {
barTracking = 'rzSliderModel';
barStart = this.onStart;
barMove = this.onMove;
}
ehMove = angular.bind(this, this.dragging.active ? this.onDragMove : this.onMove, pointer); this.minH.on('mousedown', angular.bind(this, this.onStart, this.minH, 'rzSliderModel'));
ehEnd = angular.bind(this, this.onEnd, ehMove); if (this.range) {
this.maxH.on('mousedown', angular.bind(this, this.onStart, this.maxH, 'rzSliderHigh'));
}
this.fullBar.on('mousedown', angular.bind(this, this.onStart, null, null));
this.fullBar.on('mousedown', angular.bind(this, this.onMove, this.fullBar));
this.selBar.on('mousedown', angular.bind(this, barStart, null, barTracking));
this.selBar.on('mousedown', angular.bind(this, barMove, this.selBar));
this.ticks.on('mousedown', angular.bind(this, this.onStart, null, null));
this.ticks.on('mousedown', angular.bind(this, this.onMove, this.ticks));
this.minH.on('touchstart', angular.bind(this, this.onStart, this.minH, 'rzSliderModel'));
if (this.range) {
this.maxH.on('touchstart', angular.bind(this, this.onStart, this.maxH, 'rzSliderHigh'));
}
this.fullBar.on('touchstart', angular.bind(this, this.onStart, null, null));
this.fullBar.on('touchstart', angular.bind(this, this.onMove, this.fullBar));
this.selBar.on('touchstart', angular.bind(this, barStart, null, barTracking));
this.selBar.on('touchstart', angular.bind(this, barMove, this.selBar));
this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null));
this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks));
},
/**
* Unbind mouse and touch events to slider handles
*
* @returns {undefined}
*/
unbindEvents: function() {
this.minH.off();
this.maxH.off();
this.fullBar.off();
this.selBar.off();
this.ticks.off();
},
/**
* onStart event handler
*
* @param {?Object} pointer The jqLite wrapped DOM element; if null, the closest handle is used
* @param {?string} ref The name of the handle being changed; if null, the closest handle's value is modified
* @param {Event} event The event
* @returns {undefined}
*/
onStart: function(pointer, ref, event) {
var ehMove, ehEnd,
eventNames = this.getEventNames(event);
$document.on(eventNames.moveEvent, ehMove); event.stopPropagation();
$document.one(eventNames.endEvent, ehEnd); event.preventDefault();
this.callOnStart();
},
/** if (this.tracking !== '') {
* onMove event handler return;
* }
* @param {jqLite} pointer
* @param {Event} event The event
* @returns {undefined}
*/
onMove: function(pointer, event) {
var eventX = this.getEventX(event),
sliderLO, newOffset, newValue;
sliderLO = this.sliderElem.rzsl; // We have to do this in case the HTML where the sliders are on
newOffset = (eventX - sliderLO - this.handleHalfWidth) * this.options.scale; // have been animated into view.
this.calcViewDimensions();
if (newOffset <= 0) { if (pointer) {
if (pointer.rzsl === 0) this.tracking = ref;
return; } else {
newValue = this.minValue; pointer = this.getNearestHandle(event);
newOffset = 0; this.tracking = pointer === this.minH ? 'rzSliderModel' : 'rzSliderHigh';
} else if (newOffset >= this.maxLeft) { }
if (pointer.rzsl === this.maxLeft)
return;
newValue = this.maxValue;
newOffset = this.maxLeft;
} else {
newValue = this.offsetToValue(newOffset);
newValue = this.roundStep(newValue);
newOffset = this.valueToOffset(newValue);
}
this.positionTrackingHandle(newValue, newOffset);
},
/** pointer.addClass('rz-active');
* onDragStart event handler
*
* Handles dragging of the middle bar.
*
* @param {Object} pointer The jqLite wrapped DOM element
* @param {string} ref One of the refLow, refHigh values
* @param {Event} event The event
* @returns {undefined}
*/
onDragStart: function(pointer, ref, event) {
var offset = this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth;
this.dragging = {
active: true,
value: this.offsetToValue(offset),
difference: this.scope.rzSliderHigh - this.scope.rzSliderModel,
offset: offset,
lowDist: offset - this.minH.rzsl,
highDist: this.maxH.rzsl - offset
};
this.minH.addClass('rz-active');
this.maxH.addClass('rz-active');
this.onStart(pointer, ref, event); ehMove = angular.bind(this, this.dragging.active ? this.onDragMove : this.onMove, pointer);
}, ehEnd = angular.bind(this, this.onEnd, ehMove);
/** $document.on(eventNames.moveEvent, ehMove);
* onDragMove event handler $document.one(eventNames.endEvent, ehEnd);
* this.callOnStart();
* Handles dragging of the middle bar. },
*
* @param {jqLite} pointer
* @param {Event} event The event
* @returns {undefined}
*/
onDragMove: function(pointer, event) {
var newOffset = this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth,
newMinOffset, newMaxOffset,
newMinValue, newMaxValue;
if (newOffset <= this.dragging.lowDist) { /**
if (pointer.rzsl === this.dragging.lowDist) { * onMove event handler
return; *
* @param {jqLite} pointer
* @param {Event} event The event
* @returns {undefined}
*/
onMove: function(pointer, event) {
var eventX = this.getEventX(event),
sliderLO, newOffset, newValue;
sliderLO = this.sliderElem.rzsl;
newOffset = (eventX - sliderLO - this.handleHalfWidth) * this.options.scale;
if (newOffset <= 0) {
if (pointer.rzsl === 0)
return;
newValue = this.minValue;
newOffset = 0;
} else if (newOffset >= this.maxLeft) {
if (pointer.rzsl === this.maxLeft)
return;
newValue = this.maxValue;
newOffset = this.maxLeft;
} else {
newValue = this.offsetToValue(newOffset);
newValue = this.roundStep(newValue);
newOffset = this.valueToOffset(newValue);
} }
newMinValue = this.minValue; this.positionTrackingHandle(newValue, newOffset);
newMinOffset = 0; },
newMaxValue = this.minValue + this.dragging.difference;
newMaxOffset = this.valueToOffset(newMaxValue); /**
} else if (newOffset >= this.maxLeft - this.dragging.highDist) { * onDragStart event handler
if (pointer.rzsl === this.dragging.highDist) { *
return; * Handles dragging of the middle bar.
*
* @param {Object} pointer The jqLite wrapped DOM element
* @param {string} ref One of the refLow, refHigh values
* @param {Event} event The event
* @returns {undefined}
*/
onDragStart: function(pointer, ref, event) {
var offset = this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth;
this.dragging = {
active: true,
value: this.offsetToValue(offset),
difference: this.scope.rzSliderHigh - this.scope.rzSliderModel,
offset: offset,
lowDist: offset - this.minH.rzsl,
highDist: this.maxH.rzsl - offset
};
this.minH.addClass('rz-active');
this.maxH.addClass('rz-active');
this.onStart(pointer, ref, event);
},
/**
* onDragMove event handler
*
* Handles dragging of the middle bar.
*
* @param {jqLite} pointer
* @param {Event} event The event
* @returns {undefined}
*/
onDragMove: function(pointer, event) {
var newOffset = this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth,
newMinOffset, newMaxOffset,
newMinValue, newMaxValue;
if (newOffset <= this.dragging.lowDist) {
if (pointer.rzsl === this.dragging.lowDist) {
return;
}
newMinValue = this.minValue;
newMinOffset = 0;
newMaxValue = this.minValue + this.dragging.difference;
newMaxOffset = this.valueToOffset(newMaxValue);
} else if (newOffset >= this.maxLeft - this.dragging.highDist) {
if (pointer.rzsl === this.dragging.highDist) {
return;
}
newMaxValue = this.maxValue;
newMaxOffset = this.maxLeft;
newMinValue = this.maxValue - this.dragging.difference;
newMinOffset = this.valueToOffset(newMinValue);
} else {
newMinValue = this.offsetToValue(newOffset - this.dragging.lowDist);
newMinValue = this.roundStep(newMinValue);
newMinOffset = this.valueToOffset(newMinValue);
newMaxValue = newMinValue + this.dragging.difference;
newMaxOffset = this.valueToOffset(newMaxValue);
} }
newMaxValue = this.maxValue;
newMaxOffset = this.maxLeft;
newMinValue = this.maxValue - this.dragging.difference;
newMinOffset = this.valueToOffset(newMinValue);
} else {
newMinValue = this.offsetToValue(newOffset - this.dragging.lowDist);
newMinValue = this.roundStep(newMinValue);
newMinOffset = this.valueToOffset(newMinValue);
newMaxValue = newMinValue + this.dragging.difference;
newMaxOffset = this.valueToOffset(newMaxValue);
}
this.positionTrackingBar(newMinValue, newMaxValue, newMinOffset, newMaxOffset); this.positionTrackingBar(newMinValue, newMaxValue, newMinOffset, newMaxOffset);
}, },
/** /**
* Set the new value and offset for the entire bar * Set the new value and offset for the entire bar
* *
* @param {number} newMinValue the new minimum value * @param {number} newMinValue the new minimum value
* @param {number} newMaxValue the new maximum value * @param {number} newMaxValue the new maximum value
* @param {number} newMinOffset the new minimum offset * @param {number} newMinOffset the new minimum offset
* @param {number} newMaxOffset the new maximum offset * @param {number} newMaxOffset the new maximum offset
*/ */
positionTrackingBar: function(newMinValue, newMaxValue, newMinOffset, newMaxOffset) { positionTrackingBar: function(newMinValue, newMaxValue, newMinOffset, newMaxOffset) {
this.scope.rzSliderModel = newMinValue; this.scope.rzSliderModel = newMinValue;
this.scope.rzSliderHigh = newMaxValue; this.scope.rzSliderHigh = newMaxValue;
this.updateHandles('rzSliderModel', newMinOffset); this.updateHandles('rzSliderModel', newMinOffset);
this.updateHandles('rzSliderHigh', newMaxOffset); this.updateHandles('rzSliderHigh', newMaxOffset);
this.scope.$apply(); this.scope.$apply();
this.callOnChange(); this.callOnChange();
}, },
/** /**
* Set the new value and offset to the current tracking handle * Set the new value and offset to the current tracking handle
* *
* @param {number} newValue new model value * @param {number} newValue new model value
* @param {number} newOffset new offset value * @param {number} newOffset new offset value
*/ */
positionTrackingHandle: function(newValue, newOffset) { positionTrackingHandle: function(newValue, newOffset) {
if (this.range) { if (this.range) {
/* This is to check if we need to switch the min and max handles*/ /* This is to check if we need to switch the min and max handles*/
if (this.tracking === 'rzSliderModel' && newValue >= this.scope.rzSliderHigh) { if (this.tracking === 'rzSliderModel' && newValue >= this.scope.rzSliderHigh) {
this.scope[this.tracking] = this.scope.rzSliderHigh; this.scope[this.tracking] = this.scope.rzSliderHigh;
this.updateHandles(this.tracking, this.maxH.rzsl); this.updateHandles(this.tracking, this.maxH.rzsl);
this.tracking = 'rzSliderHigh'; this.tracking = 'rzSliderHigh';
this.minH.removeClass('rz-active'); this.minH.removeClass('rz-active');
this.maxH.addClass('rz-active'); this.maxH.addClass('rz-active');
/* We need to apply here because we are not sure that we will enter the next block */ /* We need to apply here because we are not sure that we will enter the next block */
this.scope.$apply(); this.scope.$apply();
this.callOnChange(); this.callOnChange();
} else if (this.tracking === 'rzSliderHigh' && newValue <= this.scope.rzSliderModel) { } else if (this.tracking === 'rzSliderHigh' && newValue <= this.scope.rzSliderModel) {
this.scope[this.tracking] = this.scope.rzSliderModel; this.scope[this.tracking] = this.scope.rzSliderModel;
this.updateHandles(this.tracking, this.minH.rzsl); this.updateHandles(this.tracking, this.minH.rzsl);
this.tracking = 'rzSliderModel'; this.tracking = 'rzSliderModel';
this.maxH.removeClass('rz-active'); this.maxH.removeClass('rz-active');
this.minH.addClass('rz-active'); this.minH.addClass('rz-active');
/* We need to apply here because we are not sure that we will enter the next block */ /* We need to apply here because we are not sure that we will enter the next block */
this.scope.$apply();
this.callOnChange();
}
}
if (this.scope[this.tracking] !== newValue) {
this.scope[this.tracking] = newValue;
this.updateHandles(this.tracking, newOffset);
this.scope.$apply(); this.scope.$apply();
this.callOnChange(); this.callOnChange();
} }
} },
if (this.scope[this.tracking] !== newValue) { /**
this.scope[this.tracking] = newValue; * onEnd event handler
this.updateHandles(this.tracking, newOffset); *
this.scope.$apply(); * @param {Event} event The event
this.callOnChange(); * @param {Function} ehMove The the bound move event handler
} * @returns {undefined}
}, */
onEnd: function(ehMove, event) {
var moveEventName = this.getEventNames(event).moveEvent;
/** this.minH.removeClass('rz-active');
* onEnd event handler this.maxH.removeClass('rz-active');
*
* @param {Event} event The event
* @param {Function} ehMove The the bound move event handler
* @returns {undefined}
*/
onEnd: function(ehMove, event) {
var moveEventName = this.getEventNames(event).moveEvent;
this.minH.removeClass('rz-active'); $document.off(moveEventName, ehMove);
this.maxH.removeClass('rz-active');
$document.off(moveEventName, ehMove); this.scope.$emit('slideEnded');
this.tracking = '';
this.scope.$emit('slideEnded'); this.dragging.active = false;
this.tracking = ''; this.callOnEnd();
},
this.dragging.active = false; /**
this.callOnEnd(); * Get event names for move and event end
}, *
* @param {Event} event The event
*
* @return {{moveEvent: string, endEvent: string}}
*/
getEventNames: function(event) {
var eventNames = {
moveEvent: '',
endEvent: ''
};
/** if (event.touches || (event.originalEvent !== undefined && event.originalEvent.touches)) {
* Get event names for move and event end eventNames.moveEvent = 'touchmove';
* eventNames.endEvent = 'touchend';
* @param {Event} event The event } else {
* eventNames.moveEvent = 'mousemove';
* @return {{moveEvent: string, endEvent: string}} eventNames.endEvent = 'mouseup';
*/ }
getEventNames: function(event) {
var eventNames = {
moveEvent: '',
endEvent: ''
};
if (event.touches || (event.originalEvent !== undefined && event.originalEvent.touches)) { return eventNames;
eventNames.moveEvent = 'touchmove';
eventNames.endEvent = 'touchend';
} else {
eventNames.moveEvent = 'mousemove';
eventNames.endEvent = 'mouseup';
} }
};
return eventNames; return Slider;
} }])
};
return Slider;
}])
.directive('rzslider', ['RzSlider', function(RzSlider) { .directive('rzslider', ['RzSlider', function(RzSlider) {
'use strict'; 'use strict';
return { return {
restrict: 'E', restrict: 'E',
scope: { scope: {
rzSliderModel: '=?', rzSliderModel: '=?',
rzSliderHigh: '=?', rzSliderHigh: '=?',
rzSliderOptions: '=?', rzSliderOptions: '=?',
rzSliderTplUrl: '@' rzSliderTplUrl: '@'
}, },
/**
* Return template URL
*
* @param {jqLite} elem
* @param {Object} attrs
* @return {string}
*/
templateUrl: function(elem, attrs) {
//noinspection JSUnresolvedVariable
return attrs.rzSliderTplUrl || 'rzSliderTpl.html';
},
/** link: function(scope, elem) {
* Return template URL return new RzSlider(scope, elem);
* }
* @param {jqLite} elem };
* @param {Object} attrs }]);
* @return {string}
*/
templateUrl: function(elem, attrs) {
//noinspection JSUnresolvedVariable
return attrs.rzSliderTplUrl || 'rzSliderTpl.html';
},
link: function(scope, elem) {
return new RzSlider(scope, elem);
}
};
}]);
// IDE assist // IDE assist
......
dist/rzslider.min.js
View file @ fb02c4ca
/*! angularjs-slider - v2.0.0 - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-11-12 */ /*! angularjs-slider - v2.0.0 - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-11-23 */
!function(a,b){"use strict";"function"==typeof define&&define.amd?define(["angular"],b):"object"==typeof module&&module.exports?module.exports=b(require("angular")):b(a.angular)}(this,function(a){"use strict";var b=a.module("rzModule",[]).factory("RzSliderOptions",function(){var b={floor:0,ceil:null,step:1,precision:0,id:null,translate:null,stepsArray:null,draggableRange:!1,showSelectionBar:!1,hideLimitLabels:!1,readOnly:!1,disabled:!1,interval:350,showTicks:!1,showTicksValues:!1,ticksValuesTooltip:null,scale:1,onStart:null,onChange:null,onEnd:null},c={},d={};return d.options=function(b){a.extend(c,b)},d.getOptions=function(d){return a.extend({},b,c,d)},d}).value("rzThrottle",function(a,b,c){var d,e,f,g=Date.now||function(){return(new Date).getTime()},h=null,i=0;c=c||{};var j=function(){i=c.leading===!1?0:g(),h=null,f=a.apply(d,e),d=e=null};return function(){var k=g();i||c.leading!==!1||(i=k);var l=b-(k-i);return d=this,e=arguments,0>=l?(clearTimeout(h),h=null,i=k,f=a.apply(d,e),d=e=null):h||c.trailing===!1||(h=setTimeout(j,l)),f}}).factory("RzSlider",["$timeout","$document","$window","$compile","RzSliderOptions","rzThrottle",function(b,c,d,e,f,g){var h=function(a,b){this.scope=a,this.sliderElem=b,this.range=void 0!==this.scope.rzSliderModel&&void 0!==this.scope.rzSliderHigh,this.dragging={active:!1,value:0,difference:0,offset:0,lowDist:0,highDist:0},this.handleHalfWidth=0,this.maxLeft=0,this.precision=0,this.step=0,this.tracking="",this.minValue=0,this.maxValue=0,this.valueRange=0,this.initHasRun=!1,this.fullBar=null,this.selBar=null,this.minH=null,this.maxH=null,this.flrLab=null,this.ceilLab=null,this.minLab=null,this.maxLab=null,this.cmbLab=null,this.ticks=null,this.init()};return h.prototype={init:function(){var c,e,f=a.bind(this,this.calcViewDimensions),h=this;this.applyOptions(),this.initElemHandles(),this.manageElementsStyle(),this.addAccessibility(),this.manageEventsBindings(),this.setDisabledState(),this.calcViewDimensions(),this.setMinAndMax(),b(function(){h.updateCeilLab(),h.updateFloorLab(),h.initHandles(),h.bindEvents()}),this.scope.$on("reCalcViewDimensions",f),a.element(d).on("resize",f),this.initHasRun=!0,c=g(function(){h.setMinAndMax(),h.updateLowHandle(h.valueToOffset(h.scope.rzSliderModel)),h.updateSelectionBar(),h.updateTicksScale(),h.range&&h.updateCmbLabel()},h.options.interval),e=g(function(){h.setMinAndMax(),h.updateHighHandle(h.valueToOffset(h.scope.rzSliderHigh)),h.updateSelectionBar(),h.updateTicksScale(),h.updateCmbLabel()},h.options.interval),this.scope.$on("rzSliderForceRender",function(){h.resetLabelsValue(),c(),h.range&&e(),h.resetSlider()}),this.scope.$watch("rzSliderModel",function(a,b){a!==b&&c()}),this.scope.$watch("rzSliderHigh",function(a,b){a!==b&&(null!=a&&e(),(h.range&&null==a||!h.range&&null!=a)&&(h.applyOptions(),h.resetSlider()))}),this.scope.$watch("rzSliderOptions",function(a,b){a!==b&&(h.applyOptions(),h.resetSlider())},!0),this.scope.$on("$destroy",function(){h.unbindEvents(),a.element(d).off("resize",f)})},applyOptions:function(){this.options=f.getOptions(this.scope.rzSliderOptions),this.options.step<=0&&(this.options.step=1),this.range=void 0!==this.scope.rzSliderModel&&void 0!==this.scope.rzSliderHigh,this.options.draggableRange=this.range&&this.options.draggableRange,this.options.showTicks=this.options.showTicks||this.options.showTicksValues,this.options.stepsArray?(this.options.floor=0,this.options.ceil=this.options.stepsArray.length-1,this.options.step=1,this.customTrFn=function(a){return this.options.stepsArray[a]}):this.options.translate?this.customTrFn=this.options.translate:this.customTrFn=function(a){return String(a)}},resetSlider:function(){this.manageElementsStyle(),this.setMinAndMax(),this.updateCeilLab(),this.updateFloorLab(),this.unbindEvents(),this.manageEventsBindings(),this.setDisabledState(),this.calcViewDimensions()},initElemHandles:function(){a.forEach(this.sliderElem.children(),function(b,c){var d=a.element(b);switch(c){case 0:this.fullBar=d;break;case 1:this.selBar=d;break;case 2:this.minH=d;break;case 3:this.maxH=d;break;case 4:this.flrLab=d;break;case 5:this.ceilLab=d;break;case 6:this.minLab=d;break;case 7:this.maxLab=d;break;case 8:this.cmbLab=d;break;case 9:this.ticks=d}},this),this.selBar.rzsl=0,this.minH.rzsl=0,this.maxH.rzsl=0,this.flrLab.rzsl=0,this.ceilLab.rzsl=0,this.minLab.rzsl=0,this.maxLab.rzsl=0,this.cmbLab.rzsl=0},manageElementsStyle:function(){this.range?this.maxH.css("display",null):this.maxH.css("display","none"),this.alwaysHide(this.flrLab,this.options.showTicksValues||this.options.hideLimitLabels),this.alwaysHide(this.ceilLab,this.options.showTicksValues||this.options.hideLimitLabels),this.alwaysHide(this.minLab,this.options.showTicksValues),this.alwaysHide(this.maxLab,this.options.showTicksValues||!this.range),this.alwaysHide(this.cmbLab,this.options.showTicksValues||!this.range),this.alwaysHide(this.selBar,!this.range&&!this.options.showSelectionBar),this.options.showTicks||this.ticks.html(""),this.options.draggableRange?this.selBar.addClass("rz-draggable"):this.selBar.removeClass("rz-draggable")},alwaysHide:function(a,b){a.rzAlwaysHide=b,b?this.hideEl(a):this.showEl(a)},manageEventsBindings:function(){this.options.disabled||this.options.readOnly?this.unbindEvents():this.options.disabled&&this.options.readOnly||this.bindEvents()},setDisabledState:function(){this.options.disabled?this.sliderElem.attr("disabled","disabled"):this.sliderElem.attr("disabled",null)},resetLabelsValue:function(){this.minLab.rzsv=void 0,this.maxLab.rzsv=void 0},initHandles:function(){this.updateLowHandle(this.valueToOffset(this.scope.rzSliderModel)),this.range&&this.updateHighHandle(this.valueToOffset(this.scope.rzSliderHigh)),this.updateSelectionBar(),this.range&&this.updateCmbLabel(),this.updateTicksScale()},translateFn:function(a,b,c){c=void 0===c?!0:c;var d=String(c?this.customTrFn(a,this.options.id):a),e=!1;(void 0===b.rzsv||b.rzsv.length!==d.length||b.rzsv.length>0&&0===b.rzsw)&&(e=!0,b.rzsv=d),b.text(d),e&&this.getWidth(b)},setMinAndMax:function(){this.step=+this.options.step,this.precision=+this.options.precision,this.scope.rzSliderModel=this.roundStep(this.scope.rzSliderModel),this.range&&(this.scope.rzSliderHigh=this.roundStep(this.scope.rzSliderHigh)),this.minValue=this.roundStep(+this.options.floor),null!=this.options.ceil?this.maxValue=this.roundStep(+this.options.ceil):this.maxValue=this.options.ceil=this.range?this.scope.rzSliderHigh:this.scope.rzSliderModel,this.valueRange=this.maxValue-this.minValue},addAccessibility:function(){this.sliderElem.attr("role","slider")},calcViewDimensions:function(){var a=this.getWidth(this.minH);this.handleHalfWidth=a/2,this.barWidth=this.getWidth(this.fullBar),this.maxLeft=this.barWidth-a,this.getWidth(this.sliderElem),this.sliderElem.rzsl=this.sliderElem[0].getBoundingClientRect().left,this.initHasRun&&(this.updateFloorLab(),this.updateCeilLab(),this.initHandles())},updateTicksScale:function(){if(this.options.showTicks&&this.step){for(var a="",b=Math.round((this.maxValue-this.minValue)/this.step)+1,c=0;b>c;c++){var d=this.roundStep(this.minValue+c*this.step),f=this.isTickSelected(d)?"selected":"";if(a+='<li class="tick '+f+'">',this.options.showTicksValues){var g="";this.options.ticksValuesTooltip&&(g='uib-tooltip="'+this.options.ticksValuesTooltip(d)+'"'),a+="<span "+g+' class="tick-value">'+this.getDisplayValue(d)+"</span>"}a+="</li>"}this.ticks.html(a),this.options.ticksValuesTooltip&&e(this.ticks.contents())(this.scope)}},isTickSelected:function(a){return!this.range&&this.options.showSelectionBar&&a<=this.scope.rzSliderModel?!0:this.range&&a>=this.scope.rzSliderModel&&a<=this.scope.rzSliderHigh?!0:!1},updateCeilLab:function(){this.translateFn(this.maxValue,this.ceilLab),this.setLeft(this.ceilLab,this.barWidth-this.ceilLab.rzsw),this.getWidth(this.ceilLab)},updateFloorLab:function(){this.translateFn(this.minValue,this.flrLab),this.getWidth(this.flrLab)},callOnStart:function(){if(this.options.onStart){var a=this;b(function(){a.options.onStart()})}},callOnChange:function(){if(this.options.onChange){var a=this;b(function(){a.options.onChange()})}},callOnEnd:function(){if(this.options.onEnd){var a=this;b(function(){a.options.onEnd()})}},updateHandles:function(a,b){return"rzSliderModel"===a?(this.updateLowHandle(b),this.updateSelectionBar(),this.updateTicksScale(),void(this.range&&this.updateCmbLabel())):"rzSliderHigh"===a?(this.updateHighHandle(b),this.updateSelectionBar(),this.updateTicksScale(),void(this.range&&this.updateCmbLabel())):(this.updateLowHandle(b),this.updateHighHandle(b),this.updateSelectionBar(),this.updateTicksScale(),void this.updateCmbLabel())},updateLowHandle:function(a){this.setLeft(this.minH,a),this.translateFn(this.scope.rzSliderModel,this.minLab),this.setLeft(this.minLab,a-this.minLab.rzsw/2+this.handleHalfWidth),this.shFloorCeil()},updateHighHandle:function(a){this.setLeft(this.maxH,a),this.translateFn(this.scope.rzSliderHigh,this.maxLab),this.setLeft(this.maxLab,a-this.maxLab.rzsw/2+this.handleHalfWidth),this.shFloorCeil()},shFloorCeil:function(){var a=!1,b=!1;this.minLab.rzsl<=this.flrLab.rzsl+this.flrLab.rzsw+5?(a=!0,this.hideEl(this.flrLab)):(a=!1,this.showEl(this.flrLab)),this.minLab.rzsl+this.minLab.rzsw>=this.ceilLab.rzsl-this.handleHalfWidth-10?(b=!0,this.hideEl(this.ceilLab)):(b=!1,this.showEl(this.ceilLab)),this.range&&(this.maxLab.rzsl+this.maxLab.rzsw>=this.ceilLab.rzsl-10?this.hideEl(this.ceilLab):b||this.showEl(this.ceilLab),this.maxLab.rzsl<=this.flrLab.rzsl+this.flrLab.rzsw+this.handleHalfWidth?this.hideEl(this.flrLab):a||this.showEl(this.flrLab))},updateSelectionBar:function(){this.setWidth(this.selBar,Math.abs(this.maxH.rzsl-this.minH.rzsl)+this.handleHalfWidth),this.setLeft(this.selBar,this.range?this.minH.rzsl+this.handleHalfWidth:0)},updateCmbLabel:function(){var a,b;this.minLab.rzsl+this.minLab.rzsw+10>=this.maxLab.rzsl?(a=this.getDisplayValue(this.scope.rzSliderModel),b=this.getDisplayValue(this.scope.rzSliderHigh),this.translateFn(a+" - "+b,this.cmbLab,!1),this.setLeft(this.cmbLab,this.selBar.rzsl+this.selBar.rzsw/2-this.cmbLab.rzsw/2),this.hideEl(this.minLab),this.hideEl(this.maxLab),this.showEl(this.cmbLab)):(this.showEl(this.maxLab),this.showEl(this.minLab),this.hideEl(this.cmbLab))},getDisplayValue:function(a){return this.customTrFn(a,this.options.id)},roundStep:function(a){var b=this.step,c=+((a-this.minValue)%b).toFixed(3),d=c>b/2?a+b-c:a-c;return d=d.toFixed(this.precision),+d},hideEl:function(a){return a.css({opacity:0})},showEl:function(a){return a.rzAlwaysHide?a:a.css({opacity:1})},setLeft:function(a,b){return a.rzsl=b,a.css({left:b+"px"}),b},getWidth:function(a){var b=a[0].getBoundingClientRect();return a.rzsw=(b.right-b.left)*this.options.scale,a.rzsw},setWidth:function(a,b){return a.rzsw=b,a.css({width:b+"px"}),b},valueToOffset:function(a){return(this.sanitizeOffsetValue(a)-this.minValue)*this.maxLeft/this.valueRange||0},sanitizeOffsetValue:function(a){return Math.min(Math.max(a,this.minValue),this.maxValue)},offsetToValue:function(a){return a/this.maxLeft*this.valueRange+this.minValue},getEventX:function(a){return"clientX"in a?a.clientX:void 0===a.originalEvent?a.touches[0].clientX:a.originalEvent.touches[0].clientX},getNearestHandle:function(a){if(!this.range)return this.minH;var b=(this.getEventX(a)-this.sliderElem.rzsl-this.handleHalfWidth)*this.options.scale;return Math.abs(b-this.minH.rzsl)<Math.abs(b-this.maxH.rzsl)?this.minH:this.maxH},bindEvents:function(){if(!this.options.readOnly&&!this.options.disabled){var b,c,d;this.options.draggableRange?(b="rzSliderDrag",c=this.onDragStart,d=this.onDragMove):(b="rzSliderModel",c=this.onStart,d=this.onMove),this.minH.on("mousedown",a.bind(this,this.onStart,this.minH,"rzSliderModel")),this.range&&this.maxH.on("mousedown",a.bind(this,this.onStart,this.maxH,"rzSliderHigh")),this.fullBar.on("mousedown",a.bind(this,this.onStart,null,null)),this.fullBar.on("mousedown",a.bind(this,this.onMove,this.fullBar)),this.selBar.on("mousedown",a.bind(this,c,null,b)),this.selBar.on("mousedown",a.bind(this,d,this.selBar)),this.ticks.on("mousedown",a.bind(this,this.onStart,null,null)),this.ticks.on("mousedown",a.bind(this,this.onMove,this.ticks)),this.minH.on("touchstart",a.bind(this,this.onStart,this.minH,"rzSliderModel")),this.range&&this.maxH.on("touchstart",a.bind(this,this.onStart,this.maxH,"rzSliderHigh")),this.fullBar.on("touchstart",a.bind(this,this.onStart,null,null)),this.fullBar.on("touchstart",a.bind(this,this.onMove,this.fullBar)),this.selBar.on("touchstart",a.bind(this,c,null,b)),this.selBar.on("touchstart",a.bind(this,d,this.selBar)),this.ticks.on("touchstart",a.bind(this,this.onStart,null,null)),this.ticks.on("touchstart",a.bind(this,this.onMove,this.ticks))}},unbindEvents:function(){this.minH.off(),this.maxH.off(),this.fullBar.off(),this.selBar.off(),this.ticks.off()},onStart:function(b,d,e){var f,g,h=this.getEventNames(e);e.stopPropagation(),e.preventDefault(),""===this.tracking&&(this.calcViewDimensions(),b?this.tracking=d:(b=this.getNearestHandle(e),this.tracking=b===this.minH?"rzSliderModel":"rzSliderHigh"),b.addClass("rz-active"),f=a.bind(this,this.dragging.active?this.onDragMove:this.onMove,b),g=a.bind(this,this.onEnd,f),c.on(h.moveEvent,f),c.one(h.endEvent,g),this.callOnStart())},onMove:function(a,b){var c,d,e,f=this.getEventX(b);if(c=this.sliderElem.rzsl,d=(f-c-this.handleHalfWidth)*this.options.scale,0>=d){if(0===a.rzsl)return;e=this.minValue,d=0}else if(d>=this.maxLeft){if(a.rzsl===this.maxLeft)return;e=this.maxValue,d=this.maxLeft}else e=this.offsetToValue(d),e=this.roundStep(e),d=this.valueToOffset(e);this.positionTrackingHandle(e,d)},onDragStart:function(a,b,c){var d=this.getEventX(c)-this.sliderElem.rzsl-this.handleHalfWidth;this.dragging={active:!0,value:this.offsetToValue(d),difference:this.scope.rzSliderHigh-this.scope.rzSliderModel,offset:d,lowDist:d-this.minH.rzsl,highDist:this.maxH.rzsl-d},this.minH.addClass("rz-active"),this.maxH.addClass("rz-active"),this.onStart(a,b,c)},onDragMove:function(a,b){var c,d,e,f,g=this.getEventX(b)-this.sliderElem.rzsl-this.handleHalfWidth;if(g<=this.dragging.lowDist){if(a.rzsl===this.dragging.lowDist)return;e=this.minValue,c=0,f=this.minValue+this.dragging.difference,d=this.valueToOffset(f)}else if(g>=this.maxLeft-this.dragging.highDist){if(a.rzsl===this.dragging.highDist)return;f=this.maxValue,d=this.maxLeft,e=this.maxValue-this.dragging.difference,c=this.valueToOffset(e)}else e=this.offsetToValue(g-this.dragging.lowDist),e=this.roundStep(e),c=this.valueToOffset(e),f=e+this.dragging.difference,d=this.valueToOffset(f);this.positionTrackingBar(e,f,c,d)},positionTrackingBar:function(a,b,c,d){this.scope.rzSliderModel=a,this.scope.rzSliderHigh=b,this.updateHandles("rzSliderModel",c),this.updateHandles("rzSliderHigh",d),this.scope.$apply(),this.callOnChange()},positionTrackingHandle:function(a,b){this.range&&("rzSliderModel"===this.tracking&&a>=this.scope.rzSliderHigh?(this.scope[this.tracking]=this.scope.rzSliderHigh,this.updateHandles(this.tracking,this.maxH.rzsl),this.tracking="rzSliderHigh",this.minH.removeClass("rz-active"),this.maxH.addClass("rz-active"),this.scope.$apply(),this.callOnChange()):"rzSliderHigh"===this.tracking&&a<=this.scope.rzSliderModel&&(this.scope[this.tracking]=this.scope.rzSliderModel,this.updateHandles(this.tracking,this.minH.rzsl),this.tracking="rzSliderModel",this.maxH.removeClass("rz-active"),this.minH.addClass("rz-active"),this.scope.$apply(),this.callOnChange())),this.scope[this.tracking]!==a&&(this.scope[this.tracking]=a,this.updateHandles(this.tracking,b),this.scope.$apply(),this.callOnChange())},onEnd:function(a,b){var d=this.getEventNames(b).moveEvent;this.minH.removeClass("rz-active"),this.maxH.removeClass("rz-active"),c.off(d,a),this.scope.$emit("slideEnded"),this.tracking="",this.dragging.active=!1,this.callOnEnd()},getEventNames:function(a){var b={moveEvent:"",endEvent:""};return a.touches||void 0!==a.originalEvent&&a.originalEvent.touches?(b.moveEvent="touchmove",b.endEvent="touchend"):(b.moveEvent="mousemove",b.endEvent="mouseup"),b}},h}]).directive("rzslider",["RzSlider",function(a){return{restrict:"E",scope:{rzSliderModel:"=?",rzSliderHigh:"=?",rzSliderOptions:"=?",rzSliderTplUrl:"@"},templateUrl:function(a,b){return b.rzSliderTplUrl||"rzSliderTpl.html"},link:function(b,c){return new a(b,c)}}}]);return b.run(["$templateCache",function(a){a.put("rzSliderTpl.html",'<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class="rz-bar rz-selection"></span></span> <span class=rz-pointer></span> <span class=rz-pointer></span> <span class="rz-bubble rz-limit"></span> <span class="rz-bubble rz-limit"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span><ul class=rz-ticks></ul>')}]),b}); !function(a,b){"use strict";"function"==typeof define&&define.amd?define(["angular"],b):"object"==typeof module&&module.exports?module.exports=b(require("angular")):b(a.angular)}(this,function(a){"use strict";var b=a.module("rzModule",[]).factory("RzSliderOptions",function(){var b={floor:0,ceil:null,step:1,precision:0,id:null,translate:null,stepsArray:null,draggableRange:!1,showSelectionBar:!1,hideLimitLabels:!1,readOnly:!1,disabled:!1,interval:350,showTicks:!1,showTicksValues:!1,ticksValuesTooltip:null,scale:1,onStart:null,onChange:null,onEnd:null},c={},d={};return d.options=function(b){a.extend(c,b)},d.getOptions=function(d){return a.extend({},b,c,d)},d}).value("rzThrottle",function(a,b,c){var d,e,f,g=Date.now||function(){return(new Date).getTime()},h=null,i=0;c=c||{};var j=function(){i=c.leading===!1?0:g(),h=null,f=a.apply(d,e),d=e=null};return function(){var k=g();i||c.leading!==!1||(i=k);var l=b-(k-i);return d=this,e=arguments,0>=l?(clearTimeout(h),h=null,i=k,f=a.apply(d,e),d=e=null):h||c.trailing===!1||(h=setTimeout(j,l)),f}}).factory("RzSlider",["$timeout","$document","$window","$compile","RzSliderOptions","rzThrottle",function(b,c,d,e,f,g){var h=function(a,b){this.scope=a,this.sliderElem=b,this.range=void 0!==this.scope.rzSliderModel&&void 0!==this.scope.rzSliderHigh,this.dragging={active:!1,value:0,difference:0,offset:0,lowDist:0,highDist:0},this.handleHalfWidth=0,this.maxLeft=0,this.precision=0,this.step=0,this.tracking="",this.minValue=0,this.maxValue=0,this.valueRange=0,this.initHasRun=!1,this.fullBar=null,this.selBar=null,this.minH=null,this.maxH=null,this.flrLab=null,this.ceilLab=null,this.minLab=null,this.maxLab=null,this.cmbLab=null,this.ticks=null,this.init()};return h.prototype={init:function(){var c,e,f=a.bind(this,this.calcViewDimensions),h=this;this.applyOptions(),this.initElemHandles(),this.manageElementsStyle(),this.addAccessibility(),this.manageEventsBindings(),this.setDisabledState(),this.calcViewDimensions(),this.setMinAndMax(),b(function(){h.updateCeilLab(),h.updateFloorLab(),h.initHandles(),h.bindEvents()}),this.scope.$on("reCalcViewDimensions",f),a.element(d).on("resize",f),this.initHasRun=!0,c=g(function(){h.setMinAndMax(),h.updateLowHandle(h.valueToOffset(h.scope.rzSliderModel)),h.updateSelectionBar(),h.updateTicksScale(),h.range&&h.updateCmbLabel()},h.options.interval),e=g(function(){h.setMinAndMax(),h.updateHighHandle(h.valueToOffset(h.scope.rzSliderHigh)),h.updateSelectionBar(),h.updateTicksScale(),h.updateCmbLabel()},h.options.interval),this.scope.$on("rzSliderForceRender",function(){h.resetLabelsValue(),c(),h.range&&e(),h.resetSlider()}),this.scope.$watch("rzSliderModel",function(a,b){a!==b&&c()}),this.scope.$watch("rzSliderHigh",function(a,b){a!==b&&(null!=a&&e(),(h.range&&null==a||!h.range&&null!=a)&&(h.applyOptions(),h.resetSlider()))}),this.scope.$watch("rzSliderOptions",function(a,b){a!==b&&(h.applyOptions(),h.resetSlider())},!0),this.scope.$on("$destroy",function(){h.unbindEvents(),a.element(d).off("resize",f)})},applyOptions:function(){this.options=f.getOptions(this.scope.rzSliderOptions),this.options.step<=0&&(this.options.step=1),this.range=void 0!==this.scope.rzSliderModel&&void 0!==this.scope.rzSliderHigh,this.options.draggableRange=this.range&&this.options.draggableRange,this.options.showTicks=this.options.showTicks||this.options.showTicksValues,this.options.stepsArray?(this.options.floor=0,this.options.ceil=this.options.stepsArray.length-1,this.options.step=1,this.customTrFn=function(a){return this.options.stepsArray[a]}):this.options.translate?this.customTrFn=this.options.translate:this.customTrFn=function(a){return String(a)}},resetSlider:function(){this.manageElementsStyle(),this.setMinAndMax(),this.updateCeilLab(),this.updateFloorLab(),this.unbindEvents(),this.manageEventsBindings(),this.setDisabledState(),this.calcViewDimensions()},initElemHandles:function(){a.forEach(this.sliderElem.children(),function(b,c){var d=a.element(b);switch(c){case 0:this.fullBar=d;break;case 1:this.selBar=d;break;case 2:this.minH=d;break;case 3:this.maxH=d;break;case 4:this.flrLab=d;break;case 5:this.ceilLab=d;break;case 6:this.minLab=d;break;case 7:this.maxLab=d;break;case 8:this.cmbLab=d;break;case 9:this.ticks=d}},this),this.selBar.rzsl=0,this.minH.rzsl=0,this.maxH.rzsl=0,this.flrLab.rzsl=0,this.ceilLab.rzsl=0,this.minLab.rzsl=0,this.maxLab.rzsl=0,this.cmbLab.rzsl=0},manageElementsStyle:function(){this.range?this.maxH.css("display",null):this.maxH.css("display","none"),this.alwaysHide(this.flrLab,this.options.showTicksValues||this.options.hideLimitLabels),this.alwaysHide(this.ceilLab,this.options.showTicksValues||this.options.hideLimitLabels),this.alwaysHide(this.minLab,this.options.showTicksValues),this.alwaysHide(this.maxLab,this.options.showTicksValues||!this.range),this.alwaysHide(this.cmbLab,this.options.showTicksValues||!this.range),this.alwaysHide(this.selBar,!this.range&&!this.options.showSelectionBar),this.options.showTicks||this.ticks.html(""),this.options.draggableRange?this.selBar.addClass("rz-draggable"):this.selBar.removeClass("rz-draggable")},alwaysHide:function(a,b){a.rzAlwaysHide=b,b?this.hideEl(a):this.showEl(a)},manageEventsBindings:function(){this.options.disabled||this.options.readOnly?this.unbindEvents():this.options.disabled&&this.options.readOnly||this.bindEvents()},setDisabledState:function(){this.options.disabled?this.sliderElem.attr("disabled","disabled"):this.sliderElem.attr("disabled",null)},resetLabelsValue:function(){this.minLab.rzsv=void 0,this.maxLab.rzsv=void 0},initHandles:function(){this.updateLowHandle(this.valueToOffset(this.scope.rzSliderModel)),this.range&&this.updateHighHandle(this.valueToOffset(this.scope.rzSliderHigh)),this.updateSelectionBar(),this.range&&this.updateCmbLabel(),this.updateTicksScale()},translateFn:function(a,b,c){c=void 0===c?!0:c;var d=String(c?this.customTrFn(a,this.options.id):a),e=!1;(void 0===b.rzsv||b.rzsv.length!==d.length||b.rzsv.length>0&&0===b.rzsw)&&(e=!0,b.rzsv=d),b.text(d),e&&this.getWidth(b)},setMinAndMax:function(){this.step=+this.options.step,this.precision=+this.options.precision,this.scope.rzSliderModel=this.roundStep(this.scope.rzSliderModel),this.range&&(this.scope.rzSliderHigh=this.roundStep(this.scope.rzSliderHigh)),this.minValue=this.roundStep(+this.options.floor),null!=this.options.ceil?this.maxValue=this.roundStep(+this.options.ceil):this.maxValue=this.options.ceil=this.range?this.scope.rzSliderHigh:this.scope.rzSliderModel,this.valueRange=this.maxValue-this.minValue},addAccessibility:function(){this.sliderElem.attr("role","slider")},calcViewDimensions:function(){var a=this.getWidth(this.minH);this.handleHalfWidth=a/2,this.barWidth=this.getWidth(this.fullBar),this.maxLeft=this.barWidth-a,this.getWidth(this.sliderElem),this.sliderElem.rzsl=this.sliderElem[0].getBoundingClientRect().left,this.initHasRun&&(this.updateFloorLab(),this.updateCeilLab(),this.initHandles())},updateTicksScale:function(){if(this.options.showTicks&&this.step){for(var a="",b=Math.round((this.maxValue-this.minValue)/this.step)+1,c=0;b>c;c++){var d=this.roundStep(this.minValue+c*this.step),f=this.isTickSelected(d)?"selected":"";if(a+='<li class="tick '+f+'">',this.options.showTicksValues){var g="";this.options.ticksValuesTooltip&&(g='uib-tooltip="'+this.options.ticksValuesTooltip(d)+'"'),a+="<span "+g+' class="tick-value">'+this.getDisplayValue(d)+"</span>"}a+="</li>"}this.ticks.html(a),this.options.ticksValuesTooltip&&e(this.ticks.contents())(this.scope)}},isTickSelected:function(a){return!this.range&&this.options.showSelectionBar&&a<=this.scope.rzSliderModel?!0:this.range&&a>=this.scope.rzSliderModel&&a<=this.scope.rzSliderHigh?!0:!1},updateCeilLab:function(){this.translateFn(this.maxValue,this.ceilLab),this.setLeft(this.ceilLab,this.barWidth-this.ceilLab.rzsw),this.getWidth(this.ceilLab)},updateFloorLab:function(){this.translateFn(this.minValue,this.flrLab),this.getWidth(this.flrLab)},callOnStart:function(){if(this.options.onStart){var a=this;b(function(){a.options.onStart()})}},callOnChange:function(){if(this.options.onChange){var a=this;b(function(){a.options.onChange()})}},callOnEnd:function(){if(this.options.onEnd){var a=this;b(function(){a.options.onEnd()})}},updateHandles:function(a,b){return"rzSliderModel"===a?(this.updateLowHandle(b),this.updateSelectionBar(),this.updateTicksScale(),void(this.range&&this.updateCmbLabel())):"rzSliderHigh"===a?(this.updateHighHandle(b),this.updateSelectionBar(),this.updateTicksScale(),void(this.range&&this.updateCmbLabel())):(this.updateLowHandle(b),this.updateHighHandle(b),this.updateSelectionBar(),this.updateTicksScale(),void this.updateCmbLabel())},updateLowHandle:function(a){this.setLeft(this.minH,a),this.translateFn(this.scope.rzSliderModel,this.minLab);var b=Math.min(Math.max(a-this.minLab.rzsw/2+this.handleHalfWidth,0),this.barWidth-this.ceilLab.rzsw);this.setLeft(this.minLab,b),this.shFloorCeil()},updateHighHandle:function(a){this.setLeft(this.maxH,a),this.translateFn(this.scope.rzSliderHigh,this.maxLab);var b=Math.min(a-this.maxLab.rzsw/2+this.handleHalfWidth,this.barWidth-this.ceilLab.rzsw);this.setLeft(this.maxLab,b),this.shFloorCeil()},shFloorCeil:function(){var a=!1,b=!1;this.minLab.rzsl<=this.flrLab.rzsl+this.flrLab.rzsw+5?(a=!0,this.hideEl(this.flrLab)):(a=!1,this.showEl(this.flrLab)),this.minLab.rzsl+this.minLab.rzsw>=this.ceilLab.rzsl-this.handleHalfWidth-10?(b=!0,this.hideEl(this.ceilLab)):(b=!1,this.showEl(this.ceilLab)),this.range&&(this.maxLab.rzsl+this.maxLab.rzsw>=this.ceilLab.rzsl-10?this.hideEl(this.ceilLab):b||this.showEl(this.ceilLab),this.maxLab.rzsl<=this.flrLab.rzsl+this.flrLab.rzsw+this.handleHalfWidth?this.hideEl(this.flrLab):a||this.showEl(this.flrLab))},updateSelectionBar:function(){this.setWidth(this.selBar,Math.abs(this.maxH.rzsl-this.minH.rzsl)+this.handleHalfWidth),this.setLeft(this.selBar,this.range?this.minH.rzsl+this.handleHalfWidth:0)},updateCmbLabel:function(){var a,b;if(this.minLab.rzsl+this.minLab.rzsw+10>=this.maxLab.rzsl){a=this.getDisplayValue(this.scope.rzSliderModel),b=this.getDisplayValue(this.scope.rzSliderHigh),this.translateFn(a+" - "+b,this.cmbLab,!1);var c=Math.min(Math.max(this.selBar.rzsl+this.selBar.rzsw/2-this.cmbLab.rzsw/2,0),this.barWidth-this.cmbLab.rzsw);this.setLeft(this.cmbLab,c),this.hideEl(this.minLab),this.hideEl(this.maxLab),this.showEl(this.cmbLab)}else this.showEl(this.maxLab),this.showEl(this.minLab),this.hideEl(this.cmbLab)},getDisplayValue:function(a){return this.customTrFn(a,this.options.id)},roundStep:function(a){var b=this.step,c=+((a-this.minValue)%b).toFixed(3),d=c>b/2?a+b-c:a-c;return d=d.toFixed(this.precision),+d},hideEl:function(a){return a.css({opacity:0})},showEl:function(a){return a.rzAlwaysHide?a:a.css({opacity:1})},setLeft:function(a,b){return a.rzsl=b,a.css({left:b+"px"}),b},getWidth:function(a){var b=a[0].getBoundingClientRect();return a.rzsw=(b.right-b.left)*this.options.scale,a.rzsw},setWidth:function(a,b){return a.rzsw=b,a.css({width:b+"px"}),b},valueToOffset:function(a){return(this.sanitizeOffsetValue(a)-this.minValue)*this.maxLeft/this.valueRange||0},sanitizeOffsetValue:function(a){return Math.min(Math.max(a,this.minValue),this.maxValue)},offsetToValue:function(a){return a/this.maxLeft*this.valueRange+this.minValue},getEventX:function(a){return"clientX"in a?a.clientX:void 0===a.originalEvent?a.touches[0].clientX:a.originalEvent.touches[0].clientX},getNearestHandle:function(a){if(!this.range)return this.minH;var b=(this.getEventX(a)-this.sliderElem.rzsl-this.handleHalfWidth)*this.options.scale;return Math.abs(b-this.minH.rzsl)<Math.abs(b-this.maxH.rzsl)?this.minH:this.maxH},bindEvents:function(){if(!this.options.readOnly&&!this.options.disabled){var b,c,d;this.options.draggableRange?(b="rzSliderDrag",c=this.onDragStart,d=this.onDragMove):(b="rzSliderModel",c=this.onStart,d=this.onMove),this.minH.on("mousedown",a.bind(this,this.onStart,this.minH,"rzSliderModel")),this.range&&this.maxH.on("mousedown",a.bind(this,this.onStart,this.maxH,"rzSliderHigh")),this.fullBar.on("mousedown",a.bind(this,this.onStart,null,null)),this.fullBar.on("mousedown",a.bind(this,this.onMove,this.fullBar)),this.selBar.on("mousedown",a.bind(this,c,null,b)),this.selBar.on("mousedown",a.bind(this,d,this.selBar)),this.ticks.on("mousedown",a.bind(this,this.onStart,null,null)),this.ticks.on("mousedown",a.bind(this,this.onMove,this.ticks)),this.minH.on("touchstart",a.bind(this,this.onStart,this.minH,"rzSliderModel")),this.range&&this.maxH.on("touchstart",a.bind(this,this.onStart,this.maxH,"rzSliderHigh")),this.fullBar.on("touchstart",a.bind(this,this.onStart,null,null)),this.fullBar.on("touchstart",a.bind(this,this.onMove,this.fullBar)),this.selBar.on("touchstart",a.bind(this,c,null,b)),this.selBar.on("touchstart",a.bind(this,d,this.selBar)),this.ticks.on("touchstart",a.bind(this,this.onStart,null,null)),this.ticks.on("touchstart",a.bind(this,this.onMove,this.ticks))}},unbindEvents:function(){this.minH.off(),this.maxH.off(),this.fullBar.off(),this.selBar.off(),this.ticks.off()},onStart:function(b,d,e){var f,g,h=this.getEventNames(e);e.stopPropagation(),e.preventDefault(),""===this.tracking&&(this.calcViewDimensions(),b?this.tracking=d:(b=this.getNearestHandle(e),this.tracking=b===this.minH?"rzSliderModel":"rzSliderHigh"),b.addClass("rz-active"),f=a.bind(this,this.dragging.active?this.onDragMove:this.onMove,b),g=a.bind(this,this.onEnd,f),c.on(h.moveEvent,f),c.one(h.endEvent,g),this.callOnStart())},onMove:function(a,b){var c,d,e,f=this.getEventX(b);if(c=this.sliderElem.rzsl,d=(f-c-this.handleHalfWidth)*this.options.scale,0>=d){if(0===a.rzsl)return;e=this.minValue,d=0}else if(d>=this.maxLeft){if(a.rzsl===this.maxLeft)return;e=this.maxValue,d=this.maxLeft}else e=this.offsetToValue(d),e=this.roundStep(e),d=this.valueToOffset(e);this.positionTrackingHandle(e,d)},onDragStart:function(a,b,c){var d=this.getEventX(c)-this.sliderElem.rzsl-this.handleHalfWidth;this.dragging={active:!0,value:this.offsetToValue(d),difference:this.scope.rzSliderHigh-this.scope.rzSliderModel,offset:d,lowDist:d-this.minH.rzsl,highDist:this.maxH.rzsl-d},this.minH.addClass("rz-active"),this.maxH.addClass("rz-active"),this.onStart(a,b,c)},onDragMove:function(a,b){var c,d,e,f,g=this.getEventX(b)-this.sliderElem.rzsl-this.handleHalfWidth;if(g<=this.dragging.lowDist){if(a.rzsl===this.dragging.lowDist)return;e=this.minValue,c=0,f=this.minValue+this.dragging.difference,d=this.valueToOffset(f)}else if(g>=this.maxLeft-this.dragging.highDist){if(a.rzsl===this.dragging.highDist)return;f=this.maxValue,d=this.maxLeft,e=this.maxValue-this.dragging.difference,c=this.valueToOffset(e)}else e=this.offsetToValue(g-this.dragging.lowDist),e=this.roundStep(e),c=this.valueToOffset(e),f=e+this.dragging.difference,d=this.valueToOffset(f);this.positionTrackingBar(e,f,c,d)},positionTrackingBar:function(a,b,c,d){this.scope.rzSliderModel=a,this.scope.rzSliderHigh=b,this.updateHandles("rzSliderModel",c),this.updateHandles("rzSliderHigh",d),this.scope.$apply(),this.callOnChange()},positionTrackingHandle:function(a,b){this.range&&("rzSliderModel"===this.tracking&&a>=this.scope.rzSliderHigh?(this.scope[this.tracking]=this.scope.rzSliderHigh,this.updateHandles(this.tracking,this.maxH.rzsl),this.tracking="rzSliderHigh",this.minH.removeClass("rz-active"),this.maxH.addClass("rz-active"),this.scope.$apply(),this.callOnChange()):"rzSliderHigh"===this.tracking&&a<=this.scope.rzSliderModel&&(this.scope[this.tracking]=this.scope.rzSliderModel,this.updateHandles(this.tracking,this.minH.rzsl),this.tracking="rzSliderModel",this.maxH.removeClass("rz-active"),this.minH.addClass("rz-active"),this.scope.$apply(),this.callOnChange())),this.scope[this.tracking]!==a&&(this.scope[this.tracking]=a,this.updateHandles(this.tracking,b),this.scope.$apply(),this.callOnChange())},onEnd:function(a,b){var d=this.getEventNames(b).moveEvent;this.minH.removeClass("rz-active"),this.maxH.removeClass("rz-active"),c.off(d,a),this.scope.$emit("slideEnded"),this.tracking="",this.dragging.active=!1,this.callOnEnd()},getEventNames:function(a){var b={moveEvent:"",endEvent:""};return a.touches||void 0!==a.originalEvent&&a.originalEvent.touches?(b.moveEvent="touchmove",b.endEvent="touchend"):(b.moveEvent="mousemove",b.endEvent="mouseup"),b}},h}]).directive("rzslider",["RzSlider",function(a){return{restrict:"E",scope:{rzSliderModel:"=?",rzSliderHigh:"=?",rzSliderOptions:"=?",rzSliderTplUrl:"@"},templateUrl:function(a,b){return b.rzSliderTplUrl||"rzSliderTpl.html"},link:function(b,c){return new a(b,c)}}}]);return b.run(["$templateCache",function(a){a.put("rzSliderTpl.html",'<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class="rz-bar rz-selection"></span></span> <span class=rz-pointer></span> <span class=rz-pointer></span> <span class="rz-bubble rz-limit"></span> <span class="rz-bubble rz-limit"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span><ul class=rz-ticks></ul>')}]),b});
\ No newline at end of file \ No newline at end of file
src/rzslider.js
View file @ fb02c4ca
...@@ -31,1329 +31,1332 @@ ...@@ -31,1329 +31,1332 @@
'use strict'; 'use strict';
var module = angular.module('rzModule', []) var module = angular.module('rzModule', [])
.factory('RzSliderOptions', function() { .factory('RzSliderOptions', function() {
var defaultOptions = { var defaultOptions = {
floor: 0, floor: 0,
ceil: null, //defaults to rz-slider-model ceil: null, //defaults to rz-slider-model
step: 1, step: 1,
precision: 0, precision: 0,
id: null, id: null,
translate: null, translate: null,
stepsArray: null, stepsArray: null,
draggableRange: false, draggableRange: false,
showSelectionBar: false, showSelectionBar: false,
hideLimitLabels: false, hideLimitLabels: false,
readOnly: false, readOnly: false,
disabled: false, disabled: false,
interval: 350, interval: 350,
showTicks: false, showTicks: false,
showTicksValues: false, showTicksValues: false,
ticksValuesTooltip: null, ticksValuesTooltip: null,
scale: 1, scale: 1,
onStart: null, onStart: null,
onChange: null, onChange: null,
onEnd: null onEnd: null
};
var globalOptions = {};
var factory = {};
/**
* `options({})` allows global configuration of all sliders in the
* application.
*
* var app = angular.module( 'App', ['rzModule'], function( RzSliderOptions ) {
* // show ticks for all sliders
* RzSliderOptions.options( { showTicks: true } );
* });
*/
factory.options = function(value) {
angular.extend(globalOptions, value);
};
factory.getOptions = function(options) {
return angular.extend({}, defaultOptions, globalOptions, options);
};
return factory;
})
.value('rzThrottle',
/**
* rzThrottle
*
* Taken from underscore project
*
* @param {Function} func
* @param {number} wait
* @param {ThrottleOptions} options
* @returns {Function}
*/
function throttle(func, wait, options) {
'use strict';
var getTime = (Date.now || function() {
return new Date().getTime();
});
var context, args, result;
var timeout = null;
var previous = 0;
options = options || {};
var later = function() {
previous = options.leading === false ? 0 : getTime();
timeout = null;
result = func.apply(context, args);
context = args = null;
}; };
return function() { var globalOptions = {};
var now = getTime();
if (!previous && options.leading === false) {
previous = now;
}
var remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0) {
clearTimeout(timeout);
timeout = null;
previous = now;
result = func.apply(context, args);
context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
})
.factory('RzSlider', function($timeout, $document, $window, $compile, RzSliderOptions, rzThrottle) {
'use strict';
/**
* Slider
*
* @param {ngScope} scope The AngularJS scope
* @param {Element} sliderElem The slider directive element wrapped in jqLite
* @constructor
*/
var Slider = function(scope, sliderElem) {
/**
* The slider's scope
*
* @type {ngScope}
*/
this.scope = scope;
var factory = {};
/** /**
* Slider element wrapped in jqLite * `options({})` allows global configuration of all sliders in the
* application.
* *
* @type {jqLite} * var app = angular.module( 'App', ['rzModule'], function( RzSliderOptions ) {
*/ * // show ticks for all sliders
this.sliderElem = sliderElem; * RzSliderOptions.options( { showTicks: true } );
* });
/**
* Slider type
*
* @type {boolean} Set to true for range slider
*/
this.range = this.scope.rzSliderModel !== undefined && this.scope.rzSliderHigh !== undefined;
/**
* Values recorded when first dragging the bar
*
* @type {Object}
*/ */
this.dragging = { factory.options = function(value) {
active: false, angular.extend(globalOptions, value);
value: 0,
difference: 0,
offset: 0,
lowDist: 0,
highDist: 0
}; };
/** factory.getOptions = function(options) {
* Half of the width of the slider handles return angular.extend({}, defaultOptions, globalOptions, options);
* };
* @type {number}
*/
this.handleHalfWidth = 0;
/**
* Maximum left the slider handle can have
*
* @type {number}
*/
this.maxLeft = 0;
/**
* Precision
*
* @type {number}
*/
this.precision = 0;
/**
* Step
*
* @type {number}
*/
this.step = 0;
/**
* The name of the handle we are currently tracking
*
* @type {string}
*/
this.tracking = '';
/**
* Minimum value (floor) of the model
*
* @type {number}
*/
this.minValue = 0;
/**
* Maximum value (ceiling) of the model
*
* @type {number}
*/
this.maxValue = 0;
/** return factory;
* The delta between min and max value })
*
* @type {number}
*/
this.valueRange = 0;
.value('rzThrottle',
/** /**
* Set to true if init method already executed * rzThrottle
* *
* @type {boolean} * Taken from underscore project
*/
this.initHasRun = false;
// Slider DOM elements wrapped in jqLite
this.fullBar = null; // The whole slider bar
this.selBar = null; // Highlight between two handles
this.minH = null; // Left slider handle
this.maxH = null; // Right slider handle
this.flrLab = null; // Floor label
this.ceilLab = null; // Ceiling label
this.minLab = null; // Label above the low value
this.maxLab = null; // Label above the high value
this.cmbLab = null; // Combined label
this.ticks = null; // The ticks
// Initialize slider
this.init();
};
// Add instance methods
Slider.prototype = {
/**
* Initialize slider
* *
* @returns {undefined} * @param {Function} func
* @param {number} wait
* @param {ThrottleOptions} options
* @returns {Function}
*/ */
init: function() { function throttle(func, wait, options) {
var thrLow, thrHigh, 'use strict';
calcDimFn = angular.bind(this, this.calcViewDimensions), var getTime = (Date.now || function() {
self = this; return new Date().getTime();
this.applyOptions();
this.initElemHandles();
this.manageElementsStyle();
this.addAccessibility();
this.manageEventsBindings();
this.setDisabledState();
this.calcViewDimensions();
this.setMinAndMax();
$timeout(function() {
self.updateCeilLab();
self.updateFloorLab();
self.initHandles();
self.bindEvents();
}); });
var context, args, result;
// Recalculate slider view dimensions var timeout = null;
this.scope.$on('reCalcViewDimensions', calcDimFn); var previous = 0;
options = options || {};
// Recalculate stuff if view port dimensions have changed var later = function() {
angular.element($window).on('resize', calcDimFn); previous = options.leading === false ? 0 : getTime();
timeout = null;
this.initHasRun = true; result = func.apply(context, args);
context = args = null;
// Watch for changes to the model };
return function() {
thrLow = rzThrottle(function() { var now = getTime();
self.setMinAndMax(); if (!previous && options.leading === false) {
self.updateLowHandle(self.valueToOffset(self.scope.rzSliderModel)); previous = now;
self.updateSelectionBar();
self.updateTicksScale();
if (self.range) {
self.updateCmbLabel();
}
}, self.options.interval);
thrHigh = rzThrottle(function() {
self.setMinAndMax();
self.updateHighHandle(self.valueToOffset(self.scope.rzSliderHigh));
self.updateSelectionBar();
self.updateTicksScale();
self.updateCmbLabel();
}, self.options.interval);
this.scope.$on('rzSliderForceRender', function() {
self.resetLabelsValue();
thrLow();
if (self.range) {
thrHigh();
} }
self.resetSlider(); var remaining = wait - (now - previous);
}); context = this;
args = arguments;
// Watchers if (remaining <= 0) {
this.scope.$watch('rzSliderModel', function(newValue, oldValue) { clearTimeout(timeout);
if (newValue === oldValue) timeout = null;
return; previous = now;
thrLow(); result = func.apply(context, args);
}); context = args = null;
} else if (!timeout && options.trailing !== false) {
this.scope.$watch('rzSliderHigh', function(newValue, oldValue) { timeout = setTimeout(later, remaining);
if (newValue === oldValue)
return;
if (newValue != null)
thrHigh();
if (self.range && newValue == null || !self.range && newValue != null) {
self.applyOptions();
self.resetSlider();
} }
}); return result;
};
this.scope.$watch('rzSliderOptions', function(newValue, oldValue) { })
if (newValue === oldValue)
return;
self.applyOptions();
self.resetSlider();
}, true);
this.scope.$on('$destroy', function() {
self.unbindEvents();
angular.element($window).off('resize', calcDimFn);
});
},
/**
* Read the user options and apply them to the slider model
*/
applyOptions: function() {
this.options = RzSliderOptions.getOptions(this.scope.rzSliderOptions);
if (this.options.step <= 0)
this.options.step = 1;
this.range = this.scope.rzSliderModel !== undefined && this.scope.rzSliderHigh !== undefined;
this.options.draggableRange = this.range && this.options.draggableRange;
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
if (this.options.stepsArray) {
this.options.floor = 0;
this.options.ceil = this.options.stepsArray.length - 1;
this.options.step = 1;
this.customTrFn = function(value) {
return this.options.stepsArray[value];
};
} else if (this.options.translate)
this.customTrFn = this.options.translate;
else
this.customTrFn = function(value) {
return String(value);
};
},
/** .factory('RzSlider', function($timeout, $document, $window, $compile, RzSliderOptions, rzThrottle) {
* Resets slider 'use strict';
*
* @returns {undefined}
*/
resetSlider: function() {
this.manageElementsStyle();
this.setMinAndMax();
this.updateCeilLab();
this.updateFloorLab();
this.unbindEvents();
this.manageEventsBindings();
this.setDisabledState();
this.calcViewDimensions();
},
/** /**
* Set the slider children to variables for easy access * Slider
*
* Run only once during initialization
* *
* @returns {undefined} * @param {ngScope} scope The AngularJS scope
* @param {Element} sliderElem The slider directive element wrapped in jqLite
* @constructor
*/ */
initElemHandles: function() { var Slider = function(scope, sliderElem) {
// Assign all slider elements to object properties for easy access /**
angular.forEach(this.sliderElem.children(), function(elem, index) { * The slider's scope
var jElem = angular.element(elem); *
* @type {ngScope}
switch (index) { */
case 0: this.scope = scope;
this.fullBar = jElem;
break;
case 1:
this.selBar = jElem;
break;
case 2:
this.minH = jElem;
break;
case 3:
this.maxH = jElem;
break;
case 4:
this.flrLab = jElem;
break;
case 5:
this.ceilLab = jElem;
break;
case 6:
this.minLab = jElem;
break;
case 7:
this.maxLab = jElem;
break;
case 8:
this.cmbLab = jElem;
break;
case 9:
this.ticks = jElem;
break;
}
}, this);
// Initialize offset cache properties
this.selBar.rzsl = 0;
this.minH.rzsl = 0;
this.maxH.rzsl = 0;
this.flrLab.rzsl = 0;
this.ceilLab.rzsl = 0;
this.minLab.rzsl = 0;
this.maxLab.rzsl = 0;
this.cmbLab.rzsl = 0;
},
/** Update each elements style based on options /**
* * Slider element wrapped in jqLite
*/ *
manageElementsStyle: function() { * @type {jqLite}
*/
if (!this.range) this.sliderElem = sliderElem;
this.maxH.css('display', 'none');
else
this.maxH.css('display', null);
this.alwaysHide(this.flrLab, this.options.showTicksValues || this.options.hideLimitLabels);
this.alwaysHide(this.ceilLab, this.options.showTicksValues || this.options.hideLimitLabels);
this.alwaysHide(this.minLab, this.options.showTicksValues);
this.alwaysHide(this.maxLab, this.options.showTicksValues || !this.range);
this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range);
this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
if (!this.options.showTicks)
this.ticks.html('');
if (this.options.draggableRange)
this.selBar.addClass('rz-draggable');
else
this.selBar.removeClass('rz-draggable');
},
alwaysHide: function(el, hide) {
el.rzAlwaysHide = hide;
if (hide)
this.hideEl(el);
else
this.showEl(el)
},
/** /**
* Manage the events bindings based on readOnly and disabled options * Slider type
* *
* @returns {undefined} * @type {boolean} Set to true for range slider
*/ */
manageEventsBindings: function() { this.range = this.scope.rzSliderModel !== undefined && this.scope.rzSliderHigh !== undefined;
if (this.options.disabled || this.options.readOnly)
this.unbindEvents();
else if (!this.options.disabled || !this.options.readOnly)
this.bindEvents();
},
/** /**
* Set the disabled state based on rzSliderDisabled * Values recorded when first dragging the bar
* *
* @returns {undefined} * @type {Object}
*/ */
setDisabledState: function() { this.dragging = {
if (this.options.disabled) { active: false,
this.sliderElem.attr('disabled', 'disabled'); value: 0,
} else { difference: 0,
this.sliderElem.attr('disabled', null); offset: 0,
} lowDist: 0,
}, highDist: 0
};
/** /**
* Reset label values * Half of the width of the slider handles
* *
* @return {undefined} * @type {number}
*/ */
resetLabelsValue: function() { this.handleHalfWidth = 0;
this.minLab.rzsv = undefined;
this.maxLab.rzsv = undefined;
},
/** /**
* Initialize slider handles positions and labels * Maximum left the slider handle can have
* *
* Run only once during initialization and every time view port changes size * @type {number}
* */
* @returns {undefined} this.maxLeft = 0;
*/
initHandles: function() {
this.updateLowHandle(this.valueToOffset(this.scope.rzSliderModel));
/* /**
the order here is important since the selection bar should be * Precision
updated after the high handle but before the combined label *
* @type {number}
*/ */
if (this.range) this.precision = 0;
this.updateHighHandle(this.valueToOffset(this.scope.rzSliderHigh));
this.updateSelectionBar();
if (this.range)
this.updateCmbLabel();
this.updateTicksScale(); /**
}, * Step
*
* @type {number}
*/
this.step = 0;
/** /**
* Translate value to human readable format * The name of the handle we are currently tracking
* *
* @param {number|string} value * @type {string}
* @param {jqLite} label */
* @param {boolean} [useCustomTr] this.tracking = '';
* @returns {undefined}
*/
translateFn: function(value, label, useCustomTr) {
useCustomTr = useCustomTr === undefined ? true : useCustomTr;
var valStr = String((useCustomTr ? this.customTrFn(value, this.options.id) : value)), /**
getWidth = false; * Minimum value (floor) of the model
*
* @type {number}
*/
this.minValue = 0;
if (label.rzsv === undefined || label.rzsv.length !== valStr.length || (label.rzsv.length > 0 && label.rzsw === 0)) { /**
getWidth = true; * Maximum value (ceiling) of the model
label.rzsv = valStr; *
} * @type {number}
*/
this.maxValue = 0;
label.text(valStr);
// Update width only when length of the label have changed /**
if (getWidth) { * The delta between min and max value
this.getWidth(label); *
} * @type {number}
}, */
this.valueRange = 0;
/** /**
* Set maximum and minimum values for the slider and ensure the model and high * Set to true if init method already executed
* value match these limits *
* @returns {undefined} * @type {boolean}
*/ */
setMinAndMax: function() { this.initHasRun = false;
// Slider DOM elements wrapped in jqLite
this.fullBar = null; // The whole slider bar
this.selBar = null; // Highlight between two handles
this.minH = null; // Left slider handle
this.maxH = null; // Right slider handle
this.flrLab = null; // Floor label
this.ceilLab = null; // Ceiling label
this.minLab = null; // Label above the low value
this.maxLab = null; // Label above the high value
this.cmbLab = null; // Combined label
this.ticks = null; // The ticks
// Initialize slider
this.init();
};
this.step = +this.options.step; // Add instance methods
this.precision = +this.options.precision; Slider.prototype = {
this.scope.rzSliderModel = this.roundStep(this.scope.rzSliderModel); /**
if (this.range) * Initialize slider
this.scope.rzSliderHigh = this.roundStep(this.scope.rzSliderHigh); *
* @returns {undefined}
*/
init: function() {
var thrLow, thrHigh,
calcDimFn = angular.bind(this, this.calcViewDimensions),
self = this;
this.applyOptions();
this.initElemHandles();
this.manageElementsStyle();
this.addAccessibility();
this.manageEventsBindings();
this.setDisabledState();
this.calcViewDimensions();
this.setMinAndMax();
this.minValue = this.roundStep(+this.options.floor); $timeout(function() {
self.updateCeilLab();
self.updateFloorLab();
self.initHandles();
self.bindEvents();
});
if (this.options.ceil != null) // Recalculate slider view dimensions
this.maxValue = this.roundStep(+this.options.ceil); this.scope.$on('reCalcViewDimensions', calcDimFn);
else
this.maxValue = this.options.ceil = this.range ? this.scope.rzSliderHigh : this.scope.rzSliderModel;
this.valueRange = this.maxValue - this.minValue; // Recalculate stuff if view port dimensions have changed
}, angular.element($window).on('resize', calcDimFn);
/** this.initHasRun = true;
* Adds accessibility atributes
*
* Run only once during initialization
*
* @returns {undefined}
*/
addAccessibility: function() {
this.sliderElem.attr("role", "slider");
},
/** // Watch for changes to the model
* Calculate dimensions that are dependent on view port size
*
* Run once during initialization and every time view port changes size.
*
* @returns {undefined}
*/
calcViewDimensions: function() {
var handleWidth = this.getWidth(this.minH);
this.handleHalfWidth = handleWidth / 2; thrLow = rzThrottle(function() {
this.barWidth = this.getWidth(this.fullBar); self.setMinAndMax();
self.updateLowHandle(self.valueToOffset(self.scope.rzSliderModel));
self.updateSelectionBar();
self.updateTicksScale();
this.maxLeft = this.barWidth - handleWidth; if (self.range) {
self.updateCmbLabel();
}
this.getWidth(this.sliderElem); }, self.options.interval);
this.sliderElem.rzsl = this.sliderElem[0].getBoundingClientRect().left;
if (this.initHasRun) { thrHigh = rzThrottle(function() {
this.updateFloorLab(); self.setMinAndMax();
this.updateCeilLab(); self.updateHighHandle(self.valueToOffset(self.scope.rzSliderHigh));
this.initHandles(); self.updateSelectionBar();
} self.updateTicksScale();
}, self.updateCmbLabel();
}, self.options.interval);
/** this.scope.$on('rzSliderForceRender', function() {
* Update the ticks position self.resetLabelsValue();
* thrLow();
* @returns {undefined} if (self.range) {
*/ thrHigh();
updateTicksScale: function() {
if (!this.options.showTicks) return;
if (!this.step) return; //if step is 0, the following loop will be endless.
var positions = '',
ticksCount = Math.round((this.maxValue - this.minValue) / this.step) + 1;
for (var i = 0; i < ticksCount; i++) {
var value = this.roundStep(this.minValue + i * this.step);
var selectedClass = this.isTickSelected(value) ? 'selected' : '';
positions += '<li class="tick ' + selectedClass + '">';
if (this.options.showTicksValues) {
var tooltip = '';
if (this.options.ticksValuesTooltip) {
tooltip = 'uib-tooltip="' + this.options.ticksValuesTooltip(value) + '"';
} }
positions += '<span ' + tooltip + ' class="tick-value">' + this.getDisplayValue(value) + '</span>'; self.resetSlider();
} });
positions += '</li>';
}
this.ticks.html(positions);
if (this.options.ticksValuesTooltip)
$compile(this.ticks.contents())(this.scope);
},
isTickSelected: function(value) {
if (!this.range && this.options.showSelectionBar && value <= this.scope.rzSliderModel)
return true;
if (this.range && value >= this.scope.rzSliderModel && value <= this.scope.rzSliderHigh)
return true;
return false;
},
/**
* Update position of the ceiling label
*
* @returns {undefined}
*/
updateCeilLab: function() {
this.translateFn(this.maxValue, this.ceilLab);
this.setLeft(this.ceilLab, this.barWidth - this.ceilLab.rzsw);
this.getWidth(this.ceilLab);
},
/**
* Update position of the floor label
*
* @returns {undefined}
*/
updateFloorLab: function() {
this.translateFn(this.minValue, this.flrLab);
this.getWidth(this.flrLab);
},
/** // Watchers
* Call the onStart callback if defined this.scope.$watch('rzSliderModel', function(newValue, oldValue) {
* if (newValue === oldValue)
* @returns {undefined} return;
*/ thrLow();
callOnStart: function() {
if (this.options.onStart) {
var self = this;
$timeout(function() {
self.options.onStart();
}); });
}
},
/** this.scope.$watch('rzSliderHigh', function(newValue, oldValue) {
* Call the onChange callback if defined if (newValue === oldValue)
* return;
* @returns {undefined} if (newValue != null)
*/ thrHigh();
callOnChange: function() { if (self.range && newValue == null || !self.range && newValue != null) {
if (this.options.onChange) { self.applyOptions();
var self = this; self.resetSlider();
$timeout(function() { }
self.options.onChange();
}); });
}
},
/** this.scope.$watch('rzSliderOptions', function(newValue, oldValue) {
* Call the onEnd callback if defined if (newValue === oldValue)
* return;
* @returns {undefined} self.applyOptions();
*/ self.resetSlider();
callOnEnd: function() { }, true);
if (this.options.onEnd) {
var self = this; this.scope.$on('$destroy', function() {
$timeout(function() { self.unbindEvents();
self.options.onEnd(); angular.element($window).off('resize', calcDimFn);
}); });
} },
},
/** /**
* Update slider handles and label positions * Read the user options and apply them to the slider model
* */
* @param {string} which applyOptions: function() {
* @param {number} newOffset this.options = RzSliderOptions.getOptions(this.scope.rzSliderOptions);
*/
updateHandles: function(which, newOffset) { if (this.options.step <= 0)
if (which === 'rzSliderModel') { this.options.step = 1;
this.updateLowHandle(newOffset); this.range = this.scope.rzSliderModel !== undefined && this.scope.rzSliderHigh !== undefined;
this.updateSelectionBar(); this.options.draggableRange = this.range && this.options.draggableRange;
this.updateTicksScale(); this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
if (this.options.stepsArray) {
this.options.floor = 0;
this.options.ceil = this.options.stepsArray.length - 1;
this.options.step = 1;
this.customTrFn = function(value) {
return this.options.stepsArray[value];
};
} else if (this.options.translate)
this.customTrFn = this.options.translate;
else
this.customTrFn = function(value) {
return String(value);
};
},
/**
* Resets slider
*
* @returns {undefined}
*/
resetSlider: function() {
this.manageElementsStyle();
this.setMinAndMax();
this.updateCeilLab();
this.updateFloorLab();
this.unbindEvents();
this.manageEventsBindings();
this.setDisabledState();
this.calcViewDimensions();
},
/**
* Set the slider children to variables for easy access
*
* Run only once during initialization
*
* @returns {undefined}
*/
initElemHandles: function() {
// Assign all slider elements to object properties for easy access
angular.forEach(this.sliderElem.children(), function(elem, index) {
var jElem = angular.element(elem);
switch (index) {
case 0:
this.fullBar = jElem;
break;
case 1:
this.selBar = jElem;
break;
case 2:
this.minH = jElem;
break;
case 3:
this.maxH = jElem;
break;
case 4:
this.flrLab = jElem;
break;
case 5:
this.ceilLab = jElem;
break;
case 6:
this.minLab = jElem;
break;
case 7:
this.maxLab = jElem;
break;
case 8:
this.cmbLab = jElem;
break;
case 9:
this.ticks = jElem;
break;
}
if (this.range) { }, this);
this.updateCmbLabel();
// Initialize offset cache properties
this.selBar.rzsl = 0;
this.minH.rzsl = 0;
this.maxH.rzsl = 0;
this.flrLab.rzsl = 0;
this.ceilLab.rzsl = 0;
this.minLab.rzsl = 0;
this.maxLab.rzsl = 0;
this.cmbLab.rzsl = 0;
},
/** Update each elements style based on options
*
*/
manageElementsStyle: function() {
if (!this.range)
this.maxH.css('display', 'none');
else
this.maxH.css('display', null);
this.alwaysHide(this.flrLab, this.options.showTicksValues || this.options.hideLimitLabels);
this.alwaysHide(this.ceilLab, this.options.showTicksValues || this.options.hideLimitLabels);
this.alwaysHide(this.minLab, this.options.showTicksValues);
this.alwaysHide(this.maxLab, this.options.showTicksValues || !this.range);
this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range);
this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
if (!this.options.showTicks)
this.ticks.html('');
if (this.options.draggableRange)
this.selBar.addClass('rz-draggable');
else
this.selBar.removeClass('rz-draggable');
},
alwaysHide: function(el, hide) {
el.rzAlwaysHide = hide;
if (hide)
this.hideEl(el);
else
this.showEl(el)
},
/**
* Manage the events bindings based on readOnly and disabled options
*
* @returns {undefined}
*/
manageEventsBindings: function() {
if (this.options.disabled || this.options.readOnly)
this.unbindEvents();
else if (!this.options.disabled || !this.options.readOnly)
this.bindEvents();
},
/**
* Set the disabled state based on rzSliderDisabled
*
* @returns {undefined}
*/
setDisabledState: function() {
if (this.options.disabled) {
this.sliderElem.attr('disabled', 'disabled');
} else {
this.sliderElem.attr('disabled', null);
} }
return; },
}
if (which === 'rzSliderHigh') { /**
this.updateHighHandle(newOffset); * Reset label values
*
* @return {undefined}
*/
resetLabelsValue: function() {
this.minLab.rzsv = undefined;
this.maxLab.rzsv = undefined;
},
/**
* Initialize slider handles positions and labels
*
* Run only once during initialization and every time view port changes size
*
* @returns {undefined}
*/
initHandles: function() {
this.updateLowHandle(this.valueToOffset(this.scope.rzSliderModel));
/*
the order here is important since the selection bar should be
updated after the high handle but before the combined label
*/
if (this.range)
this.updateHighHandle(this.valueToOffset(this.scope.rzSliderHigh));
this.updateSelectionBar(); this.updateSelectionBar();
this.updateTicksScale(); if (this.range)
if (this.range) {
this.updateCmbLabel(); this.updateCmbLabel();
}
return;
}
// Update both this.updateTicksScale();
this.updateLowHandle(newOffset); },
this.updateHighHandle(newOffset);
this.updateSelectionBar(); /**
this.updateTicksScale(); * Translate value to human readable format
this.updateCmbLabel(); *
}, * @param {number|string} value
* @param {jqLite} label
* @param {boolean} [useCustomTr]
* @returns {undefined}
*/
translateFn: function(value, label, useCustomTr) {
useCustomTr = useCustomTr === undefined ? true : useCustomTr;
/** var valStr = String((useCustomTr ? this.customTrFn(value, this.options.id) : value)),
* Update low slider handle position and label getWidth = false;
*
* @param {number} newOffset
* @returns {undefined}
*/
updateLowHandle: function(newOffset) {
this.setLeft(this.minH, newOffset);
this.translateFn(this.scope.rzSliderModel, this.minLab);
this.setLeft(this.minLab, newOffset - this.minLab.rzsw / 2 + this.handleHalfWidth);
this.shFloorCeil(); if (label.rzsv === undefined || label.rzsv.length !== valStr.length || (label.rzsv.length > 0 && label.rzsw === 0)) {
}, getWidth = true;
label.rzsv = valStr;
}
/** label.text(valStr);
* Update high slider handle position and label
*
* @param {number} newOffset
* @returns {undefined}
*/
updateHighHandle: function(newOffset) {
this.setLeft(this.maxH, newOffset);
this.translateFn(this.scope.rzSliderHigh, this.maxLab);
this.setLeft(this.maxLab, newOffset - this.maxLab.rzsw / 2 + this.handleHalfWidth);
this.shFloorCeil(); // Update width only when length of the label have changed
}, if (getWidth) {
this.getWidth(label);
}
},
/** /**
* Show / hide floor / ceiling label * Set maximum and minimum values for the slider and ensure the model and high
* * value match these limits
* @returns {undefined} * @returns {undefined}
*/ */
shFloorCeil: function() { setMinAndMax: function() {
var flHidden = false,
clHidden = false;
if (this.minLab.rzsl <= this.flrLab.rzsl + this.flrLab.rzsw + 5) {
flHidden = true;
this.hideEl(this.flrLab);
} else {
flHidden = false;
this.showEl(this.flrLab);
}
if (this.minLab.rzsl + this.minLab.rzsw >= this.ceilLab.rzsl - this.handleHalfWidth - 10) { this.step = +this.options.step;
clHidden = true; this.precision = +this.options.precision;
this.hideEl(this.ceilLab);
} else {
clHidden = false;
this.showEl(this.ceilLab);
}
if (this.range) { this.scope.rzSliderModel = this.roundStep(this.scope.rzSliderModel);
if (this.maxLab.rzsl + this.maxLab.rzsw >= this.ceilLab.rzsl - 10) { if (this.range)
this.hideEl(this.ceilLab); this.scope.rzSliderHigh = this.roundStep(this.scope.rzSliderHigh);
} else if (!clHidden) {
this.showEl(this.ceilLab);
}
// Hide or show floor label this.minValue = this.roundStep(+this.options.floor);
if (this.maxLab.rzsl <= this.flrLab.rzsl + this.flrLab.rzsw + this.handleHalfWidth) {
this.hideEl(this.flrLab);
} else if (!flHidden) {
this.showEl(this.flrLab);
}
}
},
/** if (this.options.ceil != null)
* Update slider selection bar, combined label and range label this.maxValue = this.roundStep(+this.options.ceil);
* else
* @returns {undefined} this.maxValue = this.options.ceil = this.range ? this.scope.rzSliderHigh : this.scope.rzSliderModel;
*/
updateSelectionBar: function() {
this.setWidth(this.selBar, Math.abs(this.maxH.rzsl - this.minH.rzsl) + this.handleHalfWidth);
this.setLeft(this.selBar, this.range ? this.minH.rzsl + this.handleHalfWidth : 0);
},
/** this.valueRange = this.maxValue - this.minValue;
* Update combined label position and value },
*
* @returns {undefined}
*/
updateCmbLabel: function() {
var lowTr, highTr;
if (this.minLab.rzsl + this.minLab.rzsw + 10 >= this.maxLab.rzsl) {
lowTr = this.getDisplayValue(this.scope.rzSliderModel);
highTr = this.getDisplayValue(this.scope.rzSliderHigh);
this.translateFn(lowTr + ' - ' + highTr, this.cmbLab, false);
this.setLeft(this.cmbLab, this.selBar.rzsl + this.selBar.rzsw / 2 - this.cmbLab.rzsw / 2);
this.hideEl(this.minLab);
this.hideEl(this.maxLab);
this.showEl(this.cmbLab);
} else {
this.showEl(this.maxLab);
this.showEl(this.minLab);
this.hideEl(this.cmbLab);
}
},
/** /**
* Return the translated value if a translate function is provided else the original value * Adds accessibility atributes
* @param value *
* @returns {*} * Run only once during initialization
*/ *
getDisplayValue: function(value) { * @returns {undefined}
return this.customTrFn(value, this.options.id); */
}, addAccessibility: function() {
this.sliderElem.attr("role", "slider");
},
/**
* Calculate dimensions that are dependent on view port size
*
* Run once during initialization and every time view port changes size.
*
* @returns {undefined}
*/
calcViewDimensions: function() {
var handleWidth = this.getWidth(this.minH);
/** this.handleHalfWidth = handleWidth / 2;
* Round value to step and precision this.barWidth = this.getWidth(this.fullBar);
*
* @param {number} value
* @returns {number}
*/
roundStep: function(value) {
var step = this.step,
remainder = +((value - this.minValue) % step).toFixed(3),
steppedValue = remainder > (step / 2) ? value + step - remainder : value - remainder;
steppedValue = steppedValue.toFixed(this.precision); this.maxLeft = this.barWidth - handleWidth;
return +steppedValue;
},
/** this.getWidth(this.sliderElem);
* Hide element this.sliderElem.rzsl = this.sliderElem[0].getBoundingClientRect().left;
*
* @param element
* @returns {jqLite} The jqLite wrapped DOM element
*/
hideEl: function(element) {
return element.css({
opacity: 0
});
},
/** if (this.initHasRun) {
* Show element this.updateFloorLab();
* this.updateCeilLab();
* @param element The jqLite wrapped DOM element this.initHandles();
* @returns {jqLite} The jqLite }
*/ },
showEl: function(element) {
if (!!element.rzAlwaysHide) {
return element;
}
return element.css({ /**
opacity: 1 * Update the ticks position
}); *
}, * @returns {undefined}
*/
updateTicksScale: function() {
if (!this.options.showTicks) return;
if (!this.step) return; //if step is 0, the following loop will be endless.
var positions = '',
ticksCount = Math.round((this.maxValue - this.minValue) / this.step) + 1;
for (var i = 0; i < ticksCount; i++) {
var value = this.roundStep(this.minValue + i * this.step);
var selectedClass = this.isTickSelected(value) ? 'selected' : '';
positions += '<li class="tick ' + selectedClass + '">';
if (this.options.showTicksValues) {
var tooltip = '';
if (this.options.ticksValuesTooltip) {
tooltip = 'uib-tooltip="' + this.options.ticksValuesTooltip(value) + '"';
}
positions += '<span ' + tooltip + ' class="tick-value">' + this.getDisplayValue(value) + '</span>';
}
positions += '</li>';
}
this.ticks.html(positions);
if (this.options.ticksValuesTooltip)
$compile(this.ticks.contents())(this.scope);
},
isTickSelected: function(value) {
if (!this.range && this.options.showSelectionBar && value <= this.scope.rzSliderModel)
return true;
if (this.range && value >= this.scope.rzSliderModel && value <= this.scope.rzSliderHigh)
return true;
return false;
},
/**
* Update position of the ceiling label
*
* @returns {undefined}
*/
updateCeilLab: function() {
this.translateFn(this.maxValue, this.ceilLab);
this.setLeft(this.ceilLab, this.barWidth - this.ceilLab.rzsw);
this.getWidth(this.ceilLab);
},
/**
* Update position of the floor label
*
* @returns {undefined}
*/
updateFloorLab: function() {
this.translateFn(this.minValue, this.flrLab);
this.getWidth(this.flrLab);
},
/**
* Call the onStart callback if defined
*
* @returns {undefined}
*/
callOnStart: function() {
if (this.options.onStart) {
var self = this;
$timeout(function() {
self.options.onStart();
});
}
},
/** /**
* Set element left offset * Call the onChange callback if defined
* *
* @param {jqLite} elem The jqLite wrapped DOM element * @returns {undefined}
* @param {number} left */
* @returns {number} callOnChange: function() {
*/ if (this.options.onChange) {
setLeft: function(elem, left) { var self = this;
elem.rzsl = left; $timeout(function() {
elem.css({ self.options.onChange();
left: left + 'px' });
}); }
return left; },
},
/** /**
* Get element width * Call the onEnd callback if defined
* *
* @param {jqLite} elem The jqLite wrapped DOM element * @returns {undefined}
* @returns {number} */
*/ callOnEnd: function() {
getWidth: function(elem) { if (this.options.onEnd) {
var val = elem[0].getBoundingClientRect(); var self = this;
elem.rzsw = (val.right - val.left) * this.options.scale; $timeout(function() {
return elem.rzsw; self.options.onEnd();
}, });
}
},
/** /**
* Set element width * Update slider handles and label positions
* *
* @param {jqLite} elem The jqLite wrapped DOM element * @param {string} which
* @param {number} width * @param {number} newOffset
* @returns {number} */
*/ updateHandles: function(which, newOffset) {
setWidth: function(elem, width) { if (which === 'rzSliderModel') {
elem.rzsw = width; this.updateLowHandle(newOffset);
elem.css({ this.updateSelectionBar();
width: width + 'px' this.updateTicksScale();
});
return width; if (this.range) {
}, this.updateCmbLabel();
}
return;
}
/** if (which === 'rzSliderHigh') {
* Translate value to pixel offset this.updateHighHandle(newOffset);
* this.updateSelectionBar();
* @param {number} val this.updateTicksScale();
* @returns {number}
*/
valueToOffset: function(val) {
return (this.sanitizeOffsetValue(val) - this.minValue) * this.maxLeft / this.valueRange || 0;
},
/** if (this.range) {
* Ensure that the position rendered is within the slider bounds, even if the value is not this.updateCmbLabel();
* }
* @param {number} val return;
* @returns {number} }
*/
sanitizeOffsetValue: function(val) {
return Math.min(Math.max(val, this.minValue), this.maxValue);
},
/** // Update both
* Translate offset to model value this.updateLowHandle(newOffset);
* this.updateHighHandle(newOffset);
* @param {number} offset this.updateSelectionBar();
* @returns {number} this.updateTicksScale();
*/ this.updateCmbLabel();
offsetToValue: function(offset) { },
return (offset / this.maxLeft) * this.valueRange + this.minValue;
},
// Events /**
* Update low slider handle position and label
*
* @param {number} newOffset
* @returns {undefined}
*/
updateLowHandle: function(newOffset) {
this.setLeft(this.minH, newOffset);
this.translateFn(this.scope.rzSliderModel, this.minLab);
var left = Math.min(Math.max(newOffset - this.minLab.rzsw / 2 + this.handleHalfWidth, 0), this.barWidth - this.ceilLab.rzsw);
this.setLeft(this.minLab, left);
this.shFloorCeil();
},
/**
* Update high slider handle position and label
*
* @param {number} newOffset
* @returns {undefined}
*/
updateHighHandle: function(newOffset) {
this.setLeft(this.maxH, newOffset);
this.translateFn(this.scope.rzSliderHigh, this.maxLab);
var left = Math.min((newOffset - this.maxLab.rzsw / 2 + this.handleHalfWidth), (this.barWidth - this.ceilLab.rzsw));
this.setLeft(this.maxLab, left);
this.shFloorCeil();
},
/**
* Show / hide floor / ceiling label
*
* @returns {undefined}
*/
shFloorCeil: function() {
var flHidden = false,
clHidden = false;
/** if (this.minLab.rzsl <= this.flrLab.rzsl + this.flrLab.rzsw + 5) {
* Get the X-coordinate of an event flHidden = true;
* this.hideEl(this.flrLab);
* @param {Object} event The event } else {
* @returns {number} flHidden = false;
*/ this.showEl(this.flrLab);
getEventX: function(event) { }
/* http://stackoverflow.com/a/12336075/282882 */
//noinspection JSLint
if ('clientX' in event) {
return event.clientX;
}
return event.originalEvent === undefined ? if (this.minLab.rzsl + this.minLab.rzsw >= this.ceilLab.rzsl - this.handleHalfWidth - 10) {
event.touches[0].clientX : event.originalEvent.touches[0].clientX; clHidden = true;
}, this.hideEl(this.ceilLab);
} else {
clHidden = false;
this.showEl(this.ceilLab);
}
/** if (this.range) {
* Get the handle closest to an event. if (this.maxLab.rzsl + this.maxLab.rzsw >= this.ceilLab.rzsl - 10) {
* this.hideEl(this.ceilLab);
* @param event {Event} The event } else if (!clHidden) {
* @returns {jqLite} The handle closest to the event. this.showEl(this.ceilLab);
*/ }
getNearestHandle: function(event) {
if (!this.range) {
return this.minH;
}
var offset = (this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth) * this.options.scale;
return Math.abs(offset - this.minH.rzsl) < Math.abs(offset - this.maxH.rzsl) ? this.minH : this.maxH;
},
/** // Hide or show floor label
* Bind mouse and touch events to slider handles if (this.maxLab.rzsl <= this.flrLab.rzsl + this.flrLab.rzsw + this.handleHalfWidth) {
* this.hideEl(this.flrLab);
* @returns {undefined} } else if (!flHidden) {
*/ this.showEl(this.flrLab);
bindEvents: function() { }
if (this.options.readOnly || this.options.disabled) return; }
var barTracking, barStart, barMove; },
if (this.options.draggableRange) {
barTracking = 'rzSliderDrag';
barStart = this.onDragStart;
barMove = this.onDragMove;
} else {
barTracking = 'rzSliderModel';
barStart = this.onStart;
barMove = this.onMove;
}
this.minH.on('mousedown', angular.bind(this, this.onStart, this.minH, 'rzSliderModel')); /**
if (this.range) { * Update slider selection bar, combined label and range label
this.maxH.on('mousedown', angular.bind(this, this.onStart, this.maxH, 'rzSliderHigh')); *
} * @returns {undefined}
this.fullBar.on('mousedown', angular.bind(this, this.onStart, null, null)); */
this.fullBar.on('mousedown', angular.bind(this, this.onMove, this.fullBar)); updateSelectionBar: function() {
this.selBar.on('mousedown', angular.bind(this, barStart, null, barTracking)); this.setWidth(this.selBar, Math.abs(this.maxH.rzsl - this.minH.rzsl) + this.handleHalfWidth);
this.selBar.on('mousedown', angular.bind(this, barMove, this.selBar)); this.setLeft(this.selBar, this.range ? this.minH.rzsl + this.handleHalfWidth : 0);
this.ticks.on('mousedown', angular.bind(this, this.onStart, null, null)); },
this.ticks.on('mousedown', angular.bind(this, this.onMove, this.ticks));
/**
this.minH.on('touchstart', angular.bind(this, this.onStart, this.minH, 'rzSliderModel')); * Update combined label position and value
if (this.range) { *
this.maxH.on('touchstart', angular.bind(this, this.onStart, this.maxH, 'rzSliderHigh')); * @returns {undefined}
} */
this.fullBar.on('touchstart', angular.bind(this, this.onStart, null, null)); updateCmbLabel: function() {
this.fullBar.on('touchstart', angular.bind(this, this.onMove, this.fullBar)); var lowTr, highTr;
this.selBar.on('touchstart', angular.bind(this, barStart, null, barTracking));
this.selBar.on('touchstart', angular.bind(this, barMove, this.selBar)); if (this.minLab.rzsl + this.minLab.rzsw + 10 >= this.maxLab.rzsl) {
this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null)); lowTr = this.getDisplayValue(this.scope.rzSliderModel);
this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks)); highTr = this.getDisplayValue(this.scope.rzSliderHigh);
},
this.translateFn(lowTr + ' - ' + highTr, this.cmbLab, false);
var left = Math.min(Math.max((this.selBar.rzsl + this.selBar.rzsw / 2 - this.cmbLab.rzsw / 2),0),(this.barWidth - this.cmbLab.rzsw));
this.setLeft(this.cmbLab, left);
this.hideEl(this.minLab);
this.hideEl(this.maxLab);
this.showEl(this.cmbLab);
} else {
this.showEl(this.maxLab);
this.showEl(this.minLab);
this.hideEl(this.cmbLab);
}
},
/** /**
* Unbind mouse and touch events to slider handles * Return the translated value if a translate function is provided else the original value
* * @param value
* @returns {undefined} * @returns {*}
*/ */
unbindEvents: function() { getDisplayValue: function(value) {
this.minH.off(); return this.customTrFn(value, this.options.id);
this.maxH.off(); },
this.fullBar.off();
this.selBar.off(); /**
this.ticks.off(); * Round value to step and precision
}, *
* @param {number} value
* @returns {number}
*/
roundStep: function(value) {
var step = this.step,
remainder = +((value - this.minValue) % step).toFixed(3),
steppedValue = remainder > (step / 2) ? value + step - remainder : value - remainder;
steppedValue = steppedValue.toFixed(this.precision);
return +steppedValue;
},
/**
* Hide element
*
* @param element
* @returns {jqLite} The jqLite wrapped DOM element
*/
hideEl: function(element) {
return element.css({
opacity: 0
});
},
/** /**
* onStart event handler * Show element
* *
* @param {?Object} pointer The jqLite wrapped DOM element; if null, the closest handle is used * @param element The jqLite wrapped DOM element
* @param {?string} ref The name of the handle being changed; if null, the closest handle's value is modified * @returns {jqLite} The jqLite
* @param {Event} event The event */
* @returns {undefined} showEl: function(element) {
*/ if (!!element.rzAlwaysHide) {
onStart: function(pointer, ref, event) { return element;
var ehMove, ehEnd, }
eventNames = this.getEventNames(event);
event.stopPropagation(); return element.css({
event.preventDefault(); opacity: 1
});
},
/**
* Set element left offset
*
* @param {jqLite} elem The jqLite wrapped DOM element
* @param {number} left
* @returns {number}
*/
setLeft: function(elem, left) {
elem.rzsl = left;
elem.css({
left: left + 'px'
});
return left;
},
/**
* Get element width
*
* @param {jqLite} elem The jqLite wrapped DOM element
* @returns {number}
*/
getWidth: function(elem) {
var val = elem[0].getBoundingClientRect();
elem.rzsw = (val.right - val.left) * this.options.scale;
return elem.rzsw;
},
/**
* Set element width
*
* @param {jqLite} elem The jqLite wrapped DOM element
* @param {number} width
* @returns {number}
*/
setWidth: function(elem, width) {
elem.rzsw = width;
elem.css({
width: width + 'px'
});
return width;
},
/**
* Translate value to pixel offset
*
* @param {number} val
* @returns {number}
*/
valueToOffset: function(val) {
return (this.sanitizeOffsetValue(val) - this.minValue) * this.maxLeft / this.valueRange || 0;
},
/**
* Ensure that the position rendered is within the slider bounds, even if the value is not
*
* @param {number} val
* @returns {number}
*/
sanitizeOffsetValue: function(val) {
return Math.min(Math.max(val, this.minValue), this.maxValue);
},
/**
* Translate offset to model value
*
* @param {number} offset
* @returns {number}
*/
offsetToValue: function(offset) {
return (offset / this.maxLeft) * this.valueRange + this.minValue;
},
if (this.tracking !== '') { // Events
return;
}
// We have to do this in case the HTML where the sliders are on /**
// have been animated into view. * Get the X-coordinate of an event
this.calcViewDimensions(); *
* @param {Object} event The event
* @returns {number}
*/
getEventX: function(event) {
/* http://stackoverflow.com/a/12336075/282882 */
//noinspection JSLint
if ('clientX' in event) {
return event.clientX;
}
if (pointer) { return event.originalEvent === undefined ?
this.tracking = ref; event.touches[0].clientX : event.originalEvent.touches[0].clientX;
} else { },
pointer = this.getNearestHandle(event);
this.tracking = pointer === this.minH ? 'rzSliderModel' : 'rzSliderHigh';
}
pointer.addClass('rz-active'); /**
* Get the handle closest to an event.
*
* @param event {Event} The event
* @returns {jqLite} The handle closest to the event.
*/
getNearestHandle: function(event) {
if (!this.range) {
return this.minH;
}
var offset = (this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth) * this.options.scale;
return Math.abs(offset - this.minH.rzsl) < Math.abs(offset - this.maxH.rzsl) ? this.minH : this.maxH;
},
/**
* Bind mouse and touch events to slider handles
*
* @returns {undefined}
*/
bindEvents: function() {
if (this.options.readOnly || this.options.disabled) return;
var barTracking, barStart, barMove;
if (this.options.draggableRange) {
barTracking = 'rzSliderDrag';
barStart = this.onDragStart;
barMove = this.onDragMove;
} else {
barTracking = 'rzSliderModel';
barStart = this.onStart;
barMove = this.onMove;
}
ehMove = angular.bind(this, this.dragging.active ? this.onDragMove : this.onMove, pointer); this.minH.on('mousedown', angular.bind(this, this.onStart, this.minH, 'rzSliderModel'));
ehEnd = angular.bind(this, this.onEnd, ehMove); if (this.range) {
this.maxH.on('mousedown', angular.bind(this, this.onStart, this.maxH, 'rzSliderHigh'));
}
this.fullBar.on('mousedown', angular.bind(this, this.onStart, null, null));
this.fullBar.on('mousedown', angular.bind(this, this.onMove, this.fullBar));
this.selBar.on('mousedown', angular.bind(this, barStart, null, barTracking));
this.selBar.on('mousedown', angular.bind(this, barMove, this.selBar));
this.ticks.on('mousedown', angular.bind(this, this.onStart, null, null));
this.ticks.on('mousedown', angular.bind(this, this.onMove, this.ticks));
this.minH.on('touchstart', angular.bind(this, this.onStart, this.minH, 'rzSliderModel'));
if (this.range) {
this.maxH.on('touchstart', angular.bind(this, this.onStart, this.maxH, 'rzSliderHigh'));
}
this.fullBar.on('touchstart', angular.bind(this, this.onStart, null, null));
this.fullBar.on('touchstart', angular.bind(this, this.onMove, this.fullBar));
this.selBar.on('touchstart', angular.bind(this, barStart, null, barTracking));
this.selBar.on('touchstart', angular.bind(this, barMove, this.selBar));
this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null));
this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks));
},
/**
* Unbind mouse and touch events to slider handles
*
* @returns {undefined}
*/
unbindEvents: function() {
this.minH.off();
this.maxH.off();
this.fullBar.off();
this.selBar.off();
this.ticks.off();
},
/**
* onStart event handler
*
* @param {?Object} pointer The jqLite wrapped DOM element; if null, the closest handle is used
* @param {?string} ref The name of the handle being changed; if null, the closest handle's value is modified
* @param {Event} event The event
* @returns {undefined}
*/
onStart: function(pointer, ref, event) {
var ehMove, ehEnd,
eventNames = this.getEventNames(event);
$document.on(eventNames.moveEvent, ehMove); event.stopPropagation();
$document.one(eventNames.endEvent, ehEnd); event.preventDefault();
this.callOnStart();
},
/** if (this.tracking !== '') {
* onMove event handler return;
* }
* @param {jqLite} pointer
* @param {Event} event The event
* @returns {undefined}
*/
onMove: function(pointer, event) {
var eventX = this.getEventX(event),
sliderLO, newOffset, newValue;
sliderLO = this.sliderElem.rzsl; // We have to do this in case the HTML where the sliders are on
newOffset = (eventX - sliderLO - this.handleHalfWidth) * this.options.scale; // have been animated into view.
this.calcViewDimensions();
if (newOffset <= 0) { if (pointer) {
if (pointer.rzsl === 0) this.tracking = ref;
return; } else {
newValue = this.minValue; pointer = this.getNearestHandle(event);
newOffset = 0; this.tracking = pointer === this.minH ? 'rzSliderModel' : 'rzSliderHigh';
} else if (newOffset >= this.maxLeft) { }
if (pointer.rzsl === this.maxLeft)
return;
newValue = this.maxValue;
newOffset = this.maxLeft;
} else {
newValue = this.offsetToValue(newOffset);
newValue = this.roundStep(newValue);
newOffset = this.valueToOffset(newValue);
}
this.positionTrackingHandle(newValue, newOffset);
},
/** pointer.addClass('rz-active');
* onDragStart event handler
*
* Handles dragging of the middle bar.
*
* @param {Object} pointer The jqLite wrapped DOM element
* @param {string} ref One of the refLow, refHigh values
* @param {Event} event The event
* @returns {undefined}
*/
onDragStart: function(pointer, ref, event) {
var offset = this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth;
this.dragging = {
active: true,
value: this.offsetToValue(offset),
difference: this.scope.rzSliderHigh - this.scope.rzSliderModel,
offset: offset,
lowDist: offset - this.minH.rzsl,
highDist: this.maxH.rzsl - offset
};
this.minH.addClass('rz-active');
this.maxH.addClass('rz-active');
this.onStart(pointer, ref, event); ehMove = angular.bind(this, this.dragging.active ? this.onDragMove : this.onMove, pointer);
}, ehEnd = angular.bind(this, this.onEnd, ehMove);
/** $document.on(eventNames.moveEvent, ehMove);
* onDragMove event handler $document.one(eventNames.endEvent, ehEnd);
* this.callOnStart();
* Handles dragging of the middle bar. },
*
* @param {jqLite} pointer
* @param {Event} event The event
* @returns {undefined}
*/
onDragMove: function(pointer, event) {
var newOffset = this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth,
newMinOffset, newMaxOffset,
newMinValue, newMaxValue;
if (newOffset <= this.dragging.lowDist) { /**
if (pointer.rzsl === this.dragging.lowDist) { * onMove event handler
return; *
* @param {jqLite} pointer
* @param {Event} event The event
* @returns {undefined}
*/
onMove: function(pointer, event) {
var eventX = this.getEventX(event),
sliderLO, newOffset, newValue;
sliderLO = this.sliderElem.rzsl;
newOffset = (eventX - sliderLO - this.handleHalfWidth) * this.options.scale;
if (newOffset <= 0) {
if (pointer.rzsl === 0)
return;
newValue = this.minValue;
newOffset = 0;
} else if (newOffset >= this.maxLeft) {
if (pointer.rzsl === this.maxLeft)
return;
newValue = this.maxValue;
newOffset = this.maxLeft;
} else {
newValue = this.offsetToValue(newOffset);
newValue = this.roundStep(newValue);
newOffset = this.valueToOffset(newValue);
} }
newMinValue = this.minValue; this.positionTrackingHandle(newValue, newOffset);
newMinOffset = 0; },
newMaxValue = this.minValue + this.dragging.difference;
newMaxOffset = this.valueToOffset(newMaxValue); /**
} else if (newOffset >= this.maxLeft - this.dragging.highDist) { * onDragStart event handler
if (pointer.rzsl === this.dragging.highDist) { *
return; * Handles dragging of the middle bar.
*
* @param {Object} pointer The jqLite wrapped DOM element
* @param {string} ref One of the refLow, refHigh values
* @param {Event} event The event
* @returns {undefined}
*/
onDragStart: function(pointer, ref, event) {
var offset = this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth;
this.dragging = {
active: true,
value: this.offsetToValue(offset),
difference: this.scope.rzSliderHigh - this.scope.rzSliderModel,
offset: offset,
lowDist: offset - this.minH.rzsl,
highDist: this.maxH.rzsl - offset
};
this.minH.addClass('rz-active');
this.maxH.addClass('rz-active');
this.onStart(pointer, ref, event);
},
/**
* onDragMove event handler
*
* Handles dragging of the middle bar.
*
* @param {jqLite} pointer
* @param {Event} event The event
* @returns {undefined}
*/
onDragMove: function(pointer, event) {
var newOffset = this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth,
newMinOffset, newMaxOffset,
newMinValue, newMaxValue;
if (newOffset <= this.dragging.lowDist) {
if (pointer.rzsl === this.dragging.lowDist) {
return;
}
newMinValue = this.minValue;
newMinOffset = 0;
newMaxValue = this.minValue + this.dragging.difference;
newMaxOffset = this.valueToOffset(newMaxValue);
} else if (newOffset >= this.maxLeft - this.dragging.highDist) {
if (pointer.rzsl === this.dragging.highDist) {
return;
}
newMaxValue = this.maxValue;
newMaxOffset = this.maxLeft;
newMinValue = this.maxValue - this.dragging.difference;
newMinOffset = this.valueToOffset(newMinValue);
} else {
newMinValue = this.offsetToValue(newOffset - this.dragging.lowDist);
newMinValue = this.roundStep(newMinValue);
newMinOffset = this.valueToOffset(newMinValue);
newMaxValue = newMinValue + this.dragging.difference;
newMaxOffset = this.valueToOffset(newMaxValue);
} }
newMaxValue = this.maxValue;
newMaxOffset = this.maxLeft;
newMinValue = this.maxValue - this.dragging.difference;
newMinOffset = this.valueToOffset(newMinValue);
} else {
newMinValue = this.offsetToValue(newOffset - this.dragging.lowDist);
newMinValue = this.roundStep(newMinValue);
newMinOffset = this.valueToOffset(newMinValue);
newMaxValue = newMinValue + this.dragging.difference;
newMaxOffset = this.valueToOffset(newMaxValue);
}
this.positionTrackingBar(newMinValue, newMaxValue, newMinOffset, newMaxOffset); this.positionTrackingBar(newMinValue, newMaxValue, newMinOffset, newMaxOffset);
}, },
/** /**
* Set the new value and offset for the entire bar * Set the new value and offset for the entire bar
* *
* @param {number} newMinValue the new minimum value * @param {number} newMinValue the new minimum value
* @param {number} newMaxValue the new maximum value * @param {number} newMaxValue the new maximum value
* @param {number} newMinOffset the new minimum offset * @param {number} newMinOffset the new minimum offset
* @param {number} newMaxOffset the new maximum offset * @param {number} newMaxOffset the new maximum offset
*/ */
positionTrackingBar: function(newMinValue, newMaxValue, newMinOffset, newMaxOffset) { positionTrackingBar: function(newMinValue, newMaxValue, newMinOffset, newMaxOffset) {
this.scope.rzSliderModel = newMinValue; this.scope.rzSliderModel = newMinValue;
this.scope.rzSliderHigh = newMaxValue; this.scope.rzSliderHigh = newMaxValue;
this.updateHandles('rzSliderModel', newMinOffset); this.updateHandles('rzSliderModel', newMinOffset);
this.updateHandles('rzSliderHigh', newMaxOffset); this.updateHandles('rzSliderHigh', newMaxOffset);
this.scope.$apply(); this.scope.$apply();
this.callOnChange(); this.callOnChange();
}, },
/** /**
* Set the new value and offset to the current tracking handle * Set the new value and offset to the current tracking handle
* *
* @param {number} newValue new model value * @param {number} newValue new model value
* @param {number} newOffset new offset value * @param {number} newOffset new offset value
*/ */
positionTrackingHandle: function(newValue, newOffset) { positionTrackingHandle: function(newValue, newOffset) {
if (this.range) { if (this.range) {
/* This is to check if we need to switch the min and max handles*/ /* This is to check if we need to switch the min and max handles*/
if (this.tracking === 'rzSliderModel' && newValue >= this.scope.rzSliderHigh) { if (this.tracking === 'rzSliderModel' && newValue >= this.scope.rzSliderHigh) {
this.scope[this.tracking] = this.scope.rzSliderHigh; this.scope[this.tracking] = this.scope.rzSliderHigh;
this.updateHandles(this.tracking, this.maxH.rzsl); this.updateHandles(this.tracking, this.maxH.rzsl);
this.tracking = 'rzSliderHigh'; this.tracking = 'rzSliderHigh';
this.minH.removeClass('rz-active'); this.minH.removeClass('rz-active');
this.maxH.addClass('rz-active'); this.maxH.addClass('rz-active');
/* We need to apply here because we are not sure that we will enter the next block */ /* We need to apply here because we are not sure that we will enter the next block */
this.scope.$apply(); this.scope.$apply();
this.callOnChange(); this.callOnChange();
} else if (this.tracking === 'rzSliderHigh' && newValue <= this.scope.rzSliderModel) { } else if (this.tracking === 'rzSliderHigh' && newValue <= this.scope.rzSliderModel) {
this.scope[this.tracking] = this.scope.rzSliderModel; this.scope[this.tracking] = this.scope.rzSliderModel;
this.updateHandles(this.tracking, this.minH.rzsl); this.updateHandles(this.tracking, this.minH.rzsl);
this.tracking = 'rzSliderModel'; this.tracking = 'rzSliderModel';
this.maxH.removeClass('rz-active'); this.maxH.removeClass('rz-active');
this.minH.addClass('rz-active'); this.minH.addClass('rz-active');
/* We need to apply here because we are not sure that we will enter the next block */ /* We need to apply here because we are not sure that we will enter the next block */
this.scope.$apply();
this.callOnChange();
}
}
if (this.scope[this.tracking] !== newValue) {
this.scope[this.tracking] = newValue;
this.updateHandles(this.tracking, newOffset);
this.scope.$apply(); this.scope.$apply();
this.callOnChange(); this.callOnChange();
} }
} },
if (this.scope[this.tracking] !== newValue) { /**
this.scope[this.tracking] = newValue; * onEnd event handler
this.updateHandles(this.tracking, newOffset); *
this.scope.$apply(); * @param {Event} event The event
this.callOnChange(); * @param {Function} ehMove The the bound move event handler
} * @returns {undefined}
}, */
onEnd: function(ehMove, event) {
var moveEventName = this.getEventNames(event).moveEvent;
/** this.minH.removeClass('rz-active');
* onEnd event handler this.maxH.removeClass('rz-active');
*
* @param {Event} event The event
* @param {Function} ehMove The the bound move event handler
* @returns {undefined}
*/
onEnd: function(ehMove, event) {
var moveEventName = this.getEventNames(event).moveEvent;
this.minH.removeClass('rz-active'); $document.off(moveEventName, ehMove);
this.maxH.removeClass('rz-active');
$document.off(moveEventName, ehMove); this.scope.$emit('slideEnded');
this.tracking = '';
this.scope.$emit('slideEnded'); this.dragging.active = false;
this.tracking = ''; this.callOnEnd();
},
this.dragging.active = false; /**
this.callOnEnd(); * Get event names for move and event end
}, *
* @param {Event} event The event
*
* @return {{moveEvent: string, endEvent: string}}
*/
getEventNames: function(event) {
var eventNames = {
moveEvent: '',
endEvent: ''
};
/** if (event.touches || (event.originalEvent !== undefined && event.originalEvent.touches)) {
* Get event names for move and event end eventNames.moveEvent = 'touchmove';
* eventNames.endEvent = 'touchend';
* @param {Event} event The event } else {
* eventNames.moveEvent = 'mousemove';
* @return {{moveEvent: string, endEvent: string}} eventNames.endEvent = 'mouseup';
*/ }
getEventNames: function(event) {
var eventNames = {
moveEvent: '',
endEvent: ''
};
if (event.touches || (event.originalEvent !== undefined && event.originalEvent.touches)) { return eventNames;
eventNames.moveEvent = 'touchmove';
eventNames.endEvent = 'touchend';
} else {
eventNames.moveEvent = 'mousemove';
eventNames.endEvent = 'mouseup';
} }
};
return eventNames; return Slider;
} })
};
return Slider;
})
.directive('rzslider', function(RzSlider) { .directive('rzslider', function(RzSlider) {
'use strict'; 'use strict';
return { return {
restrict: 'E', restrict: 'E',
scope: { scope: {
rzSliderModel: '=?', rzSliderModel: '=?',
rzSliderHigh: '=?', rzSliderHigh: '=?',
rzSliderOptions: '=?', rzSliderOptions: '=?',
rzSliderTplUrl: '@' rzSliderTplUrl: '@'
}, },
/**
* Return template URL
*
* @param {jqLite} elem
* @param {Object} attrs
* @return {string}
*/
templateUrl: function(elem, attrs) {
//noinspection JSUnresolvedVariable
return attrs.rzSliderTplUrl || 'rzSliderTpl.html';
},
/** link: function(scope, elem) {
* Return template URL return new RzSlider(scope, elem);
* }
* @param {jqLite} elem };
* @param {Object} attrs });
* @return {string}
*/
templateUrl: function(elem, attrs) {
//noinspection JSUnresolvedVariable
return attrs.rzSliderTplUrl || 'rzSliderTpl.html';
},
link: function(scope, elem) {
return new RzSlider(scope, elem);
}
};
});
// IDE assist // IDE assist
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment