diff --git a/README.md b/README.md index 0a7c0ea..3ee800d 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,20 @@ And your HTML: +### Move start and end events: + +It is possible to hook on events of grabbing and releasing of slider + +In your controller: + + $scope.startMoving = function() { console.log('slider was grabbed') } + $scope.endMoving = function() { console.log('slider was released') } + +And your HTML: + + + + ### Usage: Make sure to load AngularJS first, and then `angular-slider.js`. Also include the related `angular-slider.css`. diff --git a/angular-slider.js b/angular-slider.js index 00ee8f3..14d3350 100644 --- a/angular-slider.js +++ b/angular-slider.js @@ -92,7 +92,9 @@ ngModel: '=?', ngModelLow: '=?', ngModelHigh: '=?', - translate: '&' + translate: '&', + moveStart: '=?', + moveEnd: '=?' }, template: '', compile: function(element, attributes) { @@ -253,6 +255,7 @@ onEnd = function() { pointer.removeClass('active'); + scope.moveEnd(); ngDocument.unbind(events.move); return ngDocument.unbind(events.end); }; @@ -288,6 +291,7 @@ dimensions(); event.stopPropagation(); event.preventDefault(); + scope.moveStart(); ngDocument.bind(events.move, onMove); return ngDocument.bind(events.end, onEnd); }; diff --git a/angular-slider.min.js b/angular-slider.min.js index ad45f8f..0e3058f 100644 --- a/angular-slider.min.js +++ b/angular-slider.min.js @@ -1 +1 @@ -(function(){var n,t,e,a,r,o,s,l,u,i,c,p,f,d,v,h,g;n="uiSlider",t="slider",e=function(n){return angular.element(n)},p=function(n){return""+n+"px"},s=function(n){return n.css({opacity:0})},v=function(n){return n.css({opacity:1})},i=function(n,t){return n.css({left:t})},o=function(n){return n[0].offsetWidth/2},c=function(n){return n[0].offsetLeft},g=function(n){return n[0].offsetWidth},r=function(n,t){return c(t)-c(n)-g(n)},a=function(n,t){return n.attr("ng-bind-html-unsafe",t)},d=function(n,t,e,a){var r,o,s,l;return null==a&&(a=0),null==e&&(e=1/Math.pow(10,t)),o=(n-a)%e,l=o>e/2?n+e-o:n-o,r=Math.pow(10,t),s=l*r/r,s.toFixed(t)},l={mouse:{start:"mousedown",move:"mousemove",end:"mouseup"},touch:{start:"touchstart",move:"touchmove",end:"touchend"}},h=function(n){return{restrict:"EA",scope:{floor:"@",ceiling:"@",step:"@",precision:"@",ngModel:"=?",ngModelLow:"=?",ngModelHigh:"=?",translate:"&"},template:'',compile:function(t,u){var f,h,m,b,M,w,F,C,L,x,$,y,H,I,E,R,W,X,z;if(u.translate&&u.$set("translate",""+u.translate+"(value)"),x=null==u.ngModel&&null!=u.ngModelLow&&null!=u.ngModelHigh,X=function(){var n,a,r,o;for(r=t.children(),o=[],n=0,a=r.length;a>n;n++)m=r[n],o.push(e(m));return o}(),M=X[0],H=X[1],L=X[2],C=X[3],I=X[4],b=X[5],f=X[6],F=X[7],w=X[8],h=X[9],y=x?"ngModelLow":"ngModel",$="ngModelHigh",a(I,"'Range: ' + translate({value: diff})"),a(F,"translate({value: "+y+"})"),a(w,"translate({value: "+$+"})"),a(h,"translate({value: "+y+"}) + ' - ' + translate({value: "+$+"})"),!x)for(z=[H,C,I,w,h],R=0,W=z.length;W>R;R++)t=z[R],t.remove();return E=[y,"floor","ceiling"],x&&E.push($),{post:function(t,a,u){var m,R,W,X,z,A,B,D,P,S,j,k,q,G,J;for(R=!1,D=e(document),u.translate||(t.translate=function(n){return n.value}),S=m=A=X=B=z=k=P=void 0,W=function(){var n,e,a,r,s;for(null==(r=t.precision)&&(t.precision=0),null==(s=t.step)&&(t.step=1),e=0,a=E.length;a>e;e++)n=E[e],t[n]=d(parseFloat(t[n]),parseInt(t.precision),parseFloat(t.step),parseFloat(t.floor));return t.diff=d(t[$]-t[y],parseInt(t.precision),parseFloat(t.step),parseFloat(t.floor)),S=o(L),m=g(M),A=0,X=m-g(L),B=parseFloat(u.floor),z=parseFloat(u.ceiling),k=z-B,P=X-A},j=function(){var n,e,u,M,E,z,j,q;return W(),M=function(n){return 100*((n-A)/P)},z=function(n){return 100*((n-B)/k)},E=function(n){return p(n*P/100)},u=function(n){return i(n,p(Math.min(Math.max(0,c(n)),m-g(n))))},q=function(){var n,e;return i(f,p(m-g(f))),e=z(t[y]),i(L,E(e)),i(F,p(c(L)-o(F)+S)),x?(n=z(t[$]),i(C,E(n)),i(w,p(c(C)-o(w)+S)),i(H,p(c(L)+S)),H.css({width:E(n-e)}),i(I,p(c(H)+o(H)-o(I))),i(h,p(c(H)+o(H)-o(h)))):void 0},n=function(){var n;return u(F),n=w,x&&(u(w),u(I),10>r(F,w)?(s(F),s(w),u(h),v(h),n=h):(v(F),v(w),s(h),n=w)),5>r(b,F)?s(b):x?5>r(b,n)?s(b):v(b):v(b),5>r(F,f)?s(f):x?5>r(n,f)?s(f):v(f):v(f)},e=function(n,e,r){var o,s,l;return o=function(){return n.removeClass("active"),D.unbind(r.move),D.unbind(r.end)},s=function(n){var r,o,s,l;return r=n.clientX||n.touches[0].clientX,o=r-a[0].getBoundingClientRect().left-S,o=Math.max(Math.min(o,X),A),s=M(o),l=B+k*s/100,x&&(e===y?l>t[$]&&(e=$,L.removeClass("active"),C.addClass("active")):t[y]>l&&(e=y,C.removeClass("active"),L.addClass("active"))),l=d(l,parseInt(t.precision),parseFloat(t.step),parseFloat(t.floor)),t[e]=l,t.$apply()},l=function(t){return n.addClass("active"),W(),t.stopPropagation(),t.preventDefault(),D.bind(r.move,s),D.bind(r.end,o)},n.bind(r.start,l)},j=function(){var n,t,a,r,o,s;for(R=!0,n=function(n){return e(L,y,l[n]),e(C,$,l[n])},o=["touch","mouse"],s=[],a=0,r=o.length;r>a;a++)t=o[a],s.push(n(t));return s},q(),n(),R?void 0:j()},n(j),G=0,J=E.length;J>G;G++)q=E[G],t.$watch(q,j);return window.addEventListener("resize",j)}}}}},f=["$timeout",h],u=function(e,a){return a.module(n,[]).directive(t,f)},u(window,window.angular)}).call(this); \ No newline at end of file +!function(){var n,t,e,a,r,o,s,l,u,i,c,p,f,d,v,m,h;n="uiSlider",t="slider",e=function(n){return angular.element(n)},p=function(n){return""+n+"px"},s=function(n){return n.css({opacity:0})},v=function(n){return n.css({opacity:1})},i=function(n,t){return n.css({left:t})},o=function(n){return n[0].offsetWidth/2},c=function(n){return n[0].offsetLeft},h=function(n){return n[0].offsetWidth},r=function(n,t){return c(t)-c(n)-h(n)},a=function(n,t){return n.attr("ng-bind-html-unsafe",t)},d=function(n,t,e,a){var r,o,s,l;return null==a&&(a=0),null==e&&(e=1/Math.pow(10,t)),o=(n-a)%e,l=o>e/2?n+e-o:n-o,r=Math.pow(10,t),s=l*r/r,s.toFixed(t)},l={mouse:{start:"mousedown",move:"mousemove",end:"mouseup"},touch:{start:"touchstart",move:"touchmove",end:"touchend"}},m=function(n){return{restrict:"EA",scope:{floor:"@",ceiling:"@",step:"@",precision:"@",ngModel:"=?",ngModelLow:"=?",ngModelHigh:"=?",translate:"&",moveStart:"=?",moveEnd:"=?"},template:'',compile:function(t,u){var f,m,g,b,M,w,F,C,L,x,E,$,y,H,I,S,R,W,X;if(u.translate&&u.$set("translate",""+u.translate+"(value)"),x=null==u.ngModel&&null!=u.ngModelLow&&null!=u.ngModelHigh,W=function(){var n,a,r,o;for(r=t.children(),o=[],n=0,a=r.length;a>n;n++)g=r[n],o.push(e(g));return o}(),M=W[0],y=W[1],L=W[2],C=W[3],H=W[4],b=W[5],f=W[6],F=W[7],w=W[8],m=W[9],$=x?"ngModelLow":"ngModel",E="ngModelHigh",a(H,"'Range: ' + translate({value: diff})"),a(F,"translate({value: "+$+"})"),a(w,"translate({value: "+E+"})"),a(m,"translate({value: "+$+"}) + ' - ' + translate({value: "+E+"})"),!x)for(X=[y,C,H,w,m],S=0,R=X.length;R>S;S++)t=X[S],t.remove();return I=[$,"floor","ceiling"],x&&I.push(E),{post:function(t,a,u){var g,S,R,W,X,z,A,B,D,P,j,k,q,G,J;for(S=!1,B=e(document),u.translate||(t.translate=function(n){return n.value}),P=g=z=W=A=X=k=D=void 0,R=function(){var n,e,a,r,s;for(null==(r=t.precision)&&(t.precision=0),null==(s=t.step)&&(t.step=1),e=0,a=I.length;a>e;e++)n=I[e],t[n]=d(parseFloat(t[n]),parseInt(t.precision),parseFloat(t.step),parseFloat(t.floor));return t.diff=d(t[E]-t[$],parseInt(t.precision),parseFloat(t.step),parseFloat(t.floor)),P=o(L),g=h(M),z=0,W=g-h(L),A=parseFloat(u.floor),X=parseFloat(u.ceiling),k=X-A,D=W-z},j=function(){var n,e,u,M,I,X,j,q;return R(),M=function(n){return 100*((n-z)/D)},X=function(n){return 100*((n-A)/k)},I=function(n){return p(n*D/100)},u=function(n){return i(n,p(Math.min(Math.max(0,c(n)),g-h(n))))},q=function(){var n,e;return i(f,p(g-h(f))),e=X(t[$]),i(L,I(e)),i(F,p(c(L)-o(F)+P)),x?(n=X(t[E]),i(C,I(n)),i(w,p(c(C)-o(w)+P)),i(y,p(c(L)+P)),y.css({width:I(n-e)}),i(H,p(c(y)+o(y)-o(H))),i(m,p(c(y)+o(y)-o(m)))):void 0},n=function(){var n;return u(F),n=w,x&&(u(w),u(H),r(F,w)<10?(s(F),s(w),u(m),v(m),n=m):(v(F),v(w),s(m),n=w)),r(b,F)<5?s(b):x?r(b,n)<5?s(b):v(b):v(b),r(F,f)<5?s(f):x?r(n,f)<5?s(f):v(f):v(f)},e=function(n,e,r){var o,s,l;return o=function(){return n.removeClass("active"),t.moveEnd(),B.unbind(r.move),B.unbind(r.end)},s=function(n){var r,o,s,l;return r=n.clientX||n.touches[0].clientX,o=r-a[0].getBoundingClientRect().left-P,o=Math.max(Math.min(o,W),z),s=M(o),l=A+k*s/100,x&&(e===$?l>t[E]&&(e=E,L.removeClass("active"),C.addClass("active")):la;a++)t=o[a],s.push(n(t));return s},q(),n(),S?void 0:j()},n(j),G=0,J=I.length;J>G;G++)q=I[G],t.$watch(q,j);return window.addEventListener("resize",j)}}}}},f=["$timeout",m],u=function(e,a){return a.module(n,[]).directive(t,f)},u(window,window.angular)}.call(this); \ No newline at end of file diff --git a/package.json b/package.json index 03badb3..d7388e8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-slider", - "version": "0.1.6", + "version": "0.1.7", "description": "Slider directive implementation for AngularJS, without jQuery dependencies.", "main": "angular-slider.js", "scripts": {