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