diff options
Diffstat (limited to 'node_modules/montage/ui/scroller.reel')
-rw-r--r-- | node_modules/montage/ui/scroller.reel/scroller.html | 59 | ||||
-rw-r--r-- | node_modules/montage/ui/scroller.reel/scroller.js | 87 |
2 files changed, 94 insertions, 52 deletions
diff --git a/node_modules/montage/ui/scroller.reel/scroller.html b/node_modules/montage/ui/scroller.reel/scroller.html index 00a85a88..34e4bc0a 100644 --- a/node_modules/montage/ui/scroller.reel/scroller.html +++ b/node_modules/montage/ui/scroller.reel/scroller.html | |||
@@ -18,6 +18,63 @@ | |||
18 | } | 18 | } |
19 | } | 19 | } |
20 | }, | 20 | }, |
21 | "translateComposer1": { | ||
22 | "module": "montage/ui/composer/translate-composer", | ||
23 | "name": "TranslateComposer", | ||
24 | "properties": { | ||
25 | "component": {"@": "owner"} | ||
26 | }, | ||
27 | "bindings": { | ||
28 | "translateX": { | ||
29 | "boundObject": {"@": "owner"}, | ||
30 | "boundObjectPropertyPath": "scrollX", | ||
31 | "oneway": false | ||
32 | }, | ||
33 | "translateY": { | ||
34 | "boundObject": {"@": "owner"}, | ||
35 | "boundObjectPropertyPath": "scrollY", | ||
36 | "oneway": false | ||
37 | }, | ||
38 | "maxTranslateY": { | ||
39 | "boundObject": {"@": "owner"}, | ||
40 | "boundObjectPropertyPath": "_maxTranslateY" | ||
41 | }, | ||
42 | "maxTranslateX": { | ||
43 | "boundObject": {"@": "owner"}, | ||
44 | "boundObjectPropertyPath": "_maxTranslateX" | ||
45 | }, | ||
46 | "axis": { | ||
47 | "boundObject": {"@": "owner"}, | ||
48 | "boundObjectPropertyPath": "axis" | ||
49 | }, | ||
50 | "hasBouncing": { | ||
51 | "boundObject": {"@": "owner"}, | ||
52 | "boundObjectPropertyPath": "hasBouncing" | ||
53 | }, | ||
54 | "hasMomentum": { | ||
55 | "boundObject": {"@": "owner"}, | ||
56 | "boundObjectPropertyPath": "hasMomentum" | ||
57 | }, | ||
58 | "bouncingDuration": { | ||
59 | "boundObject": {"@": "owner"}, | ||
60 | "boundObjectPropertyPath": "bouncingDuration" | ||
61 | }, | ||
62 | "momentumDuration": { | ||
63 | "boundObject": {"@": "owner"}, | ||
64 | "boundObjectPropertyPath": "momentumDuration" | ||
65 | } | ||
66 | }, | ||
67 | "listeners": [ | ||
68 | { | ||
69 | "type": "translateStart", | ||
70 | "listener": {"@": "owner"} | ||
71 | }, | ||
72 | { | ||
73 | "type": "translateEnd", | ||
74 | "listener": {"@": "owner"} | ||
75 | } | ||
76 | ] | ||
77 | }, | ||
21 | "owner": { | 78 | "owner": { |
22 | "module": "montage/ui/scroller.reel", | 79 | "module": "montage/ui/scroller.reel", |
23 | "name": "Scroller", | 80 | "name": "Scroller", |
@@ -52,4 +109,4 @@ | |||
52 | <div id="content" class="content"></div> | 109 | <div id="content" class="content"></div> |
53 | </div> | 110 | </div> |
54 | </body> | 111 | </body> |
55 | </html> \ No newline at end of file | 112 | </html> |
diff --git a/node_modules/montage/ui/scroller.reel/scroller.js b/node_modules/montage/ui/scroller.reel/scroller.js index 01df7d9c..32df2906 100644 --- a/node_modules/montage/ui/scroller.reel/scroller.js +++ b/node_modules/montage/ui/scroller.reel/scroller.js | |||
@@ -1,19 +1,8 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | var Montage = require("montage").Montage, | 1 | var Montage = require("montage").Montage, |
8 | Scroll = require("ui/scroll").Scroll, | 2 | Component = require("ui/component").Component |
9 | Component = require("ui/component").Component; | 3 | TranslateComposer = require("ui/composer/translate-composer").TranslateComposer; |
10 | |||
11 | var Scroller = exports.Scroller = Montage.create(Component, { | ||
12 | 4 | ||
13 | _scroll: { | 5 | exports.Scroller = Montage.create(Component, { |
14 | enumerable: false, | ||
15 | value: null | ||
16 | }, | ||
17 | 6 | ||
18 | _scrollX: { | 7 | _scrollX: { |
19 | enumerable: false, | 8 | enumerable: false, |
@@ -45,6 +34,14 @@ var Scroller = exports.Scroller = Montage.create(Component, { | |||
45 | } | 34 | } |
46 | }, | 35 | }, |
47 | 36 | ||
37 | _maxTranslateX: { | ||
38 | value: 0 | ||
39 | }, | ||
40 | |||
41 | _maxTranslateY: { | ||
42 | value: 0 | ||
43 | }, | ||
44 | |||
48 | _axis: { | 45 | _axis: { |
49 | enumerable: false, | 46 | enumerable: false, |
50 | value: "auto" | 47 | value: "auto" |
@@ -145,7 +142,7 @@ var Scroller = exports.Scroller = Montage.create(Component, { | |||
145 | enumerable: false, | 142 | enumerable: false, |
146 | value: null | 143 | value: null |
147 | }, | 144 | }, |
148 | 145 | ||
149 | templateDidLoad: { | 146 | templateDidLoad: { |
150 | value: function () { | 147 | value: function () { |
151 | var orphanedFragment, | 148 | var orphanedFragment, |
@@ -156,28 +153,16 @@ var Scroller = exports.Scroller = Montage.create(Component, { | |||
156 | this._content.appendChild(orphanedFragment); | 153 | this._content.appendChild(orphanedFragment); |
157 | } | 154 | } |
158 | }, | 155 | }, |
159 | 156 | ||
160 | prepareForDraw: { | 157 | handleTranslateStart: { |
161 | value: function () { | 158 | value: function(event) { |
162 | var self = this; | 159 | this._scrollBars.opacity = .5; |
163 | 160 | } | |
164 | this._scroll = Montage.create(Scroll); | 161 | }, |
165 | this._scroll.element = this._element; | 162 | |
166 | this._scroll.component = this; | 163 | handleTranslateEnd: { |
167 | Object.defineBinding(this._scroll, "scrollX", {boundObject: this, boundObjectPropertyPath: "scrollX", oneway: false}); | 164 | value: function(event) { |
168 | Object.defineBinding(this._scroll, "scrollY", {boundObject: this, boundObjectPropertyPath: "scrollY", oneway: false}); | 165 | this._scrollBars.opacity = 0; |
169 | Object.defineBinding(this._scroll, "axis", {boundObject: this, boundObjectPropertyPath: "axis", oneway: false}); | ||
170 | Object.defineBinding(this._scroll, "hasBouncing", {boundObject: this, boundObjectPropertyPath: "hasBouncing", oneway: false}); | ||
171 | Object.defineBinding(this._scroll, "hasMomentum", {boundObject: this, boundObjectPropertyPath: "hasMomentum", oneway: false}); | ||
172 | Object.defineBinding(this._scroll, "bouncingDuration", {boundObject: this, boundObjectPropertyPath: "bouncingDuration", oneway: false}); | ||
173 | Object.defineBinding(this._scroll, "momentumDuration", {boundObject: this, boundObjectPropertyPath: "momentumDuration", oneway: false}); | ||
174 | this._scroll.deserializedFromTemplate(); | ||
175 | this._scroll.addEventListener("scrollStart", function () { | ||
176 | self._scrollBars.opacity = .5; | ||
177 | }, false); | ||
178 | this._scroll.addEventListener("scrollEnd", function () { | ||
179 | self._scrollBars.opacity = 0; | ||
180 | }, false); | ||
181 | } | 166 | } |
182 | }, | 167 | }, |
183 | 168 | ||
@@ -188,18 +173,18 @@ var Scroller = exports.Scroller = Montage.create(Component, { | |||
188 | this._top = this._element.offsetTop; | 173 | this._top = this._element.offsetTop; |
189 | this._width = this._element.offsetWidth; | 174 | this._width = this._element.offsetWidth; |
190 | this._height = this._element.offsetHeight; | 175 | this._height = this._element.offsetHeight; |
191 | this._scroll.maxScrollX = this._content.scrollWidth - this._width; | 176 | this._maxTranslateX = this._content.scrollWidth - this._width; |
192 | if (this._scroll.maxScrollX < 0) { | 177 | if (this._maxTranslateX < 0) { |
193 | this._scroll.maxScrollX = 0; | 178 | this._.maxTranslateX = 0; |
194 | } | 179 | } |
195 | this._scroll.maxScrollY = this._content.offsetHeight - this._height; | 180 | this._maxTranslateY = this._content.offsetHeight - this._height; |
196 | if (this._scroll.maxScrollY < 0) { | 181 | if (this._maxTranslateY < 0) { |
197 | this._scroll.maxScrollY = 0; | 182 | this._maxTranslateY = 0; |
198 | } | 183 | } |
199 | var delegateValue = this.callDelegateMethod("didSetMaxScroll", {x: this._scroll.maxScrollX, y: this._scroll.maxScrollY}); | 184 | var delegateValue = this.callDelegateMethod("didSetMaxScroll", {x: this._maxTranslateX, y: this._maxTranslateY}); |
200 | if (delegateValue) { | 185 | if (delegateValue) { |
201 | this._scroll.maxScrollX = delegateValue.x; | 186 | this._maxTranslateX = delegateValue.x; |
202 | this._scroll.maxScrollY = delegateValue.y; | 187 | this._maxTranslateY = delegateValue.y; |
203 | } | 188 | } |
204 | switch (this._displayScrollbars) { | 189 | switch (this._displayScrollbars) { |
205 | case "horizontal": | 190 | case "horizontal": |
@@ -215,15 +200,15 @@ var Scroller = exports.Scroller = Montage.create(Component, { | |||
215 | this._scrollBars.displayVertical = true; | 200 | this._scrollBars.displayVertical = true; |
216 | break; | 201 | break; |
217 | case "auto": | 202 | case "auto": |
218 | if (this._scroll._maxScrollX && this._scroll._maxScrollY) { | 203 | if (this._maxTranslateX && this._maxTranslateY) { |
219 | this._scrollBars.displayHorizontal = true; | 204 | this._scrollBars.displayHorizontal = true; |
220 | this._scrollBars.displayVertical = true; | 205 | this._scrollBars.displayVertical = true; |
221 | } else { | 206 | } else { |
222 | if (this._scroll._maxScrollX) { |