Skip to content

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

Add code snippets for all examples 

Closes #227
parent 10998a67
Hide whitespace changes
Inline Side-by-side
Showing with 783 additions and 2267 deletions
.editorconfig 0 → 100644
View file @ 8ebe42ce
# http://editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
charset = utf-8
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
[*.js]
quote_type = single
curly_bracket_next_line = true
indent_brace_style = Allman
spaces_around_operators = true
spaces_around_brackets = inside
continuation_indent_size = 2
demo.css
View file @ 8ebe42ce
......@@ -10,6 +10,11 @@ body {
padding-bottom: 40px;
}
.code {
margin-top: 5px;
}
header {
background: #0db9f0;
color: #fff;
......@@ -54,4 +59,4 @@ article {
.vertical-sliders > div {
height: 250px;
}
}
\ No newline at end of file
demo.js
View file @ 8ebe42ce
var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']);
var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap', 'hljs']);
app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
app.directive('showCode', function () {
return {
scope: {
jsFile: '@',
htmlFile: '@'
},
templateUrl: 'show-code.html'
};
});
app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
//Minimal slider config
$scope.minSlider = {
value: 10
};
//Slider with selection bar
$scope.slider_visible_bar = {
value: 10,
options: {
showSelectionBar: true
}
};
//Range slider config
$scope.minRangeSlider = {
minValue: 10,
......@@ -25,12 +27,20 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
}
};
//Slider with selection bar
$scope.slider_visible_bar = {
value: 10,
options: {
showSelectionBar: true
}
};
//Slider with selection bar
$scope.color_slider_bar = {
value: 12,
options: {
showSelectionBar: true,
getSelectionBarColor: function(value) {
getSelectionBarColor: function (value) {
if (value <= 3)
return 'red';
if (value <= 6)
......@@ -56,13 +66,13 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
$scope.slider_callbacks = {
value: 100,
options: {
onStart: function() {
onStart: function () {
$scope.otherData.start = $scope.slider_callbacks.value * 10;
},
onChange: function() {
onChange: function () {
$scope.otherData.change = $scope.slider_callbacks.value * 10;
},
onEnd: function() {
onEnd: function () {
$scope.otherData.end = $scope.slider_callbacks.value * 10;
}
}
......@@ -78,9 +88,9 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
minValue: 100,
maxValue: 400,
options: {
ceil: 500,
floor: 0,
translate: function(value) {
ceil: 500,
translate: function (value) {
return '$' + value;
}
}
......@@ -98,8 +108,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
$scope.slider_ticks = {
value: 5,
options: {
ceil: 10,
floor: 0,
ceil: 10,
showTicks: true
}
};
......@@ -108,10 +118,10 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
$scope.slider_ticks_tooltip = {
value: 5,
options: {
ceil: 10,
floor: 0,
ceil: 10,
showTicks: true,
ticksTooltip: function(v) {
ticksTooltip: function (v) {
return 'Tooltip for ' + v;
}
}
......@@ -121,10 +131,10 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
$scope.slider_ticks_values = {
value: 5,
options: {
ceil: 10,
floor: 0,
ceil: 10,
showTicksValues: true,
ticksValuesTooltip: function(v) {
ticksValuesTooltip: function (v) {
return 'Tooltip for ' + v;
}
}
......@@ -135,8 +145,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
minValue: 1,
maxValue: 8,
options: {
ceil: 10,
floor: 0,
ceil: 10,
showTicksValues: true
}
};
......@@ -146,8 +156,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
minValue: 1,
maxValue: 8,
options: {
ceil: 10,
floor: 0,
ceil: 10,
draggableRange: true
}
};
......@@ -157,8 +167,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
minValue: 4,
maxValue: 6,
options: {
ceil: 10,
floor: 0,
ceil: 10,
draggableRangeOnly: true
}
};
......@@ -217,7 +227,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
vertical: true,
showSelectionBar: true,
showTicksValues: true,
ticksValuesTooltip: function(v) {
ticksValuesTooltip: function (v) {
return 'Tooltip for ' + v;
}
}
......@@ -227,8 +237,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
$scope.read_only_slider = {
value: 50,
options: {
ceil: 100,
floor: 0,
ceil: 100,
readOnly: true
}
};
......@@ -237,8 +247,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
$scope.disabled_slider = {
value: 50,
options: {
ceil: 100,
floor: 0,
ceil: 100,
disabled: true
}
};
......@@ -248,13 +258,13 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
$scope.slider_toggle = {
value: 5,
options: {
ceil: 10,
floor: 0
floor: 0,
ceil: 10
}
};
$scope.toggle = function() {
$scope.toggle = function () {
$scope.visible = !$scope.visible;
$timeout(function() {
$timeout(function () {
$scope.$broadcast('rzSliderForceRender');
});
};
......@@ -269,14 +279,14 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
high: 50
}
};
$scope.openModal = function() {
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: 'sliderModal.html',
controller: function($scope, $modalInstance, values) {
controller: function ($scope, $modalInstance, values) {
$scope.percentages = JSON.parse(JSON.stringify(values)); //Copy of the object in order to keep original values in $scope.percentages in parent controller.
var formatToPercentage = function(value) {
var formatToPercentage = function (value) {
return value + '%';
};
......@@ -291,23 +301,23 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
ceil: 100,
translate: formatToPercentage
};
$scope.ok = function() {
$scope.ok = function () {
$modalInstance.close($scope.percentages);
};
$scope.cancel = function() {
$scope.cancel = function () {
$modalInstance.dismiss();
};
},
resolve: {
values: function() {
values: function () {
return $scope.percentages;
}
}
});
modalInstance.result.then(function(percentages) {
modalInstance.result.then(function (percentages) {
$scope.percentages = percentages;
});
modalInstance.rendered.then(function() {
modalInstance.rendered.then(function () {
$rootScope.$broadcast('rzSliderForceRender'); //Force refresh sliders on render. Otherwise bullets are aligned at left side.
});
};
......@@ -322,8 +332,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
value: 200
}
};
$scope.refreshSlider = function() {
$timeout(function() {
$scope.refreshSlider = function () {
$timeout(function () {
$scope.$broadcast('rzSliderForceRender');
});
};
......@@ -346,7 +356,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
showTicksValues: false
}
};
$scope.toggleHighValue = function() {
$scope.toggleHighValue = function () {
if ($scope.slider_all_options.maxValue != null) {
$scope.slider_all_options.maxValue = undefined;
} else {
......
dist/rzslider.css deleted 100644 → 0
View file @ 10998a67
/*! angularjs-slider - v2.4.1 -
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
https://github.com/angular-slider/angularjs-slider -
2016-01-15 */
rzslider {
position: relative;
display: inline-block;
width: 100%;
height: 4px;
margin: 35px 0 15px 0;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
rzslider[disabled] {
cursor: not-allowed;
}
rzslider[disabled] .rz-pointer {
cursor: not-allowed;
background-color: #d8e0f3;
}
rzslider span {
position: absolute;
display: inline-block;
white-space: nowrap;
}
rzslider .rz-base {
width: 100%;
height: 100%;
padding: 0;
}
rzslider .rz-bar-wrapper {
left: 0;
z-index: 1;
width: 100%;
height: 32px;
padding-top: 16px;
margin-top: -16px;
box-sizing: border-box;
}
rzslider .rz-bar-wrapper.rz-draggable {
cursor: move;
}
rzslider .rz-bar {
left: 0;
z-index: 1;
width: 100%;
height: 4px;
background: #d8e0f3;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
rzslider .rz-bar.rz-selection {
z-index: 2;
background: #0db9f0;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
rzslider .rz-pointer {
top: -14px;
z-index: 3;
width: 32px;
height: 32px;
cursor: pointer;
background-color: #0db9f0;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
rzslider .rz-pointer:after {
position: absolute;
top: 12px;
left: 12px;
width: 8px;
height: 8px;
background: #ffffff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
content: '';
}
rzslider .rz-pointer:hover:after {
background-color: #ffffff;
}
rzslider .rz-pointer.rz-active:after {
background-color: #451aff;
}
rzslider .rz-bubble {
bottom: 16px;
padding: 1px 3px;
color: #55637d;
cursor: default;
}
rzslider .rz-bubble.rz-selection {
top: 16px;
}
rzslider .rz-bubble.rz-limit {
color: #55637d;
}
rzslider .rz-ticks {
position: absolute;
top: -3px;
left: 0;
z-index: 1;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 0;
padding: 0 11px;
margin: 0;
list-style: none;
box-sizing: border-box;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
rzslider .rz-ticks .tick {
width: 10px;
height: 10px;
text-align: center;
cursor: pointer;
background: #d8e0f3;
border-radius: 50%;
}
rzslider .rz-ticks .tick.selected {
background: #0db9f0;
}
rzslider .rz-ticks .tick .tick-value {
position: absolute;
top: -30px;
transform: translate(-50%, 0);
}
rzslider.vertical {
position: relative;
width: 4px;
height: 100%;
padding: 0;
margin: 0 20px;
vertical-align: baseline;
}
rzslider.vertical .rz-base {
width: 100%;
height: 100%;
padding: 0;
}
rzslider.vertical .rz-bar-wrapper {
top: auto;
left: 0;
width: 32px;
height: 100%;
padding: 0 0 0 16px;
margin: 0 0 0 -16px;
}
rzslider.vertical .rz-bar {
bottom: 0;
left: auto;
width: 4px;
height: 100%;
}
rzslider.vertical .rz-pointer {
top: auto;
bottom: 0;
left: -14px !important;
}
rzslider.vertical .rz-bubble {
bottom: 0;
left: 16px !important;
margin-left: 3px;
}
rzslider.vertical .rz-bubble.rz-selection {
top: auto;
left: 16px !important;
}
rzslider.vertical .rz-ticks {
top: 0;
left: -3px;
z-index: 1;
width: 0;
height: 100%;
padding: 11px 0;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
rzslider.vertical .rz-ticks .tick {
vertical-align: middle;
}
rzslider.vertical .rz-ticks .tick .tick-value {
top: auto;
right: -30px;
transform: translate(0, -28%);
}
\ No newline at end of file
dist/rzslider.js deleted 100644 → 0
View file @ 10998a67
/*! angularjs-slider - v2.4.1 -
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
https://github.com/angular-slider/angularjs-slider -
2016-01-15 */
/*jslint unparam: true */
/*global angular: false, console: false, define, module */
(function(root, factory) {
'use strict';
/* istanbul ignore next */
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['angular'], factory);
} else if (typeof module === 'object' && module.exports) {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
// to support bundler like browserify
module.exports = factory(require('angular'));
} else {
// Browser globals (root is window)
factory(root.angular);
}
}(this, function(angular) {
'use strict';
var module = angular.module('rzModule', [])
.factory('RzSliderOptions', function() {
var defaultOptions = {
floor: 0,
ceil: null, //defaults to rz-slider-model
step: 1,
precision: 0,
id: null,
translate: null,
stepsArray: null,
draggableRange: false,
draggableRangeOnly: false,
showSelectionBar: false,
showSelectionBarEnd: false,
hideLimitLabels: false,
readOnly: false,
disabled: false,
interval: 350,
showTicks: false,
showTicksValues: false,
ticksTooltip: null,
ticksValuesTooltip: null,
vertical: false,
selectionBarColor: null,
keyboardSupport: true,
scale: 1,
enforceRange: false,
onlyBindHandles: false,
onStart: null,
onChange: 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;
})
.factory('rzThrottle', ['$timeout', function($timeout) {
/**
* rzThrottle
*
* Taken from underscore project
*
* @param {Function} func
* @param {number} wait
* @param {ThrottleOptions} options
* @returns {Function}
*/
return function(func, wait, options) {
'use strict';
/* istanbul ignore next */
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 = getTime();
timeout = null;
result = func.apply(context, args);
context = args = null;
};
return function() {
var now = getTime();
var remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0) {
$timeout.cancel(timeout);
timeout = null;
previous = now;
result = func.apply(context, args);
context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = $timeout(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;
/**
* Slider element wrapped in jqLite
*
* @type {jqLite}
*/
this.sliderElem = sliderElem;
/**
* 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 = {
active: false,
value: 0,
difference: 0,
offset: 0,
lowLimit: 0,
highLimit: 0
};
/**
* property that handle position (defaults to left for horizontal)
* @type {string}
*/
this.positionProperty = 'left';
/**
* property that handle dimension (defaults to width for horizontal)
* @type {string}
*/
this.dimensionProperty = 'width';
/**
* Half of the width or height of the slider handles
*
* @type {number}
*/
this.handleHalfDim = 0;
/**
* Maximum position the slider handle can have
*
* @type {number}
*/
this.maxPos = 0;
/**
* Precision
*
* @type {number}
*/
this.precision = 0;
/**
* Step
*
* @type {number}
*/
this.step = 1;
/**
* 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;
/**
* The delta between min and max value
*
* @type {number}
*/
this.valueRange = 0;
/**
* Set to true if init method already executed
*
* @type {boolean}
*/
this.initHasRun = false;
/**
* Internal flag to prevent watchers to be called when the sliders value are modified internally.
* @type {boolean}
*/
this.internalChange = 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}
*/
init: function() {
var thrLow, thrHigh,
self = this;
var calcDimFn = function() {
self.calcViewDimensions();
};
this.applyOptions();
this.initElemHandles();
this.manageElementsStyle();
this.setDisabledState();
this.calcViewDimensions();
this.setMinAndMax();
this.addAccessibility();
this.updateCeilLab();
this.updateFloorLab();
this.initHandles();
this.manageEventsBindings();
// Recalculate slider view dimensions
this.scope.$on('reCalcViewDimensions', calcDimFn);
// Recalculate stuff if view port dimensions have changed
angular.element($window).on('resize', calcDimFn);
this.initHasRun = true;
// Watch for changes to the model
thrLow = rzThrottle(function() {
self.onLowHandleChange();
}, self.options.interval);
thrHigh = rzThrottle(function() {
self.onHighHandleChange();
}, self.options.interval);
this.scope.$on('rzSliderForceRender', function() {
self.resetLabelsValue();
thrLow();
if (self.range) {
thrHigh();
}
self.resetSlider();
});
// Watchers (order is important because in case of simultaneous change,
// watchers will be called in the same order)
this.scope.$watch('rzSliderOptions', function(newValue, oldValue) {
if (newValue === oldValue)
return;
self.applyOptions();
self.resetSlider();
}, true);
this.scope.$watch('rzSliderModel', function(newValue, oldValue) {
if (self.internalChange)
return;
if (newValue === oldValue)
return;
thrLow();
});
this.scope.$watch('rzSliderHigh', function(newValue, oldValue) {
if (self.internalChange)
return;
if (newValue === oldValue)
return;
if (newValue != null)
thrHigh();
if (self.range && newValue == null || !self.range && newValue != null) {
self.applyOptions();
self.resetSlider();
}
});
this.scope.$on('$destroy', function() {
self.unbindEvents();
angular.element($window).off('resize', calcDimFn);
});
},
/*
* Reflow the slider when the low handle changes (called with throttle)
*/
onLowHandleChange: function() {
this.setMinAndMax();
this.updateLowHandle(this.valueToOffset(this.scope.rzSliderModel));
this.updateSelectionBar();
this.updateTicksScale();
this.updateAriaAttributes();
if (this.range) {
this.updateCmbLabel();
}
},
/*
* Reflow the slider when the high handle changes (called with throttle)
*/
onHighHandleChange: function() {
this.setMinAndMax();
this.updateHighHandle(this.valueToOffset(this.scope.rzSliderHigh));
this.updateSelectionBar();
this.updateTicksScale();
this.updateCmbLabel();
this.updateAriaAttributes();
},
/**
* 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.draggableRangeOnly = this.range && this.options.draggableRangeOnly;
if (this.options.draggableRangeOnly) {
this.options.draggableRange = true;
}
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
this.scope.showTicks = this.options.showTicks; //scope is used in the template
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd;
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);
};
if (this.options.vertical) {
this.positionProperty = 'bottom';
this.dimensionProperty = 'height';
}
},
/**
* Resets slider
*
* @returns {undefined}
*/
resetSlider: function() {
this.manageElementsStyle();
this.addAccessibility();
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;
}
}, this);
// Initialize offset cache properties
this.selBar.rzsp = 0;
this.minH.rzsp = 0;
this.maxH.rzsp = 0;
this.flrLab.rzsp = 0;
this.ceilLab.rzsp = 0;
this.minLab.rzsp = 0;
this.maxLab.rzsp = 0;
this.cmbLab.rzsp = 0;
},
/**
* Update each elements style based on options
*/
manageElementsStyle: function() {
if (!this.range)
this.maxH.css('display', 'none');
else
this.maxH.css('display', '');
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.vertical)
this.sliderElem.addClass('vertical');
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
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);
}
},
/**
* 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();
if (this.range)
this.updateCmbLabel();
this.updateTicksScale();
},
/**
* Translate value to human readable format
*
* @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)),
getDimension = false;
if (label.rzsv === undefined || label.rzsv.length !== valStr.length || (label.rzsv.length > 0 && label.rzsd === 0)) {
getDimension = true;
label.rzsv = valStr;
}
label.text(valStr);
// Update width only when length of the label have changed
if (getDimension) {
this.getDimension(label);
}
},
/**
* Set maximum and minimum values for the slider and ensure the model and high
* value match these limits
* @returns {undefined}
*/
setMinAndMax: function() {
this.step = +this.options.step;
this.precision = +this.options.precision;
this.scope.rzSliderModel = this.roundStep(this.scope.rzSliderModel);
if (this.range)
this.scope.rzSliderHigh = this.roundStep(this.scope.rzSliderHigh);
this.minValue = this.roundStep(+this.options.floor);
if (this.options.ceil != null)
this.maxValue = this.roundStep(+this.options.ceil);
else
this.maxValue = this.options.ceil = this.range ? this.scope.rzSliderHigh : this.scope.rzSliderModel;
if (this.options.enforceRange) {
this.scope.rzSliderModel = this.sanitizeValue(this.scope.rzSliderModel);
if (this.range)
this.scope.rzSliderHigh = this.sanitizeValue(this.scope.rzSliderHigh);
}
this.valueRange = this.maxValue - this.minValue;
},
/**
* Adds accessibility attributes
*
* Run only once during initialization
*
* @returns {undefined}
*/
addAccessibility: function() {
this.minH.attr('role', 'slider');
this.updateAriaAttributes();
if (this.options.keyboardSupport && !(this.options.readOnly || this.options.disabled))
this.minH.attr('tabindex', '0');
else
this.minH.attr('tabindex', '');
if (this.options.vertical)
this.minH.attr('aria-orientation', 'vertical');
if (this.range) {
this.maxH.attr('role', 'slider');
if (this.options.keyboardSupport && !(this.options.readOnly || this.options.disabled))
this.maxH.attr('tabindex', '0');
else
this.maxH.attr('tabindex', '');
if (this.options.vertical)
this.maxH.attr('aria-orientation', 'vertical');
}
},
/**
* Updates aria attributes according to current values
*/
updateAriaAttributes: function() {
this.minH.attr({
'aria-valuenow': this.scope.rzSliderModel,
'aria-valuetext': this.customTrFn(this.scope.rzSliderModel),
'aria-valuemin': this.minValue,
'aria-valuemax': this.maxValue
});
if (this.range) {
this.maxH.attr({
'aria-valuenow': this.scope.rzSliderHigh,
'aria-valuetext': this.customTrFn(this.scope.rzSliderHigh),
'aria-valuemin': this.minValue,
'aria-valuemax': this.maxValue
});
}
},
/**
* 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.getDimension(this.minH);
this.handleHalfDim = handleWidth / 2;
this.barDimension = this.getDimension(this.fullBar);
this.maxPos = this.barDimension - handleWidth;
this.getDimension(this.sliderElem);
this.sliderElem.rzsp = this.sliderElem[0].getBoundingClientRect()[this.positionProperty];
if (this.initHasRun) {
this.updateFloorLab();
this.updateCeilLab();
this.initHandles();
}
},
/**
* Update the ticks position
*
* @returns {undefined}
*/
updateTicksScale: function() {
if (!this.options.showTicks) return;
var positions = '',
ticksCount = Math.round((this.maxValue - this.minValue) / this.step) + 1;
this.scope.ticks = [];
for (var i = 0; i < ticksCount; i++) {
var value = this.roundStep(this.minValue + i * this.step);
var tick =   {
selected: this.isTickSelected(value)
};
if (tick.selected && this.options.getSelectionBarColor) {
tick.style = {
'background-color': this.getSelectionBarColor()
};
}
if (this.options.ticksTooltip) {
tick.tooltip = this.options.ticksTooltip(value);
tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
}
if (this.options.showTicksValues) {
tick.value = this.getDisplayValue(value);
if (this.options.ticksValuesTooltip) {
tick.valueTooltip = this.options.ticksValuesTooltip(value);
tick.valueTooltipPlacement = this.options.vertical ? 'right' : 'top';
}
}
this.scope.ticks.push(tick);
}
},
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.setPosition(this.ceilLab, this.barDimension - this.ceilLab.rzsd);
this.getDimension(this.ceilLab);
},
/**
* Update position of the floor label
*
* @returns {undefined}
*/
updateFloorLab: function() {
this.translateFn(this.minValue, this.flrLab);
this.getDimension(this.flrLab);
},
/**
* Call the onStart callback if defined
*
* @returns {undefined}
*/
callOnStart: function() {
if (this.options.onStart) {
this.options.onStart(this.options.id);
}
},
/**
* Call the onChange callback if defined
*
* @returns {undefined}
*/
callOnChange: function() {
if (this.options.onChange) {
this.options.onChange(this.options.id);
}
},
/**
* Call the onEnd callback if defined
*
* @returns {undefined}
*/
callOnEnd: function() {
if (this.options.onEnd) {
var self = this;
$timeout(function() {
self.options.onEnd(self.options.id);
});
}
},
/**
* Update slider handles and label positions
*
* @param {string} which
* @param {number} newOffset
*/
updateHandles: function(which, newOffset) {
if (which === 'rzSliderModel')
this.updateLowHandle(newOffset);
else if (which === 'rzSliderHigh')
this.updateHighHandle(newOffset);
this.updateSelectionBar();
this.updateTicksScale();
if (this.range)
this.updateCmbLabel();
},
/**
* Update low slider handle position and label
*
* @param {number} newOffset
* @returns {undefined}
*/
updateLowHandle: function(newOffset) {
this.setPosition(this.minH, newOffset);
this.translateFn(this.scope.rzSliderModel, this.minLab);
var pos = Math.min(Math.max(newOffset - this.minLab.rzsd / 2 + this.handleHalfDim, 0), this.barDimension - this.ceilLab.rzsd);
this.setPosition(this.minLab, pos);
this.shFloorCeil();
},
/**
* Update high slider handle position and label
*
* @param {number} newOffset
* @returns {undefined}
*/
updateHighHandle: function(newOffset) {
this.setPosition(this.maxH, newOffset);
this.translateFn(this.scope.rzSliderHigh, this.maxLab);
var pos = Math.min((newOffset - this.maxLab.rzsd / 2 + this.handleHalfDim), (this.barDimension - this.ceilLab.rzsd));
this.setPosition(this.maxLab, pos);
this.shFloorCeil();
},
/**
* Show / hide floor / ceiling label
*
* @returns {undefined}
*/
shFloorCeil: function() {
var flHidden = false,
clHidden = false;
if (this.minLab.rzsp <= this.flrLab.rzsp + this.flrLab.rzsd + 5) {
flHidden = true;
this.hideEl(this.flrLab);
} else {
flHidden = false;
this.showEl(this.flrLab);
}
if (this.minLab.rzsp + this.minLab.rzsd >= this.ceilLab.rzsp - this.handleHalfDim - 10) {
clHidden = true;
this.hideEl(this.ceilLab);
} else {
clHidden = false;
this.showEl(this.ceilLab);
}
if (this.range) {
if (this.maxLab.rzsp + this.maxLab.rzsd >= this.ceilLab.rzsp - 10) {
this.hideEl(this.ceilLab);
} else if (!clHidden) {
this.showEl(this.ceilLab);
}
// Hide or show floor label
if (this.maxLab.rzsp <= this.flrLab.rzsp + this.flrLab.rzsd + this.handleHalfDim) {
this.hideEl(this.flrLab);
} else if (!flHidden) {
this.showEl(this.flrLab);
}
}
},
/**
* Update slider selection bar, combined label and range label
*
* @returns {undefined}
*/
updateSelectionBar: function() {
var position = 0,
dimension = 0;
if (this.range || !this.options.showSelectionBarEnd) {
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim
position = this.range ? this.minH.rzsp + this.handleHalfDim : 0;
} else {
dimension = Math.abs(this.maxPos - this.minH.rzsp) + this.handleHalfDim
position = this.minH.rzsp + this.handleHalfDim;
}
this.setDimension(this.selBar, dimension);
this.setPosition(this.selBar, position);
if (this.options.getSelectionBarColor) {
var color = this.getSelectionBarColor();
this.scope.barStyle = {
backgroundColor: color
};
}
},
/**
* Wrapper around the getSelectionBarColor of the user to pass to
* correct parameters
*/
getSelectionBarColor: function() {
if (this.range)
return this.options.getSelectionBarColor(this.scope.rzSliderModel, this.scope.rzSliderHigh);
return this.options.getSelectionBarColor(this.scope.rzSliderModel);
},
/**
* Update combined label position and value
*
* @returns {undefined}
*/
updateCmbLabel: function() {
var lowTr, highTr;
if (this.minLab.rzsp + this.minLab.rzsd + 10 >= this.maxLab.rzsp) {
lowTr = this.getDisplayValue(this.scope.rzSliderModel);
highTr = this.getDisplayValue(this.scope.rzSliderHigh);
this.translateFn(lowTr + ' - ' + highTr, this.cmbLab, false);
var pos = Math.min(Math.max((this.selBar.rzsp + this.selBar.rzsd / 2 - this.cmbLab.rzsd / 2), 0), (this.barDimension - this.cmbLab.rzsd));
this.setPosition(this.cmbLab, pos);
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
* @param value
* @returns {*}
*/
getDisplayValue: function(value) {
return this.customTrFn(value, this.options.id);
},
/**
* Round value to step and precision
*
* @param {number} value
* @returns {number}
*/
roundStep: function(value) {
var steppedValue = parseFloat(value / this.step).toPrecision(12)
steppedValue = Math.round(steppedValue) * this.step;
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
});
},
/**
* Show element
*
* @param element The jqLite wrapped DOM element
* @returns {jqLite} The jqLite
*/
showEl: function(element) {
if (!!element.rzAlwaysHide) {
return element;
}
return element.css({
opacity: 1
});
},
/**
* Set element left/top offset depending on whether slider is horizontal or vertical
*
* @param {jqLite} elem The jqLite wrapped DOM element
* @param {number} pos
* @returns {number}
*/
setPosition: function(elem, pos) {
elem.rzsp = pos;
var css = {};
css[this.positionProperty] = pos + 'px';
elem.css(css);
return pos;
},
/**
* Get element width/height depending on whether slider is horizontal or vertical
*
* @param {jqLite} elem The jqLite wrapped DOM element
* @returns {number}
*/
getDimension: function(elem) {
var val = elem[0].getBoundingClientRect();
if (this.options.vertical)
elem.rzsd = (val.bottom - val.top) * this.options.scale;
else
elem.rzsd = (val.right - val.left) * this.options.scale;
return elem.rzsd;
},
/**
* Set element width/height depending on whether slider is horizontal or vertical
*
* @param {jqLite} elem The jqLite wrapped DOM element
* @param {number} dim
* @returns {number}
*/
setDimension: function(elem, dim) {
elem.rzsd = dim;
var css = {};
css[this.dimensionProperty] = dim + 'px';
elem.css(css);
return dim;
},
/**
* Translate value to pixel offset
*
* @param {number} val
* @returns {number}
*/
valueToOffset: function(val) {
return (this.sanitizeValue(val) - this.minValue) * this.maxPos / this.valueRange || 0;
},
/**
* Returns a value that is within slider range
*
* @param {number} val
* @returns {number}
*/
sanitizeValue: 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.maxPos) * this.valueRange + this.minValue;
},
// Events
/**
* Get the X-coordinate or Y-coordinate of an event
*
* @param {Object} event The event
* @returns {number}
*/
getEventXY: function(event) {
/* http://stackoverflow.com/a/12336075/282882 */
//noinspection JSLint
var clientXY = this.options.vertical ? 'clientY' : 'clientX';
if (clientXY in event) {
return event[clientXY];
}
return event.originalEvent === undefined ?
event.touches[0][clientXY] : event.originalEvent.touches[0][clientXY];
},
/**
* Compute the event position depending on whether the slider is horizontal or vertical
* @param event
* @returns {number}
*/
getEventPosition: function(event) {
var sliderPos = this.sliderElem.rzsp,
eventPos = 0;
if (this.options.vertical)
eventPos = -this.getEventXY(event) + sliderPos;
else
eventPos = this.getEventXY(event) - sliderPos;
return (eventPos - this.handleHalfDim) * this.options.scale;
},
/**
* 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)) {
eventNames.moveEvent = 'touchmove';
eventNames.endEvent = 'touchend';
} else {
eventNames.moveEvent = 'mousemove';
eventNames.endEvent = 'mouseup';
}
return eventNames;
},
/**
* 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.getEventPosition(event);
return Math.abs(offset - this.minH.rzsp) < Math.abs(offset - this.maxH.rzsp) ? this.minH : this.maxH;
},
/**
* Wrapper function to focus an angular element
*
* @param el {AngularElement} the element to focus
*/
focusElement: function(el) {
var DOM_ELEMENT = 0;
el[DOM_ELEMENT].focus();
},
/**
* Bind mouse and touch events to slider handles
*
* @returns {undefined}
*/
bindEvents: function() {
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;
}
if (!this.options.onlyBindHandles) {
this.selBar.on('mousedown', angular.bind(this, barStart, null, barTracking));
this.selBar.on('mousedown', angular.bind(this, barMove, this.selBar));
}
if (this.options.draggableRangeOnly) {
this.minH.on('mousedown', angular.bind(this, barStart, null, barTracking));
this.maxH.on('mousedown', angular.bind(this, barStart, null, barTracking));
} else {
this.minH.on('mousedown', angular.bind(this, this.onStart, this.minH, 'rzSliderModel'));
if (this.range) {
this.maxH.on('mousedown', angular.bind(this, this.onStart, this.maxH, 'rzSliderHigh'));
}
if (!this.options.onlyBindHandles) {
this.fullBar.on('mousedown', angular.bind(this, this.onStart, null, null));
this.fullBar.on('mousedown', angular.bind(this, this.onMove, this.fullBar));
this.ticks.on('mousedown', angular.bind(this, this.onStart, null, null));
this.ticks.on('mousedown', angular.bind(this, this.onMove, this.ticks));
}
}
if (!this.options.onlyBindHandles) {
this.selBar.on('touchstart', angular.bind(this, barStart, null, barTracking));
this.selBar.on('touchstart', angular.bind(this, barMove, this.selBar));
}
if (this.options.draggableRangeOnly) {
this.minH.on('touchstart', angular.bind(this, barStart, null, barTracking));
this.maxH.on('touchstart', angular.bind(this, barStart, null, barTracking));
} else {
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'));
}
if (!this.options.onlyBindHandles) {
this.fullBar.on('touchstart', angular.bind(this, this.onStart, null, null));
this.fullBar.on('touchstart', angular.bind(this, this.onMove, this.fullBar));
this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null));
this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks));
}
}
if (this.options.keyboardSupport) {
this.minH.on('focus', angular.bind(this, this.onPointerFocus, this.minH, 'rzSliderModel'));
if (this.range) {
this.maxH.on('focus', angular.bind(this, this.onPointerFocus, this.maxH, 'rzSliderHigh'));
}
}
},
/**
* 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);
event.stopPropagation();
event.preventDefault();
// We have to do this in case the HTML where the sliders are on
// have been animated into view.
this.calcViewDimensions();
if (pointer) {
this.tracking = ref;
} else {
pointer = this.getNearestHandle(event);
this.tracking = pointer === this.minH ? 'rzSliderModel' : 'rzSliderHigh';
}
pointer.addClass('rz-active');
if (this.options.keyboardSupport)
this.focusElement(pointer);
ehMove = angular.bind(this, this.dragging.active ? this.onDragMove : this.onMove, pointer);
ehEnd = angular.bind(this, this.onEnd, ehMove);
$document.on(eventNames.moveEvent, ehMove);
$document.one(eventNames.endEvent, ehEnd);
this.callOnStart();
},
/**
* onMove event handler
*
* @param {jqLite} pointer
* @param {Event} event The event
* @returns {undefined}
*/
onMove: function(pointer, event) {
var newOffset = this.getEventPosition(event),
newValue;
if (newOffset <= 0) {
if (pointer.rzsp === 0)
return;
newValue = this.minValue;
newOffset = 0;
} else if (newOffset >= this.maxPos) {
if (pointer.rzsp === this.maxPos)
return;
newValue = this.maxValue;
newOffset = this.maxPos;
} else {
newValue = this.offsetToValue(newOffset);
newValue = this.roundStep(newValue);
newOffset = this.valueToOffset(newValue);
}
this.positionTrackingHandle(newValue, newOffset);
},
/**
* onEnd event handler
*
* @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;
if (!this.options.keyboardSupport) {
this.minH.removeClass('rz-active');
this.maxH.removeClass('rz-active');
this.tracking = '';
}
this.dragging.active = false;
$document.off(moveEventName, ehMove);
this.scope.$emit('slideEnded');
this.callOnEnd();
},
onPointerFocus: function(pointer, ref) {
this.tracking = ref;
pointer.one('blur', angular.bind(this, this.onPointerBlur, pointer));
pointer.on('keydown', angular.bind(this, this.onKeyboardEvent));
pointer.addClass('rz-active');
},
onPointerBlur: function(pointer) {
pointer.off('keydown');
this.tracking = '';
pointer.removeClass('rz-active');
},
onKeyboardEvent: function(event) {
var currentValue = this.scope[this.tracking],
keyCode = event.keyCode || event.which,
keys = {
38: 'UP',
40: 'DOWN',
37: 'LEFT',
39: 'RIGHT',
33: 'PAGEUP',
34: 'PAGEDOWN',
36: 'HOME',
35: 'END'
},
actions = {
UP: currentValue + this.step,
DOWN: currentValue - this.step,
LEFT: currentValue - this.step,
RIGHT: currentValue + this.step,
PAGEUP: currentValue + this.valueRange / 10,
PAGEDOWN: currentValue - this.valueRange / 10,
HOME: this.minValue,
END: this.maxValue
},
key = keys[keyCode],
action = actions[key];
if (action == null || this.tracking === '') return;
event.preventDefault();
var newValue = this.roundStep(this.sanitizeValue(action)),
newOffset = this.valueToOffset(newValue);
if (!this.options.draggableRangeOnly) {
this.positionTrackingHandle(newValue, newOffset);
} else {
var difference = this.scope.rzSliderHigh - this.scope.rzSliderModel,
newMinOffset, newMaxOffset,
newMinValue, newMaxValue;
if (this.tracking === 'rzSliderModel') {
newMinValue = newValue;
newMinOffset = newOffset;
newMaxValue = newValue + difference;
if (newMaxValue > this.maxValue) {
newMaxValue = this.maxValue;
newMinValue = newMaxValue - difference;
newMinOffset = this.valueToOffset(newMinValue);
}
newMaxOffset = this.valueToOffset(newMaxValue);
} else {
newMaxValue = newValue;
newMaxOffset = newOffset;
newMinValue = newValue - difference;
if (newMinValue < this.minValue) {
newMinValue = this.minValue;
newMaxValue = newMinValue + difference;
newMaxOffset = this.valueToOffset(newMaxValue);
}
newMinOffset = this.valueToOffset(newMinValue);
}
this.positionTrackingBar(newMinValue, newMaxValue, newMinOffset, newMaxOffset);
}
},
/**
* 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.getEventPosition(event);
this.dragging = {
active: true,
value: this.offsetToValue(offset),
difference: this.scope.rzSliderHigh - this.scope.rzSliderModel,
lowLimit: offset - this.minH.rzsp,
highLimit: this.maxH.rzsp - offset
};
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.getEventPosition(event),
newMinOffset, newMaxOffset,
newMinValue, newMaxValue;
if (newOffset <= this.dragging.lowLimit) {
if (this.minH.rzsp === 0)
return;
newMinValue = this.minValue;
newMinOffset = 0;
newMaxValue = this.minValue + this.dragging.difference;
newMaxOffset = this.valueToOffset(newMaxValue);
} else if (newOffset >= this.maxPos - this.dragging.highLimit) {
if (this.maxH.rzsp === this.maxPos)
return;
newMaxValue = this.maxValue;
newMaxOffset = this.maxPos;
newMinValue = this.maxValue - this.dragging.difference;
newMinOffset = this.valueToOffset(newMinValue);
} else {
newMinValue = this.offsetToValue(newOffset - this.dragging.lowLimit);
newMinValue = this.roundStep(newMinValue);
newMinOffset = this.valueToOffset(newMinValue);
newMaxValue = newMinValue + this.dragging.difference;
newMaxOffset = this.valueToOffset(newMaxValue);
}
this.positionTrackingBar(newMinValue, newMaxValue, newMinOffset, newMaxOffset);
},
/**
* Set the new value and offset for the entire bar
*
* @param {number} newMinValue the new minimum value
* @param {number} newMaxValue the new maximum value
* @param {number} newMinOffset the new minimum offset
* @param {number} newMaxOffset the new maximum offset
*/
positionTrackingBar: function(newMinValue, newMaxValue, newMinOffset, newMaxOffset) {
this.scope.rzSliderModel = newMinValue;
this.scope.rzSliderHigh = newMaxValue;
this.updateHandles('rzSliderModel', newMinOffset);
this.updateHandles('rzSliderHigh', newMaxOffset);
this.applyModel();
},
/**
* Set the new value and offset to the current tracking handle
*
* @param {number} newValue new model value
* @param {number} newOffset new offset value
*/
positionTrackingHandle: function(newValue, newOffset) {
var valueChanged = false;
var switched = false;
if (this.range) {
/* This is to check if we need to switch the min and max handles*/
if (this.tracking === 'rzSliderModel' && newValue >= this.scope.rzSliderHigh) {
switched = true;
this.scope[this.tracking] = this.scope.rzSliderHigh;
this.updateHandles(this.tracking, this.maxH.rzsp);
this.updateAriaAttributes();
this.tracking = 'rzSliderHigh';
this.minH.removeClass('rz-active');
this.maxH.addClass('rz-active');
if (this.options.keyboardSupport)
this.focusElement(this.maxH);
valueChanged = true;
} else if (this.tracking === 'rzSliderHigh' && newValue <= this.scope.rzSliderModel) {
switched = true;
this.scope[this.tracking] = this.scope.rzSliderModel;
this.updateHandles(this.tracking, this.minH.rzsp);
this.updateAriaAttributes();
this.tracking = 'rzSliderModel';
this.maxH.removeClass('rz-active');
this.minH.addClass('rz-active');
if (this.options.keyboardSupport)
this.focusElement(this.minH);
valueChanged = true;
}
}
if (this.scope[this.tracking] !== newValue) {
this.scope[this.tracking] = newValue;
this.updateHandles(this.tracking, newOffset);
this.updateAriaAttributes();
valueChanged = true;
}
if (valueChanged) {
this.applyModel();
}
return switched;
},
/**
* Apply the model values using scope.$apply.
* We wrap it with the internalChange flag to avoid the watchers to be called
*/
applyModel: function() {
this.internalChange = true;
this.scope.$apply();
this.callOnChange();
this.internalChange = false;
}
};
return Slider;
}])
.directive('rzslider', ['RzSlider', function(RzSlider) {
'use strict';
return {
restrict: 'E',
scope: {
rzSliderModel: '=?',
rzSliderHigh: '=?',
rzSliderOptions: '=?',
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) {
scope.slider = new RzSlider(scope, elem); //attach on scope so we can test it
}
};
}]);
// IDE assist
/**
* @name ngScope
*
* @property {number} rzSliderModel
* @property {number} rzSliderHigh
* @property {Object} rzSliderOptions
*/
/**
* @name jqLite
*
* @property {number|undefined} rzsp rzslider label position offset
* @property {number|undefined} rzsd rzslider element dimension
* @property {string|undefined} rzsv rzslider label value/text
* @property {Function} css
* @property {Function} text
*/
/**
* @name Event
* @property {Array} touches
* @property {Event} originalEvent
*/
/**
* @name ThrottleOptions
*
* @property {boolean} leading
* @property {boolean} trailing
*/
module.run(['$templateCache', function($templateCache) {
'use strict';
$templateCache.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\" ng-style=barStyle></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 ng-show=showTicks class=rz-ticks><li ng-repeat=\"t in ticks track by $index\" class=tick ng-class=\"{selected: t.selected}\" ng-style=t.style ng-attr-uib-tooltip=\"{{ t.tooltip }}\" ng-attr-tooltip-placement={{t.tooltipPlacement}} ng-attr-tooltip-append-to-body=\"{{ t.tooltip ? true : undefined}}\"><span ng-if=\"t.value != null\" class=tick-value ng-attr-uib-tooltip=\"{{ t.valueTooltip }}\" ng-attr-tooltip-placement={{t.valueTooltipPlacement}}>{{ t.value }}</span></li></ul>"
);
}]);
return module
}));
index.html
View file @ 8ebe42ce
......@@ -2,289 +2,323 @@
<html ng-app="rzSliderDemo">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS Slider</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css"/>
<link rel="stylesheet" href="demo.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS Slider</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css"/>
<link rel="stylesheet" href="lib/highlightjs-default.css"/>
<link rel="stylesheet" href="demo.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
</head>
<body ng-controller="MainCtrl">
<div class="wrapper">
<header>
<h1>AngularJS Slider</h1>
<a href="https://github.com/angular-slider/angularjs-slider"><img
style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
</header>
<header>
<h1>AngularJS Slider</h1>
<a href="https://github.com/angular-slider/angularjs-slider"><img
style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
</header>
<article class="introduction">
<h2>AngularJS slider directive with no external dependencies</h2>
<p>Slider directive implementation for AngularJS, without any dependencies</p>
<p>
<ul>
<li>Mobile friendly</li>
<li>Fast</li>
<li>Well documented</li>
<li>Customizable</li>
<li>Simple to use</li>
<li>Compatibility with jQuery Lite, ie. without full jQuery</li>
</ul>
</p>
<hr>
</article>
<article class="introduction">
<h2>AngularJS slider directive with no external dependencies</h2>
<p>Slider directive implementation for AngularJS, without any dependencies</p>
<p>
<ul>
<li>Mobile friendly</li>
<li>Fast</li>
<li>Well documented</li>
<li>Customizable</li>
<li>Simple to use</li>
<li>Compatibility with jQuery Lite, ie. without full jQuery</li>
</ul>
</p>
<hr>
</article>
<article>
<h2>Simple slider</h2>
Model: <input type="number" ng-model="minSlider.value"/><br/>
<rzslider rz-slider-model="minSlider.value"></rzslider>
</article>
<article>
<h2>Simple slider</h2>
Model: <input type="number" ng-model="minSlider.value"/><br/>
<rzslider rz-slider-model="minSlider.value"></rzslider>
<show-code js-file="minSlider" html-file="minSlider"></show-code>
</article>
<article>
<h2>Range slider</h2>
Min Value: <input type="number" ng-model="minRangeSlider.minValue"/><br/>
Max Value: <input type="number" ng-model="minRangeSlider.maxValue"/><br/>
<rzslider
rz-slider-model="minRangeSlider.minValue"
rz-slider-high="minRangeSlider.maxValue"
rz-slider-options="minRangeSlider.options"
></rzslider>
</article>
<article>
<h2>Range slider</h2>
Min Value: <input type="number" ng-model="minRangeSlider.minValue"/><br/>
Max Value: <input type="number" ng-model="minRangeSlider.maxValue"/><br/>
<rzslider
rz-slider-model="minRangeSlider.minValue"
rz-slider-high="minRangeSlider.maxValue"
rz-slider-options="minRangeSlider.options"
></rzslider>
<show-code js-file="minRangeSlider" html-file="rangeSlider"></show-code>
</article>
<article>
<h2>Slider with visible selection bar</h2>
<rzslider
rz-slider-model="slider_visible_bar.value"
rz-slider-options="slider_visible_bar.options"
></rzslider>
</article>
<article>
<h2>Slider with visible selection bar</h2>
<rzslider
rz-slider-model="slider_visible_bar.value"
rz-slider-options="slider_visible_bar.options"
></rzslider>
<show-code js-file="slider_visible_bar" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Slider with dynamic selection bar colors</h2>
<rzslider
rz-slider-model="color_slider_bar.value"
rz-slider-options="color_slider_bar.options"
></rzslider>
</article>
<article>
<h2>Slider with dynamic selection bar colors</h2>
<rzslider
rz-slider-model="color_slider_bar.value"
rz-slider-options="color_slider_bar.options"
></rzslider>
<show-code js-file="color_slider_bar" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Slider with custom floor/ceil/step</h2>
<rzslider
rz-slider-model="slider_floor_ceil.value"
rz-slider-options="slider_floor_ceil.options"
></rzslider>
</article>
<article>
<h2>Slider with custom floor/ceil/step</h2>
<rzslider
rz-slider-model="slider_floor_ceil.value"
rz-slider-options="slider_floor_ceil.options"
></rzslider>
<show-code js-file="slider_floor_ceil" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Slider with callbacks on start, change and end</h2>
<p>Value linked on start: {{ otherData.start }}</p>
<p>Value linked on change: {{ otherData.change }}</p>
<p>Value linked on end: {{ otherData.end }}</p>
<article>
<h2>Slider with callbacks on start, change and end</h2>
<p>Value linked on start: {{ otherData.start }}</p>
<p>Value linked on change: {{ otherData.change }}</p>
<p>Value linked on end: {{ otherData.end }}</p>
<rzslider
rz-slider-model="slider_callbacks.value"
rz-slider-options="slider_callbacks.options"
></rzslider>
</article>
<rzslider
rz-slider-model="slider_callbacks.value"
rz-slider-options="slider_callbacks.options"
></rzslider>
<show-code js-file="slider_callbacks" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Slider with custom display function</h2>
<rzslider
rz-slider-model="slider_translate.minValue"
rz-slider-high="slider_translate.maxValue"
rz-slider-options="slider_translate.options"
></rzslider>
</article>
<article>
<h2>Slider with custom display function</h2>
<rzslider
rz-slider-model="slider_translate.minValue"
rz-slider-high="slider_translate.maxValue"
rz-slider-options="slider_translate.options"
></rzslider>
<show-code js-file="slider_translate" html-file="rangeSlider"></show-code>
</article>
<article>
<h2>Slider with Alphabet</h2>
<rzslider
rz-slider-model="slider_alphabet.value"
rz-slider-options="slider_alphabet.options"
></rzslider>
</article>
<article>
<h2>Slider with Alphabet</h2>
<rzslider
rz-slider-model="slider_alphabet.value"
rz-slider-options="slider_alphabet.options"
></rzslider>
<show-code js-file="slider_alphabet" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Slider with ticks</h2>
<rzslider
rz-slider-model="slider_ticks.value"
rz-slider-options="slider_ticks.options"
></rzslider>
</article>
<article>
<h2>Slider with ticks</h2>
<rzslider
rz-slider-model="slider_ticks.value"
rz-slider-options="slider_ticks.options"
></rzslider>
<show-code js-file="slider_ticks" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Slider with ticks and tooltips</h2>
<rzslider
rz-slider-model="slider_ticks_tooltip.value"
rz-slider-options="slider_ticks_tooltip.options"
></rzslider>
</article>
<article>
<h2>Slider with ticks and tooltips</h2>
<rzslider
rz-slider-model="slider_ticks_tooltip.value"
rz-slider-options="slider_ticks_tooltip.options"
></rzslider>
<show-code js-file="slider_ticks_tooltip" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Slider with ticks and values (and tooltips)</h2>
<rzslider
rz-slider-model="slider_ticks_values.value"
rz-slider-options="slider_ticks_values.options"
></rzslider>
</article>
<article>
<h2>Slider with ticks and values (and tooltips)</h2>
<rzslider
rz-slider-model="slider_ticks_values.value"
rz-slider-options="slider_ticks_values.options"
></rzslider>
<show-code js-file="slider_ticks_values" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Range slider with ticks and values</h2>
<rzslider
rz-slider-model="range_slider_ticks_values.minValue"
rz-slider-high="range_slider_ticks_values.maxValue"
rz-slider-options="range_slider_ticks_values.options"
></rzslider>
</article>
<article>
<h2>Range slider with ticks and values</h2>
<rzslider
rz-slider-model="range_slider_ticks_values.minValue"
rz-slider-high="range_slider_ticks_values.maxValue"
rz-slider-options="range_slider_ticks_values.options"
></rzslider>
<show-code js-file="range_slider_ticks_values" html-file="rangeSlider"></show-code>
</article>
<article>
<h2>Slider with draggable range</h2>
<rzslider
rz-slider-model="slider_draggable_range.minValue"
rz-slider-high="slider_draggable_range.maxValue"
rz-slider-options="slider_draggable_range.options"
></rzslider>
</article>
<article>
<h2>Slider with draggable range</h2>
<rzslider
rz-slider-model="slider_draggable_range.minValue"
rz-slider-high="slider_draggable_range.maxValue"
rz-slider-options="slider_draggable_range.options"
></rzslider>
<show-code js-file="slider_draggable_range" html-file="rangeSlider"></show-code>
</article>
<article>
<h2>Slider with draggable range only</h2>
<rzslider
rz-slider-model="slider_draggable_range_only.minValue"
rz-slider-high="slider_draggable_range_only.maxValue"
rz-slider-options="slider_draggable_range_only.options"
></rzslider>
</article>
<article>
<h2>Slider with draggable range only</h2>
<rzslider
rz-slider-model="slider_draggable_range_only.minValue"
rz-slider-high="slider_draggable_range_only.maxValue"
rz-slider-options="slider_draggable_range_only.options"
></rzslider>
<show-code js-file="slider_draggable_range_only" html-file="rangeSlider"></show-code>
</article>
<article>
<h2>Vertical sliders</h2>
<div class="row vertical-sliders" style="margin: 20px;">
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider1.value"
rz-slider-options="verticalSlider1.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider2.minValue" rz-slider-high="verticalSlider2.maxValue"
rz-slider-options="verticalSlider2.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider3.value"
rz-slider-options="verticalSlider3.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider4.minValue" rz-slider-high="verticalSlider4.maxValue"
rz-slider-options="verticalSlider4.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider5.value"
rz-slider-options="verticalSlider5.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider6.value"
rz-slider-options="verticalSlider6.options"></rzslider>
</div>
</div>
</article>
<article>
<h2>Vertical sliders</h2>
<div class="row vertical-sliders" style="margin: 20px;">
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider1.value"
rz-slider-options="verticalSlider1.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider2.minValue" rz-slider-high="verticalSlider2.maxValue"
rz-slider-options="verticalSlider2.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider3.value"
rz-slider-options="verticalSlider3.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider4.minValue" rz-slider-high="verticalSlider4.maxValue"
rz-slider-options="verticalSlider4.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider5.value"
rz-slider-options="verticalSlider5.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider6.value"
rz-slider-options="verticalSlider6.options"></rzslider>
</div>
</div>
<show-code js-file="vertical_sliders" html-file="vertical_sliders"></show-code>
</article>
<article>
<h2>Disabled slider</h2>
<label>Disabled <input type="checkbox" ng-model="disabled_slider.options.disabled"></label>
<rzslider
rz-slider-model="disabled_slider.value"
rz-slider-options="disabled_slider.options"
></rzslider>
</article>
<article>
<h2>Disabled slider</h2>
<label>Disabled <input type="checkbox" ng-model="disabled_slider.options.disabled"></label>
<rzslider
rz-slider-model="disabled_slider.value"
rz-slider-options="disabled_slider.options"
></rzslider>
<show-code js-file="disabled_slider" html-file="disabled_slider"></show-code>
</article>
<article>
<h2>Read-only slider</h2>
<label>Read-only <input type="checkbox" ng-model="read_only_slider.options.readOnly"></label>
<rzslider
rz-slider-model="read_only_slider.value"
rz-slider-options="read_only_slider.options"
></rzslider>
</article>
<article>
<h2>Read-only slider</h2>
<label>Read-only <input type="checkbox" ng-model="read_only_slider.options.readOnly"></label>
<rzslider
rz-slider-model="read_only_slider.value"
rz-slider-options="read_only_slider.options"
></rzslider>
<show-code js-file="read_only_slider" html-file="read_only_slider"></show-code>
</article>
<article>
<h2>Toggle slider example</h2>
<button ng-click="toggle()">{{ visible ? 'Hide' : 'Show' }}</button>
<br/>
<div ng-show="visible">
<rzslider
rz-slider-model="slider_toggle.value"
rz-slider-options="slider_toggle.options"></rzslider>
</div>
</article>
<article>
<h2>Toggle slider example</h2>
<button ng-click="toggle()">{{ visible ? 'Hide' : 'Show' }}</button>
<br/>
<div ng-show="visible">
<rzslider
rz-slider-model="slider_toggle.value"
rz-slider-options="slider_toggle.options"></rzslider>
</div>
<show-code js-file="slider_toggle" html-file="slider_toggle"></show-code>
</article>
<article>
<h2>Sliders inside a modal</h2>
Normal slider value: {{percentages.normal.low}}%
</br>
Range slider values: {{percentages.range.low}}% and {{percentages.range.high}}%
</br>
<button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button>
</article>
<article>
<h2>Sliders inside a modal</h2>
Normal slider value: {{percentages.normal.low}}%
</br>
Range slider values: {{percentages.range.low}}% and {{percentages.range.high}}%
</br>
<button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button>
<article>
<h2>Sliders inside tabs</h2>
<p>Price 1: {{tabSliders.slider1.value}}</p>
<p>Price 2: {{tabSliders.slider2.value}}</p>
<tabset>
<tab heading="Slider 1" select="refreshSlider()">
<rzslider rz-slider-model="tabSliders.slider1.value"></rzslider>
</tab>
<tab heading="Slider 2" select="refreshSlider()">
<rzslider rz-slider-model="tabSliders.slider2.value"></rzslider>
</tab>
</tabset>
</article>
<tabset class="code">
<tab heading="HTML">
<div hljs hljs-include="'snippets/slider_modal.html'" hljs-language="html"></div>
</tab>
<tab heading="JS">
<div hljs hljs-include="'snippets/slider_modal.js'" hljs-language="js"></div>
</tab>
<tab heading="sliderModal.html">
<div hljs hljs-include="'sliderModal.html'" hljs-language="html"></div>
</tab>
</tabset>
</article>
<article>
<h2>Slider with all options demo</h2>
<div class="row all-options">
<div class="col-md-4">
<label class="field-title">Min Value: </label><input type="number"
ng-model="slider_all_options.minValue"/><br/>
<label class="field-title"><input type="checkbox" ng-click="toggleHighValue()"> Max Value: </label>
<input type="number" ng-model="slider_all_options.maxValue"
ng-disabled="slider_all_options.maxValue == null"/><br/>
<label class="field-title">Floor: </label><input type="number"
ng-model="slider_all_options.options.floor"/><br/>
<label class="field-title">Ceil: </label><input type="number"
ng-model="slider_all_options.options.ceil"/><br/>
</div>
<div class="col-md-4">
<label class="field-title">Step: </label><input type="number"
ng-model="slider_all_options.options.step"/><br/>
<label class="field-title">Precision: </label><input type="number"
ng-model="slider_all_options.options.precision"/><br/>
<label>Hide limits <input type="checkbox" ng-model="slider_all_options.options.hideLimitLabels"></label><br/>
<label>Draggable range <input type="checkbox"
ng-model="slider_all_options.options.draggableRange"></label>
</div>
<div class="col-md-4">
<label>Show ticks <input type="checkbox" ng-model="slider_all_options.options.showTicks"></label><br/>
<label>Show ticks values <input type="checkbox"
ng-model="slider_all_options.options.showTicksValues"></label><br/>
<label>Disabled <input type="checkbox" ng-model="slider_all_options.options.disabled"></label><br/>
<label>Read-Only <input type="checkbox" ng-model="slider_all_options.options.readOnly"></label>
</div>
</div>
<rzslider
rz-slider-model="slider_all_options.minValue"
rz-slider-high="slider_all_options.maxValue"
rz-slider-options="slider_all_options.options"
></rzslider>
</article>
<article>
<h2>Sliders inside tabs</h2>
<p>Price 1: {{tabSliders.slider1.value}}</p>
<p>Price 2: {{tabSliders.slider2.value}}</p>
<tabset>
<tab heading="Slider 1" select="refreshSlider()">
<rzslider rz-slider-model="tabSliders.slider1.value"></rzslider>
</tab>
<tab heading="Slider 2" select="refreshSlider()">
<rzslider rz-slider-model="tabSliders.slider2.value"></rzslider>
</tab>
</tabset>
<show-code js-file="tabSliders" html-file="tabSliders"></show-code>
</article>
<article>
<h2>Slider with all options demo</h2>
<div class="row all-options">
<div class="col-md-4">
<label class="field-title">Min Value: </label><input type="number"
ng-model="slider_all_options.minValue"/><br/>
<label class="field-title"><input type="checkbox" ng-click="toggleHighValue()"> Max Value: </label>
<input type="number" ng-model="slider_all_options.maxValue"
ng-disabled="slider_all_options.maxValue == null"/><br/>
<label class="field-title">Floor: </label><input type="number"
ng-model="slider_all_options.options.floor"/><br/>
<label class="field-title">Ceil: </label><input type="number"
ng-model="slider_all_options.options.ceil"/><br/>
</div>
<div class="col-md-4">
<label class="field-title">Step: </label><input type="number"
ng-model="slider_all_options.options.step"/><br/>
<label class="field-title">Precision: </label><input type="number"
ng-model="slider_all_options.options.precision"/><br/>
<label>Hide limits <input type="checkbox" ng-model="slider_all_options.options.hideLimitLabels"></label><br/>
<label>Draggable range <input type="checkbox"
ng-model="slider_all_options.options.draggableRange"></label>
</div>
<div class="col-md-4">
<label>Show ticks <input type="checkbox" ng-model="slider_all_options.options.showTicks"></label><br/>
<label>Show ticks values <input type="checkbox"
ng-model="slider_all_options.options.showTicksValues"></label><br/>
<label>Disabled <input type="checkbox" ng-model="slider_all_options.options.disabled"></label><br/>
<label>Read-Only <input type="checkbox" ng-model="slider_all_options.options.readOnly"></label>
</div>
</div>
<rzslider
rz-slider-model="slider_all_options.minValue"
rz-slider-high="slider_all_options.maxValue"
rz-slider-options="slider_all_options.options"
></rzslider>
</article>
</div>
</body>
<script src="angular.min.js"></script>
<script src="lib/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script src="lib/highlight.min.js"></script>
<script src="lib/angular-highlightjs.min.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.min.js"></script>
<script src="demo.js"></script>
</html>
index2.html deleted 100644 → 0
View file @ 10998a67
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS Touch Slider</title>
<link rel="stylesheet" href="demo.css" />
<link rel="stylesheet" href="rzslider.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
</head>
<body ng-controller="MainCtrl">
<div class="wrapper">
<header>
<h1>AngularJS Touch Slider</h1>
</header>
<article>
<h2>Min/max slider example</h2>
<rzslider
rz-slider-floor="priceSlider.floor"
rz-slider-ceil="priceSlider.ceil"
rz-slider-model="priceSlider.min"
rz-slider-high="priceSlider.max"
rz-slider-step="1"></rzslider>
</article>
<article>
<h2>Currency slider example</h2>
<rzslider
rz-slider-floor="0"
rz-slider-ceil="450"
rz-slider-model="priceSlider2"
rz-slider-translate="translate"></rzslider>
</article>
<article>
<h2>One value slider example</h2>
<rzslider rz-slider-model="priceSlider3"
rz-slider-floor="50"
rz-slider-ceil="450"
rz-slider-always-show-bar="true"></rzslider>
</article>
<article>
<h2>Alphabet slider example</h2>
<rzslider
rz-slider-floor="0"
rz-slider-ceil="letterMax"
rz-slider-model="letter"
rz-slider-translate="alphabetTranslate"></rzslider>
</article>
</div>
</body>
<script src="angular.min.js"></script>
<script src="rzslider.js"></script>
<script>
var app = angular.module('plunker', ['rzModule']);
app.controller('MainCtrl', function($scope)
{
$scope.priceSlider = {
min: 100,
max: 400,
ceil: 501,
floor: 0
};
$scope.priceSlider2 = 150;
$scope.priceSlider3 = 250;
$scope.translate = function(value)
{
return '$' + value;
};
var alphabetArray = 'abcdefghijklmnopqrstuvwxyz'.split('');
$scope.letter = 5;
$scope.letterMax = alphabetArray.length - 1;
$scope.alphabetTranslate = function(value)
{
return alphabetArray[value].toUpperCase();
};
});
</script>
</html>
lib/angular-highlightjs.min.js 0 → 100644
View file @ 8ebe42ce
/*! angular-highlightjs
version: 0.5.1
build date: 2015-11-08
author: Chih-Hsuan Fan
https://github.com/pc035860/angular-highlightjs.git */
!function(a,b){"object"==typeof exports||"object"==typeof module&&module.exports?module.exports=b(require("angular"),require("highlight.js")):"function"==typeof define&&define.amd?define(["angular","hljs"],b):a.returnExports=b(a.angular,a.hljs)}(this,function(a,b){function c(b){var c=!0;return a.forEach(["source","include"],function(a){b[a]&&(c=!1)}),c}var d=a.module("hljs",[]);d.provider("hljsService",function(){var c={};return{setOptions:function(b){a.extend(c,b)},getOptions:function(){return a.copy(c)},$get:function(){return(b.configure||a.noop)(c),b}}}),d.factory("hljsCache",["$cacheFactory",function(a){return a("hljsCache")}]),d.controller("HljsCtrl",["hljsCache","hljsService","$interpolate","$window","$log",function(b,c,d,e,f){function g(a,b,c){var d;return function(){var f=this,g=arguments,h=function(){d=null,c||a.apply(f,g)},i=c&&!d;e.clearTimeout(d),d=e.setTimeout(h,b),i&&a.apply(f,g)}}function h(a,b){var c=b?"\\\\$&":"\\$&";return a.replace(/[-[\]{}()*+?.,\\^$|#\s]/g,c)}function i(a){for(var b,c=[],d=new RegExp(r,"g"),e="",f=0;null!==(b=d.exec(a));)e+=a.substring(f,b.index)+s,f=b.index+b[0].length,c.push(b[0]);return e+=a.substr(f),{code:e,tokens:c}}function j(a,b){for(var c,d=new RegExp(s,"g"),e="",f=0;null!==(c=d.exec(a));)e+=a.substring(f,c.index)+b.shift(),f=c.index+c[0].length;return e+=a.substr(f)}var k=this,l=null,m=null,n=null,o=!1,p=null,q=null,r=h(d.startSymbol())+"((.|\\s)+?)"+h(d.endSymbol()),s="∫";k.init=function(a){l=a},k.setInterpolateScope=function(a){o=a,n&&k.highlight(n)},k.setLanguage=function(a){m=a,n&&k.highlight(n)},k.highlightCallback=function(a){q=a},k._highlight=function(e){if(l){var f,g,h;if(n=e,o&&(h=i(e),e=h.code),m?(g=k._cacheKey(m,!!o,e),f=b.get(g),f||(f=c.highlight(m,c.fixMarkup(e),!0),b.put(g,f))):(g=k._cacheKey(!!o,e),f=b.get(g),f||(f=c.highlightAuto(c.fixMarkup(e)),b.put(g,f))),e=f.value,o){(p||a.noop)(),h&&(e=j(e,h.tokens));var r=d(e);p=o.$watch(r,function(a,b){a!==b&&l.html(a)}),l.html(r(o))}else l.html(e);l.addClass(f.language),null!==q&&a.isFunction(q)&&q()}},k.highlight=g(k._highlight,17),k.clear=function(){l&&(n=null,l.text(""))},k.release=function(){l=null,o=null,(p||a.noop)(),p=null},k._cacheKey=function(){var a=Array.prototype.slice.call(arguments),b="!angular-highlightjs!";return a.join(b)}}]);var e,f,g,h,i;return e=["$parse",function(b){return{restrict:"EA",controller:"HljsCtrl",compile:function(d,e,f){var g=d[0].innerHTML.replace(/^(\r\n|\r|\n)/m,""),h=d[0].textContent.replace(/^(\r\n|\r|\n)/m,"");return d.html('<pre><code class="hljs"></code></pre>'),function(d,e,f,i){var j;if(a.isDefined(f.escape)?j=b(f.escape):a.isDefined(f.noEscape)&&(j=b("false")),i.init(e.find("code")),f.onhighlight&&i.highlightCallback(function(){d.$eval(f.onhighlight)}),(g||h)&&c(f)){var k;k=j&&!j(d)?h:g,i.highlight(k)}d.$on("$destroy",function(){i.release()})}}}}],g=function(b){return function(){return{require:"?hljs",restrict:"A",link:function(c,d,e,f){f&&e.$observe(b,function(b){a.isDefined(b)&&f.setLanguage(b)})}}}},f=function(a){return function(){return{require:"?hljs",restrict:"A",link:function(b,c,d,e){e&&b.$watch(d[a],function(a,c){(a||a!==c)&&e.setInterpolateScope(a?b:null)})}}}},h=function(a){return function(){return{require:"?hljs",restrict:"A",link:function(b,c,d,e){e&&b.$watch(d[a],function(a,b){a?e.highlight(a):e.clear()})}}}},i=function(b){return["$http","$templateCache","$q",function(c,d,e){return{require:"?hljs",restrict:"A",compile:function(f,g,h){var i=g[b];return function(b,f,g,h){var j=0;h&&b.$watch(i,function(b){var f=++j;if(b&&a.isString(b)){var g,i;g=d.get(b),g||(i=e.defer(),c.get(b,{cache:d,transformResponse:function(a,b){return a}}).success(function(a){f===j&&i.resolve(a)}).error(function(){f===j&&h.clear(),i.resolve()}),g=i.promise),e.when(g).then(function(b){b&&(a.isArray(b)?b=b[1]:a.isObject(b)&&(b=b.data),b=b.replace(/^(\r\n|\r|\n)/m,""),h.highlight(b))})}else h.clear()})}}}}]},function(b){b.directive("hljs",e),a.forEach(["interpolate","hljsInterpolate","compile","hljsCompile"],function(a){b.directive(a,f(a))}),a.forEach(["language","hljsLanguage"],function(a){b.directive(a,g(a))}),a.forEach(["source","hljsSource"],function(a){b.directive(a,h(a))}),a.forEach(["include","hljsInclude"],function(a){b.directive(a,i(a))})}(d),"hljs"});
\ No newline at end of file
lib/highlight.min.js 0 → 100644
View file @ 8ebe42ce
/*! highlight.js v9.1.0 | BSD3 License | git.io/hljslicense */
!function(e){"undefined"!=typeof exports?e(exports):(self.hljs=e({}),"function"==typeof define&&define.amd&&define("hljs",[],function(){return self.hljs}))}(function(e){function n(e){return e.replace(/&/gm,"&amp;").replace(/</gm,"&lt;").replace(/>/gm,"&gt;")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0==t.index}function a(e){return/^(no-?highlight|plain|text)$/i.test(e)}function i(e){var n,t,r,i=e.className+" ";if(i+=e.parentNode?e.parentNode.className:"",t=/\blang(?:uage)?-([\w-]+)\b/i.exec(i))return E(t[1])?t[1]:"no-highlight";for(i=i.split(/\s+/),n=0,r=i.length;r>n;n++)if(E(i[n])||a(i[n]))return i[n]}function o(e,n){var t,r={};for(t in e)r[t]=e[t];if(n)for(t in n)r[t]=n[t];return r}function u(e){var n=[];return function r(e,a){for(var i=e.firstChild;i;i=i.nextSibling)3==i.nodeType?a+=i.nodeValue.length:1==i.nodeType&&(n.push({event:"start",offset:a,node:i}),a=r(i,a),t(i).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:i}));return a}(e,0),n}function c(e,r,a){function i(){return e.length&&r.length?e[0].offset!=r[0].offset?e[0].offset<r[0].offset?e:r:"start"==r[0].event?e:r:e.length?e:r}function o(e){function r(e){return" "+e.nodeName+'="'+n(e.value)+'"'}l+="<"+t(e)+Array.prototype.map.call(e.attributes,r).join("")+">"}function u(e){l+="</"+t(e)+">"}function c(e){("start"==e.event?o:u)(e.node)}for(var s=0,l="",f=[];e.length||r.length;){var g=i();if(l+=n(a.substr(s,g[0].offset-s)),s=g[0].offset,g==e){f.reverse().forEach(u);do c(g.splice(0,1)[0]),g=i();while(g==e&&g.length&&g[0].offset==s);f.reverse().forEach(o)}else"start"==g[0].event?f.push(g[0].node):f.pop(),c(g.splice(0,1)[0])}return l+n(a.substr(s))}function s(e){function n(e){return e&&e.source||e}function t(t,r){return new RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var u={},c=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");u[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?c("keyword",a.k):Object.keys(a.k).forEach(function(e){c(e,a.k[e])}),a.k=u}a.lR=t(a.l||/\b\w+\b/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),void 0===a.r&&(a.r=1),a.c||(a.c=[]);var s=[];a.c.forEach(function(e){e.v?e.v.forEach(function(n){s.push(o(e,n))}):s.push("self"==e?a:e)}),a.c=s,a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var l=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=l.length?t(l.join("|"),!0):{exec:function(){return null}}}}r(e)}function l(e,t,a,i){function o(e,n){for(var t=0;t<n.c.length;t++)if(r(n.c[t].bR,e))return n.c[t]}function u(e,n){if(r(e.eR,n)){for(;e.endsParent&&e.parent;)e=e.parent;return e}return e.eW?u(e.parent,n):void 0}function c(e,n){return!a&&r(n.iR,e)}function g(e,n){var t=N.cI?n[0].toLowerCase():n[0];return e.k.hasOwnProperty(t)&&e.k[t]}function h(e,n,t,r){var a=r?"":x.classPrefix,i='<span class="'+a,o=t?"":"</span>";return i+=e+'">',i+n+o}function p(){if(!L.k)return n(M);var e="",t=0;L.lR.lastIndex=0;for(var r=L.lR.exec(M);r;){e+=n(M.substr(t,r.index-t));var a=g(L,r);a?(B+=a[1],e+=h(a[0],n(r[0]))):e+=n(r[0]),t=L.lR.lastIndex,r=L.lR.exec(M)}return e+n(M.substr(t))}function d(){var e="string"==typeof L.sL;if(e&&!R[L.sL])return n(M);var t=e?l(L.sL,M,!0,y[L.sL]):f(M,L.sL.length?L.sL:void 0);return L.r>0&&(B+=t.r),e&&(y[L.sL]=t.top),h(t.language,t.value,!1,!0)}function b(){return void 0!==L.sL?d():p()}function v(e,t){var r=e.cN?h(e.cN,"",!0):"";e.rB?(k+=r,M=""):e.eB?(k+=n(t)+r,M=""):(k+=r,M=t),L=Object.create(e,{parent:{value:L}})}function m(e,t){if(M+=e,void 0===t)return k+=b(),0;var r=o(t,L);if(r)return k+=b(),v(r,t),r.rB?0:t.length;var a=u(L,t);if(a){var i=L;i.rE||i.eE||(M+=t),k+=b();do L.cN&&(k+="</span>"),B+=L.r,L=L.parent;while(L!=a.parent);return i.eE&&(k+=n(t)),M="",a.starts&&v(a.starts,""),i.rE?0:t.length}if(c(t,L))throw new Error('Illegal lexeme "'+t+'" for mode "'+(L.cN||"<unnamed>")+'"');return M+=t,t.length||1}var N=E(e);if(!N)throw new Error('Unknown language: "'+e+'"');s(N);var w,L=i||N,y={},k="";for(w=L;w!=N;w=w.parent)w.cN&&(k=h(w.cN,"",!0)+k);var M="",B=0;try{for(var C,j,I=0;;){if(L.t.lastIndex=I,C=L.t.exec(t),!C)break;j=m(t.substr(I,C.index-I),C[0]),I=C.index+j}for(m(t.substr(I)),w=L;w.parent;w=w.parent)w.cN&&(k+="</span>");return{r:B,value:k,language:e,top:L}}catch(O){if(-1!=O.message.indexOf("Illegal"))return{r:0,value:n(t)};throw O}}function f(e,t){t=t||x.languages||Object.keys(R);var r={r:0,value:n(e)},a=r;return t.forEach(function(n){if(E(n)){var t=l(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}}),a.language&&(r.second_best=a),r}function g(e){return x.tabReplace&&(e=e.replace(/^((<[^>]+>|\t)+)/gm,function(e,n){return n.replace(/\t/g,x.tabReplace)})),x.useBR&&(e=e.replace(/\n/g,"<br>")),e}function h(e,n,t){var r=n?w[n]:t,a=[e.trim()];return e.match(/\bhljs\b/)||a.push("hljs"),-1===e.indexOf(r)&&a.push(r),a.join(" ").trim()}function p(e){var n=i(e);if(!a(n)){var t;x.useBR?(t=document.createElementNS("http://www.w3.org/1999/xhtml","div"),t.innerHTML=e.innerHTML.replace(/\n/g,"").replace(/<br[ \/]*>/g,"\n")):t=e;var r=t.textContent,o=n?l(n,r,!0):f(r),s=u(t);if(s.length){var p=document.createElementNS("http://www.w3.org/1999/xhtml","div");p.innerHTML=o.value,o.value=c(s,u(p),r)}o.value=g(o.value),e.innerHTML=o.value,e.className=h(e.className,n,o.language),e.result={language:o.language,re:o.r},o.second_best&&(e.second_best={language:o.second_best.language,re:o.second_best.r})}}function d(e){x=o(x,e)}function b(){if(!b.called){b.called=!0;var e=document.querySelectorAll("pre code");Array.prototype.forEach.call(e,p)}}function v(){addEventListener("DOMContentLoaded",b,!1),addEventListener("load",b,!1)}function m(n,t){var r=R[n]=t(e);r.aliases&&r.aliases.forEach(function(e){w[e]=n})}function N(){return Object.keys(R)}function E(e){return e=(e||"").toLowerCase(),R[e]||R[w[e]]}var x={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0},R={},w={};return e.highlight=l,e.highlightAuto=f,e.fixMarkup=g,e.highlightBlock=p,e.configure=d,e.initHighlighting=b,e.initHighlightingOnLoad=v,e.registerLanguage=m,e.listLanguages=N,e.getLanguage=E,e.inherit=o,e.IR="[a-zA-Z]\\w*",e.UIR="[a-zA-Z_]\\w*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|like)\b/},e.C=function(n,t,r){var a=e.inherit({cN:"comment",b:n,e:t,c:[]},r||{});return a.c.push(e.PWM),a.c.push({cN:"doctag",b:"(?:TODO|FIXME|NOTE|BUG|XXX):",r:0}),a},e.CLCM=e.C("//","$"),e.CBCM=e.C("/\\*","\\*/"),e.HCM=e.C("#","$"),e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e});hljs.registerLanguage("javascript",function(e){return{aliases:["js"],k:{keyword:"in of if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const export super debugger as async await import from as",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document Symbol Set Map WeakSet WeakMap Proxy Reflect Promise"},c:[{cN:"meta",r:10,b:/^\s*['"]use (strict|asm)['"]/},{cN:"meta",b:/^#!/,e:/$/},e.ASM,e.QSM,{cN:"string",b:"`",e:"`",c:[e.BE,{cN:"subst",b:"\\$\\{",e:"\\}"}]},e.CLCM,e.CBCM,{cN:"number",v:[{b:"\\b(0[bB][01]+)"},{b:"\\b(0[oO][0-7]+)"},{b:e.CNR}],r:0},{b:"("+e.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[e.CLCM,e.CBCM,e.RM,{b:/</,e:/>\s*[);\]]/,r:0,sL:"xml"}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[e.inherit(e.TM,{b:/[A-Za-z$_][0-9A-Za-z$_]*/}),{cN:"params",b:/\(/,e:/\)/,eB:!0,eE:!0,c:[e.CLCM,e.CBCM]}],i:/\[|%/},{b:/\$[(.]/},{b:"\\."+e.IR,r:0},{cN:"class",bK:"class",e:/[{;=]/,eE:!0,i:/[:"\[\]]/,c:[{bK:"extends"},e.UTM]},{bK:"constructor",e:/\{/,eE:!0}],i:/#(?!!)/}});hljs.registerLanguage("css",function(e){var c="[a-zA-Z-][a-zA-Z0-9_-]*",t={b:/[A-Z\_\.\-]+\s*:/,rB:!0,e:";",eW:!0,c:[{cN:"attribute",b:/\S/,e:":",eE:!0,starts:{eW:!0,eE:!0,c:[{b:/[\w-]+\s*\(/,rB:!0,c:[{cN:"built_in",b:/[\w-]+/}]},e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"number",b:"#[0-9A-Fa-f]+"},{cN:"meta",b:"!important"}]}}]};return{cI:!0,i:/[=\/|'\$]/,c:[e.CBCM,{cN:"selector-id",b:/#[A-Za-z0-9_-]+/},{cN:"selector-class",b:/\.[A-Za-z0-9_-]+/},{cN:"selector-attr",b:/\[/,e:/\]/,i:"$"},{cN:"selector-pseudo",b:/:(:)?[a-zA-Z0-9\_\-\+\(\)"'.]+/},{b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{b:"@",e:"[{;]",c:[{cN:"keyword",b:/\S+/},{b:/\s/,eW:!0,eE:!0,r:0,c:[e.ASM,e.QSM,e.CSSNM]}]},{cN:"selector-tag",b:c,r:0},{b:"{",e:"}",i:/\S/,c:[e.CBCM,t]}]}});hljs.registerLanguage("xml",function(s){var t="[A-Za-z0-9\\._:-]+",e={b:/<\?(php)?(?!\w)/,e:/\?>/,sL:"php"},r={eW:!0,i:/</,r:0,c:[e,{cN:"attr",b:t,r:0},{b:"=",r:0,c:[{cN:"string",c:[e],v:[{b:/"/,e:/"/},{b:/'/,e:/'/},{b:/[^\s\/>]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xsl","plist"],cI:!0,c:[{cN:"meta",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},s.C("<!--","-->",{r:10}),{b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"<style(?=\\s|>|$)",e:">",k:{name:"style"},c:[r],starts:{e:"</style>",rE:!0,sL:["css","xml"]}},{cN:"tag",b:"<script(?=\\s|>|$)",e:">",k:{name:"script"},c:[r],starts:{e:"</script>",rE:!0,sL:["actionscript","javascript","handlebars","xml"]}},e,{cN:"meta",b:/<\?\w+/,e:/\?>/,r:10},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"name",b:/[^\/><\s]+/,r:0},r]}]}});
\ No newline at end of file
lib/highlightjs-default.css 0 → 100644
View file @ 8ebe42ce
/*
Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #F0F0F0;
}
.hljs,
.hljs-subst {
color: #444;
}
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
font-weight: bold;
}
.hljs-built_in,
.hljs-literal,
.hljs-bullet,
.hljs-code,
.hljs-addition {
color: #1F811F;
}
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #BC6060;
}
.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
color: #880000;
}
.hljs-title,
.hljs-section {
color: #880000;
font-weight: bold;
}
.hljs-comment {
color: #888888;
}
.hljs-meta {
color: #2B6EA1;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
rzSliderTpl.html deleted 100644 → 0
View file @ 10998a67
<span class="rz-bar"></span> <!-- 0 The slider bar -->
<span class="rz-bar rz-selection"></span> <!-- 1 Highlight between two handles -->
<span class="rz-pointer"></span> <!-- 2 Left slider handle -->
<span class="rz-pointer"></span> <!-- 3 Right slider handle -->
<span class="rz-bubble rz-limit"></span> <!-- 4 Floor label -->
<span class="rz-bubble rz-limit"></span> <!-- 5 Ceiling label -->
<span class="rz-bubble"></span> <!-- 6 Label above left slider handle -->
<span class="rz-bubble"></span> <!-- 7 Label above right slider handle -->
<span class="rz-bubble"></span>
\ No newline at end of file
show-code.html 0 → 100644
View file @ 8ebe42ce
<tabset class="code">
<tab heading="HTML">
<div hljs hljs-include="'snippets/'+ htmlFile + '.html'" hljs-language="html"></div>
</tab>
<tab heading="JS">
<div hljs hljs-include="'snippets/'+ jsFile + '.js'" hljs-language="js"></div>
</tab>
</tabset>
\ No newline at end of file
snippets/color_slider_bar.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
value: 12,
options: {
showSelectionBar: true,
getSelectionBarColor: function(value) {
if (value <= 3)
return 'red';
if (value <= 6)
return 'orange';
if (value <= 9)
return 'yellow';
return '#2AE02A';
}
}
};
\ No newline at end of file
snippets/disabled_slider.html 0 → 100644
View file @ 8ebe42ce
<label>Disabled <input type="checkbox" ng-model="slider.options.disabled"></label>
<rzslider rz-slider-model="slider.value"
rz-slider-options="slider.options"></rzslider>
snippets/disabled_slider.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
value: 50,
options: {
floor: 0,
ceil: 100,
disabled: true
}
};
snippets/minRangeSlider.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
minValue: 10,
maxValue: 90,
options: {
floor: 0,
ceil: 100,
step: 1
}
};
\ No newline at end of file
snippets/minSlider.html 0 → 100644
View file @ 8ebe42ce
<rzslider rz-slider-model="slider.value"></rzslider>
\ No newline at end of file
snippets/minSlider.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
value: 10
};
\ No newline at end of file
snippets/rangeSlider.html 0 → 100644
View file @ 8ebe42ce
<rzslider rz-slider-model="slider.minValue"
rz-slider-high="slider.maxValue"
rz-slider-options="slider.options"></rzslider>
\ No newline at end of file
snippets/range_slider_ticks_values.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
minValue: 1,
maxValue: 8,
options: {
floor: 0,
ceil: 10,
showTicksValues: true
}
};
snippets/read_only_slider.html 0 → 100644
View file @ 8ebe42ce
<label>Read-only <input type="checkbox" ng-model="slider.options.readOnly"></label>
<rzslider rz-slider-model="slider.value"
rz-slider-options="slider.options"></rzslider>
snippets/read_only_slider.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
value: 50,
options: {
floor: 0,
ceil: 100,
readOnly: true
}
};
snippets/singleSlider.html 0 → 100644
View file @ 8ebe42ce
<rzslider rz-slider-model="slider.value"
rz-slider-options="slider.options"></rzslider>
\ No newline at end of file
snippets/slider_alphabet.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
value: 0,
options: {
stepsArray: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('') // equals to ['A', 'B', ... 'Z']
}
};
snippets/slider_callbacks.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
value: 100,
options: {
id: 'slider-id',
onStart: function(id) {
console.log('on start ' + id); // logs 'on start slider-id'
},
onChange: function(id) {
console.log('on change ' + id); // logs 'on change slider-id'
},
onEnd: function(id) {
console.log('on end ' + id); // logs 'on end slider-id'
}
}
};
snippets/slider_draggable_range.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
minValue: 1,
maxValue: 8,
options: {
floor: 0,
ceil: 10,
draggableRange: true
}
};
snippets/slider_draggable_range_only.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
minValue: 4,
maxValue: 6,
options: {
floor: 0,
ceil: 10,
draggableRangeOnly: true
}
};
snippets/slider_floor_ceil.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
value: 12,
options: {
floor: 10,
ceil: 100,
step: 5
}
};
\ No newline at end of file
snippets/slider_modal.html 0 → 100644
View file @ 8ebe42ce
<button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button>
snippets/slider_modal.js 0 → 100644
View file @ 8ebe42ce
$scope.percentages = {
normal: {
low: 15
},
range: {
low: 10,
high: 50
}
};
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: 'slider_modal.html',
controller: function ($scope, $modalInstance, values) {
$scope.percentages = JSON.parse(JSON.stringify(values)); //Copy of the object in order to keep original values in $scope.percentages in parent controller.
var formatToPercentage = function (value) {
return value + '%';
};
$scope.percentages.normal.options = {
floor: 0,
ceil: 100,
translate: formatToPercentage,
showSelectionBar: true
};
$scope.percentages.range.options = {
floor: 0,
ceil: 100,
translate: formatToPercentage
};
$scope.ok = function () {
$modalInstance.close($scope.percentages);
};
$scope.cancel = function () {
$modalInstance.dismiss();
};
},
resolve: {
values: function () {
return $scope.percentages;
}
}
});
modalInstance.result.then(function (percentages) {
$scope.percentages = percentages;
});
modalInstance.rendered.then(function () {
$rootScope.$broadcast('rzSliderForceRender'); //Force refresh sliders on render. Otherwise bullets are aligned at left side.
});
};
snippets/slider_ticks.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
value: 5,
options: {
floor: 0,
ceil: 10,
showTicks: true
}
};
snippets/slider_ticks_tooltip.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = { //requires angular-bootstrap to display tooltips
value: 5,
options: {
floor: 0,
ceil: 10,
showTicks: true,
ticksTooltip: function(v) {
return 'Tooltip for ' + v;
}
}
};
snippets/slider_ticks_values.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = { //requires angular-bootstrap to display tooltips
value: 5,
options: {
floor: 0,
ceil: 10,
showTicksValues: true,
ticksValuesTooltip: function(v) {
return 'Tooltip for ' + v;
}
}
};
snippets/slider_toggle.html 0 → 100644
View file @ 8ebe42ce
<button ng-click="toggle()">{{ visible ? 'Hide' : 'Show' }}</button>
<div ng-show="visible">
<rzslider rz-slider-model="slider.value"
rz-slider-options="slider.options"></rzslider>
</div>
snippets/slider_toggle.js 0 → 100644
View file @ 8ebe42ce
$scope.visible = false;
$scope.slider = {
value: 5,
options: {
floor: 0,
ceil: 10
}
};
$scope.toggle = function () {
$scope.visible = !$scope.visible;
$timeout(function () {
$scope.$broadcast('rzSliderForceRender');
});
};
snippets/slider_translate.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
minValue: 100,
maxValue: 400,
options: {
floor: 0,
ceil: 500,
translate: function(value) {
return '$' + value;
}
}
};
snippets/slider_visible_bar.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
value: 10,
options: {
showSelectionBar: true
}
};
\ No newline at end of file
snippets/tabSliders.html 0 → 100644
View file @ 8ebe42ce
<tabset>
<tab heading="Slider 1" select="refreshSlider()">
<rzslider rz-slider-model="tabSliders.slider1.value"></rzslider>
</tab>
<tab heading="Slider 2" select="refreshSlider()">
<rzslider rz-slider-model="tabSliders.slider2.value"></rzslider>
</tab>
</tabset>
snippets/tabSliders.js 0 → 100644
View file @ 8ebe42ce
$scope.tabSliders = {
slider1: {
value: 100
},
slider2: {
value: 200
}
};
$scope.refreshSlider = function () {
$timeout(function () {
$scope.$broadcast('rzSliderForceRender');
});
};
snippets/vertical_sliders.html 0 → 100644
View file @ 8ebe42ce
<rzslider rz-slider-model="verticalSlider.value"
rz-slider-options="verticalSlider.options"></rzslider>
<rzslider rz-slider-model="verticalSlider2.minValue" rz-slider-high="verticalSlider2.maxValue"
rz-slider-options="verticalSlider2.options"></rzslider>
<rzslider rz-slider-model="verticalSlider3.value"
rz-slider-options="verticalSlider3.options"></rzslider>
<rzslider rz-slider-model="verticalSlider4.minValue" rz-slider-high="verticalSlider4.maxValue"
rz-slider-options="verticalSlider4.options"></rzslider>
<rzslider rz-slider-model="verticalSlider5.value"
rz-slider-options="verticalSlider5.options"></rzslider>
<rzslider rz-slider-model="verticalSlider6.value"
rz-slider-options="verticalSlider6.options"></rzslider>
snippets/vertical_sliders.js 0 → 100644
View file @ 8ebe42ce
$scope.verticalSlider1 = {
value: 0,
options: {
floor: 0,
ceil: 10,
vertical: true
}
};
$scope.verticalSlider2 = {
minValue: 20,
maxValue: 80,
options: {
floor: 0,
ceil: 100,
vertical: true
}
};
$scope.verticalSlider3 = {
value: 5,
options: {
floor: 0,
ceil: 10,
vertical: true,
showTicks: true
}
};
$scope.verticalSlider4 = {
minValue: 1,
maxValue: 5,
options: {
floor: 0,
ceil: 6,
vertical: true,
showTicksValues: true
}
};
$scope.verticalSlider5 = {
value: 50,
options: {
floor: 0,
ceil: 100,
vertical: true,
showSelectionBar: true
}
};
$scope.verticalSlider6 = {
value: 6,
options: {
floor: 0,
ceil: 6,
vertical: true,
showSelectionBar: true,
showTicksValues: true,
ticksValuesTooltip: function (v) {
return 'Tooltip for ' + v;
}
}
};
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