diff --git a/angular-slider.css b/angular-slider.css index b38506b..96006d7 100644 --- a/angular-slider.css +++ b/angular-slider.css @@ -22,24 +22,22 @@ slider span.bar { z-index: 0; -webkit-border-radius: 1em/1em; border-radius: 1em/1em; - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c0c0c0), color-stop(1, #8d8d8d)); - background: -webkit-linear-gradient(top, #c0c0c0 0, #8d8d8d 100%); - background: -moz-linear-gradient(top, #c0c0c0 0, #8d8d8d 100%); - background: -o-linear-gradient(top, #c0c0c0 0, #8d8d8d 100%); - background: -ms-linear-gradient(top, #c0c0c0 0, #8d8d8d 100%); - background: linear-gradient(top, #c0c0c0 0, #8d8d8d 100%); + background: -webkit-linear-gradient(top, #c0c0c0, #8d8d8d); + background: -moz-linear-gradient(top, #c0c0c0, #8d8d8d); + background: -o-linear-gradient(top, #c0c0c0, #8d8d8d); + background: -ms-linear-gradient(top, #c0c0c0, #8d8d8d); + background: linear-gradient(to bottom, #c0c0c0, #8d8d8d); -webkit-box-shadow: inset 2px 2px 5px; box-shadow: inset 2px 2px 5px; } slider span.bar.selection { width: 0%; z-index: 1; - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #13b6ff), color-stop(1, #00a8f3)); - background: -webkit-linear-gradient(top, #13b6ff 0, #00a8f3 100%); - background: -moz-linear-gradient(top, #13b6ff 0, #00a8f3 100%); - background: -o-linear-gradient(top, #13b6ff 0, #00a8f3 100%); - background: -ms-linear-gradient(top, #13b6ff 0, #00a8f3 100%); - background: linear-gradient(top, #13b6ff 0, #00a8f3 100%); + background: -webkit-linear-gradient(top, #13b6ff, #00a8f3); + background: -moz-linear-gradient(top, #13b6ff, #00a8f3); + background: -o-linear-gradient(top, #13b6ff, #00a8f3); + background: -ms-linear-gradient(top, #13b6ff, #00a8f3); + background: linear-gradient(to bottom, #13b6ff, #00a8f3); -webkit-box-shadow: none; box-shadow: none; } diff --git a/angular-slider.js b/angular-slider.js index 00ee8f3..cb05598 100644 --- a/angular-slider.js +++ b/angular-slider.js @@ -1,4 +1,4 @@ -// Generated by CoffeeScript 1.6.2 +// Generated by CoffeeScript 1.6.3 (function() { var MODULE_NAME, SLIDER_TAG, angularize, bindHtml, gap, halfWidth, hide, inputEvents, module, offset, offsetLeft, pixelize, qualifiedDirectiveDefinition, roundStep, show, sliderDirective, width; @@ -49,12 +49,11 @@ }; bindHtml = function(element, html) { - return element.attr('ng-bind-html-unsafe', html); + return element.attr('ng-bind-html', html); }; roundStep = function(value, precision, step, floor) { var decimals, remainder, roundedValue, steppedValue; - if (floor == null) { floor = 0; } @@ -94,17 +93,15 @@ ngModelHigh: '=?', translate: '&' }, - template: '', + template: '', compile: function(element, attributes) { var ceilBub, cmbBub, e, flrBub, fullBar, highBub, lowBub, maxPtr, minPtr, range, refHigh, refLow, selBar, selBub, watchables, _i, _len, _ref, _ref1; - if (attributes.translate) { attributes.$set('translate', "" + attributes.translate + "(value)"); } range = (attributes.ngModel == null) && ((attributes.ngModelLow != null) && (attributes.ngModelHigh != null)); _ref = (function() { var _i, _len, _ref, _results; - _ref = element.children(); _results = []; for (_i = 0, _len = _ref.length; _i < _len; _i++) { @@ -133,7 +130,6 @@ return { post: function(scope, element, attributes) { var barWidth, boundToInputs, dimensions, maxOffset, maxValue, minOffset, minValue, ngDocument, offsetRange, pointerHalfWidth, updateDOM, valueRange, w, _j, _len1; - boundToInputs = false; ngDocument = angularize(document); if (!attributes.translate) { @@ -143,12 +139,11 @@ } pointerHalfWidth = barWidth = minOffset = maxOffset = minValue = maxValue = valueRange = offsetRange = void 0; dimensions = function() { - var value, _j, _len1, _ref2, _ref3; - - if ((_ref2 = scope.precision) == null) { + var value, _j, _len1; + if (scope.precision == null) { scope.precision = 0; } - if ((_ref3 = scope.step) == null) { + if (scope.step == null) { scope.step = 1; } for (_j = 0, _len1 = watchables.length; _j < _len1; _j++) { @@ -167,7 +162,6 @@ }; updateDOM = function() { var adjustBubbles, bindToInputEvents, fitToBar, percentOffset, percentToOffset, percentValue, setBindings, setPointers; - dimensions(); percentOffset = function(offset) { return ((offset - minOffset) / offsetRange) * 100; @@ -183,7 +177,6 @@ }; setPointers = function() { var newHighValue, newLowValue; - offset(ceilBub, pixelize(barWidth - width(ceilBub))); newLowValue = percentValue(scope[refLow]); offset(minPtr, percentToOffset(newLowValue)); @@ -202,7 +195,6 @@ }; adjustBubbles = function() { var bubToAdjust; - fitToBar(lowBub); bubToAdjust = highBub; if (range) { @@ -250,7 +242,6 @@ }; bindToInputEvents = function(pointer, ref, events) { var onEnd, onMove, onStart; - onEnd = function() { pointer.removeClass('active'); ngDocument.unbind(events.move); @@ -258,7 +249,6 @@ }; onMove = function(event) { var eventX, newOffset, newPercent, newValue; - eventX = event.clientX || event.touches[0].clientX; newOffset = eventX - element[0].getBoundingClientRect().left - pointerHalfWidth; newOffset = Math.max(Math.min(newOffset, maxOffset), minOffset); @@ -295,7 +285,6 @@ }; setBindings = function() { var bind, inputMethod, _j, _len1, _ref2, _results; - boundToInputs = true; bind = function(method) { bindToInputEvents(minPtr, refLow, inputEvents[method]); diff --git a/angular-slider.min.css b/angular-slider.min.css index 01c456c..42ef7dc 100644 --- a/angular-slider.min.css +++ b/angular-slider.min.css @@ -1,8 +1,8 @@ slider{display:inline-block;position:relative;height:7px;width:100%;margin:25px 5px 25px 5px;vertical-align:middle;} slider span{white-space:nowrap;position:absolute;display:inline-block;} slider span.base{width:100%;height:100%;padding:0} -slider span.bar{width:100%;height:100%;z-index:0;-webkit-border-radius:1em/1em;border-radius:1em/1em;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #c0c0c0), color-stop(1, #8d8d8d));background:-webkit-linear-gradient(top, #c0c0c0 0, #8d8d8d 100%);background:-moz-linear-gradient(top, #c0c0c0 0, #8d8d8d 100%);background:-o-linear-gradient(top, #c0c0c0 0, #8d8d8d 100%);background:-ms-linear-gradient(top, #c0c0c0 0, #8d8d8d 100%);background:linear-gradient(top, #c0c0c0 0, #8d8d8d 100%);-webkit-box-shadow:inset 2px 2px 5px;box-shadow:inset 2px 2px 5px;} -slider span.bar.selection{width:0%;z-index:1;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #13b6ff), color-stop(1, #00a8f3));background:-webkit-linear-gradient(top, #13b6ff 0, #00a8f3 100%);background:-moz-linear-gradient(top, #13b6ff 0, #00a8f3 100%);background:-o-linear-gradient(top, #13b6ff 0, #00a8f3 100%);background:-ms-linear-gradient(top, #13b6ff 0, #00a8f3 100%);background:linear-gradient(top, #13b6ff 0, #00a8f3 100%);-webkit-box-shadow:none;box-shadow:none} +slider span.bar{width:100%;height:100%;z-index:0;-webkit-border-radius:1em/1em;border-radius:1em/1em;background:-webkit-linear-gradient(top, #c0c0c0, #8d8d8d);background:-moz-linear-gradient(top, #c0c0c0, #8d8d8d);background:-o-linear-gradient(top, #c0c0c0, #8d8d8d);background:-ms-linear-gradient(top, #c0c0c0, #8d8d8d);background:linear-gradient(to bottom, #c0c0c0, #8d8d8d);-webkit-box-shadow:inset 2px 2px 5px;box-shadow:inset 2px 2px 5px;} +slider span.bar.selection{width:0%;z-index:1;background:-webkit-linear-gradient(top, #13b6ff, #00a8f3);background:-moz-linear-gradient(top, #13b6ff, #00a8f3);background:-o-linear-gradient(top, #13b6ff, #00a8f3);background:-ms-linear-gradient(top, #13b6ff, #00a8f3);background:linear-gradient(to bottom, #13b6ff, #00a8f3);-webkit-box-shadow:none;box-shadow:none} slider span.pointer{cursor:pointer;width:20px;height:20px;top:-8px;background-color:#fff;border:1px solid #000;z-index:2;-webkit-border-radius:1em/1em;border-radius:1em/1em;} slider span.pointer:after{content:'';background-color:#808080;width:8px;height:8px;position:absolute;top:6px;left:6px;-webkit-border-radius:1em/1em;border-radius:1em/1em} slider span.pointer:hover:after{background-color:#000} diff --git a/angular-slider.min.js b/angular-slider.min.js index ad45f8f..293aa5b 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,i,u,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})},u=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",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,i){var f,h,m,b,M,w,F,C,L,x,$,y,H,I,E,R,W,X,z;if(i.translate&&i.$set("translate",""+i.translate+"(value)"),x=null==i.ngModel&&null!=i.ngModelLow&&null!=i.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,i){var m,R,W,X,z,A,B,D,P,S,j,k,q,G,J;for(R=!1,D=e(document),i.translate||(t.translate=function(n){return n.value}),S=m=A=X=B=z=k=P=void 0,W=function(){var n,e,a;for(null==t.precision&&(t.precision=0),null==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(i.floor),z=parseFloat(i.ceiling),k=z-B,P=X-A},j=function(){var n,e,i,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)},i=function(n){return u(n,p(Math.min(Math.max(0,c(n)),m-g(n))))},q=function(){var n,e;return u(f,p(m-g(f))),e=z(t[y]),u(L,E(e)),u(F,p(c(L)-o(F)+S)),x?(n=z(t[$]),u(C,E(n)),u(w,p(c(C)-o(w)+S)),u(H,p(c(L)+S)),H.css({width:E(n-e)}),u(I,p(c(H)+o(H)-o(I))),u(h,p(c(H)+o(H)-o(h)))):void 0},n=function(){var n;return i(F),n=w,x&&(i(w),i(I),10>r(F,w)?(s(F),s(w),i(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],i=function(e,a){return a.module(n,[]).directive(t,f)},i(window,window.angular)}).call(this); \ No newline at end of file diff --git a/build.sh b/build.sh old mode 100644 new mode 100755 diff --git a/src/angular-slider.coffee b/src/angular-slider.coffee index e829ed2..ed7174b 100644 --- a/src/angular-slider.coffee +++ b/src/angular-slider.coffee @@ -14,7 +14,7 @@ halfWidth = (element) -> element[0].offsetWidth / 2 offsetLeft = (element) -> element[0].offsetLeft width = (element) -> element[0].offsetWidth gap = (element1, element2) -> offsetLeft(element2) - offsetLeft(element1) - width(element1) -bindHtml = (element, html) -> element.attr 'ng-bind-html-unsafe', html +bindHtml = (element, html) -> element.attr 'ng-bind-html', html roundStep = (value, precision, step, floor = 0) -> step ?= 1 / Math.pow(10, precision) remainder = (value - floor) % step @@ -48,7 +48,7 @@ sliderDirective = ($timeout) -> ngModelLow: '=?' ngModelHigh: '=?' translate: '&' - template: '' + template: '' compile: (element, attributes) -> # Expand the translation function abbreviation @@ -60,7 +60,7 @@ sliderDirective = ($timeout) -> # Get references to template elements [fullBar, selBar, minPtr, maxPtr, selBub, flrBub, ceilBub, lowBub, highBub, cmbBub] = (angularize(e) for e in element.children()) - + # Shorthand references to the 2 model scopes refLow = if range then 'ngModelLow' else 'ngModel' refHigh = 'ngModelHigh' @@ -93,7 +93,7 @@ sliderDirective = ($timeout) -> scope.step ?= 1 scope[value] = roundStep(parseFloat(scope[value]), parseInt(scope.precision), parseFloat(scope.step), parseFloat(scope.floor)) for value in watchables scope.diff = roundStep(scope[refHigh] - scope[refLow], parseInt(scope.precision), parseFloat(scope.step), parseFloat(scope.floor)) - + # Commonly used measurements pointerHalfWidth = halfWidth minPtr barWidth = width fullBar @@ -105,7 +105,7 @@ sliderDirective = ($timeout) -> maxValue = parseFloat attributes.ceiling valueRange = maxValue - minValue - offsetRange = maxOffset - minOffset + offsetRange = maxOffset - minOffset updateDOM = -> dimensions() @@ -174,7 +174,7 @@ sliderDirective = ($timeout) -> ngDocument.unbind events.move ngDocument.unbind events.end onMove = (event) -> - eventX = event.clientX || event.touches[0].clientX + eventX = event.clientX || (event.touches ? event.touches[0].clientX : 0) newOffset = eventX - element[0].getBoundingClientRect().left - pointerHalfWidth newOffset = Math.max(Math.min(newOffset, maxOffset), minOffset) newPercent = percentOffset newOffset @@ -187,7 +187,7 @@ sliderDirective = ($timeout) -> maxPtr.addClass 'active' else if newValue < scope[refLow] - ref = refLow + ref = refLow maxPtr.removeClass 'active' minPtr.addClass 'active' newValue = roundStep(newValue, parseInt(scope.precision), parseFloat(scope.step), parseFloat(scope.floor))