diff options
Diffstat (limited to 'node_modules/montage-user/ui/scroller.reel/scroller.js')
-rw-r--r-- | node_modules/montage-user/ui/scroller.reel/scroller.js | 253 |
1 files changed, 253 insertions, 0 deletions
diff --git a/node_modules/montage-user/ui/scroller.reel/scroller.js b/node_modules/montage-user/ui/scroller.reel/scroller.js new file mode 100644 index 00000000..32df2906 --- /dev/null +++ b/node_modules/montage-user/ui/scroller.reel/scroller.js | |||
@@ -0,0 +1,253 @@ | |||
1 | var Montage = require("montage").Montage, | ||
2 | Component = require("ui/component").Component | ||
3 | TranslateComposer = require("ui/composer/translate-composer").TranslateComposer; | ||
4 | |||
5 | exports.Scroller = Montage.create(Component, { | ||
6 | |||
7 | _scrollX: { | ||
8 | enumerable: false, | ||
9 | value: 0 | ||
10 | }, | ||
11 | |||
12 | scrollX: { | ||
13 | get: function () { | ||
14 | return this._scrollX; | ||
15 | }, | ||
16 | set: function (value) { | ||
17 | this._scrollX = value; | ||
18 | this.needsDraw = true; | ||
19 | } | ||
20 | }, | ||
21 | |||
22 | _scrollY: { | ||
23 | enumerable: false, | ||
24 | value: 0 | ||
25 | }, | ||
26 | |||
27 | scrollY: { | ||
28 | get: function () { | ||
29 | return this._scrollY; | ||
30 | }, | ||
31 | set: function (value) { | ||
32 | this._scrollY = value; | ||
33 | this.needsDraw = true; | ||
34 | } | ||
35 | }, | ||
36 | |||
37 | _maxTranslateX: { | ||
38 | value: 0 | ||
39 | }, | ||
40 | |||
41 | _maxTranslateY: { | ||
42 | value: 0 | ||
43 | }, | ||
44 | |||
45 | _axis: { | ||
46 | enumerable: false, | ||
47 | value: "auto" | ||
48 | }, | ||
49 | |||
50 | axis: { | ||
51 | get: function () { | ||
52 | return this._axis; | ||
53 | }, | ||
54 | set: function (value) { | ||
55 | this._axis = value; | ||
56 | this.needsDraw = true; | ||
57 | } | ||
58 | }, | ||
59 | |||
60 | _displayScrollbars: { | ||
61 | enumerable: false, | ||
62 | value: "auto" | ||
63 | }, | ||
64 | |||
65 | displayScrollbars: { | ||
66 | get: function () { | ||
67 | return this._displayScrollbars; | ||
68 | }, | ||
69 | set: function (value) { | ||
70 | switch (value) { | ||
71 | case "vertical": | ||
72 | case "horizontal": | ||
73 | case "both": | ||
74 | case "auto": | ||
75 | this._displayScrollbars = value; | ||
76 | break; | ||
77 | default: | ||
78 | this._displayScrollbars = "none"; | ||
79 | break; | ||
80 | } | ||
81 | this.needsDraw = true; | ||
82 | } | ||
83 | }, | ||
84 | |||
85 | _hasMomentum: { | ||
86 | enumerable: false, | ||
87 | value: true | ||
88 | }, | ||
89 | |||
90 | hasMomentum: { | ||
91 | get: function () { | ||
92 | return this._hasMomentum; | ||
93 | }, | ||
94 | set: function (value) { | ||
95 | this._hasMomentum = value; | ||
96 | } | ||
97 | }, | ||
98 | |||
99 | _hasBouncing: { | ||
100 | enumerable: false, | ||
101 | value: true | ||
102 | }, | ||
103 | |||
104 | hasBouncing: { | ||
105 | get: function () { | ||
106 | return this._hasBouncing; | ||
107 | }, | ||
108 | set: function (value) { | ||
109 | this._hasBouncing = value; | ||
110 | } | ||
111 | }, | ||
112 | |||
113 | _momentumDuration: { | ||
114 | enumerable: false, | ||
115 | value: 650 | ||
116 | }, | ||
117 | |||
118 | momentumDuration: { | ||
119 | get: function () { | ||
120 | return this._momentumDuration; | ||
121 | }, | ||
122 | set: function (value) { | ||
123 | this._momentumDuration = value; | ||
124 | } | ||
125 | }, | ||
126 | |||
127 | _bouncingDuration: { | ||
128 | enumerable: false, | ||
129 | value: 750 | ||
130 | }, | ||
131 | |||
132 | bouncingDuration: { | ||
133 | get: function () { | ||
134 | return this._bouncingDuration; | ||
135 | }, | ||
136 | set: function (value) { | ||
137 | this._bouncingDuration = value; | ||
138 | } | ||
139 | }, | ||
140 | |||
141 | _content: { | ||
142 | enumerable: false, | ||
143 | value: null | ||
144 | }, | ||
145 | |||
146 | templateDidLoad: { | ||
147 | value: function () { | ||
148 | var orphanedFragment, | ||
149 | currentContentRange = this.element.ownerDocument.createRange(); | ||
150 | |||
151 | currentContentRange.selectNodeContents(this.element); | ||
152 | orphanedFragment = currentContentRange.extractContents(); | ||
153 | this._content.appendChild(orphanedFragment); | ||
154 | } | ||
155 | }, | ||
156 | |||
157 | handleTranslateStart: { | ||
158 | value: function(event) { | ||
159 | this._scrollBars.opacity = .5; | ||
160 | } | ||
161 | }, | ||
162 | |||
163 | handleTranslateEnd: { | ||
164 | value: function(event) { | ||
165 | this._scrollBars.opacity = 0; | ||
166 | } | ||
167 | }, | ||
168 | |||
169 | willDraw: { | ||
170 | enumerable: false, | ||
171 | value: function () { | ||
172 | this._left = this._element.offsetLeft; | ||
173 | this._top = this._element.offsetTop; | ||
174 | this._width = this._element.offsetWidth; | ||
175 | this._height = this._element.offsetHeight; | ||
176 | this._maxTranslateX = this._content.scrollWidth - this._width; | ||
177 | if (this._maxTranslateX < 0) { | ||
178 | this._.maxTranslateX = 0; | ||
179 | } | ||
180 | this._maxTranslateY = this._content.offsetHeight - this._height; | ||
181 | if (this._maxTranslateY < 0) { | ||
182 | this._maxTranslateY = 0; | ||
183 | } | ||
184 | var delegateValue = this.callDelegateMethod("didSetMaxScroll", {x: this._maxTranslateX, y: this._maxTranslateY}); | ||
185 | if (delegateValue) { | ||
186 | this._maxTranslateX = delegateValue.x; | ||
187 | this._maxTranslateY = delegateValue.y; | ||
188 | } | ||
189 | switch (this._displayScrollbars) { | ||
190 | case "horizontal": | ||
191 | this._scrollBars.displayHorizontal = true; | ||
192 | this._scrollBars.displayVertical = false; | ||
193 | break; | ||
194 | case "vertical": | ||
195 | this._scrollBars.displayHorizontal = false; | ||
196 | this._scrollBars.displayVertical = true; | ||
197 | break; | ||
198 | case "both": | ||
199 | this._scrollBars.displayHorizontal = true; | ||
200 | this._scrollBars.displayVertical = true; | ||
201 | break; | ||
202 | case "auto": | ||
203 | if (this._maxTranslateX && this._maxTranslateY) { | ||
204 | this._scrollBars.displayHorizontal = true; | ||
205 | this._scrollBars.displayVertical = true; | ||
206 | } else { | ||
207 | if (this._maxTranslateX) { | ||
208 | this._scrollBars.displayHorizontal = true; | ||
209 | this._scrollBars.displayVertical = false; | ||
210 | } else { | ||
211 | if (this._maxTranslateY) { | ||
212 | this._scrollBars.displayHorizontal = false; | ||
213 | this._scrollBars.displayVertical = true; | ||
214 | } else { | ||
215 | this._scrollBars.displayHorizontal = false; | ||
216 | this._scrollBars.displayVertical = false; | ||
217 | } | ||
218 | } | ||
219 | } | ||
220 | break; | ||
221 | case "none": | ||
222 | this._scrollBars.displayHorizontal = false; | ||
223 | this._scrollBars.displayVertical = false; | ||
224 | break; | ||