Skip to content

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

Remove logs, updates for one slider

parent e26f3227
Show whitespace changes
Inline Side-by-side
Showing with 37 additions and 6 deletions
README.md
View file @ b1815150
...@@ -15,6 +15,10 @@ Slider directive implementation for AngularJS, without any dependencies. ...@@ -15,6 +15,10 @@ Slider directive implementation for AngularJS, without any dependencies.
</div> </div>
``` ```
## Plunkers
[http://embed.plnkr.co/EqGIlU/preview](http://embed.plnkr.co/EqGIlU/preview)
## License ## License
Licensed under the MIT license Licensed under the MIT license
dist/rzslider.min.js
View file @ b1815150
/*! angularjs-slider - v0.0.1 - (c) Rafal Zajac <rzajac@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2013-12-10 */ /*! angularjs-slider - v0.0.1 - (c) Rafal Zajac <rzajac@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2013-12-10 */
angular.module("rzModule",[]).factory("Slider",["$timeout","$document",function(a,b){var c=function(a,b,c){this.scope=a,this.attributes=c,this.element=b,this.range=void 0===c.rzSliderModel&&void 0!==c.rzSliderLow&&void 0!==c.rzSliderHigh,this.refLow=this.range?"rzSliderLow":"rzSliderModel",this.refHigh="rzSliderHigh",this.barWidth=0,this.ptrHalfWidth=0,this.minOffset=0,this.maxOffset=0,this.minValue=0,this.maxValue=0,this.valueRange=0,this.offsetRange=0,this.precision=0,this.step=0,this.tracking="",this.fullBar=null,this.selBar=null,this.minPtr=null,this.maxPtr=null,this.selBub=null,this.flrBub=null,this.ceilBub=null,this.lowBub=null,this.highBub=null,this.cmbBub=null,this.init()};return c.prototype={init:function(){var b=this;void 0===this.attributes.rzSliderTranslate&&(this.scope.rzSliderTranslate=function(a){return a}),this.setMinAndMax(),this.valueRange=this.maxValue-this.minValue,this.precision=void 0===this.scope.rzSliderPrecision?0:+this.scope.rzSliderPrecision,this.step=void 0===this.scope.rzSliderStep?1:+this.scope.rzSliderStep,this.cacheElemHandles(),this.calcViewDimensions(),a(function(){b.setPointers(),b.adjustLabels(),b.bindToInputEvents()}),angular.element(window).on("resize",angular.bind(this,this.calcViewDimensions)),this.scope.$watch(this.refLow,function(){b.setPointers(),b.adjustLabels()}),this.range&&this.scope.$watch(this.refHigh,function(){b.setPointers(),b.adjustLabels()}),void 0!==this.scope.rzSliderFloor&&this.scope.$watch("rzSliderFloor",function(){b.setMinAndMax(),b.setPointers(),b.adjustLabels()}),void 0!==this.scope.rzSliderCeil&&this.scope.$watch("rzSliderCeil",function(){b.setMinAndMax(),b.setPointers(),b.adjustLabels()})},setMinAndMax:function(){this.minValue=void 0===this.scope.rzSliderFloor?0:+this.scope.rzSliderFloor,this.maxValue=void 0===this.scope.rzSliderCeil?this.range?this.scope[this.refHigh]:this.scope[this.refLow]:+this.scope.rzSliderCeil},cacheElemHandles:function(){angular.forEach(this.element.children(),function(a,b){var c=angular.element(a);switch(b){case 0:this.fullBar=c;break;case 1:this.selBar=c;break;case 2:this.minPtr=c;break;case 3:this.maxPtr=c;break;case 4:this.selBub=c;break;case 5:this.flrBub=c;break;case 6:this.ceilBub=c;break;case 7:this.lowBub=c;break;case 8:this.highBub=c;break;case 9:this.cmbBub=c}},this)},calcViewDimensions:function(){var a=this.offsetWidth(this.minPtr);this.ptrHalfWidth=a/2,this.barWidth=this.offsetWidth(this.fullBar),this.minOffset=0,this.maxOffset=this.barWidth-a,this.offsetRange=this.maxOffset-this.minOffset},setPointers:function(){var a,b,c,d,e,f;this.setLeft(this.ceilBub,this.barWidth-this.offsetWidth(this.ceilBub)),b=this.percentValue(this.scope[this.refLow]),c=this.setLeft(this.minPtr,this.percentToOffset(b)),this.setLeft(this.lowBub,c-this.halfOffsetWidth(this.lowBub)+this.ptrHalfWidth),this.range&&(a=this.percentValue(this.scope[this.refHigh]),d=this.setLeft(this.maxPtr,this.percentToOffset(a)),this.setLeft(this.highBub,d-this.halfOffsetWidth(this.highBub)+this.ptrHalfWidth),e=this.setLeft(this.selBar,c+this.ptrHalfWidth),f=this.percentToOffset(a-b),this.selBar.css({width:f+"px"}),this.setLeft(this.cmbBub,e+f/2-this.halfOffsetWidth(this.cmbBub)+1),this.setLeft(this.selBub,e+f/2-this.halfOffsetWidth(this.selBub)+1),this.scope.rzSliderDiff=this.roundStep(this.scope[this.refHigh]-this.scope[this.refLow]))},adjustLabels:function(){var a=this.highBub;this.fitToBar(this.lowBub),this.range&&(this.fitToBar(this.highBub),this.fitToBar(this.selBub),this.gap(this.lowBub,this.highBub)<10?(this.hideEl(this.lowBub),this.hideEl(this.highBub),this.fitToBar(this.cmbBub),this.showEl(this.cmbBub),a=this.cmbBub):(this.showEl(this.lowBub),this.showEl(this.highBub),this.hideEl(this.cmbBub),a=this.highBub)),this.gap(this.flrBub,this.lowBub)<5?this.hideEl(this.flrBub):this.range?this.gap(this.flrBub,a)<5?this.hideEl(this.flrBub):this.showEl(this.flrBub):this.showEl(this.flrBub),this.gap(this.lowBub,this.ceilBub)<5?this.hideEl(this.ceilBub):this.range?this.gap(a,this.ceilBub)<5?this.hideEl(this.ceilBub):this.showEl(this.ceilBub):this.showEl(this.ceilBub)},roundStep:function(a){var b=this.step,c=Math.pow(10,this.precision),d=(a-this.minValue)%b,e=d>b/2?a+b-d:a-d;return+(e*c/c).toFixed(this.precision)},hideEl:function(a){return a.css({opacity:0})},showEl:function(a){return a.css({opacity:1})},offsetLeft:function(a){return a[0].offsetLeft},offsetWidth:function(a){return a[0].offsetWidth},halfOffsetWidth:function(a){return a[0].offsetWidth/2},setLeft:function(a,b){return a.css({left:b+"px"}),b},fitToBar:function(a){this.setLeft(a,Math.min(Math.max(0,this.offsetLeft(a)),this.barWidth-this.offsetWidth(a)))},gap:function(a,b){return this.offsetLeft(b)-this.offsetLeft(a)-this.offsetWidth(a)},percentValue:function(a){return(a-this.minValue)/this.valueRange*100},percentOffset:function(a){return(a-this.minOffset)/this.offsetRange*100},percentToOffset:function(a){return a*this.offsetRange/100},bindToInputEvents:function(){this.minPtr.on("mousedown",angular.bind(this,this.onStart,this.minPtr,this.refLow)),this.range&&this.maxPtr.on("mousedown",angular.bind(this,this.onStart,this.maxPtr,this.refHigh)),this.minPtr.on("touchstart",angular.bind(this,this.onStart,this.minPtr,this.refLow)),this.range&&this.maxPtr.on("touchstart",angular.bind(this,this.onStart,this.maxPtr,this.refHigh))},onStart:function(a,c,d){""===this.tracking&&(this.tracking=c,a.addClass("active"),d.stopPropagation(),d.preventDefault(),d.touches?(b.on("touchmove",angular.bind(this,this.onMove)),b.on("touchend",angular.bind(this,this.onEnd,a))):(b.on("mousemove",angular.bind(this,this.onMove)),b.on("mouseup",angular.bind(this,this.onEnd,a))))},onMove:function(a){var b,c,d,e=a.clientX||a.touches[0].clientX;b=e-this.element[0].getBoundingClientRect().left-this.ptrHalfWidth,b=Math.max(Math.min(b,this.maxOffset),this.minOffset),c=this.percentOffset(b),d=this.minValue+this.valueRange*c/100,this.range&&(this.tracking===this.refLow&&d>=this.scope[this.refHigh]?(this.tracking=this.refHigh,this.minPtr.removeClass("active"),this.maxPtr.addClass("active")):d<=this.scope[this.refLow]&&(this.tracking=this.refLow,this.maxPtr.removeClass("active"),this.minPtr.addClass("active"))),this.scope[this.tracking]=this.roundStep(d),this.setPointers(),this.adjustLabels(),this.scope.$apply()},onEnd:function(a,c){a.removeClass("active"),c.touches?(b.unbind("touchmove"),b.unbind("touchend")):(b.unbind("mousemove"),b.unbind("mouseup")),this.tracking=""}},c}]).directive("rzslider",["Slider",function(a){return{restrict:"E",scope:{rzSliderFloor:"=?",rzSliderCeil:"=?",rzSliderStep:"@",rzSliderPrecision:"@",rzSliderModel:"=?",rzSliderLow:"=?",rzSliderHigh:"=?",rzSliderTranslate:"&"},template:'<span class="bar"></span><span class="bar selection"></span><span class="pointer"></span><span class="pointer"></span><span class="bubble selection"></span><span class="bubble limit" ng-bind="rzSliderTranslate(rzSliderFloor)"></span><span class="bubble limit" ng-bind="rzSliderTranslate(rzSliderCeil)" class="bubble limit"></span><span class="bubble"></span><span class="bubble"></span><span class="bubble"></span>',compile:function(b,c){var d=b.children(),e=void 0===c.rzSliderModel&&void 0!==c.rzSliderLow&&void 0!==c.rzSliderHigh,f=e?"rzSliderLow":"rzSliderModel",g="rzSliderHigh";return c.rzSliderTranslate&&c.$set("rzSliderTranslate",""+c.rzSliderTranslate+"(value)"),angular.element(d[4]).attr("ng-bind","rzSliderTranslate(rzSliderDiff)"),angular.element(d[7]).attr("ng-bind","rzSliderTranslate("+f+")"),angular.element(d[8]).attr("ng-bind","rzSliderTranslate("+g+")"),angular.element(d[9]).attr("ng-bind-html","rzSliderTranslate("+f+') + " - " + rzSliderTranslate('+g+")"),{post:function(b,c,d){return console.log(b),new a(b,c,d)}}}}}]); angular.module("rzModule",[]).factory("Slider",["$timeout","$document",function(a,b){var c=function(a,b,c){this.scope=a,this.attributes=c,this.element=b,this.range=void 0===c.rzSliderModel&&void 0!==c.rzSliderLow&&void 0!==c.rzSliderHigh,this.refLow=this.range?"rzSliderLow":"rzSliderModel",this.refHigh="rzSliderHigh",this.barWidth=0,this.ptrHalfWidth=0,this.minOffset=0,this.maxOffset=0,this.minValue=0,this.maxValue=0,this.valueRange=0,this.offsetRange=0,this.precision=0,this.step=0,this.tracking="",this.fullBar=null,this.selBar=null,this.minPtr=null,this.maxPtr=null,this.selBub=null,this.flrBub=null,this.ceilBub=null,this.lowBub=null,this.highBub=null,this.cmbBub=null,this.init()};return c.prototype={init:function(){var b=this;void 0===this.attributes.rzSliderTranslate&&(this.scope.rzSliderTranslate=function(a){return a}),this.setMinAndMax(),this.valueRange=this.maxValue-this.minValue,this.precision=void 0===this.scope.rzSliderPrecision?0:+this.scope.rzSliderPrecision,this.step=void 0===this.scope.rzSliderStep?1:+this.scope.rzSliderStep,this.cacheElemHandles(),this.calcViewDimensions(),a(function(){b.setPointers(),b.adjustLabels(),b.bindToInputEvents()}),angular.element(window).on("resize",angular.bind(this,this.calcViewDimensions)),this.scope.$watch(this.refLow,function(){b.setPointers(),b.adjustLabels()}),this.range&&this.scope.$watch(this.refHigh,function(){b.setPointers(),b.adjustLabels()}),void 0!==this.scope.rzSliderFloor&&this.scope.$watch("rzSliderFloor",function(){b.setMinAndMax(),b.setPointers(),b.adjustLabels()}),void 0!==this.scope.rzSliderCeil&&this.scope.$watch("rzSliderCeil",function(){b.setMinAndMax(),b.setPointers(),b.adjustLabels()})},setMinAndMax:function(){this.minValue=void 0===this.scope.rzSliderFloor?0:+this.scope.rzSliderFloor,this.maxValue=void 0===this.scope.rzSliderCeil?this.range?this.scope[this.refHigh]:this.scope[this.refLow]:+this.scope.rzSliderCeil},cacheElemHandles:function(){angular.forEach(this.element.children(),function(a,b){var c=angular.element(a);switch(b){case 0:this.fullBar=c;break;case 1:this.range?this.selBar=c:c.remove();break;case 2:this.minPtr=c;break;case 3:this.range?this.maxPtr=c:c.remove();break;case 4:this.selBub=c;break;case 5:this.flrBub=c;break;case 6:this.ceilBub=c;break;case 7:this.lowBub=c;break;case 8:this.range?this.highBub=c:c.remove();break;case 9:this.range?this.cmbBub=c:c.remove()}},this)},calcViewDimensions:function(){var a=this.offsetWidth(this.minPtr);this.ptrHalfWidth=a/2,this.barWidth=this.offsetWidth(this.fullBar),this.minOffset=0,this.maxOffset=this.barWidth-a,this.offsetRange=this.maxOffset-this.minOffset},setPointers:function(){var a,b,c,d,e,f;this.setLeft(this.ceilBub,this.barWidth-this.offsetWidth(this.ceilBub)),b=this.percentValue(this.scope[this.refLow]),c=this.setLeft(this.minPtr,this.percentToOffset(b)),this.setLeft(this.lowBub,c-this.halfOffsetWidth(this.lowBub)+this.ptrHalfWidth),this.range&&(a=this.percentValue(this.scope[this.refHigh]),d=this.setLeft(this.maxPtr,this.percentToOffset(a)),this.setLeft(this.highBub,d-this.halfOffsetWidth(this.highBub)+this.ptrHalfWidth),e=this.setLeft(this.selBar,c+this.ptrHalfWidth),f=this.percentToOffset(a-b),this.selBar.css({width:f+"px"}),this.setLeft(this.cmbBub,e+f/2-this.halfOffsetWidth(this.cmbBub)+1),this.setLeft(this.selBub,e+f/2-this.halfOffsetWidth(this.selBub)+1),this.scope.rzSliderDiff=this.roundStep(this.scope[this.refHigh]-this.scope[this.refLow]))},adjustLabels:function(){var a=this.highBub;this.fitToBar(this.lowBub),this.range&&(this.fitToBar(this.highBub),this.fitToBar(this.selBub),this.gap(this.lowBub,this.highBub)<10?(this.hideEl(this.lowBub),this.hideEl(this.highBub),this.fitToBar(this.cmbBub),this.showEl(this.cmbBub),a=this.cmbBub):(this.showEl(this.lowBub),this.showEl(this.highBub),this.hideEl(this.cmbBub),a=this.highBub)),this.gap(this.flrBub,this.lowBub)<5?this.hideEl(this.flrBub):this.range?this.gap(this.flrBub,a)<5?this.hideEl(this.flrBub):this.showEl(this.flrBub):this.showEl(this.flrBub),this.gap(this.lowBub,this.ceilBub)<5?this.hideEl(this.ceilBub):this.range?this.gap(a,this.ceilBub)<5?this.hideEl(this.ceilBub):this.showEl(this.ceilBub):this.showEl(this.ceilBub)},roundStep:function(a){var b=this.step,c=Math.pow(10,this.precision),d=(a-this.minValue)%b,e=d>b/2?a+b-d:a-d;return+(e*c/c).toFixed(this.precision)},hideEl:function(a){return a.css({opacity:0})},showEl:function(a){return a.css({opacity:1})},offsetLeft:function(a){return a[0].offsetLeft},offsetWidth:function(a){return a[0].offsetWidth},halfOffsetWidth:function(a){return a[0].offsetWidth/2},setLeft:function(a,b){return a.css({left:b+"px"}),b},fitToBar:function(a){this.setLeft(a,Math.min(Math.max(0,this.offsetLeft(a)),this.barWidth-this.offsetWidth(a)))},gap:function(a,b){return this.offsetLeft(b)-this.offsetLeft(a)-this.offsetWidth(a)},percentValue:function(a){return(a-this.minValue)/this.valueRange*100},percentOffset:function(a){return(a-this.minOffset)/this.offsetRange*100},percentToOffset:function(a){return a*this.offsetRange/100},bindToInputEvents:function(){this.minPtr.on("mousedown",angular.bind(this,this.onStart,this.minPtr,this.refLow)),this.range&&this.maxPtr.on("mousedown",angular.bind(this,this.onStart,this.maxPtr,this.refHigh)),this.minPtr.on("touchstart",angular.bind(this,this.onStart,this.minPtr,this.refLow)),this.range&&this.maxPtr.on("touchstart",angular.bind(this,this.onStart,this.maxPtr,this.refHigh))},onStart:function(a,c,d){""===this.tracking&&(this.tracking=c,a.addClass("active"),d.stopPropagation(),d.preventDefault(),d.touches?(b.on("touchmove",angular.bind(this,this.onMove)),b.on("touchend",angular.bind(this,this.onEnd,a))):(b.on("mousemove",angular.bind(this,this.onMove)),b.on("mouseup",angular.bind(this,this.onEnd,a))))},onMove:function(a){var b,c,d,e=a.clientX||a.touches[0].clientX;b=e-this.element[0].getBoundingClientRect().left-this.ptrHalfWidth,b=Math.max(Math.min(b,this.maxOffset),this.minOffset),c=this.percentOffset(b),d=this.minValue+this.valueRange*c/100,this.range&&(this.tracking===this.refLow&&d>=this.scope[this.refHigh]?(this.tracking=this.refHigh,this.minPtr.removeClass("active"),this.maxPtr.addClass("active")):d<=this.scope[this.refLow]&&(this.tracking=this.refLow,this.maxPtr.removeClass("active"),this.minPtr.addClass("active"))),this.scope[this.tracking]=this.roundStep(d),this.setPointers(),this.adjustLabels(),this.scope.$apply()},onEnd:function(a,c){a.removeClass("active"),c.touches?(b.unbind("touchmove"),b.unbind("touchend")):(b.unbind("mousemove"),b.unbind("mouseup")),this.tracking=""}},c}]).directive("rzslider",["Slider",function(a){return{restrict:"E",scope:{rzSliderFloor:"=?",rzSliderCeil:"=?",rzSliderStep:"@",rzSliderPrecision:"@",rzSliderModel:"=?",rzSliderLow:"=?",rzSliderHigh:"=?",rzSliderTranslate:"&"},template:'<span class="bar"></span><span class="bar selection"></span><span class="pointer"></span><span class="pointer"></span><span class="bubble selection"></span><span class="bubble limit" ng-bind="rzSliderTranslate(rzSliderFloor)"></span><span class="bubble limit" ng-bind="rzSliderTranslate(rzSliderCeil)" class="bubble limit"></span><span class="bubble"></span><span class="bubble"></span><span class="bubble"></span>',compile:function(b,c){var d=b.children(),e=void 0===c.rzSliderModel&&void 0!==c.rzSliderLow&&void 0!==c.rzSliderHigh,f=e?"rzSliderLow":"rzSliderModel",g="rzSliderHigh";return c.rzSliderTranslate&&c.$set("rzSliderTranslate",""+c.rzSliderTranslate+"(value)"),angular.element(d[4]).attr("ng-bind","rzSliderTranslate(rzSliderDiff)"),angular.element(d[7]).attr("ng-bind","rzSliderTranslate("+f+")"),angular.element(d[8]).attr("ng-bind","rzSliderTranslate("+g+")"),angular.element(d[9]).attr("ng-bind-html","rzSliderTranslate("+f+') + " - " + rzSliderTranslate('+g+")"),{post:function(b,c,d){return new a(b,c,d)}}}}}]);
\ No newline at end of file \ No newline at end of file
rzslider.js
View file @ b1815150
...@@ -267,13 +267,27 @@ angular.module('rzModule', []) ...@@ -267,13 +267,27 @@ angular.module('rzModule', [])
this.fullBar = _elem; this.fullBar = _elem;
break; break;
case 1: case 1:
if(this.range)
{
this.selBar = _elem; this.selBar = _elem;
}
else
{
_elem.remove();
}
break; break;
case 2: case 2:
this.minPtr = _elem; this.minPtr = _elem;
break; break;
case 3: case 3:
if(this.range)
{
this.maxPtr = _elem; this.maxPtr = _elem;
}
else
{
_elem.remove();
}
break; break;
case 4: case 4:
this.selBub = _elem; this.selBub = _elem;
...@@ -288,10 +302,24 @@ angular.module('rzModule', []) ...@@ -288,10 +302,24 @@ angular.module('rzModule', [])
this.lowBub = _elem; this.lowBub = _elem;
break; break;
case 8: case 8:
if(this.range)
{
this.highBub = _elem; this.highBub = _elem;
}
else
{
_elem.remove();
}
break; break;
case 9: case 9:
if(this.range)
{
this.cmbBub = _elem; this.cmbBub = _elem;
}
else
{
_elem.remove();
}
break; break;
} }
}, this); }, this);
...@@ -727,7 +755,6 @@ angular.module('rzModule', []) ...@@ -727,7 +755,6 @@ angular.module('rzModule', [])
return { return {
post: function(scope, elem, attr) post: function(scope, elem, attr)
{ {
console.log(scope); // TODO: remove this!
return new Slider(scope, elem, attr); return new Slider(scope, elem, attr);
} }
}; };
......
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