Skip to content

I
i20rzslider
Commit 43acfc8e authored by e-cloud's avatar e-cloud
Browse files
Options

several improvements: 

* add `'use strict'` declaration
* update some docs
* optimize line#L423
* update line#L243-L251's format
* add .editorConfig file whose config is based on current sourcefile
parent ceefa442
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 136 additions and 114 deletions
.editorconfig 0 → 100644
View file @ 43acfc8e
# http://editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
charset = utf-8
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 = 4
Gruntfile.js
View file @ 43acfc8e
...@@ -60,11 +60,11 @@ module.exports = function (grunt) ...@@ -60,11 +60,11 @@ module.exports = function (grunt)
}, },
module: 'rzModule', module: 'rzModule',
url: function(url) { url: function(url) {
return url.replace('src/', ''); return url.replace('src/', '');
}, },
bootstrap: function (module, script) { bootstrap: function (module, script) {
return 'module.run(function($templateCache) {\n' + script + '\n});'; return 'module.run(function($templateCache) {\n' + script + '\n});';
} }
} }
} }
}, },
......
demo/index.html
View file @ 43acfc8e
<!DOCTYPE html> <!DOCTYPE html>
<html ng-app="plunker"> <html ng-app="rzSliderDemo">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
...@@ -107,71 +107,76 @@ ...@@ -107,71 +107,76 @@
<h2>Toggle slider example</h2> <h2>Toggle slider example</h2>
<button ng-click="toggle()">Show</button> <button ng-click="toggle()">Show</button>
<div ng-show="visible"> <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> </div>
</article> </article>
</div> </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 src="../dist/rzslider.js"></script>
<script> <script>
var app = angular.module('plunker', ['rzModule']); var app = angular.module('rzSliderDemo', ['rzModule']);
app.controller('MainCtrl', function($scope, $timeout) { app.controller('MainCtrl', function($scope, $timeout) {
$scope.priceSlider = { $scope.priceSlider = {
min: 100, min: 100,
max: 400, max: 400,
ceil: 500, ceil: 500,
floor: 0 floor: 0
}; };
$scope.priceSlider2 = 150; $scope.priceSlider2 = 150;
$scope.priceSlider3 = 250; $scope.priceSlider3 = 250;
$scope.translate = function(value) { $scope.translate = function(value) {
return '$' + value; return '$' + value;
}; };
var alphabetArray = 'abcdefghijklmnopqrstuvwxyz'.split(''); var alphabetArray = 'abcdefghijklmnopqrstuvwxyz'.split('');
$scope.letter = 5; $scope.letter = 5;
$scope.letterMax = alphabetArray.length - 1; $scope.letterMax = alphabetArray.length - 1;
$scope.alphabetTranslate = function(value) { $scope.alphabetTranslate = function(value) {
return alphabetArray[value].toUpperCase(); return alphabetArray[value].toUpperCase();
}; };
$scope.slider_data = {value: 1}; $scope.slider_data = {value: 1};
$scope.otherData = {value: 10}; $scope.otherData = {value: 10};
$scope.onStart = function() { $scope.onStart = function() {
console.info('started', $scope.slider_data.value); console.info('started', $scope.slider_data.value);
}; };
$scope.onChange = function() { $scope.onChange = function() {
console.info('changed', $scope.slider_data.value); console.info('changed', $scope.slider_data.value);
$scope.otherData.value = $scope.slider_data.value * 10; $scope.otherData.value = $scope.slider_data.value * 10;
}; };
$scope.onEnd = function() { $scope.onEnd = function() {
console.info('ended', $scope.slider_data.value); console.info('ended', $scope.slider_data.value);
}; };
$scope.visible = false; $scope.visible = false;
$scope.toggle = function() { $scope.toggle = function() {
$scope.visible = !$scope.visible; $scope.visible = !$scope.visible;
$timeout(function() { $timeout(function() {
$scope.$broadcast('rzSliderForceRender'); $scope.$broadcast('rzSliderForceRender');
}); });
}; };
$scope.toggleSlider = { $scope.toggleSlider = {
value: 1, value: 1,
ceil: 500, ceil: 500,
floor: 0 floor: 0
}; };
}); });
</script> </script>
</body>
</html> </html>
dist/rzslider.js
View file @ 43acfc8e
...@@ -10,9 +10,9 @@ ...@@ -10,9 +10,9 @@
*/ */
/*jslint unparam: true */ /*jslint unparam: true */
/*global angular: false, console: false */ /*global angular: false, console: false, define, module */
(function (root, factory) { (function (root, factory) {
'use strict';
if (typeof define === 'function' && define.amd) { if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module. // AMD. Register as an anonymous module.
define(['angular'], factory); define(['angular'], factory);
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
} }
}(this, function (angular) { }(this, function (angular) {
'use strict';
var module = angular.module('rzModule', []) var module = angular.module('rzModule', [])
.value('throttle', .value('throttle',
...@@ -100,7 +100,7 @@ function throttle(func, wait, options) { ...@@ -100,7 +100,7 @@ function throttle(func, wait, options) {
/** /**
* The slider attributes * The slider attributes
* *
* @type {*} * @type {Object}
*/ */
this.attributes = attributes; this.attributes = attributes;
...@@ -240,15 +240,15 @@ function throttle(func, wait, options) { ...@@ -240,15 +240,15 @@ function throttle(func, wait, options) {
this.deRegFuncs = []; this.deRegFuncs = [];
// Slider DOM elements wrapped in jqLite // Slider DOM elements wrapped in jqLite
this.fullBar = null; // The whole slider bar this.fullBar = null; // The whole slider bar
this.selBar = null; // Highlight between two handles this.selBar = null; // Highlight between two handles
this.minH = null; // Left slider handle this.minH = null; // Left slider handle
this.maxH = null; // Right slider handle this.maxH = null; // Right slider handle
this.flrLab = null; // Floor label this.flrLab = null; // Floor label
this.ceilLab = null; // Ceiling label this.ceilLab = null; // Ceiling label
this.minLab = null; // Label above the low value this.minLab = null; // Label above the low value
this.maxLab = null; // Label above the high value this.maxLab = null; // Label above the high value
this.cmbLab = null; // Combined label this.cmbLab = null; // Combined label
// Initialize slider // Initialize slider
this.init(); this.init();
...@@ -413,14 +413,14 @@ function throttle(func, wait, options) { ...@@ -413,14 +413,14 @@ function throttle(func, wait, options) {
* *
* @param {number|string} value * @param {number|string} value
* @param {jqLite} label * @param {jqLite} label
* @param {bool?} useCustomTr * @param {boolean} [useCustomTr]
* @returns {undefined} * @returns {undefined}
*/ */
translateFn: function(value, label, useCustomTr) translateFn: function(value, label, useCustomTr)
{ {
useCustomTr = useCustomTr === undefined ? true : useCustomTr; useCustomTr = useCustomTr === undefined ? true : useCustomTr;
var valStr = String(useCustomTr ? this.customTrFn(value) : value), var valStr = (useCustomTr ? this.customTrFn(value) : value).toString(),
getWidth = false; getWidth = false;
if(label.rzsv === undefined || label.rzsv.length !== valStr.length || (label.rzsv.length > 0 && label.rzsw === 0)) 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) { ...@@ -457,7 +457,7 @@ function throttle(func, wait, options) {
} }
else 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) if(this.scope.rzSliderStep)
...@@ -880,7 +880,7 @@ function throttle(func, wait, options) { ...@@ -880,7 +880,7 @@ function throttle(func, wait, options) {
* *
* @param {jqLite} elem The jqLite wrapped DOM element * @param {jqLite} elem The jqLite wrapped DOM element
* @param {number} width * @param {number} width
* @returns {*} * @returns {number}
*/ */
setWidth: function(elem, width) setWidth: function(elem, width)
{ {
...@@ -1272,8 +1272,8 @@ function throttle(func, wait, options) { ...@@ -1272,8 +1272,8 @@ function throttle(func, wait, options) {
/** /**
* Return template URL * Return template URL
* *
* @param {*} elem * @param {jqLite} elem
* @param {*} attrs * @param {Object} attrs
* @return {string} * @return {string}
*/ */
templateUrl: function(elem, attrs) { templateUrl: function(elem, attrs) {
...@@ -1301,9 +1301,9 @@ function throttle(func, wait, options) { ...@@ -1301,9 +1301,9 @@ function throttle(func, wait, options) {
/** /**
* @name jqLite * @name jqLite
* *
* @property {number|undefined} rzsl * @property {number|undefined} rzsl rzslider label left offset
* @property {number|undefined} rzsw * @property {number|undefined} rzsw rzslider element width
* @property {string|undefined} rzsv * @property {string|undefined} rzsv rzslider label value/text
* @property {Function} css * @property {Function} css
* @property {Function} text * @property {Function} text
*/ */
...@@ -1317,8 +1317,8 @@ function throttle(func, wait, options) { ...@@ -1317,8 +1317,8 @@ function throttle(func, wait, options) {
/** /**
* @name ThrottleOptions * @name ThrottleOptions
* *
* @property {bool} leading * @property {boolean} leading
* @property {bool} trailing * @property {boolean} trailing
*/ */
module.run(['$templateCache', function($templateCache) { module.run(['$templateCache', function($templateCache) {
......
dist/rzslider.min.css
View file @ 43acfc8e
/*! 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} 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 @ 43acfc8e
This diff is collapsed.
src/rzslider.js
View file @ 43acfc8e
...@@ -10,9 +10,9 @@ ...@@ -10,9 +10,9 @@
*/ */
/*jslint unparam: true */ /*jslint unparam: true */
/*global angular: false, console: false */ /*global angular: false, console: false, define, module */
(function (root, factory) { (function (root, factory) {
'use strict';
if (typeof define === 'function' && define.amd) { if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module. // AMD. Register as an anonymous module.
define(['angular'], factory); define(['angular'], factory);
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
} }
}(this, function (angular) { }(this, function (angular) {
'use strict';
var module = angular.module('rzModule', []) var module = angular.module('rzModule', [])
.value('throttle', .value('throttle',
...@@ -100,7 +100,7 @@ function throttle(func, wait, options) { ...@@ -100,7 +100,7 @@ function throttle(func, wait, options) {
/** /**
* The slider attributes * The slider attributes
* *
* @type {*} * @type {Object}
*/ */
this.attributes = attributes; this.attributes = attributes;
...@@ -240,15 +240,15 @@ function throttle(func, wait, options) { ...@@ -240,15 +240,15 @@ function throttle(func, wait, options) {
this.deRegFuncs = []; this.deRegFuncs = [];
// Slider DOM elements wrapped in jqLite // Slider DOM elements wrapped in jqLite
this.fullBar = null; // The whole slider bar this.fullBar = null; // The whole slider bar
this.selBar = null; // Highlight between two handles this.selBar = null; // Highlight between two handles
this.minH = null; // Left slider handle this.minH = null; // Left slider handle
this.maxH = null; // Right slider handle this.maxH = null; // Right slider handle
this.flrLab = null; // Floor label this.flrLab = null; // Floor label
this.ceilLab = null; // Ceiling label this.ceilLab = null; // Ceiling label
this.minLab = null; // Label above the low value this.minLab = null; // Label above the low value
this.maxLab = null; // Label above the high value this.maxLab = null; // Label above the high value
this.cmbLab = null; // Combined label this.cmbLab = null; // Combined label
// Initialize slider // Initialize slider
this.init(); this.init();
...@@ -413,14 +413,14 @@ function throttle(func, wait, options) { ...@@ -413,14 +413,14 @@ function throttle(func, wait, options) {
* *
* @param {number|string} value * @param {number|string} value
* @param {jqLite} label * @param {jqLite} label
* @param {bool?} useCustomTr * @param {boolean} [useCustomTr]
* @returns {undefined} * @returns {undefined}
*/ */
translateFn: function(value, label, useCustomTr) translateFn: function(value, label, useCustomTr)
{ {
useCustomTr = useCustomTr === undefined ? true : useCustomTr; useCustomTr = useCustomTr === undefined ? true : useCustomTr;
var valStr = String(useCustomTr ? this.customTrFn(value) : value), var valStr = (useCustomTr ? this.customTrFn(value) : value).toString(),
getWidth = false; getWidth = false;
if(label.rzsv === undefined || label.rzsv.length !== valStr.length || (label.rzsv.length > 0 && label.rzsw === 0)) 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) { ...@@ -457,7 +457,7 @@ function throttle(func, wait, options) {
} }
else 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) if(this.scope.rzSliderStep)
...@@ -880,7 +880,7 @@ function throttle(func, wait, options) { ...@@ -880,7 +880,7 @@ function throttle(func, wait, options) {
* *
* @param {jqLite} elem The jqLite wrapped DOM element * @param {jqLite} elem The jqLite wrapped DOM element
* @param {number} width * @param {number} width
* @returns {*} * @returns {number}
*/ */
setWidth: function(elem, width) setWidth: function(elem, width)
{ {
...@@ -1272,8 +1272,8 @@ function throttle(func, wait, options) { ...@@ -1272,8 +1272,8 @@ function throttle(func, wait, options) {
/** /**
* Return template URL * Return template URL
* *
* @param {*} elem * @param {jqLite} elem
* @param {*} attrs * @param {Object} attrs
* @return {string} * @return {string}
*/ */
templateUrl: function(elem, attrs) { templateUrl: function(elem, attrs) {
...@@ -1301,9 +1301,9 @@ function throttle(func, wait, options) { ...@@ -1301,9 +1301,9 @@ function throttle(func, wait, options) {
/** /**
* @name jqLite * @name jqLite
* *
* @property {number|undefined} rzsl * @property {number|undefined} rzsl rzslider label left offset
* @property {number|undefined} rzsw * @property {number|undefined} rzsw rzslider element width
* @property {string|undefined} rzsv * @property {string|undefined} rzsv rzslider label value/text
* @property {Function} css * @property {Function} css
* @property {Function} text * @property {Function} text
*/ */
...@@ -1317,8 +1317,8 @@ function throttle(func, wait, options) { ...@@ -1317,8 +1317,8 @@ function throttle(func, wait, options) {
/** /**
* @name ThrottleOptions * @name ThrottleOptions
* *
* @property {bool} leading * @property {boolean} leading
* @property {bool} trailing * @property {boolean} trailing
*/ */
/*templateReplacement*/ /*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