Skip to content

Commit 52af3c4

Browse files
rzajacrzajac
committed
Translate function fix, documentation
1 parent 2453a62 commit 52af3c4

File tree

3 files changed

+126
-73
lines changed

3 files changed

+126
-73
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
node_modules/
22
.idea/
3+
bower_components/

‎demo/index.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html ng-app="plunker">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>AngularJS Slider Plunker</title>
7+
<link rel="stylesheet" href="../dist/rzslider.css" />
8+
<script src="../bower_components/angular/angular.min.js" data-semver="1.2.4"></script>
9+
<script src="../rzslider.js"></script>
10+
</head>
11+
12+
<body ng-controller="MainCtrl">
13+
14+
<div style="background-color: #808080;margin-left: 50px;margin-right: 50px; padding: 30px;">
15+
<pre>{{ priceSlider | json }}</pre>
16+
17+
<rzslider
18+
rz-slider-floor="priceSlider.floor"
19+
rz-slider-ceil="priceSlider.ceil"
20+
rz-slider-low="priceSlider.min"
21+
rz-slider-high="priceSlider.max"
22+
rz-slider-step="5"></rzslider>
23+
<br> <br> <br>
24+
25+
<pre>{{ priceSlider2 | json }}</pre>
26+
<br> <br>
27+
<rzslider
28+
rz-slider-floor="0"
29+
rz-slider-ceil="450"
30+
rz-slider-model="priceSlider2"
31+
rz-slider-translate="translate"></rzslider>
32+
33+
</div>
34+
</body>
35+
36+
<script>
37+
var app = angular.module('plunker', ['rzModule']).config(function($sceProvider) {
38+
// Completely disable SCE. For demonstration purposes only!
39+
// Do not use in new projects.
40+
$sceProvider.enabled(false);
41+
});
42+
43+
app.controller('MainCtrl', function($scope)
44+
{
45+
$scope.priceSlider = {
46+
min: 0,
47+
max: 300,
48+
ceil: 500,
49+
floor: 0
50+
};
51+
52+
$scope.priceSlider2 = 100;
53+
54+
$scope.translate = function(value)
55+
{
56+
return '$' + value;
57+
}
58+
});
59+
</script>
60+
61+
</html>

‎rzslider.js

Lines changed: 64 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ angular.module('rzModule', [])
4040
/**
4141
* Slider element wrapped in jqLite
4242
*
43-
* @type {Element}
43+
* @type {jqLite}
4444
*/
4545
this.element = element;
4646

@@ -142,7 +142,7 @@ angular.module('rzModule', [])
142142
*/
143143
this.tracking = '';
144144

145-
// Slider DOM elements
145+
// Slider DOM elements wrapped in jqLite
146146
this.fullBar = null; // The whole slider bar
147147
this.selBar = null; // Highlight between two handles
148148
this.minPtr = null; // Left slider handle
@@ -163,6 +163,8 @@ angular.module('rzModule', [])
163163

164164
/**
165165
* Initialize slider
166+
*
167+
* @returns {undefined}
166168
*/
167169
init: function()
168170
{
@@ -173,7 +175,7 @@ angular.module('rzModule', [])
173175
{
174176
this.scope.rzSliderTranslate = function (value)
175177
{
176-
return value;
178+
return value.value;
177179
};
178180
}
179181

@@ -237,6 +239,8 @@ angular.module('rzModule', [])
237239

238240
/**
239241
* Set maximum and minimum values for the slider
242+
*
243+
* @returns {undefined}
240244
*/
241245
setMinAndMax: function()
242246
{
@@ -254,6 +258,8 @@ angular.module('rzModule', [])
254258

255259
/**
256260
* Set the slider children to variables for easy access
261+
*
262+
* @returns {undefined}
257263
*/
258264
cacheElemHandles: function()
259265
{
@@ -263,70 +269,35 @@ angular.module('rzModule', [])
263269

264270
switch(index)
265271
{
266-
case 0:
267-
this.fullBar = _elem;
268-
break;
269-
case 1:
270-
if(this.range)
271-
{
272-
this.selBar = _elem;
273-
}
274-
else
275-
{
276-
_elem.remove();
277-
}
278-
break;
279-
case 2:
280-
this.minPtr = _elem;
281-
break;
282-
case 3:
283-
if(this.range)
284-
{
285-
this.maxPtr = _elem;
286-
}
287-
else
288-
{
289-
_elem.remove();
290-
}
291-
break;
292-
case 4:
293-
this.selBub = _elem;
294-
break;
295-
case 5:
296-
this.flrBub = _elem;
297-
break;
298-
case 6:
299-
this.ceilBub = _elem;
300-
break;
301-
case 7:
302-
this.lowBub = _elem;
303-
break;
304-
case 8:
305-
if(this.range)
306-
{
307-
this.highBub = _elem;
308-
}
309-
else
310-
{
311-
_elem.remove();
312-
}
313-
break;
314-
case 9:
315-
if(this.range)
316-
{
317-
this.cmbBub = _elem;
318-
}
319-
else
320-
{
321-
_elem.remove();
322-
}
323-
break;
272+
case 0: this.fullBar = _elem; break;
273+
case 1: this.selBar = _elem; break;
274+
case 2: this.minPtr = _elem; break;
275+
case 3: this.maxPtr = _elem; break;
276+
case 4: this.selBub = _elem; break;
277+
case 5: this.flrBub = _elem; break;
278+
case 6: this.ceilBub = _elem; break;
279+
case 7: this.lowBub = _elem; break;
280+
case 8: this.highBub = _elem; break;
281+
case 9: this.cmbBub = _elem; break;
324282
}
283+
325284
}, this);
285+
286+
// Remove stuff not needed in single slider
287+
if( ! this.range)
288+
{
289+
this.cmbBub.remove();
290+
this.highBub.remove();
291+
this.maxPtr.remove();
292+
this.selBar.remove();
293+
this.selBub.remove();
294+
}
326295
},
327296

328297
/**
329298
* Calculate dimensions that are dependent on window size
299+
*
300+
* @returns {undefined}
330301
*/
331302
calcViewDimensions: function ()
332303
{
@@ -341,6 +312,8 @@ angular.module('rzModule', [])
341312

342313
/**
343314
* Set positions of slider handles, labels and selection bar
315+
*
316+
* @returns {undefined}
344317
*/
345318
setPointers: function()
346319
{
@@ -376,7 +349,9 @@ angular.module('rzModule', [])
376349
},
377350

378351
/**
379-
* Adjust label positions
352+
* Adjust label positions and visibility
353+
*
354+
* @returns {undefined}
380355
*/
381356
adjustLabels: function ()
382357
{
@@ -473,7 +448,7 @@ angular.module('rzModule', [])
473448
* Hide element
474449
*
475450
* @param element
476-
* @returns {jQlite} The jqLite
451+
* @returns {jqLite} The jqLite
477452
*/
478453
hideEl: function (element)
479454
{
@@ -483,8 +458,8 @@ angular.module('rzModule', [])
483458
/**
484459
* Show element
485460
*
486-
* @param element
487-
* @returns {jQlite} The jqLite
461+
* @param element The jqLite wrapped DOM element
462+
* @returns {jqLite} The jqLite
488463
*/
489464
showEl: function (element)
490465
{
@@ -596,6 +571,8 @@ angular.module('rzModule', [])
596571

597572
/**
598573
* Bind mouse and touch events to slider handles
574+
*
575+
* @returns {undefined}
599576
*/
600577
bindToInputEvents: function()
601578
{
@@ -611,7 +588,8 @@ angular.module('rzModule', [])
611588
*
612589
* @param {Object} pointer The jqLite wrapped DOM element
613590
* @param {string} ref One of the refLow, refHigh
614-
* @param {Event} event The event
591+
* @param {Event} event The event
592+
* @returns {undefined}
615593
*/
616594
onStart: function (pointer, ref, event)
617595
{
@@ -639,7 +617,8 @@ angular.module('rzModule', [])
639617
/**
640618
* onMove event handler
641619
*
642-
* @param {Event} event The event
620+
* @param {Event} event The event
621+
* @returns {undefined}
643622
*/
644623
onMove: function (event)
645624
{
@@ -679,6 +658,7 @@ angular.module('rzModule', [])
679658
*
680659
* @param {Object} pointer The jqLite wrapped DOM element
681660
* @param {Event} event The event
661+
* @returns {undefined}
682662
*/
683663
onEnd: function(pointer, event)
684664
{
@@ -722,8 +702,8 @@ angular.module('rzModule', [])
722702
'<span class="pointer"></span>' + // 2 Left slider handle
723703
'<span class="pointer"></span>' + // 3 Right slider handle
724704
'<span class="bubble selection"></span>' + // 4 Range label
725-
'<span class="bubble limit" ng-bind="rzSliderTranslate(rzSliderFloor)"></span>' + // 5 Floor label
726-
'<span class="bubble limit" ng-bind="rzSliderTranslate(rzSliderCeil)" class="bubble limit"></span>' + // 6 Ceiling label
705+
'<span class="bubble limit" ng-bind="rzSliderTranslate({value: rzSliderFloor})"></span>' + // 5 Floor label
706+
'<span class="bubble limit" ng-bind="rzSliderTranslate({value: rzSliderCeil})" class="bubble limit"></span>' + // 6 Ceiling label
727707
'<span class="bubble"></span>' + // 7 Label above left slider handle
728708
'<span class="bubble"></span>' + // 8 Label above right slider handle
729709
'<span class="bubble"></span>', // 9 Range label when the slider handles are close ex. 15 - 17
@@ -744,13 +724,13 @@ angular.module('rzModule', [])
744724
}
745725

746726
// Range label
747-
angular.element(children[4]).attr('ng-bind', 'rzSliderTranslate(rzSliderDiff)');
727+
angular.element(children[4]).attr('ng-bind', 'rzSliderTranslate({value: rzSliderDiff})');
748728
// Label above low slider
749-
angular.element(children[7]).attr('ng-bind', 'rzSliderTranslate(' + refLow + ')');
729+
angular.element(children[7]).attr('ng-bind', 'rzSliderTranslate({value: ' + refLow + '})');
750730
// Label above high slider
751-
angular.element(children[8]).attr('ng-bind', 'rzSliderTranslate(' + refHigh + ')');
731+
angular.element(children[8]).attr('ng-bind', 'rzSliderTranslate({value: ' + refHigh + '})');
752732
// Combined label for low and high
753-
angular.element(children[9]).attr('ng-bind-html', 'rzSliderTranslate(' + refLow + ') + " - " + rzSliderTranslate(' + refHigh + ')');
733+
angular.element(children[9]).attr('ng-bind-html', 'rzSliderTranslate({value: ' + refLow + '}) + " - " + rzSliderTranslate({value: ' + refHigh + '})');
754734

755735
return {
756736
post: function(scope, elem, attr)
@@ -761,3 +741,14 @@ angular.module('rzModule', [])
761741
}
762742
};
763743
}]);
744+
745+
// IDE assist
746+
747+
/**
748+
* @name jqLite
749+
*/
750+
751+
/**
752+
* @name Event
753+
* @property {Array} touches
754+
*/

0 commit comments

Comments
 (0)