diff options
author | Jose Antonio Marquez | 2012-05-16 15:42:37 -0700 |
---|---|---|
committer | Jose Antonio Marquez | 2012-05-16 15:42:37 -0700 |
commit | 857aafee732b6a85fa155ff4a05d1b8fde48f09d (patch) | |
tree | e06d330caee280aa05aec46391979e9abdcf974c /node_modules/montage/ui/skeleton/range-input.reel/range-input.js | |
parent | 5cc5d29736d8bf253e3a168cdd6443e839ffb23c (diff) | |
parent | fd54dabad7cbc27a0efb0957155c00d578912909 (diff) | |
download | ninja-857aafee732b6a85fa155ff4a05d1b8fde48f09d.tar.gz |
Merge branch 'refs/heads/Ninja-DOM-Architecture' into Document
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 | 159 |
1 files changed, 91 insertions, 68 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 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 | } | 149 | } |
157 | }, | 150 | }, |
158 | 151 | ||
159 | prepareForDraw: { | 152 | prepareForDraw: { |
160 | value: function() { | 153 | value: function() { |
161 | this.minX = this.sliderLeft = this.element.offsetLeft; | 154 | this._sliderLeft = this.element.offsetLeft; |
162 | this.sliderWidth = (this.width || RangeInput.DEFAULT_WIDTH); //this.element.offsetWidth || 300; | 155 | this._sliderWidth = (this.width || RangeInput.DEFAULT_WIDTH); //this.element.offsetWidth || 300; |
163 | this.element.style.width = (this.sliderWidth + RangeInput.HANDLE_ADJUST) + 'px'; | 156 | this.element.style.width = (this._sliderWidth + RangeInput.HANDLE_ADJUST) + 'px'; |
164 | 157 | ||
165 | this.maxX = this.sliderLeft + this.sliderWidth; | ||
166 | |||
167 | if(!this._valueSyncedWithPosition) { | 158 | if(!this._valueSyncedWithPosition) { |
168 | this._calculatePositionFromValue(); | 159 | this._calculatePositionFromValue(); |
169 | } | 160 | } |
170 | } | 161 | } |
171 | }, | 162 | }, |
172 | 163 | ||
173 | // @todo: Without prepareForActivationEvents, the translateComposer does not work | 164 | // @todo: Without prepareForActivationEvents, the _translateComposer does not work |
174 | prepareForActivationEvents: { | 165 | prepareForActivationEvents: { |
175 | value: function() { | 166 | value: function() { |
176 | this.translateComposer.addEventListener('translateStart', this, false); | 167 | this._translateComposer.addEventListener('translateStart', this, false); |
177 | this.translateComposer.addEventListener('translateEnd', this, false); | 168 | this._translateComposer.addEventListener('translateEnd', this, false); |
169 | |||
170 | this._addEventListeners(); | ||
171 | |||
172 | } | ||
173 | }, | ||
174 | |||