glider-rails 0.0.3 → 0.0.4

data/README.md

@@ -1,6 +1,6 @@
 # Glider - angularjs UI slider
 
-Glider - angularjs slider with no dependencies. Dead simple - 74 LOC.
+Glider - angularjs slider with no dependencies. Dead simple - ~~74~~ 98 LOC.
 
 ## Demo
 
@@ -41,6 +41,12 @@ And then in HTML:
 <slider min="21" max="130" value="age"></slider>
 ```
 
+To defer value update until `mouseup`:
+
+```html
+<slider defer_update min="21" max="130" value="age"></slider>
+```
+
 ## CoffeeScript to JavaScript compilation
 
 To convert the `src/glider.coffee` to javascript, use coffeescript compiler.

data/app/assets/javascripts/glider.coffee

@@ -1,5 +1,5 @@
 ###
- glider 0.0.3 - AngularJS slider
+ glider 0.0.4 - AngularJS slider
  https://github.com/evrone/glider
  Copyright (c) 2013 Valentin Vasilyev, Dmitry Karpunin
  Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
@@ -7,6 +7,8 @@
 app = angular.module("glider", [])
 # example:
 # <slider min="0" max="100" step="1" value="age"></slider>
+# example with update only on mouse up and stop drag
+# <slider defer_update min="0" max="100" step="1" value="age"></slider>
 #
 app.directive "slider", ["$document", ($document) ->
 
@@ -45,6 +47,7 @@ app.directive "slider", ["$document", ($document) ->
     dragging = false
     xPosition = 0
     step = if attrs.step? then parseInt(attrs.step, 10) else 1
+    deferUpdate =  attrs.deferUpdate?
 
     scope.value = scope.min() unless scope.value?
 
@@ -82,9 +85,12 @@ app.directive "slider", ["$document", ($document) ->
       dragging = true
       startPointX = $event.pageX
 
+      updateValue = ->
+        scope.value = Math.round((((scope.max() - scope.min()) * (xPosition / 100)) + scope.min()) / step) * step
+        scope.$apply()
+
       $document.on "mousemove", ($event) ->
         return  unless dragging
-
         # Calculate value handle position
         moveDelta = $event.pageX - startPointX
         xPosition += moveDelta / sliderElement.offsetWidth * 100
@@ -94,13 +100,11 @@ app.directive "slider", ["$document", ($document) ->
           xPosition = 100
         else
           startPointX = $event.pageX
-        scope.value = Math.round((((scope.max() - scope.min()) * (xPosition / 100)) + scope.min()) / step) * step
-        scope.$apply()
-
+        updateValue() unless deferUpdate
         moveHandle element, xPosition
 
-      # TODO check binding leaks
       $document.on "mouseup", ->
         dragging = false
+        updateValue() if deferUpdate
         $document.off "mousemove"
 ]

data/app/assets/javascripts/glider.js

@@ -1,5 +1,6 @@
+// Generated by CoffeeScript 1.6.3
 /*
- glider 0.0.3 - AngularJS slider
+ glider 0.0.4 - AngularJS slider
  https://github.com/evrone/glider
  Copyright (c) 2013 Valentin Vasilyev, Dmitry Karpunin
  Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
@@ -31,11 +32,12 @@
           max: "&"
         },
         link: function(scope, element, attrs) {
-          var dragging, refreshHandle, sliderElement, step, xPosition;
+          var deferUpdate, dragging, refreshHandle, sliderElement, step, xPosition;
           sliderElement = getSubElement(element, "slider");
           dragging = false;
           xPosition = 0;
           step = attrs.step != null ? parseInt(attrs.step, 10) : 1;
+          deferUpdate = attrs.deferUpdate != null;
           if (scope.value == null) {
             scope.value = scope.min();
           }
@@ -78,9 +80,13 @@
             }
           };
           return scope.mouseDown = function($event) {
-            var startPointX;
+            var startPointX, updateValue;
             dragging = true;
             startPointX = $event.pageX;
+            updateValue = function() {
+              scope.value = Math.round((((scope.max() - scope.min()) * (xPosition / 100)) + scope.min()) / step) * step;
+              return scope.$apply();
+            };
             $document.on("mousemove", function($event) {
               var moveDelta;
               if (!dragging) {
@@ -95,12 +101,16 @@
               } else {
                 startPointX = $event.pageX;
               }
-              scope.value = Math.round((((scope.max() - scope.min()) * (xPosition / 100)) + scope.min()) / step) * step;
-              scope.$apply();
+              if (!deferUpdate) {
+                updateValue();
+              }
               return moveHandle(element, xPosition);
             });
             return $document.on("mouseup", function() {
               dragging = false;
+              if (deferUpdate) {
+                updateValue();
+              }
               return $document.off("mousemove");
             });
           };

data/app/assets/javascripts/glider.min.js

@@ -1 +1 @@
-(function(){var n;n=angular.module("glider",[]),n.directive("slider",["$document",function(n){var a,e;return a=function(n,a){return n[0].getElementsByClassName(a)[0]},e=function(n,e){return angular.element(a(n,"handle")).css("left",""+e+"%"),angular.element(a(n,"range")).css("width",""+e+"%")},{template:'<span class="g-slider horizontal">\n  <span class="slider">\n    <span class="range"></span>\n    <span class="handle" ng-mousedown="mouseDown($event)"></span>\n  </span>\n  <span class="side dec">\n    <span class="button" ng-click="step(-1)">-</span>\n    <span class="bound-value">{{min()}}</span>\n  </span>\n  <span class="side inc">\n    <span class="button" ng-click="step(+1)">+</span>\n    <span class="bound-value">{{max()}}</span>\n  </span>\n</span>',replace:!0,restrict:"E",scope:{value:"=",min:"&",max:"&"},link:function(s,t,u){var l,r,i,c,o;return i=a(t,"slider"),l=!1,o=0,c=null!=u.step?parseInt(u.step,10):1,null==s.value&&(s.value=s.min()),r=function(){var n;return n=s.max()-s.min(),0===n?o=0:(o=100*((s.value-s.min())/n),o=Math.min(Math.max(0,o),100)),e(t,o)},s.$watch("min()",function(n){return s.value<n?s.value=n:r()}),s.$watch("max()",function(n){return s.value>n?s.value=n:r()}),s.$watch("value",function(){return l?void 0:r()}),s.step=function(n){var a;return a=s.value+n*c,s.min()<=a&&a<=s.max()?s.value=a:void 0},s.mouseDown=function(a){var u;return l=!0,u=a.pageX,n.on("mousemove",function(n){var a;if(l)return a=n.pageX-u,o+=100*(a/i.offsetWidth),0>o?o=0:o>100?o=100:u=n.pageX,s.value=Math.round(((s.max()-s.min())*(o/100)+s.min())/c)*c,s.$apply(),e(t,o)}),n.on("mouseup",function(){return l=!1,n.off("mousemove")})}}}}])}).call(this);
+!function(){var app;app=angular.module("glider",[]);app.directive("slider",["$document",function($document){var getSubElement,moveHandle;getSubElement=function(sliderElement,className){return sliderElement[0].getElementsByClassName(className)[0]};moveHandle=function(elem,posX){angular.element(getSubElement(elem,"handle")).css("left",""+posX+"%");return angular.element(getSubElement(elem,"range")).css("width",""+posX+"%")};return{template:'<span class="g-slider horizontal">\n  <span class="slider">\n    <span class="range"></span>\n    <span class="handle" ng-mousedown="mouseDown($event)"></span>\n  </span>\n  <span class="side dec">\n    <span class="button" ng-click="step(-1)">-</span>\n    <span class="bound-value">{{min()}}</span>\n  </span>\n  <span class="side inc">\n    <span class="button" ng-click="step(+1)">+</span>\n    <span class="bound-value">{{max()}}</span>\n  </span>\n</span>',replace:true,restrict:"E",scope:{value:"=",min:"&",max:"&"},link:function(scope,element,attrs){var deferUpdate,dragging,refreshHandle,sliderElement,step,xPosition;sliderElement=getSubElement(element,"slider");dragging=false;xPosition=0;step=attrs.step!=null?parseInt(attrs.step,10):1;deferUpdate=attrs.deferUpdate!=null;if(scope.value==null){scope.value=scope.min()}refreshHandle=function(){var range;range=scope.max()-scope.min();if(range===0){xPosition=0}else{xPosition=(scope.value-scope.min())/range*100;xPosition=Math.min(Math.max(0,xPosition),100)}return moveHandle(element,xPosition)};scope.$watch("min()",function(minValue){if(scope.value<minValue){return scope.value=minValue}else{return refreshHandle()}});scope.$watch("max()",function(maxValue){if(scope.value>maxValue){return scope.value=maxValue}else{return refreshHandle()}});scope.$watch("value",function(){if(dragging){return}return refreshHandle()});scope.step=function(steps){var newValue;newValue=scope.value+steps*step;if(scope.min()<=newValue&&newValue<=scope.max()){return scope.value=newValue}};return scope.mouseDown=function($event){var startPointX,updateValue;dragging=true;startPointX=$event.pageX;updateValue=function(){scope.value=Math.round(((scope.max()-scope.min())*(xPosition/100)+scope.min())/step)*step;return scope.$apply()};$document.on("mousemove",function($event){var moveDelta;if(!dragging){return}moveDelta=$event.pageX-startPointX;xPosition+=moveDelta/sliderElement.offsetWidth*100;if(xPosition<0){xPosition=0}else if(xPosition>100){xPosition=100}else{startPointX=$event.pageX}if(!deferUpdate){updateValue()}return moveHandle(element,xPosition)});return $document.on("mouseup",function(){dragging=false;if(deferUpdate){updateValue()}return $document.off("mousemove")})}}}}])}.call(this);

data/glider-rails.gemspec

@@ -4,7 +4,7 @@ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
 
 Gem::Specification.new do |gem|
   gem.name          = "glider-rails"
-  gem.version       = "0.0.3"
+  gem.version       = "0.0.4"
   gem.authors       = ["Valentin Vasilyev", "Dmitry Karpunin"]
   gem.email         = ["iamvalentin@gmail.com", "koderfunk@gmail.com"]
   gem.description   = "Glider, AngularJS UI slider for rails asset pipeline"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glider-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
   prerelease: 
 platform: ruby
 authors:
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-09-16 00:00:00.000000000 Z
+date: 2013-09-17 00:00:00.000000000 Z
 dependencies: []
 description: Glider, AngularJS UI slider for rails asset pipeline
 email:
@@ -50,7 +50,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 1.8.25
+rubygems_version: 1.8.23
 signing_key: 
 specification_version: 3
 summary: Glider — AngularJS UI slider library, packaged for Ruby-on-Rails asset pipeline