Skip to content

I
i20rzslider
Commit 52af3c4e authored by Rafal Zajac's avatar Rafal Zajac
Browse files
Options

Translate function fix, documentation

parent 2453a622
Show whitespace changes
Inline Side-by-side
Showing with 126 additions and 73 deletions
.gitignore
View file @ 52af3c4e
node_modules/ node_modules/
.idea/ .idea/
bower_components/
demo/index.html 0 → 100644
View file @ 52af3c4e
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Slider Plunker</title>
<link rel="stylesheet" href="../dist/rzslider.css" />
<script src="../bower_components/angular/angular.min.js" data-semver="1.2.4"></script>
<script src="../rzslider.js"></script>
</head>
<body ng-controller="MainCtrl">
<div style="background-color: #808080;margin-left: 50px;margin-right: 50px; padding: 30px;">
<pre>{{ priceSlider | json }}</pre>
<rzslider
rz-slider-floor="priceSlider.floor"
rz-slider-ceil="priceSlider.ceil"
rz-slider-low="priceSlider.min"
rz-slider-high="priceSlider.max"
rz-slider-step="5"></rzslider>
<br> <br> <br>
<pre>{{ priceSlider2 | json }}</pre>
<br> <br>
<rzslider
rz-slider-floor="0"
rz-slider-ceil="450"
rz-slider-model="priceSlider2"
rz-slider-translate="translate"></rzslider>
</div>
</body>
<script>
var app = angular.module('plunker', ['rzModule']).config(function($sceProvider) {
// Completely disable SCE. For demonstration purposes only!
// Do not use in new projects.
$sceProvider.enabled(false);
});
app.controller('MainCtrl', function($scope)
{
$scope.priceSlider = {
min: 0,
max: 300,
ceil: 500,
floor: 0
};
$scope.priceSlider2 = 100;
$scope.translate = function(value)
{
return '$' + value;
}
});
</script>
</html>
rzslider.js
View file @ 52af3c4e
...@@ -40,7 +40,7 @@ angular.module('rzModule', []) ...@@ -40,7 +40,7 @@ angular.module('rzModule', [])
/** /**
* Slider element wrapped in jqLite * Slider element wrapped in jqLite
* *
* @type {Element} * @type {jqLite}
*/ */
this.element = element; this.element = element;
...@@ -142,7 +142,7 @@ angular.module('rzModule', []) ...@@ -142,7 +142,7 @@ angular.module('rzModule', [])
*/ */
this.tracking = ''; this.tracking = '';
// Slider DOM elements // 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.minPtr = null; // Left slider handle this.minPtr = null; // Left slider handle
...@@ -163,6 +163,8 @@ angular.module('rzModule', []) ...@@ -163,6 +163,8 @@ angular.module('rzModule', [])
/** /**
* Initialize slider * Initialize slider
*
* @returns {undefined}
*/ */
init: function() init: function()
{ {
...@@ -173,7 +175,7 @@ angular.module('rzModule', []) ...@@ -173,7 +175,7 @@ angular.module('rzModule', [])
{ {
this.scope.rzSliderTranslate = function (value) this.scope.rzSliderTranslate = function (value)
{ {
return value; return value.value;
}; };
} }
...@@ -237,6 +239,8 @@ angular.module('rzModule', []) ...@@ -237,6 +239,8 @@ angular.module('rzModule', [])
/** /**
* Set maximum and minimum values for the slider * Set maximum and minimum values for the slider
*
* @returns {undefined}
*/ */
setMinAndMax: function() setMinAndMax: function()
{ {
...@@ -254,6 +258,8 @@ angular.module('rzModule', []) ...@@ -254,6 +258,8 @@ angular.module('rzModule', [])
/** /**
* Set the slider children to variables for easy access * Set the slider children to variables for easy access
*
* @returns {undefined}
*/ */
cacheElemHandles: function() cacheElemHandles: function()
{ {
...@@ -263,70 +269,35 @@ angular.module('rzModule', []) ...@@ -263,70 +269,35 @@ angular.module('rzModule', [])
switch(index) switch(index)
{ {
case 0: case 0: this.fullBar = _elem; break;
this.fullBar = _elem; case 1: this.selBar = _elem; break;
break; case 2: this.minPtr = _elem; break;
case 1: case 3: this.maxPtr = _elem; break;
if(this.range) case 4: this.selBub = _elem; break;
{ case 5: this.flrBub = _elem; break;
this.selBar = _elem; case 6: this.ceilBub = _elem; break;
} case 7: this.lowBub = _elem; break;
else case 8: this.highBub = _elem; break;
{ case 9: this.cmbBub = _elem; break;
_elem.remove();
}
break;
case 2:
this.minPtr = _elem;
break;
case 3:
if(this.range)
{
this.maxPtr = _elem;
} }
else
{ }, this);
_elem.remove();
} // Remove stuff not needed in single slider
break; if( ! this.range)
case 4:
this.selBub = _elem;
break;
case 5:
this.flrBub = _elem;
break;
case 6:
this.ceilBub = _elem;
break;
case 7:
this.lowBub = _elem;
break;
case 8:
if(this.range)
{
this.highBub = _elem;
}
else
{
_elem.remove();
}
break;
case 9:
if(this.range)
{
this.cmbBub = _elem;
}
else
{ {
_elem.remove(); this.cmbBub.remove();
this.highBub.remove();
this.maxPtr.remove();
this.selBar.remove();
this.selBub.remove();
} }
break;
}
}, this);
}, },
/** /**
* Calculate dimensions that are dependent on window size * Calculate dimensions that are dependent on window size
*
* @returns {undefined}
*/ */
calcViewDimensions: function () calcViewDimensions: function ()
{ {
...@@ -341,6 +312,8 @@ angular.module('rzModule', []) ...@@ -341,6 +312,8 @@ angular.module('rzModule', [])
/** /**
* Set positions of slider handles, labels and selection bar * Set positions of slider handles, labels and selection bar
*
* @returns {undefined}
*/ */
setPointers: function() setPointers: function()
{ {
...@@ -376,7 +349,9 @@ angular.module('rzModule', []) ...@@ -376,7 +349,9 @@ angular.module('rzModule', [])
}, },
/** /**
* Adjust label positions * Adjust label positions and visibility
*
* @returns {undefined}
*/ */
adjustLabels: function () adjustLabels: function ()
{ {
...@@ -473,7 +448,7 @@ angular.module('rzModule', []) ...@@ -473,7 +448,7 @@ angular.module('rzModule', [])
* Hide element * Hide element
* *
* @param element * @param element
* @returns {jQlite} The jqLite * @returns {jqLite} The jqLite
*/ */
hideEl: function (element) hideEl: function (element)
{ {
...@@ -483,8 +458,8 @@ angular.module('rzModule', []) ...@@ -483,8 +458,8 @@ angular.module('rzModule', [])
/** /**
* Show element * Show element
* *
* @param element * @param element The jqLite wrapped DOM element
* @returns {jQlite} The jqLite * @returns {jqLite} The jqLite
*/ */
showEl: function (element) showEl: function (element)
{ {
...@@ -596,6 +571,8 @@ angular.module('rzModule', []) ...@@ -596,6 +571,8 @@ angular.module('rzModule', [])
/** /**
* Bind mouse and touch events to slider handles * Bind mouse and touch events to slider handles
*
* @returns {undefined}
*/ */
bindToInputEvents: function() bindToInputEvents: function()
{ {
...@@ -612,6 +589,7 @@ angular.module('rzModule', []) ...@@ -612,6 +589,7 @@ angular.module('rzModule', [])
* @param {Object} pointer The jqLite wrapped DOM element * @param {Object} pointer The jqLite wrapped DOM element
* @param {string} ref One of the refLow, refHigh * @param {string} ref One of the refLow, refHigh
* @param {Event} event The event * @param {Event} event The event
* @returns {undefined}
*/ */
onStart: function (pointer, ref, event) onStart: function (pointer, ref, event)
{ {
...@@ -640,6 +618,7 @@ angular.module('rzModule', []) ...@@ -640,6 +618,7 @@ angular.module('rzModule', [])
* onMove event handler * onMove event handler
* *
* @param {Event} event The event * @param {Event} event The event
* @returns {undefined}
*/ */
onMove: function (event) onMove: function (event)
{ {
...@@ -679,6 +658,7 @@ angular.module('rzModule', []) ...@@ -679,6 +658,7 @@ angular.module('rzModule', [])
* *
* @param {Object} pointer The jqLite wrapped DOM element * @param {Object} pointer The jqLite wrapped DOM element
* @param {Event} event The event * @param {Event} event The event
* @returns {undefined}
*/ */
onEnd: function(pointer, event) onEnd: function(pointer, event)
{ {
...@@ -722,8 +702,8 @@ angular.module('rzModule', []) ...@@ -722,8 +702,8 @@ angular.module('rzModule', [])
'<span class="pointer"></span>' + // 2 Left slider handle '<span class="pointer"></span>' + // 2 Left slider handle
'<span class="pointer"></span>' + // 3 Right slider handle '<span class="pointer"></span>' + // 3 Right slider handle
'<span class="bubble selection"></span>' + // 4 Range label '<span class="bubble selection"></span>' + // 4 Range label
'<span class="bubble limit" ng-bind="rzSliderTranslate(rzSliderFloor)"></span>' + // 5 Floor label '<span class="bubble limit" ng-bind="rzSliderTranslate({value: rzSliderFloor})"></span>' + // 5 Floor label
'<span class="bubble limit" ng-bind="rzSliderTranslate(rzSliderCeil)" class="bubble limit"></span>' + // 6 Ceiling label '<span class="bubble limit" ng-bind="rzSliderTranslate({value: rzSliderCeil})" class="bubble limit"></span>' + // 6 Ceiling label
'<span class="bubble"></span>' + // 7 Label above left slider handle '<span class="bubble"></span>' + // 7 Label above left slider handle
'<span class="bubble"></span>' + // 8 Label above right slider handle '<span class="bubble"></span>' + // 8 Label above right slider handle
'<span class="bubble"></span>', // 9 Range label when the slider handles are close ex. 15 - 17 '<span class="bubble"></span>', // 9 Range label when the slider handles are close ex. 15 - 17
...@@ -744,13 +724,13 @@ angular.module('rzModule', []) ...@@ -744,13 +724,13 @@ angular.module('rzModule', [])
} }
// Range label // Range label
angular.element(children[4]).attr('ng-bind', 'rzSliderTranslate(rzSliderDiff)'); angular.element(children[4]).attr('ng-bind', 'rzSliderTranslate({value: rzSliderDiff})');
// Label above low slider // Label above low slider
angular.element(children[7]).attr('ng-bind', 'rzSliderTranslate(' + refLow + ')'); angular.element(children[7]).attr('ng-bind', 'rzSliderTranslate({value: ' + refLow + '})');
// Label above high slider // Label above high slider
angular.element(children[8]).attr('ng-bind', 'rzSliderTranslate(' + refHigh + ')'); angular.element(children[8]).attr('ng-bind', 'rzSliderTranslate({value: ' + refHigh + '})');
// Combined label for low and high // Combined label for low and high
angular.element(children[9]).attr('ng-bind-html', 'rzSliderTranslate(' + refLow + ') + " - " + rzSliderTranslate(' + refHigh + ')'); angular.element(children[9]).attr('ng-bind-html', 'rzSliderTranslate({value: ' + refLow + '}) + " - " + rzSliderTranslate({value: ' + refHigh + '})');
return { return {
post: function(scope, elem, attr) post: function(scope, elem, attr)
...@@ -761,3 +741,14 @@ angular.module('rzModule', []) ...@@ -761,3 +741,14 @@ angular.module('rzModule', [])
} }
}; };
}]); }]);
// IDE assist
/**
* @name jqLite
*/
/**
* @name Event
* @property {Array} touches
*/
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