Mercurial > google_bookmarks_incsearch
comparison chrome/content/glayer.js @ 0:c47ec96326ad
initial import
author | Yoshiki Yazawa <yaz@honeyplanet.jp> |
---|---|
date | Fri, 15 Aug 2008 01:57:59 +0900 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:c47ec96326ad |
---|---|
1 /* | |
2 -------------------------------------------------------- | |
3 glayer.js - (gray out + layer) = glayer | |
4 Version 2.2 (Update 2007/05/21) | |
5 | |
6 - onozaty (http://www.enjoyxstudy.com) | |
7 | |
8 Released under the Creative Commons License(Attribution 2.1 Japan): | |
9 http://creativecommons.org/licenses/by/2.1/jp/ | |
10 | |
11 For details, see the web site: | |
12 http://www.enjoyxstudy.com/javascript/glayer/ | |
13 | |
14 -------------------------------------------------------- | |
15 */ | |
16 | |
17 var Glayer = { | |
18 defaultId : 'glayer', | |
19 show: function(grayElement) { | |
20 | |
21 grayElement = this.createElement(grayElement || this.defaultId); | |
22 this.resetSize(grayElement); | |
23 grayElement.style.display = ''; | |
24 | |
25 return grayElement; | |
26 }, | |
27 hide: function(grayElement) { | |
28 | |
29 grayElement = this.getElement(grayElement || this.defaultId); | |
30 grayElement.style.display = 'none'; | |
31 | |
32 return grayElement; | |
33 }, | |
34 fadeIn: function(grayElement, fadeOptions) { | |
35 | |
36 grayElement = this.createElement(grayElement || this.defaultId); | |
37 this.resetSize(grayElement); | |
38 | |
39 fadeOptions = this.copyProperties({to: this.getOpacity(grayElement)}, fadeOptions || {}); | |
40 new Glayer.FadeIn(grayElement, fadeOptions).start(); | |
41 | |
42 return grayElement; | |
43 }, | |
44 fadeOut: function(grayElement, fadeOptions) { | |
45 | |
46 grayElement = this.getElement(grayElement || this.defaultId); | |
47 | |
48 fadeOptions = this.copyProperties({from: this.getOpacity(grayElement)}, fadeOptions || {}); | |
49 new Glayer.FadeOut(grayElement, fadeOptions).start(); | |
50 | |
51 return grayElement; | |
52 }, | |
53 | |
54 showParallel: function(otherElements, grayElement) { | |
55 | |
56 grayElement = this.createElement(grayElement || this.defaultId); | |
57 this.resetSize(grayElement); | |
58 grayElement.style.display = ''; | |
59 | |
60 for (var i = 0; i < otherElements.length; i++) { | |
61 otherElements[i] = this.getElement(otherElements[i]); | |
62 otherElements[i].style.display = ''; | |
63 } | |
64 | |
65 return grayElement; | |
66 }, | |
67 hideParallel: function(otherElements, grayElement) { | |
68 | |
69 grayElement = this.getElement(grayElement || this.defaultId); | |
70 grayElement.style.display = 'none'; | |
71 | |
72 for (var i = 0; i < otherElements.length; i++) { | |
73 otherElements[i] = this.getElement(otherElements[i]); | |
74 otherElements[i].style.display = 'none'; | |
75 } | |
76 | |
77 return grayElement; | |
78 }, | |
79 fadeInParallel: function(otherElements, grayElement, fadeOptions) { | |
80 | |
81 grayElement = this.createElement(grayElement || this.defaultId); | |
82 this.resetSize(grayElement); | |
83 | |
84 fadeOptions = this.copyProperties({to: this.getOpacity(grayElement)}, fadeOptions || {}); | |
85 var grayFade = new Glayer.FadeIn(grayElement, fadeOptions); | |
86 | |
87 var otherFades = []; | |
88 for (var i = 0; i < otherElements.length; i++) { | |
89 otherElements[i] = this.getElement(otherElements[i]); | |
90 otherFades.push(new Glayer.FadeIn(otherElements[i], {duration: fadeOptions.duration, to: this.getOpacity(otherElements[i])})); | |
91 } | |
92 | |
93 grayFade.start(function(){ | |
94 grayFade.update(); | |
95 for (var i = 0; i < otherFades.length; i++) { | |
96 otherFades[i].update(); | |
97 } | |
98 }); | |
99 | |
100 return grayElement; | |
101 }, | |
102 fadeOutParallel: function(otherElements, grayElement, fadeOptions) { | |
103 | |
104 grayElement = this.getElement(grayElement || this.defaultId); | |
105 | |
106 fadeOptions = this.copyProperties({from: this.getOpacity(grayElement)}, fadeOptions || {}); | |
107 var grayFade = new Glayer.FadeOut(grayElement, fadeOptions); | |
108 | |
109 var otherFades = []; | |
110 for (var i = 0; i < otherElements.length; i++) { | |
111 otherElements[i] = this.getElement(otherElements[i]); | |
112 otherFades.push(new Glayer.FadeOut(otherElements[i], {duration: fadeOptions.duration, from: this.getOpacity(otherElements[i])})); | |
113 } | |
114 | |
115 grayFade.start(function(){ | |
116 grayFade.update(); | |
117 for (var i = 0; i < otherFades.length; i++) { | |
118 otherFades[i].update(); | |
119 } | |
120 }); | |
121 | |
122 return grayElement; | |
123 }, | |
124 | |
125 resetSize: function(element) { | |
126 var position = this._getStyle(element, 'position'); | |
127 | |
128 if (position != 'fixed') { | |
129 var page = this.getPageSize(); | |
130 | |
131 element.style.width = page.width + 'px'; | |
132 element.style.height = page.height + 'px'; | |
133 } | |
134 }, | |
135 | |
136 // Util | |
137 getElement: function(element) { | |
138 | |
139 if (typeof element == 'string') { | |
140 element = document.getElementById(element); | |
141 } | |
142 return element; | |
143 }, | |
144 createElement: function(element) { | |
145 | |
146 var id = element; | |
147 element = this.getElement(element); | |
148 | |
149 if (!element) { | |
150 element = document.createElement('div'); | |
151 element.id = id; | |
152 element.style.display = 'none'; | |
153 document.body.appendChild(element); | |
154 } | |
155 return element; | |
156 }, | |
157 copyProperties: function(dest, src) { | |
158 for (var property in src) { | |
159 dest[property] = src[property]; | |
160 } | |
161 return dest; | |
162 }, | |
163 isIE : (/MSIE/.test(navigator.userAgent) && !window.opera), | |
164 isWebKit : (navigator.userAgent.indexOf('AppleWebKit') != -1), | |
165 | |
166 // Window / Page Size | |
167 getWindowSize: function() { | |
168 var width; | |
169 var height; | |
170 | |
171 if (document.compatMode == 'CSS1Compat' && !window.opera) { | |
172 // Strict Mode && Non Opera | |
173 width = document.documentElement.clientWidth; | |
174 height = document.documentElement.clientHeight; | |
175 } else if (navigator.userAgent.indexOf('AppleWebKit') != -1){ | |
176 // Safari | |
177 width = window.innerWidth; | |
178 height = window.innerHeight; | |
179 } else { | |
180 // other | |
181 width = document.body.clientWidth; | |
182 height = document.body.clientHeight; | |
183 } | |
184 | |
185 return {width: width, height: height}; | |
186 }, | |
187 getPageSize: function() { | |
188 | |
189 var windowSize = this.getWindowSize(); | |
190 | |
191 var width = windowSize.width; | |
192 var height = windowSize.height; | |
193 | |
194 if (document.compatMode == 'CSS1Compat') { | |
195 if (document.documentElement.scrollWidth > width) { | |
196 width = document.documentElement.scrollWidth; | |
197 } | |
198 if (document.documentElement.scrollHeight > height) { | |
199 height = document.documentElement.scrollHeight; | |
200 } | |
201 } else { | |
202 if (document.body.scrollWidth > width) { | |
203 width = document.body.scrollWidth; | |
204 } | |
205 if (document.body.scrollHeight > height) { | |
206 height = document.body.scrollHeight; | |
207 } | |
208 } | |
209 | |
210 return {width: width, height: height}; | |
211 }, | |
212 | |
213 // Styles | |
214 getOpacity: function(element) { | |
215 var value = this._getStyle(element, 'opacity'); | |
216 if (value) return parseFloat(value); | |
217 | |
218 if (value = (element.style.filter || '').match(/alpha\(opacity=(.*)\)/)) { | |
219 if (value[1]) return parseFloat(value[1]) / 100; | |
220 } | |
221 | |
222 return 1.0; | |
223 }, | |
224 _getStyle: function(element, style) { | |
225 var value = element.style[style]; | |
226 if (value) return value; | |
227 | |
228 if (document.defaultView && document.defaultView.getComputedStyle) { | |
229 var oldDisplay = element.style.display; | |
230 if (Glayer.isWebKit) element.style.display = 'block'; | |
231 var css = document.defaultView.getComputedStyle(element, null); | |
232 if (css) value = css.getPropertyValue(style); | |
233 if (Glayer.isWebKit) element.style.display = oldDisplay; | |
234 return value; | |
235 } else if (element.currentStyle) { | |
236 return element.currentStyle[style]; | |
237 } | |
238 | |
239 return null; | |
240 }, | |
241 | |
242 // debug | |
243 getDebugInfo: function() { | |
244 | |
245 var debugInfo = new Array(); | |
246 | |
247 debugInfo.push("document.compatMode:" + document.compatMode); | |
248 debugInfo.push("window.innerWidth:" + window.innerWidth); | |
249 debugInfo.push("window.innerHeight:" + window.innerHeight); | |
250 debugInfo.push("window.scrollMaxX:" + window.scrollMaxX); | |
251 debugInfo.push("window.scrollMaxY:" + window.scrollMaxY); | |
252 debugInfo.push("document.body.scrollWidth:" + document.body.scrollWidth); | |
253 debugInfo.push("document.body.scrollHeight:" + document.body.scrollHeight); | |
254 debugInfo.push("document.body.offsetWidth:" + document.body.offsetWidth); | |
255 debugInfo.push("document.body.offsetHeight:" + document.body.offsetHeight); | |
256 debugInfo.push("document.body.clientWidth:" + document.body.clientWidth); | |
257 debugInfo.push("document.body.clientHeight:" + document.body.clientHeight); | |
258 debugInfo.push("document.documentElement:" + document.documentElement); | |
259 if (document.documentElement) { | |
260 debugInfo.push("document.documentElement.scrollWidth:" + document.documentElement.scrollWidth); | |
261 debugInfo.push("document.documentElement.scrollHeight:" + document.documentElement.scrollHeight); | |
262 debugInfo.push("document.documentElement.offsetWidth:" + document.documentElement.offsetWidth); | |
263 debugInfo.push("document.documentElement.offsetHeight:" + document.documentElement.offsetHeight); | |
264 debugInfo.push("document.documentElement.clientWidth:" + document.documentElement.clientWidth); | |
265 debugInfo.push("document.documentElement.clientHeight:" + document.documentElement.clientHeight); | |
266 } | |
267 | |
268 return debugInfo; | |
269 } | |
270 }; | |
271 | |
272 | |
273 // Fade In/Out | |
274 Glayer.Fade = function(element, options) { | |
275 this.setup(element, options); | |
276 }; | |
277 | |
278 Glayer.Fade.prototype = { | |
279 intervalTime: 10, | |
280 duration: 800, | |
281 | |
282 setup: function(element, options) { | |
283 this.element = element; | |
284 this.style = this.element.style; | |
285 | |
286 options = options || {}; | |
287 | |
288 if (options.duration != undefined) this.duration = options.duration; | |
289 if (options.from != undefined) this.from = options.from; | |
290 if (options.to != undefined) this.to = options.to; | |
291 if (options.callback != undefined) this.callback = options.callback; | |
292 | |
293 this.startTime = new Date().getTime(); | |
294 this.endTime = this.startTime + this.duration; | |
295 | |
296 this.range = this.to - this.from; | |
297 | |
298 if (Glayer.isIE && (!this.element.currentStyle.hasLayout)) { | |
299 this.style['zoom'] = 1; | |
300 } | |
301 this.first = true; | |
302 }, | |
303 start: function(updater) { | |
304 var self = this; | |
305 updater = updater || function(){ self.update(); }; | |
306 this.intervalId = setInterval(updater, this.intervalTime); | |
307 }, | |
308 end: function() { | |
309 if (this.intervalId != null) { | |
310 clearInterval(this.intervalId); | |
311 this.intervalId = null; | |
312 } | |
313 this.execCallback(); | |
314 }, | |
315 execCallback: function() { | |
316 if (!this.callback) return; | |
317 | |
318 if (typeof this.callback == 'function') { | |
319 this.callback(); | |
320 } else { | |
321 for (var i = 0; i < this.callback.length; i++) { | |
322 this.callback[i](); | |
323 } | |
324 } | |
325 }, | |
326 update: function() { | |
327 var nowTime = new Date().getTime(); | |
328 | |
329 if (this.first) { | |
330 this.style.display = ''; | |
331 this.first = false; | |
332 } | |
333 | |
334 if (nowTime >= this.endTime) { | |
335 this.setOpacity(this.to); | |
336 this.end(); | |
337 } else { | |
338 this.setOpacity(this.from + (this.range * (nowTime - this.startTime) / this.duration)); | |
339 } | |
340 }, | |
341 setOpacity: function(opacity) { | |
342 this.style.opacity = opacity; | |
343 if (Glayer.isIE) this.style.filter = 'alpha(opacity=' + (opacity * 100) + ')'; | |
344 } | |
345 }; | |
346 | |
347 Glayer.FadeIn = function() { | |
348 Glayer.Fade.apply(this, arguments); | |
349 }; | |
350 Glayer.copyProperties(Glayer.FadeIn.prototype, Glayer.Fade.prototype); | |
351 Glayer.FadeIn.prototype.from = 0.0; | |
352 Glayer.FadeIn.prototype.to = 1.0; | |
353 | |
354 Glayer.FadeOut = function() { | |
355 Glayer.Fade.apply(this, arguments); | |
356 }; | |
357 Glayer.copyProperties(Glayer.FadeOut.prototype, Glayer.Fade.prototype); | |
358 Glayer.FadeOut.prototype.from = 1.0; | |
359 Glayer.FadeOut.prototype.to = 0.0; | |
360 Glayer.FadeOut.prototype.end = function() { | |
361 this.style.display = 'none'; | |
362 this.setOpacity(this.from); | |
363 Glayer.Fade.prototype.end.apply(this, arguments); | |
364 }; | |
365 |