glider-rails 0.0.3 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. data/README.md +7 -1
  2. data/app/assets/javascripts/glider.coffee +10 -6
  3. data/app/assets/javascripts/glider.js +15 -5
  4. data/app/assets/javascripts/glider.min.js +1 -1
  5. data/glider-rails.gemspec +1 -1
  6. metadata +3 -3
data/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Glider - angularjs UI slider
2
2
 
3
- Glider - angularjs slider with no dependencies. Dead simple - 74 LOC.
3
+ Glider - angularjs slider with no dependencies. Dead simple - ~~74~~ 98 LOC.
4
4
 
5
5
  ## Demo
6
6
 
@@ -41,6 +41,12 @@ And then in HTML:
41
41
  <slider min="21" max="130" value="age"></slider>
42
42
  ```
43
43
 
44
+ To defer value update until `mouseup`:
45
+
46
+ ```html
47
+ <slider defer_update min="21" max="130" value="age"></slider>
48
+ ```
49
+
44
50
  ## CoffeeScript to JavaScript compilation
45
51
 
46
52
  To convert the `src/glider.coffee` to javascript, use coffeescript compiler.
data/app/assets/javascripts/glider.coffee CHANGED
@@ -1,5 +1,5 @@
1
1
  ###
2
- glider 0.0.3 - AngularJS slider
2
+ glider 0.0.4 - AngularJS slider
3
3
  https://github.com/evrone/glider
4
4
  Copyright (c) 2013 Valentin Vasilyev, Dmitry Karpunin
5
5
  Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
@@ -7,6 +7,8 @@
7
7
  app = angular.module("glider", [])
8
8
  # example:
9
9
  # <slider min="0" max="100" step="1" value="age"></slider>
10
+ # example with update only on mouse up and stop drag
11
+ # <slider defer_update min="0" max="100" step="1" value="age"></slider>
10
12
  #
11
13
  app.directive "slider", ["$document", ($document) ->
12
14
 
@@ -45,6 +47,7 @@ app.directive "slider", ["$document", ($document) ->
45
47
  dragging = false
46
48
  xPosition = 0
47
49
  step = if attrs.step? then parseInt(attrs.step, 10) else 1
50
+ deferUpdate = attrs.deferUpdate?
48
51
 
49
52
  scope.value = scope.min() unless scope.value?
50
53
 
@@ -82,9 +85,12 @@ app.directive "slider", ["$document", ($document) ->
82
85
  dragging = true
83
86
  startPointX = $event.pageX
84
87
 
88
+ updateValue = ->
89
+ scope.value = Math.round((((scope.max() - scope.min()) * (xPosition / 100)) + scope.min()) / step) * step
90
+ scope.$apply()
91
+
85
92
  $document.on "mousemove", ($event) ->
86
93
  return unless dragging
87
-
88
94
  # Calculate value handle position
89
95
  moveDelta = $event.pageX - startPointX
90
96
  xPosition += moveDelta / sliderElement.offsetWidth * 100
@@ -94,13 +100,11 @@ app.directive "slider", ["$document", ($document) ->
94
100
  xPosition = 100
95
101
  else
96
102
  startPointX = $event.pageX
97
- scope.value = Math.round((((scope.max() - scope.min()) * (xPosition / 100)) + scope.min()) / step) * step
98
- scope.$apply()
99
-
103
+ updateValue() unless deferUpdate
100
104
  moveHandle element, xPosition
101
105
 
102
- # TODO check binding leaks
103
106
  $document.on "mouseup", ->
104
107
  dragging = false
108
+ updateValue() if deferUpdate
105
109
  $document.off "mousemove"
106
110
  ]
data/app/assets/javascripts/glider.js CHANGED
@@ -1,5 +1,6 @@
1
+ // Generated by CoffeeScript 1.6.3
1
2
  /*
2
- glider 0.0.3 - AngularJS slider
3
+ glider 0.0.4 - AngularJS slider
3
4
  https://github.com/evrone/glider
4
5
  Copyright (c) 2013 Valentin Vasilyev, Dmitry Karpunin
5
6
  Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
@@ -31,11 +32,12 @@
31
32
  max: "&"
32
33
  },
33
34
  link: function(scope, element, attrs) {
34
- var dragging, refreshHandle, sliderElement, step, xPosition;
35
+ var deferUpdate, dragging, refreshHandle, sliderElement, step, xPosition;
35
36
  sliderElement = getSubElement(element, "slider");
36
37
  dragging = false;
37
38
  xPosition = 0;
38
39
  step = attrs.step != null ? parseInt(attrs.step, 10) : 1;
40
+ deferUpdate = attrs.deferUpdate != null;
39
41
  if (scope.value == null) {
40
42
  scope.value = scope.min();
41
43
  }
@@ -78,9 +80,13 @@
78
80
  }
79
81
  };
80
82
  return scope.mouseDown = function($event) {
81
- var startPointX;
83
+ var startPointX, updateValue;
82
84
  dragging = true;
83
85
  startPointX = $event.pageX;
86
+ updateValue = function() {
87
+ scope.value = Math.round((((scope.max() - scope.min()) * (xPosition / 100)) + scope.min()) / step) * step;
88
+ return scope.$apply();
89
+ };
84
90
  $document.on("mousemove", function($event) {
85
91
  var moveDelta;
86
92
  if (!dragging) {
@@ -95,12 +101,16 @@
95
101
  } else {
96
102
  startPointX = $event.pageX;
97
103
  }
98
- scope.value = Math.round((((scope.max() - scope.min()) * (xPosition / 100)) + scope.min()) / step) * step;
99
- scope.$apply();
104
+ if (!deferUpdate) {
105
+ updateValue();
106
+ }
100
107
  return moveHandle(element, xPosition);
101
108
  });
102
109
  return $document.on("mouseup", function() {
103
110
  dragging = false;
111
+ if (deferUpdate) {
112
+ updateValue();
113
+ }
104
114
  return $document.off("mousemove");
105
115
  });
106
116
  };
data/app/assets/javascripts/glider.min.js CHANGED
@@ -1 +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);
1
+ !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 CHANGED
@@ -4,7 +4,7 @@ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
4
 
5
5
  Gem::Specification.new do |gem|
6
6
  gem.name = "glider-rails"
7
- gem.version = "0.0.3"
7
+ gem.version = "0.0.4"
8
8
  gem.authors = ["Valentin Vasilyev", "Dmitry Karpunin"]
9
9
  gem.email = ["iamvalentin@gmail.com", "koderfunk@gmail.com"]
10
10
  gem.description = "Glider, AngularJS UI slider for rails asset pipeline"
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: glider-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.3
4
+ version: 0.0.4
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -10,7 +10,7 @@ authors:
10
10
  autorequire:
11
11
  bindir: bin
12
12
  cert_chain: []
13
- date: 2013-09-16 00:00:00.000000000 Z
13
+ date: 2013-09-17 00:00:00.000000000 Z
14
14
  dependencies: []
15
15
  description: Glider, AngularJS UI slider for rails asset pipeline
16
16
  email:
@@ -50,7 +50,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
50
50
  version: '0'
51
51
  requirements: []
52
52
  rubyforge_project:
53
- rubygems_version: 1.8.25
53
+ rubygems_version: 1.8.23
54
54
  signing_key:
55
55
  specification_version: 3
56
56
  summary: Glider — AngularJS UI slider library, packaged for Ruby-on-Rails asset pipeline