Skip to content

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

Merge pull request #129 from e-cloud/master 

minor improvement
parents ceefa442 f0ca9ff4
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 139 additions and 116 deletions
.editorconfig 0 → 100644
View file @ 70ca413f
# 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
Gruntfile.js
View file @ 70ca413f
......@@ -60,11 +60,11 @@ module.exports = function (grunt)
},
module: 'rzModule',
url: function(url) {
return url.replace('src/', '');
return url.replace('src/', '');
},
bootstrap: function (module, script) {
return 'module.run(function($templateCache) {\n' + script + '\n});';
}
bootstrap: function (module, script) {
return 'module.run(function($templateCache) {\n' + script + '\n});';
}
}
}
},
......
demo/index.html
View file @ 70ca413f
<!DOCTYPE html>
<html ng-app="plunker">
<html ng-app="rzSliderDemo">
<head>
<meta charset="utf-8"/>
......@@ -107,71 +107,76 @@
<h2>Toggle slider example</h2>
<button ng-click="toggle()">Show</button>
<div ng-show="visible">
<rzslider rz-slider-model="toggleSlider.value" rz-slider-floor="toggleSlider.floor" rz-slider-ceil="toggleSlider.ceil"></rzslider>
<rzslider rz-slider-model="toggleSlider.value"
rz-slider-floor="toggleSlider.floor"
rz-slider-ceil="toggleSlider.ceil"></rzslider>
</div>
</article>
</div>
</body>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../dist/rzslider.js"></script>
<script>
var app = angular.module('plunker', ['rzModule']);
app.controller('MainCtrl', function($scope, $timeout) {
$scope.priceSlider = {
min: 100,
max: 400,
ceil: 500,
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();
};
$scope.slider_data = {value: 1};
$scope.otherData = {value: 10};
$scope.onStart = function() {
console.info('started', $scope.slider_data.value);
};
$scope.onChange = function() {
console.info('changed', $scope.slider_data.value);
$scope.otherData.value = $scope.slider_data.value * 10;
};
$scope.onEnd = function() {
console.info('ended', $scope.slider_data.value);
};
$scope.visible = false;
$scope.toggle = function() {
$scope.visible = !$scope.visible;
$timeout(function() {
$scope.$broadcast('rzSliderForceRender');
});
};
$scope.toggleSlider = {
value: 1,
ceil: 500,
floor: 0
};
});
var app = angular.module('rzSliderDemo', ['rzModule']);
app.controller('MainCtrl', function($scope, $timeout) {
$scope.priceSlider = {
min: 100,
max: 400,
ceil: 500,
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();
};
$scope.slider_data = {value: 1};
$scope.otherData = {value: 10};
$scope.onStart = function() {
console.info('started', $scope.slider_data.value);
};
$scope.onChange = function() {
console.info('changed', $scope.slider_data.value);
$scope.otherData.value = $scope.slider_data.value * 10;
};
$scope.onEnd = function() {
console.info('ended', $scope.slider_data.value);
};
$scope.visible = false;
$scope.toggle = function() {
$scope.visible = !$scope.visible;
$timeout(function() {
$scope.$broadcast('rzSliderForceRender');
});
};
$scope.toggleSlider = {
value: 1,
ceil: 500,
floor: 0
};
});
</script>
</body>
</html>
dist/rzslider.js
View file @ 70ca413f
......@@ -10,9 +10,9 @@
*/
/*jslint unparam: true */
/*global angular: false, console: false */
/*global angular: false, console: false, define, module */
(function (root, factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['angular'], factory);
......@@ -28,7 +28,7 @@
}
}(this, function (angular) {
'use strict';
var module = angular.module('rzModule', [])
.value('throttle',
......@@ -100,7 +100,7 @@ function throttle(func, wait, options) {
/**
* The slider attributes
*
* @type {*}
* @type {Object}
*/
this.attributes = attributes;
......@@ -240,15 +240,15 @@ function throttle(func, wait, options) {
this.deRegFuncs = [];
// 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.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
// Initialize slider
this.init();
......@@ -413,14 +413,14 @@ function throttle(func, wait, options) {
*
* @param {number|string} value
* @param {jqLite} label
* @param {bool?} useCustomTr
* @param {boolean} [useCustomTr]
* @returns {undefined}
*/
translateFn: function(value, label, useCustomTr)
{
useCustomTr = useCustomTr === undefined ? true : useCustomTr;
var valStr = String(useCustomTr ? this.customTrFn(value) : value),
var valStr = (useCustomTr ? this.customTrFn(value) : value).toString(),
getWidth = false;
if(label.rzsv === undefined || label.rzsv.length !== valStr.length || (label.rzsv.length > 0 && label.rzsw === 0))
......@@ -457,7 +457,7 @@ function throttle(func, wait, options) {
}
else
{
this.scope.rzSliderCeil = this.maxValue = this.range ? this.scope.rzSliderHigh : this.scope.rzSliderModel;
this.maxValue = this.scope.rzSliderCeil = this.range ? this.scope.rzSliderHigh : this.scope.rzSliderModel;
}
if(this.scope.rzSliderStep)
......@@ -880,7 +880,7 @@ function throttle(func, wait, options) {
*
* @param {jqLite} elem The jqLite wrapped DOM element
* @param {number} width
* @returns {*}
* @returns {number}
*/
setWidth: function(elem, width)
{
......@@ -897,7 +897,7 @@ function throttle(func, wait, options) {
*/
valueToOffset: function(val)
{
return (val - this.minValue) * this.maxLeft / this.valueRange;
return (val - this.minValue) * this.maxLeft / this.valueRange || 0;
},
/**
......@@ -1272,8 +1272,8 @@ function throttle(func, wait, options) {
/**
* Return template URL
*
* @param {*} elem
* @param {*} attrs
* @param {jqLite} elem
* @param {Object} attrs
* @return {string}
*/
templateUrl: function(elem, attrs) {
......@@ -1301,9 +1301,9 @@ function throttle(func, wait, options) {
/**
* @name jqLite
*
* @property {number|undefined} rzsl
* @property {number|undefined} rzsw
* @property {string|undefined} rzsv
* @property {number|undefined} rzsl rzslider label left offset
* @property {number|undefined} rzsw rzslider element width
* @property {string|undefined} rzsv rzslider label value/text
* @property {Function} css
* @property {Function} text
*/
......@@ -1317,8 +1317,8 @@ function throttle(func, wait, options) {
/**
* @name ThrottleOptions
*
* @property {bool} leading
* @property {bool} trailing
* @property {boolean} leading
* @property {boolean} trailing
*/
module.run(['$templateCache', function($templateCache) {
......
dist/rzslider.min.css
View file @ 70ca413f
/*! jusas-angularjs-slider - v0.1.32 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-09-23 */
/*! jusas-angularjs-slider - v0.1.32 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-09-24 */
rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:30px 0 15px 0;vertical-align:middle}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.rz-base{width:100%;height:100%;padding:0}rzslider span.rz-bar-wrapper{left:0;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider span.rz-bar{left:0;z-index:0;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-bar.rz-selection{z-index:1;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-pointer{top:-14px;z-index:2;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider span.rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider span.rz-pointer:hover:after{background-color:#fff}rzslider span.rz-pointer.rz-active:after{background-color:#451aff}rzslider span.rz-bubble{top:-32px;padding:1px 3px;color:#55637d;cursor:default}rzslider span.rz-bubble.rz-selection{top:16px}rzslider span.rz-bubble.rz-limit{color:#55637d}
\ No newline at end of file
dist/rzslider.min.js
View file @ 70ca413f
This diff is collapsed.
src/rzslider.js
View file @ 70ca413f
......@@ -10,9 +10,9 @@
*/
/*jslint unparam: true */
/*global angular: false, console: false */
/*global angular: false, console: false, define, module */
(function (root, factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['angular'], factory);
......@@ -28,7 +28,7 @@
}
}(this, function (angular) {
'use strict';
var module = angular.module('rzModule', [])
.value('throttle',
......@@ -100,7 +100,7 @@ function throttle(func, wait, options) {
/**
* The slider attributes
*
* @type {*}
* @type {Object}
*/
this.attributes = attributes;
......@@ -240,15 +240,15 @@ function throttle(func, wait, options) {
this.deRegFuncs = [];
// 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.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
// Initialize slider
this.init();
......@@ -413,14 +413,14 @@ function throttle(func, wait, options) {
*
* @param {number|string} value
* @param {jqLite} label
* @param {bool?} useCustomTr
* @param {boolean} [useCustomTr]
* @returns {undefined}
*/
translateFn: function(value, label, useCustomTr)
{
useCustomTr = useCustomTr === undefined ? true : useCustomTr;
var valStr = String(useCustomTr ? this.customTrFn(value) : value),
var valStr = (useCustomTr ? this.customTrFn(value) : value).toString(),
getWidth = false;
if(label.rzsv === undefined || label.rzsv.length !== valStr.length || (label.rzsv.length > 0 && label.rzsw === 0))
......@@ -457,7 +457,7 @@ function throttle(func, wait, options) {
}
else
{
this.scope.rzSliderCeil = this.maxValue = this.range ? this.scope.rzSliderHigh : this.scope.rzSliderModel;
this.maxValue = this.scope.rzSliderCeil = this.range ? this.scope.rzSliderHigh : this.scope.rzSliderModel;
}
if(this.scope.rzSliderStep)
......@@ -880,7 +880,7 @@ function throttle(func, wait, options) {
*
* @param {jqLite} elem The jqLite wrapped DOM element
* @param {number} width
* @returns {*}
* @returns {number}
*/
setWidth: function(elem, width)
{
......@@ -897,7 +897,7 @@ function throttle(func, wait, options) {
*/
valueToOffset: function(val)
{
return (val - this.minValue) * this.maxLeft / this.valueRange;
return (val - this.minValue) * this.maxLeft / this.valueRange || 0;
},
/**
......@@ -1272,8 +1272,8 @@ function throttle(func, wait, options) {
/**
* Return template URL
*
* @param {*} elem
* @param {*} attrs
* @param {jqLite} elem
* @param {Object} attrs
* @return {string}
*/
templateUrl: function(elem, attrs) {
......@@ -1301,9 +1301,9 @@ function throttle(func, wait, options) {
/**
* @name jqLite
*
* @property {number|undefined} rzsl
* @property {number|undefined} rzsw
* @property {string|undefined} rzsv
* @property {number|undefined} rzsl rzslider label left offset
* @property {number|undefined} rzsw rzslider element width
* @property {string|undefined} rzsv rzslider label value/text
* @property {Function} css
* @property {Function} text
*/
......@@ -1317,8 +1317,8 @@ function throttle(func, wait, options) {
/**
* @name ThrottleOptions
*
* @property {bool} leading
* @property {bool} trailing
* @property {boolean} leading
* @property {boolean} trailing
*/
/*templateReplacement*/
......
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