glider-rails 0.0.2 → 0.0.3

data/README.md

@@ -12,8 +12,6 @@ Demo is available here: http://evrone.github.io/glider
 
 `bower install glider`
 
-UPD: bower install is currently unavailable, due to project moving to a new location
-
 ### Ruby-on-Rails
 
 Add this to your Gemfile
@@ -49,7 +47,7 @@ To convert the `src/glider.coffee` to javascript, use coffeescript compiler.
 Install it with:
 
 ```
-npm -g install coffee-script'
+npm -g install coffee-script
 ```
 
 Then compile the file with:
@@ -98,3 +96,10 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+[mit]: http://www.opensource.org/licenses/mit-license.php
+[murmur]: http://en.wikipedia.org/wiki/MurmurHash
+[research]: https://panopticlick.eff.org/browser-uniqueness.pdf
+[phantomjs]: http://phantomjs.org/
+[uglifyjs]: https://github.com/mishoo/UglifyJS
+[closure]: http://closure-compiler.appspot.com

data/app/assets/javascripts/glider.coffee

@@ -0,0 +1,106 @@
+###
+ glider 0.0.3 - 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.
+###
+app = angular.module("glider", [])
+# example:
+# <slider min="0" max="100" step="1" value="age"></slider>
+#
+app.directive "slider", ["$document", ($document) ->
+
+  getSubElement = (sliderElement, className) ->
+    sliderElement[0].getElementsByClassName(className)[0]
+
+  moveHandle = (elem, posX) ->
+    angular.element(getSubElement(elem, "handle")).css("left", "#{posX}%")
+    angular.element(getSubElement(elem, "range")).css("width", "#{posX}%")
+
+  template: """
+    <span class="g-slider horizontal">
+      <span class="slider">
+        <span class="range"></span>
+        <span class="handle" ng-mousedown="mouseDown($event)"></span>
+      </span>
+      <span class="side dec">
+        <span class="button" ng-click="step(-1)">-</span>
+        <span class="bound-value">{{min()}}</span>
+      </span>
+      <span class="side inc">
+        <span class="button" ng-click="step(+1)">+</span>
+        <span class="bound-value">{{max()}}</span>
+      </span>
+    </span>
+    """
+  replace: true
+  restrict: "E"
+  scope:
+    value: "="
+    min: "&"
+    max: "&"
+
+  link: (scope, element, attrs) ->
+    sliderElement = getSubElement(element, "slider")
+    dragging = false
+    xPosition = 0
+    step = if attrs.step? then parseInt(attrs.step, 10) else 1
+
+    scope.value = scope.min() unless scope.value?
+
+    refreshHandle = ->
+      range = scope.max() - scope.min()
+      if range is 0
+        xPosition = 0
+      else
+        xPosition = (scope.value - scope.min()) / range * 100
+        xPosition = Math.min(Math.max(0, xPosition), 100)
+      moveHandle element, xPosition
+
+    scope.$watch "min()", (minValue) ->
+      if scope.value < minValue
+        scope.value = minValue
+      else
+        refreshHandle()
+
+    scope.$watch "max()", (maxValue) ->
+      if scope.value > maxValue
+        scope.value = maxValue
+      else
+        refreshHandle()
+
+    scope.$watch "value", ->
+      return  if dragging
+      refreshHandle()
+
+    scope.step = (steps) ->
+      newValue = scope.value + steps * step
+      if scope.min() <= newValue <= scope.max()
+        scope.value = newValue
+
+    scope.mouseDown = ($event) ->
+      dragging = true
+      startPointX = $event.pageX
+
+      $document.on "mousemove", ($event) ->
+        return  unless dragging
+
+        # Calculate value handle position
+        moveDelta = $event.pageX - startPointX
+        xPosition += moveDelta / sliderElement.offsetWidth * 100
+        if xPosition < 0
+          xPosition = 0
+        else if xPosition > 100
+          xPosition = 100
+        else
+          startPointX = $event.pageX
+        scope.value = Math.round((((scope.max() - scope.min()) * (xPosition / 100)) + scope.min()) / step) * step
+        scope.$apply()
+
+        moveHandle element, xPosition
+
+      # TODO check binding leaks
+      $document.on "mouseup", ->
+        dragging = false
+        $document.off "mousemove"
+]

data/app/assets/javascripts/glider.js

@@ -1,23 +1,25 @@
 /*
- glider 0.0.2 - Angularjs slider
- https://github.com/Valve/glider
+ glider 0.0.3 - 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.
 */
 
 
 (function() {
-  var app,
-    __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
+  var app;
 
   app = angular.module("glider", []);
 
   app.directive("slider", [
     "$document", function($document) {
-      var moveHandle;
+      var getSubElement, moveHandle;
+      getSubElement = function(sliderElement, className) {
+        return sliderElement[0].getElementsByClassName(className)[0];
+      };
       moveHandle = function(elem, posX) {
-        angular.element(elem[0].getElementsByClassName('handle')[0]).css("left", "" + posX + "%");
-        return angular.element(elem[0].getElementsByClassName('range')[0]).css("width", "" + 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>",
@@ -25,44 +27,58 @@
         restrict: "E",
         scope: {
           value: "=",
-          min: '&',
-          max: '&'
+          min: "&",
+          max: "&"
         },
         link: function(scope, element, attrs) {
-          var dragging, startPointX, step, xPosition;
+          var dragging, refreshHandle, sliderElement, step, xPosition;
+          sliderElement = getSubElement(element, "slider");
           dragging = false;
-          startPointX = 0;
           xPosition = 0;
           step = attrs.step != null ? parseInt(attrs.step, 10) : 1;
           if (scope.value == null) {
             scope.value = scope.min();
           }
-          scope.$watch("value", function() {
-            if (dragging) {
-              return;
-            }
-            xPosition = (scope.value - scope.min()) / (scope.max() - scope.min()) * 100;
-            if (xPosition < 0) {
+          refreshHandle = function() {
+            var range;
+            range = scope.max() - scope.min();
+            if (range === 0) {
               xPosition = 0;
             } else {
-              if (xPosition > 100) {
-                xPosition = 100;
-              }
+              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(step_value) {
-            var inc, _i, _ref, _ref1, _ref2, _results;
-            inc = step_value * step;
-            if (_ref = scope.value + inc, __indexOf.call((function() {
-              _results = [];
-              for (var _i = _ref1 = scope.min(), _ref2 = scope.max(); _ref1 <= _ref2 ? _i <= _ref2 : _i >= _ref2; _ref1 <= _ref2 ? _i++ : _i--){ _results.push(_i); }
-              return _results;
-            }).apply(this), _ref) >= 0) {
-              return scope.value += inc;
+          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;
             dragging = true;
             startPointX = $event.pageX;
             $document.on("mousemove", function($event) {
@@ -71,7 +87,7 @@
                 return;
               }
               moveDelta = $event.pageX - startPointX;
-              xPosition = xPosition + ((moveDelta / element[0].offsetWidth) * 100);
+              xPosition += moveDelta / sliderElement.offsetWidth * 100;
               if (xPosition < 0) {
                 xPosition = 0;
               } else if (xPosition > 100) {
@@ -83,7 +99,7 @@
               scope.$apply();
               return moveHandle(element, xPosition);
             });
-            return $document.on('mouseup', function() {
+            return $document.on("mouseup", function() {
               dragging = false;
               return $document.off("mousemove");
             });

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

@@ -1 +1 @@
-!function(){var n,a=[].indexOf||function(n){for(var a=0,e=this.length;e>a;a++)if(a in this&&this[a]===n)return a;return-1};n=angular.module("glider",[]),n.directive("slider",["$document",function(n){var e;return e=function(n,a){return angular.element(n[0].getElementsByClassName("handle")[0]).css("left",""+a+"%"),angular.element(n[0].getElementsByClassName("range")[0]).css("width",""+a+"%")},{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,l){var u,r,i,o;return u=!1,r=0,o=0,i=null!=l.step?parseInt(l.step,10):1,null==s.value&&(s.value=s.min()),s.$watch("value",function(){return u?void 0:(o=100*((s.value-s.min())/(s.max()-s.min())),0>o?o=0:o>100&&(o=100),e(t,o))}),s.step=function(n){var e,t,l,u;return e=n*i,t=s.value+e,a.call(function(){u=[];for(var n=l=s.min(),a=s.max();a>=l?a>=n:n>=a;a>=l?n++:n--)u.push(n);return u}.apply(this),t)>=0?s.value+=e:void 0},s.mouseDown=function(a){return u=!0,r=a.pageX,n.on("mousemove",function(n){var a;if(u)return a=n.pageX-r,o+=100*(a/t[0].offsetWidth),0>o?o=0:o>100?o=100:r=n.pageX,s.value=Math.round(((s.max()-s.min())*(o/100)+s.min())/i)*i,s.$apply(),e(t,o)}),n.on("mouseup",function(){return u=!1,n.off("mousemove")})}}}}])}.call(this);
+(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);

data/glider-rails.gemspec

@@ -4,11 +4,11 @@ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
 
 Gem::Specification.new do |gem|
   gem.name          = "glider-rails"
-  gem.version       = "0.0.2"
+  gem.version       = "0.0.3"
   gem.authors       = ["Valentin Vasilyev", "Dmitry Karpunin"]
-  gem.email         = ["iamvalentin@gmail.com"]
-  gem.description   = "Glider, angularjs UI slider for rails asset pipeline"
-  gem.summary       = "Glider - angularjs UI slider library, packaged for Ruby-on-Rails asset pipeline"
+  gem.email         = ["iamvalentin@gmail.com", "koderfunk@gmail.com"]
+  gem.description   = "Glider, AngularJS UI slider for rails asset pipeline"
+  gem.summary       = "Glider — AngularJS UI slider library, packaged for Ruby-on-Rails asset pipeline"
   gem.homepage      = "http://evrone.github.com/glider-rails"
 
   gem.files         = `git ls-files`.split($/)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glider-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
   prerelease: 
 platform: ruby
 authors:
@@ -10,11 +10,12 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-09-09 00:00:00.000000000 Z
+date: 2013-09-16 00:00:00.000000000 Z
 dependencies: []
-description: Glider, angularjs UI slider for rails asset pipeline
+description: Glider, AngularJS UI slider for rails asset pipeline
 email:
 - iamvalentin@gmail.com
+- koderfunk@gmail.com
 executables: []
 extensions: []
 extra_rdoc_files: []
@@ -24,6 +25,7 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
+- app/assets/javascripts/glider.coffee
 - app/assets/javascripts/glider.js
 - app/assets/javascripts/glider.min.js
 - glider-rails.gemspec
@@ -48,8 +50,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 1.8.23
+rubygems_version: 1.8.25
 signing_key: 
 specification_version: 3
-summary: Glider - angularjs UI slider library, packaged for Ruby-on-Rails asset pipeline
+summary: Glider — AngularJS UI slider library, packaged for Ruby-on-Rails asset pipeline
 test_files: []