diff options
author | Pierre Frisch | 2011-12-22 07:25:50 -0800 |
---|---|---|
committer | Valerio Virgillito | 2012-01-27 11:18:17 -0800 |
commit | b89a7ee8b956c96a1dcee995ea840feddc5d4b27 (patch) | |
tree | 0f3136ab0ecdbbbed6a83576581af0a53124d6f1 /node_modules/montage/ui/scroll-bars.reel/scroll-bars.js | |
parent | 2401f05d1f4b94d45e4568b81fc73e67b969d980 (diff) | |
download | ninja-b89a7ee8b956c96a1dcee995ea840feddc5d4b27.tar.gz |
First commit of Ninja to ninja-internal
Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>
Diffstat (limited to 'node_modules/montage/ui/scroll-bars.reel/scroll-bars.js')
-rw-r--r-- | node_modules/montage/ui/scroll-bars.reel/scroll-bars.js | 247 |
1 files changed, 247 insertions, 0 deletions
diff --git a/node_modules/montage/ui/scroll-bars.reel/scroll-bars.js b/node_modules/montage/ui/scroll-bars.reel/scroll-bars.js new file mode 100644 index 00000000..48b6a4c9 --- /dev/null +++ b/node_modules/montage/ui/scroll-bars.reel/scroll-bars.js | |||
@@ -0,0 +1,247 @@ | |||
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, | ||
8 | Component = require("ui/component").Component; | ||
9 | |||
10 | var ScrollBars = exports.ScrollBars = Montage.create(Component, { | ||
11 | |||
12 | // Scroll and length are defined in a [0..1] range | ||
13 | |||
14 | _verticalScroll: { | ||
15 | enumerable: false, | ||
16 | value: 0 | ||
17 | }, | ||
18 | |||
19 | _horizontalScroll: { | ||
20 | enumerable: false, | ||
21 | value: 0 | ||
22 | }, | ||
23 | |||
24 | _verticalLength: { | ||
25 | enumerable: false, | ||
26 | value: 0 | ||
27 | }, | ||
28 | |||
29 | _horizontalLength: { | ||
30 | enumerable: false, | ||
31 | value: 0 | ||
32 | }, | ||
33 | |||
34 | verticalScroll: { | ||
35 | get: function () { | ||
36 | return this._verticalScroll; | ||
37 | }, | ||
38 | set: function (value) { | ||
39 | this._verticalScroll = value; | ||
40 | this.needsDraw = true; | ||
41 | } | ||
42 | }, | ||
43 | |||
44 | horizontalScroll: { | ||
45 | get: function () { | ||
46 | return this._horizontalScroll; | ||
47 | }, | ||
48 | set: function (value) { | ||
49 | this._horizontalScroll = value; | ||
50 | this.needsDraw = true; | ||
51 | } | ||
52 | }, | ||
53 | |||
54 | verticalLength: { | ||
55 | get: function () { | ||
56 | return this._verticalLength; | ||
57 | }, | ||
58 | set: function (value) { | ||
59 | this._verticalLength = value; | ||
60 | this.needsDraw = true; | ||
61 | } | ||
62 | }, | ||
63 | |||
64 | horizontalLength: { | ||
65 | get: function () { | ||
66 | return this._horizontalLength; | ||
67 | }, | ||
68 | set: function (value) { | ||
69 | this._horizontalLength = value; | ||
70 | this.needsDraw = true; | ||
71 | } | ||
72 | }, | ||
73 | |||
74 | _opacity: { | ||
75 | enumerable: false, | ||
76 | value: 0 | ||
77 | }, | ||
78 | |||
79 | opacity: { | ||
80 | get: function () { | ||
81 | return this._opacity; | ||
82 | }, | ||
83 | set: function (value) { | ||
84 | this._opacity = value; | ||
85 | this.needsDraw = true; | ||
86 | } | ||
87 | }, | ||
88 | |||
89 | _isDisplayUpdated: { | ||
90 | enumerable: false, | ||
91 | value: false | ||
92 | }, | ||
93 | |||
94 | _displayVertical: { | ||
95 | enumerable: false, | ||
96 | value: false | ||
97 | }, | ||
98 | |||
99 | displayVertical: { | ||
100 | get: function () { | ||
101 | return this._displayVertical; | ||
102 | }, | ||
103 | set: function (value) { | ||
104 | if (this._displayVertical !== value) { | ||
105 | this._displayVertical = value; | ||
106 | this._isDisplayUpdated = true; | ||
107 | this.needsDraw = true; | ||
108 | } | ||
109 | } | ||
110 | }, | ||
111 | |||
112 | _displayHorizontal: { | ||
113 | enumerable: false, | ||
114 | value: false | ||
115 | }, | ||
116 | |||
117 | displayHorizontal: { | ||
118 | get: function () { | ||
119 | return this._displayHorizontal; | ||
120 | }, | ||
121 | set: function (value) { | ||
122 | if (this._displayHorizontal !== value) { | ||
123 | this._displayHorizontal = value; | ||
124 | this._isDisplayUpdated = true; | ||
125 | this.needsDraw = true; | ||
126 | } | ||
127 | } | ||
128 | }, | ||
129 | |||
130 | _hasResizedHorizontal: { | ||
131 | enumerable: false, | ||
132 | value: false | ||
133 | }, | ||
134 | |||
135 | _hasResizedVertical: { | ||
136 | enumerable: false, | ||
137 | value: false | ||
138 | }, | ||
139 | |||
140 | willDraw: { | ||
141 | value: function () { | ||
142 | if (this._offsetWidth !== this._element.offsetWidth) { | ||
143 | this._offsetWidth = this._element.offsetWidth; | ||
144 | this._hasResizedHorizontal = true; | ||
145 | } | ||
146 | if (this._offsetHeight !== this._element.offsetHeight) { | ||
147 | this._offsetHeight = this._element.offsetHeight; | ||
148 | this._hasResizedVertical = true; | ||
149 | } | ||
150 | } | ||
151 | }, | ||
152 | |||
153 | draw: { | ||
154 | value: function () { | ||
155 | var size, | ||
156 | pos, | ||
157 | range, | ||
158 | max; | ||
159 | |||
160 | if (this._isDisplayUpdated) { | ||
161 | var displayVertical = this._displayVertical ? "block" : "none", | ||
162 | displayHorizontal = this._displayHorizontal ? "block" : "none"; | ||
163 | |||
164 | this._top.style.display = this._bottomClip.style.display = displayVertical; | ||
165 | this._left.style.display = this._rightClip.style.display = displayHorizontal; | ||
166 | this._isDisplayUpdated = false; | ||
167 | } | ||
168 | if (this._hasResizedHorizontal && this._displayHorizontal) { | ||
169 | this._rightClip.style.width = this._right.style.width = (this._offsetWidth - 4) + "px"; | ||
170 | this._rightClip.style.clip = "rect(-1px," + (this._offsetWidth - 3) + "px,6px,3px)"; | ||
171 | this._hasResizedHorizontal = false; | ||
172 | } | ||
173 | if (this._hasResizedVertical && this._displayVertical) { | ||
174 | this._bottomClip.style.height = this._bottom.style.height = (this._offsetHeight - 4) + "px"; | ||
175 | this._bottomClip.style.clip = "rect(3px,6px," + (this._offsetHeight - 3) + "px,-1px)"; | ||
176 | this._hasResizedVertical = false; | ||
177 | } | ||
178 | if (this._opacity) { | ||
179 | if (this._displayHorizontal) { | ||
180 | range = this._offsetWidth - 9 - (this._displayVertical ? 6 : 0); | ||
181 | size = Math.floor(range * this._horizontalLength); | ||
182 | max = range - size; | ||
183 | if (1 - this._horizontalLength) { | ||
184 | pos = Math.floor((max * this._horizontalScroll) / (1 - this._horizontalLength)); | ||
185 | } else { | ||
186 | pos = 0; | ||
187 | } | ||
188 | if (pos < 0) { | ||
189 | size += pos; | ||
190 | if (size < 0) { | ||
191 | size = 0; | ||
192 | } | ||
193 | pos = 0; | ||
194 | } | ||
195 | if (pos > max) { | ||
196 | size += Math.floor(max - pos); | ||
197 | if (size < 0) { | ||
198 | size = 0; | ||
199 | } | ||
200 | pos = range - size; | ||
201 | } | ||
202 | this._right.style.webkitTransform = "translate3d(" + (size - this._offsetWidth + 9) + "px,0,0)"; | ||
203 | this._left.style.webkitTransform = this._rightClip.style.webkitTransform = "translate3d(" + (pos+2) + "px,0,0)"; | ||
204 | this._left.style.webkitTransition = this._right.style.webkitTransition = "none"; | ||
205 | this._left.style.opacity = this._right.style.opacity = this._opacity; | ||
206 | } | ||
207 | if (this._displayVertical) { | ||
208 | range = this._offsetHeight - 9 - (this._displayHorizontal ? 6 : 0); | ||
209 | size = Math.floor(range * this._verticalLength); | ||
210 | max = range - size; | ||
211 | if (1 - this._verticalLength) { | ||
212 | pos = Math.floor((max * this._verticalScroll) / (1 - this._verticalLength)); | ||
213 | } else { | ||