diff options
Diffstat (limited to 'node_modules/montage/ui/skeleton/range-input.reel/range-input.js')
-rw-r--r-- | node_modules/montage/ui/skeleton/range-input.reel/range-input.js | 173 |
1 files changed, 108 insertions, 65 deletions
diff --git a/node_modules/montage/ui/skeleton/range-input.reel/range-input.js b/node_modules/montage/ui/skeleton/range-input.reel/range-input.js index bb14ffc9..1dbd4272 100644 --- a/node_modules/montage/ui/skeleton/range-input.reel/range-input.js +++ b/node_modules/montage/ui/skeleton/range-input.reel/range-input.js | |||
@@ -12,13 +12,19 @@ var Montage = require("montage").Montage, | |||
12 | */ | 12 | */ |
13 | var RangeInput = exports.RangeInput = Montage.create(Component, { | 13 | var RangeInput = exports.RangeInput = Montage.create(Component, { |
14 | 14 | ||
15 | DEFAULT_WIDTH: {value: 300}, | 15 | DEFAULT_WIDTH: { |
16 | HANDLE_ADJUST: {value: 5}, | 16 | value: 300 |
17 | }, | ||
17 | 18 | ||
18 | hasTemplate: {value: true}, | 19 | HANDLE_ADJUST: { |
20 | value: 5 | ||
21 | }, | ||
19 | 22 | ||
20 | // public API | 23 | // public API |
21 | _min: {value: null}, | 24 | _min: { |
25 | value: null | ||
26 | }, | ||
27 | |||
22 | min: { | 28 | min: { |
23 | get: function() { | 29 | get: function() { |
24 | return this._min; | 30 | return this._min; |
@@ -26,73 +32,110 @@ var RangeInput = exports.RangeInput = Montage.create(Component, { | |||
26 | set: function(value) { | 32 | set: function(value) { |
27 | this._min = String.isString(value) ? parseFloat(value) : value; | 33 | this._min = String.isString(value) ? parseFloat(value) : value; |
28 | this.needsDraw = true; | 34 | this.needsDraw = true; |
29 | } | 35 | }, |
36 | serializable: true | ||
37 | }, | ||
38 | |||
39 | _max: { | ||
40 | value: null | ||
30 | }, | 41 | }, |
31 | 42 | ||
32 | _max: {value: null}, | ||
33 | max: { | 43 | max: { |
34 | get: function() { | 44 | get: function() { |
35 | return this._max; | 45 | return this._max; |
36 | }, | 46 | }, |
37 | set: function(value) { | 47 | set: function(value) { |
38 | this._max = String.isString(value) ? parseFloat(value) : value; | 48 | this._max = String.isString(value) ? parseFloat(value) : value; |
39 | this.needsDraw = true; | 49 | this.needsDraw = true; |
40 | } | 50 | }, |
51 | serializable: true | ||
41 | }, | 52 | }, |
42 | 53 | ||
43 | _step: {value: null}, | 54 | _step: { |
55 | value: null | ||
56 | }, | ||
57 | |||
44 | step: { | 58 | step: { |
45 | get: function() { | 59 | get: function() { |
46 | return this._step; | 60 | return this._step; |
47 | }, | 61 | }, |
48 | set: function(value) { | 62 | set: function(value) { |
49 | this._step = String.isString(value) ? parseFloat(value) : value; | 63 | this._step = String.isString(value) ? parseFloat(value) : value; |
50 | this.needsDraw = true; | 64 | this.needsDraw = true; |
51 | } | 65 | }, |
52 | }, | 66 | serializable: true |
67 | }, | ||
68 | |||
69 | /** Width of the slider in px. Default = 300 */ | ||
70 | _width: { | ||
71 | value: null | ||
72 | }, | ||
73 | |||
74 | width: { | ||
75 | get: function() { | ||
76 | return this._width; | ||
77 | }, | ||
78 | set: function(value) { | ||
79 | this._width = String.isString(value) ? parseFloat(value) : value; | ||
80 | this.needsDraw = true; | ||
81 | }, | ||
82 | serializable: true | ||
83 | }, | ||
84 | |||
85 | percent: { | ||
86 | value: null | ||
87 | }, | ||
88 | |||
89 | _valueSyncedWithPosition: { | ||
90 | value: null | ||
91 | }, | ||
92 | |||
93 | _value: { | ||
94 | value: null | ||
95 | }, | ||
53 | 96 | ||
54 | /** Width of the slider in px. Default = 300 */ | ||
55 | _width: {value: null}, | ||
56 | width: { | ||
57 | get: function() { | ||
58 | return this._width; | ||
59 | }, | ||
60 | set: function(value) { | ||
61 | this._width = String.isString(value) ? parseFloat(value) : value; | ||
62 | this.needsDraw = true; | ||
63 | } | ||
64 | }, | ||
65 | |||
66 | percent: {value: null}, | ||
67 | |||
68 | _valueSyncedWithPosition: {value: null}, | ||
69 | _value: {value: null}, | ||
70 | value: { | 97 | value: { |
71 | get: function() { | 98 | get: function() { |
72 | return this._value; | 99 | return this._value; |
73 | }, | 100 | }, |
74 | set: function(value, fromInput) { | 101 | set: function(value, fromInput) { |
75 | this._value = String.isString(value) ? parseFloat(value) : value; | 102 | this._value = String.isString(value) ? parseFloat(value) : value; |
76 | 103 | ||
77 | if(fromInput) { | 104 | if(fromInput) { |
78 | this._valueSyncedWithPosition = true; | 105 | this._valueSyncedWithPosition = true; |
79 | } else { | 106 | } else { |
80 | this._valueSyncedWithPosition = false; | 107 | this._valueSyncedWithPosition = false; |
81 | this._calculatePositionFromValue(); | 108 | this._calculatePositionFromValue(); |
82 | this.needsDraw = true; | 109 | this.needsDraw = true; |
83 | } | 110 | } |
84 | } | 111 | }, |
85 | }, | 112 | serializable: true |
113 | }, | ||
86 | 114 | ||
87 | // private | 115 | // private |
88 | _handleEl: {value: null, enumerable: false}, | 116 | _handleEl: { |
89 | _sliderLeft: {value: null, enumerable: false}, | 117 | value: null, |
90 | _sliderWidth: {value: null, enumerable: false}, | 118 | serializable: true |
119 | }, | ||
120 | |||
121 | _translateComposer: { | ||
122 | value: null, | ||
123 | serializable: true | ||
124 | }, | ||
91 | 125 | ||
126 | _sliderLeft: { | ||
127 | value: null | ||
128 | }, | ||
129 | |||
130 | _sliderWidth: { | ||
131 | value: null | ||
132 | }, | ||
133 | |||
134 | __positionX: { | ||
135 | value: null | ||
136 | }, | ||
92 | 137 | ||
93 | __positionX: {value: null}, | ||
94 | _positionX: { | 138 | _positionX: { |
95 | enumerable: false, | ||
96 | get: function() { | 139 | get: function() { |
97 | return this.__positionX; | 140 | return this.__positionX; |
98 | }, | 141 | }, |
@@ -175,9 +218,9 @@ var RangeInput = exports.RangeInput = Montage.create(Component, { | |||
175 | _addEventListeners: { | 218 | _addEventListeners: { |
176 | value: function() { | 219 | value: function() { |
177 | if(window.Touch) { | 220 | if(window.Touch) { |
178 | this.element.addEventListener('touchend', this, false); | 221 | this.element.addEventListener('touchstart', this, false); |
179 | } else { | 222 | } else { |
180 | this.element.addEventListener('mouseup', this, false); | 223 | this.element.addEventListener('mousedown', this, false); |
181 | } | 224 | } |
182 | } | 225 | } |
183 | }, | 226 | }, |
@@ -185,9 +228,9 @@ var RangeInput = exports.RangeInput = Montage.create(Component, { | |||
185 | _removeEventListeners: { | 228 | _removeEventListeners: { |
186 | value: function() { | 229 | value: function() { |
187 | if(window.Touch) { | 230 | if(window.Touch) { |
188 | this.element.removeEventListener('touchend', this, false); | 231 | this.element.removeEventListener('touchstart', this, false); |
189 | } else { | 232 | } else { |
190 | this.element.removeEventListener('mouseup', this, false); | 233 | this.element.removeEventListener('mousedown', this, false); |
191 |