diff options
Diffstat (limited to 'node_modules/montage/ui/skeleton')
-rw-r--r-- | node_modules/montage/ui/skeleton/range-input.reel/range-input.html | 18 | ||||
-rw-r--r-- | node_modules/montage/ui/skeleton/range-input.reel/range-input.js | 159 |
2 files changed, 99 insertions, 78 deletions
diff --git a/node_modules/montage/ui/skeleton/range-input.reel/range-input.html b/node_modules/montage/ui/skeleton/range-input.reel/range-input.html index 4fa2d3db..8e1a8d22 100644 --- a/node_modules/montage/ui/skeleton/range-input.reel/range-input.html +++ b/node_modules/montage/ui/skeleton/range-input.reel/range-input.html | |||
@@ -12,27 +12,25 @@ | |||
12 | <script type="text/montage-serialization"> | 12 | <script type="text/montage-serialization"> |
13 | { | 13 | { |
14 | "translateComposer1": { | 14 | "translateComposer1": { |
15 | "module": "montage/ui/composer/translate-composer", | 15 | "prototype": "montage/ui/composer/translate-composer", |
16 | "name": "TranslateComposer", | ||
17 | "properties": { | 16 | "properties": { |
18 | "component": {"@": "owner"}, | 17 | "component": {"@": "owner"}, |
19 | "axis": "horizontal", | 18 | "axis": "horizontal", |
20 | "hasBouncing": false, | 19 | "hasBouncing": false, |
21 | "hasMomentum": false | 20 | "hasMomentum": false, |
21 | "minTranslateX": 0 | ||
22 | }, | 22 | }, |
23 | "bindings": { | 23 | "bindings": { |
24 | "maxTranslateX": {"<-": "@owner.sliderWidth"}, | 24 | "maxTranslateX": {"<-": "@owner._sliderWidth"}, |
25 | "translateX": {"<<->": "@owner.positionX"} | 25 | "translateX": {"<<->": "@owner._positionX"} |
26 | } | 26 | } |
27 | }, | 27 | }, |
28 | "owner": { | 28 | "owner": { |
29 | "module": "montage/ui/skeleton/range-input.reel", | 29 | "prototype": "montage/ui/skeleton/range-input.reel", |
30 | "name": "RangeInput", | ||
31 | "properties": { | 30 | "properties": { |
32 | "element": {"#": "slider"}, | 31 | "element": {"#": "slider"}, |
33 | "sliderEl": {"#": "slider"}, | 32 | "_handleEl": {"#": "slider-handle"}, |
34 | "handleEl": {"#": "slider-handle"}, | 33 | "_translateComposer": {"@": "translateComposer1"} |
35 | "translateComposer": {"@": "translateComposer1"} | ||
36 | } | 34 | } |
37 | 35 | ||
38 | } | 36 | } |
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 5747ccd6..bb14ffc9 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 | |||
@@ -5,13 +5,13 @@ | |||
5 | </copyright> */ | 5 | </copyright> */ |
6 | /*global require,exports */ | 6 | /*global require,exports */ |
7 | var Montage = require("montage").Montage, | 7 | var Montage = require("montage").Montage, |
8 | Component = require("ui/component").Component; | 8 | Component = require("ui/component").Component; |
9 | 9 | ||
10 | /** | 10 | /** |
11 | * The input type="range" field | 11 | * The input type="range" field |
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: {value: 300}, |
16 | HANDLE_ADJUST: {value: 5}, | 16 | HANDLE_ADJUST: {value: 5}, |
17 | 17 | ||
@@ -50,7 +50,7 @@ var RangeInput = exports.RangeInput = Montage.create(Component, { | |||
50 | this.needsDraw = true; | 50 | this.needsDraw = true; |
51 | } | 51 | } |
52 | }, | 52 | }, |
53 | 53 | ||
54 | /** Width of the slider in px. Default = 300 */ | 54 | /** Width of the slider in px. Default = 300 */ |
55 | _width: {value: null}, | 55 | _width: {value: null}, |
56 | width: { | 56 | width: { |
@@ -62,11 +62,9 @@ var RangeInput = exports.RangeInput = Montage.create(Component, { | |||
62 | this.needsDraw = true; | 62 | this.needsDraw = true; |
63 | } | 63 | } |
64 | }, | 64 | }, |
65 | |||
66 | 65 | ||
67 | _sliding: {value: false}, | ||
68 | |||
69 | percent: {value: null}, | 66 | percent: {value: null}, |
67 | |||
70 | _valueSyncedWithPosition: {value: null}, | 68 | _valueSyncedWithPosition: {value: null}, |
71 | _value: {value: null}, | 69 | _value: {value: null}, |
72 | value: { | 70 | value: { |
@@ -87,120 +85,145 @@ var RangeInput = exports.RangeInput = Montage.create(Component, { | |||
87 | }, | 85 | }, |
88 | 86 | ||
89 | // private | 87 | // private |
90 | sliderEl: {value: null, enumerable: false}, | 88 | _handleEl: {value: null, enumerable: false}, |
91 | handleEl: {value: null, enumerable: false}, | 89 | _sliderLeft: {value: null, enumerable: false}, |
92 | sliderLeft: {value: null, enumerable: false}, | 90 | _sliderWidth: {value: null, enumerable: false}, |
93 | sliderWidth: {value: null, enumerable: false}, | 91 | |
94 | minX: {value: null, enumerable: false}, | 92 | |
95 | maxX: {value: null, enumerable: false}, | 93 | __positionX: {value: null}, |
96 | 94 | _positionX: { | |
97 | _positionX: {value: null}, | ||
98 | positionX: { | ||
99 | enumerable: false, | 95 | enumerable: false, |
100 | get: function() { | 96 | get: function() { |
101 | return this._positionX; | 97 | return this.__positionX; |
102 | }, | 98 | }, |
103 | set: function(value, fromValue) { | 99 | set: function(value, fromValue) { |
104 | 100 | ||
105 | if(value !== null && !isNaN(value)) { | 101 | if(value !== null && !isNaN(value)) { |
106 | this._positionX = value; | 102 | this.__positionX = value; |
107 | if(!fromValue) { | 103 | if(!fromValue) { |
108 | this._calculateValueFromPosition(); | 104 | this._calculateValueFromPosition(); |
109 | this._valueSyncedWithPosition = true; | 105 | this._valueSyncedWithPosition = true; |
110 | } | 106 | } |
111 | this.needsDraw = true; | 107 | this.needsDraw = true; |
112 | } | 108 | } |
113 | 109 | ||
114 | } | 110 | } |
115 | }, | 111 | }, |
116 | 112 | ||
117 | _calculateValueFromPosition: { | 113 | _calculateValueFromPosition: { |
118 | value: function() { | 114 | value: function() { |
119 | if(this.sliderWidth > 0) { | 115 | if(this._sliderWidth > 0) { |
120 | var percent = this.percent = (this.positionX / this.sliderWidth) * 100; | 116 | var percent = this.percent = (this._positionX / this._sliderWidth) * 100; |
121 | var value = (this.min + ((percent/100) * (this.max - this.min))); | 117 | var value = (this.min + ((percent/100) * (this.max - this.min))); |
122 | Object.getPropertyDescriptor(this, "value").set.call(this, value, true); | 118 | Object.getPropertyDescriptor(this, "value").set.call(this, value, true); |
123 | } | 119 | } |
124 | 120 | ||
125 | } | 121 | } |
126 | }, | 122 | }, |
127 | 123 | ||
128 | _calculatePositionFromValue: { | 124 | _calculatePositionFromValue: { |
129 | value: function() { | 125 | value: function() { |
130 | // unless the element is ready, we cannot position the handle | 126 | // unless the element is ready, we cannot position the handle |
131 | if(this.sliderWidth) { | 127 | if(this._sliderWidth) { |
132 | var percent, value = this.value; | 128 | var percent, value = this.value; |
133 | var range = (this.max - this.min); | 129 | var range = (this.max - this.min); |
134 | percent = ((this.value-this.min)/range) * 100; | 130 | percent = ((this.value-this.min)/range) * 100; |
135 | var positionX = (percent/100)*this.sliderWidth; | 131 | var positionX = (percent/100)*this._sliderWidth; |
136 | Object.getPropertyDescriptor(this, "positionX").set.call(this, positionX, true); | 132 | Object.getPropertyDescriptor(this, "_positionX").set.call(this, positionX, true); |
133 | |||
137 | this.percent = percent; | 134 | this.percent = percent; |
138 | this._valueSyncedWithPosition = true; | 135 | this._valueSyncedWithPosition = true; |
139 | } else { | 136 | } else { |
140 | this._valueSyncedWithPosition = false; | 137 | this._valueSyncedWithPosition = false; |
141 | } | 138 | } |
142 | } | 139 | } |
143 | }, | 140 | }, |
144 | 141 | ||
145 | deserializedFromTemplate: { | 142 | deserializedFromTemplate: { |
146 | value: function() { | 143 | value: function() { |
147 | 144 | // read initial values from the input type=range | |
148 | // read initial values from the input type=range | ||
149 | |||
150 | this.min = this.min || this.element.getAttribute('min') || 0; | 145 | this.min = this.min || this.element.getAttribute('min') || 0; |
151 | this.max = this.max || this.element.getAttribute('max') || 100; | 146 | this.max = this.max || this.element.getAttribute('max') || 100; |
152 | this.step = this.step || this.element.getAttribute('step') || 1; | 147 | this.step = this.step || this.element.getAttribute('step') || 1; |
153 | this.value = this.value || this.element.getAttribute('value') || 0; | 148 | this.value = this.value || this.element.getAttribute('value') || 0; |
154 | |||
155 | |||
156 | } |