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.
- data/README.md +7 -1
- data/app/assets/javascripts/glider.coffee +10 -6
- data/app/assets/javascripts/glider.js +15 -5
- data/app/assets/javascripts/glider.min.js +1 -1
- data/glider-rails.gemspec +1 -1
- 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.
|
@@ -1,5 +1,5 @@
|
|
1
1
|
###
|
2
|
-
glider 0.0.
|
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
|
-
|
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
|
]
|
@@ -1,5 +1,6 @@
|
|
1
|
+
// Generated by CoffeeScript 1.6.3
|
1
2
|
/*
|
2
|
-
glider 0.0.
|
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
|
-
|
99
|
-
|
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
|
};
|
@@ -1 +1 @@
|
|
1
|
-
|
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.
|
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.
|
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-
|
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.
|
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
|