glider-rails 0.0.6 → 0.1.0

data/app/assets/javascripts/glider.coffee

@@ -1,16 +1,23 @@
 ###
- glider 0.0.6 - 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.
+  glider 0.1.0 - 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.
+
+  examples:
+
+  basic:
+  <slider min="0" max="100" step="1" value="age"></slider>
+
+  update only on mouse up
+  <slider defer_update min="0" max="100" step="1" value="age"></slider>
+
+  slider with increments (incompatible with step option)
+  <slider min="0" max="100" increments="10,50,60,90"></slider>
 ###
 'use strict';
 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) ->
 
   getSubElement = (sliderElement, className) ->
@@ -28,14 +35,20 @@ app.directive "slider", ["$document", ($document) ->
       </span>
       <span class="side dec">
         <span class="button" ng-click="step(-1)">-</span>
-        <span class="bound-value">{{min() | slice}}</span>
+        <span class="bound-value">{{min() | intersperse}}</span>
       </span>
       <span class="side inc">
         <span class="button" ng-click="step(+1)">+</span>
-        <span class="bound-value">{{max() | slice}}</span>
+        <span class="bound-value">{{max() | intersperse}}</span>
+      </span>
+      <span class="increments">
+        <span ng-repeat="i in increments" class="i" style="left: {{i.offset}}%">
+          {{ i.value | intersperse }}
+        </span>
       </span>
     </span>
     """
+
   replace: true
   restrict: "E"
   scope:
@@ -44,6 +57,17 @@ app.directive "slider", ["$document", ($document) ->
     max: "&"
 
   link: (scope, element, attrs) ->
+    parseIncrements = ->
+      trim = (input) -> if input then input.replace(/^\s+|\s+$/g, '') else input
+      offset = (min, max, value) -> value / Math.abs(max - min) * 100
+      if attrs.increments
+        min = scope.min()
+        max = scope.max()
+        increments = attrs.increments.split(',')
+        increments = for i in increments when min < parseInt(i) < max
+          value: parseInt(trim(i), 10)
+          offset: offset(min, max, i)
+
     sliderElement = getSubElement(element, "slider")
     dragging = false
     xPosition = 0
@@ -52,6 +76,12 @@ app.directive "slider", ["$document", ($document) ->
 
     scope.value = scope.min() unless scope.value?
 
+    scope.increments = parseIncrements(attrs.increments)
+    if attrs.increments?
+      scope.snapValues = ([scope.min(), scope.max()].concat(i.value for i in scope.increments))
+        .sort((a,b) -> a - b)
+
+
     refreshHandle = ->
       range = scope.max() - scope.min()
       if range is 0
@@ -73,14 +103,31 @@ app.directive "slider", ["$document", ($document) ->
       else
         refreshHandle()
 
-    scope.$watch "value", ->
+    scope.$watch "value", (newVal, oldVal)->
       return  if dragging
-      refreshHandle()
+      if scope.min() <= newVal <= scope.max()
+        refreshHandle()
+      else
+        newVal = oldVal
 
     scope.step = (steps) ->
-      newValue = scope.value + steps * step
-      if scope.min() <= newValue <= scope.max()
-        scope.value = newValue
+      doStep = (steps)->
+        newValue = scope.value + steps * step
+        if scope.min() <= newValue <= scope.max()
+          scope.value = newValue
+
+      doIncrement = (steps) ->
+        newVal = if steps > 0
+          (sv for sv in scope.snapValues when sv > scope.value)[0]
+        else
+          (sv for sv in scope.snapValues when sv < scope.value).sort((a,b) -> b - a)[0]
+        scope.value = newVal if newVal?
+
+      if attrs.increments?
+        doIncrement(steps)
+      else
+        doStep(steps)
+
 
     scope.mouseDown = ($event) ->
       dragging = true
@@ -90,6 +137,20 @@ app.directive "slider", ["$document", ($document) ->
         scope.value = Math.round((((scope.max() - scope.min()) * (xPosition / 100)) + scope.min()) / step) * step
         scope.$apply()
 
+      snap = ->
+        i = 0
+        l = scope.snapValues.length
+
+        while i < l
+          diff = Math.abs(scope.snapValues[i] - scope.value)
+          min = diff unless min?
+          if diff <= min
+            closest = scope.snapValues[i]
+            min = diff
+          i++
+        scope.value = closest
+        scope.$apply()
+
       $document.on "mousemove", ($event) ->
         return  unless dragging
         # Calculate value handle position
@@ -107,9 +168,10 @@ app.directive "slider", ["$document", ($document) ->
       $document.on "mouseup", ->
         dragging = false
         updateValue() if deferUpdate
+        snap() if scope.increments
         $document.off "mousemove"
 ]
-app.filter 'slice',  ->
+app.filter 'intersperse',  ->
   (input) ->
     return unless input?
     input = input.toString()

data/app/assets/javascripts/glider.js

@@ -1,9 +1,20 @@
 // Generated by CoffeeScript 1.6.3
 /*
- glider 0.0.6 - 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.
+  glider 0.1.0 - 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.
+
+  examples:
+
+  basic:
+  <slider min="0" max="100" step="1" value="age"></slider>
+
+  update only on mouse up
+  <slider defer_update min="0" max="100" step="1" value="age"></slider>
+
+  slider with increments (incompatible with step option)
+  <slider min="0" max="100" increments="10,50,60,90"></slider>
 */
 
 
@@ -24,7 +35,7 @@
         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() | slice}}</span>\n  </span>\n  <span class=\"side inc\">\n    <span class=\"button\" ng-click=\"step(+1)\">+</span>\n    <span class=\"bound-value\">{{max() | slice}}</span>\n  </span>\n</span>",
+        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() | intersperse}}</span>\n  </span>\n  <span class=\"side inc\">\n    <span class=\"button\" ng-click=\"step(+1)\">+</span>\n    <span class=\"bound-value\">{{max() | intersperse}}</span>\n  </span>\n  <span class=\"increments\">\n    <span ng-repeat=\"i in increments\" class=\"i\" style=\"left: {{i.offset}}%\">\n      {{ i.value | intersperse }}\n    </span>\n  </span>\n</span>",
         replace: true,
         restrict: "E",
         scope: {
@@ -33,7 +44,39 @@
           max: "&"
         },
         link: function(scope, element, attrs) {
-          var deferUpdate, dragging, refreshHandle, sliderElement, step, xPosition;
+          var deferUpdate, dragging, i, parseIncrements, refreshHandle, sliderElement, step, xPosition;
+          parseIncrements = function() {
+            var i, increments, max, min, offset, trim;
+            trim = function(input) {
+              if (input) {
+                return input.replace(/^\s+|\s+$/g, '');
+              } else {
+                return input;
+              }
+            };
+            offset = function(min, max, value) {
+              return value / Math.abs(max - min) * 100;
+            };
+            if (attrs.increments) {
+              min = scope.min();
+              max = scope.max();
+              increments = attrs.increments.split(',');
+              return increments = (function() {
+                var _i, _len, _ref, _results;
+                _results = [];
+                for (_i = 0, _len = increments.length; _i < _len; _i++) {
+                  i = increments[_i];
+                  if ((min < (_ref = parseInt(i)) && _ref < max)) {
+                    _results.push({
+                      value: parseInt(trim(i), 10),
+                      offset: offset(min, max, i)
+                    });
+                  }
+                }
+                return _results;
+              })();
+            }
+          };
           sliderElement = getSubElement(element, "slider");
           dragging = false;
           xPosition = 0;
@@ -42,6 +85,21 @@
           if (scope.value == null) {
             scope.value = scope.min();
           }
+          scope.increments = parseIncrements(attrs.increments);
+          if (attrs.increments != null) {
+            scope.snapValues = ([scope.min(), scope.max()].concat((function() {
+              var _i, _len, _ref, _results;
+              _ref = scope.increments;
+              _results = [];
+              for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+                i = _ref[_i];
+                _results.push(i.value);
+              }
+              return _results;
+            })())).sort(function(a, b) {
+              return a - b;
+            });
+          }
           refreshHandle = function() {
             var range;
             range = scope.max() - scope.min();
@@ -67,27 +125,88 @@
               return refreshHandle();
             }
           });
-          scope.$watch("value", function() {
+          scope.$watch("value", function(newVal, oldVal) {
             if (dragging) {
               return;
             }
-            return refreshHandle();
+            if ((scope.min() <= newVal && newVal <= scope.max())) {
+              return refreshHandle();
+            } else {
+              return newVal = oldVal;
+            }
           });
           scope.step = function(steps) {
-            var newValue;
-            newValue = scope.value + steps * step;
-            if ((scope.min() <= newValue && newValue <= scope.max())) {
-              return scope.value = newValue;
+            var doIncrement, doStep;
+            doStep = function(steps) {
+              var newValue;
+              newValue = scope.value + steps * step;
+              if ((scope.min() <= newValue && newValue <= scope.max())) {
+                return scope.value = newValue;
+              }
+            };
+            doIncrement = function(steps) {
+              var newVal, sv;
+              newVal = steps > 0 ? ((function() {
+                var _i, _len, _ref, _results;
+                _ref = scope.snapValues;
+                _results = [];
+                for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+                  sv = _ref[_i];
+                  if (sv > scope.value) {
+                    _results.push(sv);
+                  }
+                }
+                return _results;
+              })())[0] : ((function() {
+                var _i, _len, _ref, _results;
+                _ref = scope.snapValues;
+                _results = [];
+                for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+                  sv = _ref[_i];
+                  if (sv < scope.value) {
+                    _results.push(sv);
+                  }
+                }
+                return _results;
+              })()).sort(function(a, b) {
+                return b - a;
+              })[0];
+              if (newVal != null) {
+                return scope.value = newVal;
+              }
+            };
+            if (attrs.increments != null) {
+              return doIncrement(steps);
+            } else {
+              return doStep(steps);
             }
           };
           return scope.mouseDown = function($event) {
-            var startPointX, updateValue;
+            var snap, 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();
             };
+            snap = function() {
+              var closest, diff, l, min;
+              i = 0;
+              l = scope.snapValues.length;
+              while (i < l) {
+                diff = Math.abs(scope.snapValues[i] - scope.value);
+                if (typeof min === "undefined" || min === null) {
+                  min = diff;
+                }
+                if (diff <= min) {
+                  closest = scope.snapValues[i];
+                  min = diff;
+                }
+                i++;
+              }
+              scope.value = closest;
+              return scope.$apply();
+            };
             $document.on("mousemove", function($event) {
               var moveDelta;
               if (!dragging) {
@@ -112,6 +231,9 @@
               if (deferUpdate) {
                 updateValue();
               }
+              if (scope.increments) {
+                snap();
+              }
               return $document.off("mousemove");
             });
           };
@@ -120,7 +242,7 @@
     }
   ]);
 
-  app.filter('slice', function() {
+  app.filter('intersperse', function() {
     return function(input) {
       var reverse, reversed, reversed_and_sliced, sliced;
       if (input == null) {

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.6"
+  gem.version       = "0.1.0"
   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.6
+  version: 0.1.0
   prerelease: 
 platform: ruby
 authors:
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-09-18 00:00:00.000000000 Z
+date: 2013-10-03 00:00:00.000000000 Z
 dependencies: []
 description: Glider, AngularJS UI slider for rails asset pipeline
 email: