Line 0
Link Here
|
|
|
1 |
/* ContentFlow, version 1.0.0 |
2 |
* (c) 2007 - 2010 Sebastian Kutsch |
3 |
* <http://www.jacksasylum.eu/ContentFlow/> |
4 |
* |
5 |
* ContentFlow is distributed under the terms of the MIT license. |
6 |
* (see http://www.jacksasylum.eu/ContentFlow/LICENSE) |
7 |
* |
8 |
*--------------------------------------------------------------------------*/ |
9 |
/* |
10 |
* ============================================================ |
11 |
* Global configutaion and initilization object |
12 |
* ============================================================ |
13 |
*/ |
14 |
var ContentFlowGlobal = { |
15 |
Flows: new Array, |
16 |
AddOns: {}, |
17 |
scriptName: 'contentflow.js', |
18 |
scriptElement: null, |
19 |
Browser: new (function () { |
20 |
this.Opera = window.opera ? true : false; |
21 |
this.IE = document.all && !this.Opera ? true : false; |
22 |
this.IE6 = this.IE && typeof(window.XMLHttpRequest) == "undefined" ? true : false; |
23 |
this.IE8 = this.IE && typeof(document.querySelectorAll) != "undefined" ? true : false; |
24 |
this.IE7 = this.IE && ! this.IE6 && !this.IE8 ? true : false; |
25 |
this.WebKit = /WebKit/i.test(navigator.userAgent) ? true : false, |
26 |
this.iPhone = /iPhone|iPod/i.test(navigator.userAgent)? true : false; |
27 |
this.Chrome = /Chrome/i.test(navigator.userAgent) ? true : false; |
28 |
this.Safari = /Safari/i.test(navigator.userAgent) && !this.Chrome ? true : false; |
29 |
this.Konqueror = navigator.vendor == "KDE" ? true : false; |
30 |
this.Konqueror4 = this.Konqueror && /native code/.test(document.getElementsByClassName) ? true : false; |
31 |
this.Gecko = !this.WebKit && navigator.product == "Gecko" ? true : false; |
32 |
this.Gecko19 = this.Gecko && Array.reduce ? true : false; |
33 |
})(), |
34 |
|
35 |
getAddOnConf: function(name) { |
36 |
if(this.AddOns[name]) |
37 |
return this.AddOns[name].conf; |
38 |
else |
39 |
return {}; |
40 |
}, |
41 |
|
42 |
setAddOnConf: function (name, conf) { |
43 |
this.AddOns[name].setConfig(conf); |
44 |
}, |
45 |
|
46 |
getScriptElement:function (scriptName) { |
47 |
var regex = new RegExp(scriptName); |
48 |
var scripts = document.getElementsByTagName('script'); |
49 |
for (var i=0; i<scripts.length; i++) { |
50 |
if (scripts[i].src && regex.test(scripts[i].src)) |
51 |
return scripts[i]; |
52 |
} |
53 |
return ''; |
54 |
}, |
55 |
|
56 |
getScriptPath: function (scriptElement, scriptName) { |
57 |
var regex = new RegExp(scriptName+".*"); |
58 |
return scriptElement.src.replace(regex, ''); |
59 |
}, |
60 |
|
61 |
addScript: function (path) { |
62 |
if (this.Browser.IE || this.Browser.WebKit || this.Browser.Konqueror) { |
63 |
document.write('<script type="text/javascript" src="'+path+'"><\/script>'); |
64 |
} |
65 |
else { |
66 |
var script = document.createElement('script'); |
67 |
script.src = path; |
68 |
script.setAttribute('type', 'text/javascript'); |
69 |
document.getElementsByTagName('head')[0].appendChild(script); |
70 |
} |
71 |
}, |
72 |
|
73 |
addScripts: function (basePath, filenames) { |
74 |
for (var i=0; i<filename.length; i++) |
75 |
this.addScript(basepath+filenames[i]); |
76 |
}, |
77 |
|
78 |
addStylesheet: function (path) { |
79 |
if (this.Browser.Gecko19) { |
80 |
var link = document.createElement('link'); |
81 |
link.setAttribute('rel', 'stylesheet'); |
82 |
link.setAttribute('titel', 'Standard'); |
83 |
link.setAttribute('href', path); |
84 |
link.setAttribute('type', 'text/css'); |
85 |
link.setAttribute('media', 'screen'); |
86 |
document.getElementsByTagName('head')[0].appendChild(link); |
87 |
} |
88 |
else { |
89 |
document.write('<link rel="stylesheet" title="Standard" href="'+path+'" type="text/css" media="screen" />'); |
90 |
} |
91 |
|
92 |
}, |
93 |
|
94 |
addStylesheets: function (basePath, filenames) { |
95 |
for (var i=0; i<filename.length; i++) |
96 |
this.addStylesheet(basepath+filenames[i]); |
97 |
}, |
98 |
|
99 |
initPath: function () { |
100 |
/* get / set basic values */ |
101 |
this.scriptElement = this.getScriptElement(this.scriptName); |
102 |
if (!this.scriptElement) { |
103 |
this.scriptName = 'contentflow_src.js'; |
104 |
this.scriptElement = this.getScriptElement(this.scriptName); |
105 |
} |
106 |
|
107 |
this.BaseDir = this.getScriptPath(this.scriptElement, this.scriptName) ; |
108 |
if (!this.AddOnBaseDir) this.AddOnBaseDir = this.BaseDir; |
109 |
if (!this.CSSBaseDir) this.CSSBaseDir = this.BaseDir; |
110 |
}, |
111 |
|
112 |
init: function () { |
113 |
/* add default stylesheets */ |
114 |
this.addStylesheet(this.CSSBaseDir+'contentflow.css'); |
115 |
this.addStylesheet(this.CSSBaseDir+'mycontentflow.css'); // FF2: without adding a css-file FF2 hangs on a reload. |
116 |
// I don't have the slidest idea why |
117 |
// Could be timing problem |
118 |
this.loadAddOns = new Array(); |
119 |
/* add AddOns scripts */ |
120 |
if (this.scriptElement.getAttribute('load')) { |
121 |
var AddOns = this.loadAddOns = this.scriptElement.getAttribute('load').replace(/\ +/g,' ').split(' '); |
122 |
for (var i=0; i<AddOns.length; i++) { |
123 |
if (AddOns[i] == '') continue; |
124 |
//if (AddOns[i] == 'myStyle') { |
125 |
//this.addStylesheet(this.BaseDir+'mycontentflow.css'); |
126 |
//continue; |
127 |
//} |
128 |
this.addScript(this.AddOnBaseDir+'ContentFlowAddOn_'+AddOns[i]+'.js'); |
129 |
} |
130 |
} |
131 |
|
132 |
/* ========== ContentFlow auto initialization on document load ========== |
133 |
* thanks to Dean Edwards |
134 |
* http://dean.edwards.name/weblog/2005/02/order-of-events/ |
135 |
*/ |
136 |
var CFG = this; |
137 |
|
138 |
/* for Mozilla, Opera 9, Safari */ |
139 |
if (document.addEventListener) { |
140 |
/* for Safari */ |
141 |
if (this.Browser.WebKit) { |
142 |
var _timer = setInterval(function() { |
143 |
if (/loaded|complete/.test(document.readyState)) { |
144 |
clearInterval(_timer); |
145 |
CFG.onloadInit(); // call the onload handler |
146 |
} |
147 |
}, 10); |
148 |
} |
149 |
else { |
150 |
document.addEventListener("DOMContentLoaded", CFG.onloadInit, false); |
151 |
} |
152 |
} |
153 |
else if (this.Browser.IE) { |
154 |
document.write("<script id=__ie_cf_onload defer src=javascript:void(0)><\/script>"); |
155 |
var script = document.getElementById("__ie_cf_onload"); |
156 |
script.onreadystatechange = function() { |
157 |
if (this.readyState == "complete") { |
158 |
CFG.onloadInit(); // call the onload handler |
159 |
} |
160 |
}; |
161 |
} |
162 |
|
163 |
/* for all other browsers */ |
164 |
window.addEvent('load', CFG.onloadInit, false); |
165 |
|
166 |
/* ================================================================== */ |
167 |
|
168 |
}, |
169 |
|
170 |
onloadInit: function () { |
171 |
// quit if this function has already been called |
172 |
if (arguments.callee.done) return; |
173 |
for (var i=0; i< ContentFlowGlobal.loadAddOns.length; i++) { |
174 |
var a = ContentFlowGlobal.loadAddOns[i]; |
175 |
if (!ContentFlowGlobal.AddOns[a]) { |
176 |
var CFG = ContentFlowGlobal; |
177 |
window.setTimeout( CFG.onloadInit, 10); |
178 |
return; |
179 |
} |
180 |
} |
181 |
// flag this function so we don't do the same thing twice |
182 |
arguments.callee.done = true; |
183 |
|
184 |
/* fix for mootools */ |
185 |
if (window.Element && Element.implement && document.all && !window.opera) { |
186 |
for (var prop in window.CFElement.prototype) { |
187 |
if(!window.Element.prototype[prop]) { |
188 |
var implement = {}; |
189 |
implement[prop] = window.CFElement.prototype[prop]; |
190 |
Element.implement(implement); |
191 |
} |
192 |
} |
193 |
} |
194 |
|
195 |
/* init all manualy created flows */ |
196 |
for (var i=0; i< ContentFlowGlobal.Flows.length; i++) { |
197 |
ContentFlowGlobal.Flows[i].init(); |
198 |
} |
199 |
|
200 |
/* init the rest */ |
201 |
var divs = document.getElementsByTagName('div'); |
202 |
DIVS: for (var i = 0; i < divs.length; i++) { |
203 |
if (divs[i].className.match(/\bContentFlow\b/)) { |
204 |
for (var j=0; j<ContentFlowGlobal.Flows.length; j++) { |
205 |
if (divs[i] == ContentFlowGlobal.Flows[j].Container) continue DIVS; |
206 |
} |
207 |
var CF = new ContentFlow(divs[i],{}, false); |
208 |
CF.init(); |
209 |
} |
210 |
} |
211 |
} |
212 |
|
213 |
}; |
214 |
|
215 |
ContentFlowGlobal.initPath(); |
216 |
|
217 |
|
218 |
/* |
219 |
* ============================================================ |
220 |
* ContentFlowAddOn |
221 |
* ============================================================ |
222 |
*/ |
223 |
var ContentFlowAddOn = function (name, methods, register) { |
224 |
if (typeof register == "undefined" || register != false) |
225 |
ContentFlowGlobal.AddOns[name] = this; |
226 |
|
227 |
this.name = name; |
228 |
if (!methods) methods = {}; |
229 |
this.methods = methods; |
230 |
this.conf = {}; |
231 |
if (this.methods.conf) { |
232 |
this.setConfig(this.methods.conf); |
233 |
delete this.methods.conf; |
234 |
} |
235 |
|
236 |
|
237 |
this.scriptpath = ContentFlowGlobal.AddOnBaseDir; |
238 |
if (methods.init) { |
239 |
var init = methods.init.bind(this); |
240 |
init(this); |
241 |
} |
242 |
}; |
243 |
|
244 |
ContentFlowAddOn.prototype = { |
245 |
Browser: ContentFlowGlobal.Browser, |
246 |
|
247 |
addScript: ContentFlowGlobal.addScript, |
248 |
addScripts: ContentFlowGlobal.addScripts, |
249 |
|
250 |
addStylesheet: function (path) { |
251 |
if (!path) |
252 |
path = this.scriptpath+'ContentFlowAddOn_'+this.name+'.css'; |
253 |
ContentFlowGlobal.addStylesheet(path); |
254 |
}, |
255 |
addStylesheets: ContentFlowGlobal.addStylesheets, |
256 |
|
257 |
setConfig: function (conf) { |
258 |
for (var c in conf) { |
259 |
this.conf[c] = conf[c]; |
260 |
} |
261 |
}, |
262 |
|
263 |
_init: function (flow) { |
264 |
if (this.methods.ContentFlowConf) { |
265 |
flow.setConfig(this.methods.ContentFlowConf); |
266 |
} |
267 |
} |
268 |
|
269 |
|
270 |
}; |
271 |
|
272 |
|
273 |
|
274 |
/* |
275 |
* ============================================================ |
276 |
* ContentFlowGUIElement |
277 |
* ============================================================ |
278 |
*/ |
279 |
|
280 |
var ContentFlowGUIElement = function (CFobj, element) { |
281 |
element.setDimensions = function () { |
282 |
this.dimensions = this.getDimensions(); |
283 |
this.center = {x: this.dimensions.width/2, y:this.dimensions.height/2}; |
284 |
this.position = this.findPos(); |
285 |
}; |
286 |
element.addObserver = function (eventName, method) { |
287 |
var m = this.eventMethod = method.bind(CFobj); |
288 |
this.observedEvent = eventName; |
289 |
this.addEvent(eventName, m, false); |
290 |
}; |
291 |
|
292 |
element.makeDraggable = function (onDrag, beforeDrag, afterDrag) { |
293 |
|
294 |
this.stopDrag = function(event) { |
295 |
if (!event) var event = window.event; |
296 |
if (this.Browser.iPhone) { |
297 |
window.removeEvent('touchemove', onDrag, false); |
298 |
if (!this.ontochmove) { |
299 |
var t = event.target; |
300 |
if (t.firstChild) t = t.firstChild; |
301 |
var e = document.createEvent('MouseEvents'); |
302 |
e.initEvent('click', true, true); |
303 |
t.dispatchEvent(e); |
304 |
} |
305 |
} |
306 |
else { |
307 |
window.removeEvent('mousemove', onDrag, false); |
308 |
} |
309 |
afterDrag(event); |
310 |
}.bind(this); |
311 |
|
312 |
this.initDrag = function (event) { |
313 |
if (!event) var event = window.event; |
314 |
var e = event; |
315 |
if (event.touches) e = event.touches[0]; |
316 |
|
317 |
this.mouseX = e.clientX; |
318 |
this.mouseY = e.clientY; |
319 |
|
320 |
beforeDrag(event); |
321 |
|
322 |
}.bind(this); |
323 |
|
324 |
this.startDrag = function (event) { |
325 |
if (!event) var event = window.event; |
326 |
|
327 |
var stopDrag = this.stopDrag; |
328 |
|
329 |
if (this.Browser.iPhone) { |
330 |
var s = this; |
331 |
s.ontouchmove = false |
332 |
window.addEvent('touchmove', function (e) { |
333 |
s.ontouchmove = true; |
334 |
onDrag(e); |
335 |
}, false); |
336 |
event.preventDefault(); |
337 |
window.addEvent('touchend', stopDrag, false); |
338 |
} |
339 |
else { |
340 |
window.addEvent('mousemove', onDrag, false); |
341 |
window.addEvent('mouseup', stopDrag, false); |
342 |
} |
343 |
if(event.preventDefault) { event.preventDefault() } |
344 |
|
345 |
}.bind(this); |
346 |
|
347 |
var startDrag = this.startDrag; |
348 |
var xxx = function (ev) { |
349 |
var e = ev.touches[0]; |
350 |
document.getElementById('info').innerHTML = e.clientX; |
351 |
ev.preventDefault(); |
352 |
} |
353 |
if (this.Browser.iPhone) { |
354 |
this.addEventListener('touchstart', startDrag, false); |
355 |
} |
356 |
else { |
357 |
this.addEvent('mousedown', startDrag, false); |
358 |
} |
359 |
|
360 |
}; |
361 |
|
362 |
element.Browser = ContentFlowGlobal.Browser; |
363 |
$CF(element).setDimensions(); |
364 |
return element; |
365 |
}; |
366 |
|
367 |
|
368 |
/* |
369 |
* ============================================================ |
370 |
* ContentFlowItem |
371 |
* ============================================================ |
372 |
*/ |
373 |
var ContentFlowItem = function (CFobj, element, index) { |
374 |
this.CFobj = CFobj; |
375 |
this._activeElement = CFobj.conf.activeElement; |
376 |
this.pre = null; |
377 |
this.next = null; |
378 |
/* |
379 |
* ==================== item click events ==================== |
380 |
* handles the click event on an active and none active item |
381 |
*/ |
382 |
|
383 |
this.clickItem = function (event) { |
384 |
if(!event) var event = window.event; |
385 |
var el = event.target ? event.target : event.srcElement; |
386 |
var index = el.itemIndex ? el.itemIndex : el.parentNode.itemIndex; |
387 |
var item = this.items[index]; |
388 |
if (this._activeItem == item) { |
389 |
this.conf.onclickActiveItem(item); |
390 |
} |
391 |
else { |
392 |
if (this.conf.onclickInactiveItem(item) != false ) this.moveToIndex(index); |
393 |
} |
394 |
}.bind(CFobj), |
395 |
|
396 |
this.setIndex = function (index) { |
397 |
this.index = index; |
398 |
this.element.itemIndex = index; |
399 |
}; |
400 |
this.getIndex = function () { |
401 |
return this.index; |
402 |
}; |
403 |
|
404 |
|
405 |
/* generate deault HTML structure if item is an image */ |
406 |
if ($CF(element).nodeName == "IMG") { |
407 |
var el = document.createElement('div'); |
408 |
el.className = "item"; |
409 |
|
410 |
var cont = element.parentNode.replaceChild( el, element); |
411 |
cont.className = "content"; |
412 |
el.appendChild(cont); |
413 |
|
414 |
if (element.title) { |
415 |
var cap = document.createElement('div'); |
416 |
cap.className = "caption"; |
417 |
cap.innerHTML = element.title; |
418 |
el.appendChild(cap); |
419 |
} |
420 |
element = el; |
421 |
} |
422 |
/* create item object */ |
423 |
this.element = $CF(element); |
424 |
this.item = element; |
425 |
if (typeof index != "undefined") this.setIndex(index); |
426 |
this.content = this.element.getChildrenByClassName('content')[0]; |
427 |
this.caption = this.element.getChildrenByClassName('caption')[0]; |
428 |
this.label = this.element.getChildrenByClassName('label')[0]; |
429 |
|
430 |
/* if content is image set properties */ |
431 |
if (this.content.nodeName == "IMG") { |
432 |
CFobj._imagesToLoad++; |
433 |
|
434 |
var foobar = function () { |
435 |
CFobj._imagesToLoad--; |
436 |
this.image = this.content; |
437 |
this.setImageFormat(this.image); |
438 |
if ( CFobj.conf.reflectionHeight > 0) { |
439 |
this.addReflection(); |
440 |
} |
441 |
this.initClick(); |
442 |
}.bind(this); |
443 |
|
444 |
if (this.content.complete && this.content.width > 0) |
445 |
foobar(); |
446 |
else |
447 |
this.content.onload = foobar; |
448 |
} |
449 |
else { |
450 |
this.initClick(); |
451 |
} |
452 |
|
453 |
}; |
454 |
|
455 |
ContentFlowItem.prototype = { |
456 |
|
457 |
Browser: ContentFlowGlobal.Browser, |
458 |
|
459 |
makeActive: function () { |
460 |
this.element.addClassName('active'); |
461 |
this.CFobj.conf.onMakeActive(this); |
462 |
}, |
463 |
|
464 |
makeInactive: function () { |
465 |
this.element.removeClassName('active'); |
466 |
this.CFobj.conf.onMakeInactive(this); |
467 |
}, |
468 |
|
469 |
initClick: function () { |
470 |
var cItem = this.clickItem; |
471 |
this[this._activeElement].addEvent('click', cItem, false); |
472 |
}, |
473 |
|
474 |
setImageFormat: function (img) { |
475 |
if (this.Browser.IE6 || this.Browser.IE7) img.style.width = "auto"; |
476 |
img.origProportion = img.width / img.height; |
477 |
img.setAttribute('origProportion', img.width / img.height); |
478 |
if (this.Browser.IE6 || this.Browser.IE7) img.style.width = ""; |
479 |
//img.origWidth = img.width; |
480 |
//img.origHeight = img.height; |
481 |
if (img.origProportion <= 1) |
482 |
img.addClassName('portray'); |
483 |
else |
484 |
img.addClassName('landscape'); |
485 |
}, |
486 |
|
487 |
/* |
488 |
* add reflection to item |
489 |
*/ |
490 |
addReflection: function() { |
491 |
var CFobj = this.CFobj; |
492 |
var reflection; |
493 |
var image = this.content; |
494 |
|
495 |
|
496 |
if (this.Browser.IE) { |
497 |
var filterString = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)'; |
498 |
if (CFobj._reflectionColorRGB) { |
499 |
// transparent gradient |
500 |
if (CFobj.conf.reflectionColor == "transparent") { |
501 |
var RefImg = reflection = this.reflection = document.createElement('img'); |
502 |
reflection.src = image.src; |
503 |
} |
504 |
// color gradient |
505 |
else { |
506 |
reflection = this.reflection = document.createElement('div'); |
507 |
var RefImg = document.createElement('img'); |
508 |
RefImg.src = image.src; |
509 |
reflection.width = RefImg.width; |
510 |
reflection.height = RefImg.height; |
511 |
RefImg.style.width = '100%'; |
512 |
RefImg.style.height = '100%'; |
513 |
var color = CFobj._reflectionColorRGB; |
514 |
reflection.style.backgroundColor = '#'+color.hR+color.hG+color.hB; |
515 |
reflection.appendChild(RefImg); |
516 |
} |
517 |
filterString += ' progid:DXImageTransform.Microsoft.Alpha(opacity=0, finishOpacity=50, style=1, finishX=0, startY='+CFobj.conf.reflectionHeight*100+' finishY=0)'; |
518 |
} else { |
519 |
var RefImg = reflection = this.reflection = document.createElement('img'); |
520 |
reflection.src = image.src; |
521 |
} |
522 |
// crop image (streches and crops (clip on default dimensions), original proportions will be restored through CSS) |
523 |
filterString += ' progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22='+1/CFobj.conf.reflectionHeight+')'; |
524 |
|
525 |
if (ContentFlowGlobal.Browser.IE6) { |
526 |
if (image.src.match(/\.png$/) ) { |
527 |
image.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+image.src+"', sizingMethod=scale )"; |
528 |
image.filterString = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+image.src+"', sizingMethod=scale )"; |
529 |
filterString += " progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+image.src+"', sizingMethod=scale )"; |
530 |
image.origSrc = image.src; |
531 |
image.src='img/blank.gif'; |
532 |
RefImg.src="img/blank.gif"; |
533 |
} |
534 |
} |
535 |
|
536 |
reflection.filterString = filterString; |
537 |
RefImg.style.filter = filterString; |
538 |
|
539 |
} else { |
540 |
if (CFobj._reflectionWithinImage) |
541 |
var canvas = this.canvas = $CF(document.createElement('canvas')); |
542 |
else |
543 |
var canvas = reflection = this.reflection = document.createElement('canvas'); |
544 |
|
545 |
if (canvas.getContext) { |
546 |
if (CFobj._reflectionWithinImage) { |
547 |
for (var i=0; i <image.attributes.length; i++) { |
548 |
canvas.setAttributeNode(image.attributes[i].cloneNode(true)); |
549 |
} |
550 |
} |
551 |
|
552 |
var context = canvas.getContext("2d"); |
553 |
|
554 |
/* calc image size */ |
555 |
var max = CFobj.maxHeight; |
556 |
var size = CFobj._scaleImageSize(this, {width: max, height: max }, max) |
557 |
var width = size.width; |
558 |
var height = size.height; |
559 |
|
560 |
// overwrite default height and width |
561 |
if (CFobj._reflectionWithinImage) { |
562 |
canvas.width = width; |
563 |
canvas.height = height; |
564 |
this.setImageFormat(canvas); |
565 |
canvas.height = height * (1 + CFobj.conf.reflectionHeight + CFobj.conf.reflectionGap); |
566 |
|
567 |
} |
568 |
else { |
569 |
canvas.width = width; |
570 |
canvas.height = height * CFobj.conf.reflectionHeight; |
571 |
} |
572 |
|
573 |
context.save(); /* save default context */ |
574 |
|
575 |
/* draw image into canvas */ |
576 |
if (CFobj._reflectionWithinImage) { |
577 |
context.drawImage(image, 0, 0, width, height); |
578 |
} |
579 |
|
580 |
/* mirror image by transformation of context and image drawing */ |
581 |
if (CFobj._reflectionWithinImage) { |
582 |
var contextHeight = height * ( 1 + CFobj.conf.reflectionGap/2) * 2; |
583 |
} |
584 |
else { |
585 |
var contextHeight = image.height; |
586 |
} |
587 |
// -1 for FF 1.5 |
588 |
contextHeight -= 1; |
589 |
|
590 |
context.translate(0, contextHeight); |
591 |
context.scale(1, -1); |
592 |
/* draw reflection image into canvas */ |
593 |
context.drawImage(image, 0, 0, width, height); |
594 |
|
595 |
/* restore default context for simpler further canvas manupulation */ |
596 |
context.restore(); |
597 |
|
598 |
if (CFobj._reflectionColorRGB) { |
599 |
var gradient = context.createLinearGradient(0, 0, 0, canvas.height); |
600 |
|
601 |
var alpha = [0, 0.5, 1]; |
602 |
if (CFobj._reflectionColor == "transparent") { |
603 |
context.globalCompositeOperation = "destination-in"; |
604 |
alpha = [1, 0.5, 0]; |
605 |
} |
606 |
|
607 |
var red = CFobj._reflectionColorRGB.iR; |
608 |
var green = CFobj._reflectionColorRGB.iG; |
609 |
var blue = CFobj._reflectionColorRGB.iB; |
610 |
if (CFobj._reflectionWithinImage) { |
611 |
gradient.addColorStop(0, 'rgba('+red+','+green+','+blue+','+alpha[0]+')'); |
612 |
gradient.addColorStop(height/canvas.height, 'rgba('+red+','+green+','+blue+','+alpha[0]+')'); |
613 |
gradient.addColorStop(height/canvas.height, 'rgba('+red+','+green+','+blue+','+alpha[1]+')'); |
614 |
} |
615 |
else { |
616 |
gradient.addColorStop(0, 'rgba('+red+','+green+','+blue+','+alpha[1]+')'); |
617 |
} |
618 |
gradient.addColorStop(1, 'rgba('+red+','+green+','+blue+','+alpha[2]+')'); |
619 |
|
620 |
context.fillStyle = gradient; |
621 |
context.fillRect(0, 0, canvas.width, canvas.height); |
622 |
|
623 |
} |
624 |
|
625 |
if (CFobj._reflectionWithinImage) { |
626 |
image.parentNode.replaceChild(canvas, image); |
627 |
this.content = canvas; |
628 |
this.origContent = canvas; |
629 |
delete this.image;// = true; |
630 |
|
631 |
} |
632 |
|
633 |
} else { |
634 |
CFobj._reflectionWithinImage = false; |
635 |
delete this.reflection; |
636 |
} |
637 |
|
638 |
} |
639 |
if (reflection) { |
640 |
reflection.className = "reflection"; |
641 |
this.element.appendChild(reflection); |
642 |
|
643 |
/* be shure that caption is last child */ |
644 |
if (this.caption) this.element.appendChild(this.caption); |
645 |
} |
646 |
|
647 |
} |
648 |
|
649 |
|
650 |
}; |
651 |
|
652 |
/* |
653 |
* ============================================================ |
654 |
* ContentFlow |
655 |
* ============================================================ |
656 |
*/ |
657 |
var ContentFlow = function (container, config) { |
658 |
|
659 |
if (container) { |
660 |
ContentFlowGlobal.Flows.push(this); |
661 |
this.Container = container; |
662 |
this._userConf = config?config:{}; |
663 |
this.conf = {}; |
664 |
this._loadedAddOns = new Array(); |
665 |
} else { |
666 |
throw ('ContentFlow ERROR: No flow container node or id given'); |
667 |
} |
668 |
|
669 |
}; |
670 |
|
671 |
ContentFlow.prototype = { |
672 |
_imagesToLoad: 0, |
673 |
_activeItem: 0, |
674 |
_currentPosition: 0, |
675 |
_targetPosition: 0, |
676 |
_stepLock: false, |
677 |
_millisecondsPerStep: 40, |
678 |
_reflectionWithinImage: true, |
679 |
Browser: ContentFlowGlobal.Browser, |
680 |
|
681 |
_defaultConf: { |
682 |
/* pre conf */ |
683 |
useAddOns: 'all', // all, none, [AddOn1, ... , AddOnN] |
684 |
|
685 |
biggestItemPos: 0, |
686 |
loadingTimeout: 30000, //milliseconds |
687 |
activeElement: 'content', // item or content |
688 |
|
689 |
maxItemHeight: 0, |
690 |
scaleFactor: 1, |
691 |
scaleFactorLandscape: 1.33, |
692 |
scaleFactorPortrait: 1.0, |
693 |
fixItemSize: false, |
694 |
relativeItemPosition: "top center", // align top/above, bottom/below, left, right, center of position coordinate |
695 |
|
696 |
circularFlow: true, |
697 |
verticalFlow: false, |
698 |
visibleItems: -1, |
699 |
endOpacity: 1, |
700 |
startItem: "center", |
701 |
scrollInFrom: "pre", |
702 |
|
703 |
flowSpeedFactor: 1.0, |
704 |
flowDragFriction: 1.0, |
705 |
scrollWheelSpeed: 1.0, |
706 |
keys: { |
707 |
13: function () { this.conf.onclickActiveItem(this._activeItem) }, |
708 |
37: function () { this.moveTo('pre') }, |
709 |
38: function () { this.moveTo('visibleNext') }, |
710 |
39: function () { this.moveTo('next') }, |
711 |
40: function () { this.moveTo('visiblePre') } |
712 |
}, |
713 |
|
714 |
reflectionColor: "transparent", // none, transparent or hex RGB CSS style #RRGGBB |
715 |
reflectionHeight: 0.5, // float (relative to original image height) |
716 |
reflectionGap: 0.0, |
717 |
|
718 |
/* ==================== actions ==================== */ |
719 |
|
720 |
onInit: function () {}, |
721 |
|
722 |
onclickInactiveItem: function (item) {}, |
723 |
|
724 |
onclickActiveItem: function (item) { |
725 |
var url, target; |
726 |
|
727 |
if (url = item.content.getAttribute('href')) { |
728 |
target = item.content.getAttribute('target'); |
729 |
} |
730 |
else if (url = item.element.getAttribute('href')) { |
731 |
target = item.element.getAttribute('target'); |
732 |
} |
733 |
else if (url = item.content.getAttribute('src')) { |
734 |
target = item.content.getAttribute('target'); |
735 |
} |
736 |
|
737 |
if (url) { |
738 |
if (target) |
739 |
window.open(url, target).focus(); |
740 |
else |
741 |
window.location.href = url; |
742 |
} |
743 |
}, |
744 |
|
745 |
onMakeInactive: function (item) {}, |
746 |
|
747 |
onMakeActive: function (item) {}, |
748 |
|
749 |
onReachTarget: function(item) {}, |
750 |
|
751 |
onMoveTo: function(item) {}, |
752 |
|
753 |
//onDrawItem: function(item, relativePosition, relativePositionNormed, side, size) {}, |
754 |
onDrawItem: function(item) {}, |
755 |
|
756 |
onclickPreButton: function (event) { |
757 |
this.moveToIndex('pre'); |
758 |
return Event.stop(event); |
759 |
}, |
760 |
|
761 |
onclickNextButton: function (event) { |
762 |
this.moveToIndex('next'); |
763 |
return Event.stop(event); |
764 |
}, |
765 |
|
766 |
/* ==================== calculations ==================== */ |
767 |
|
768 |
calcStepWidth: function(diff) { |
769 |
var vI = this.conf.visibleItems; |
770 |
var items = this.items.length; |
771 |
items = items == 0 ? 1 : items; |
772 |
if (Math.abs(diff) > vI) { |
773 |
if (diff > 0) { |
774 |
var stepwidth = diff - vI; |
775 |
} else { |
776 |
var stepwidth = diff + vI; |
777 |
} |
778 |
} else if (vI >= this.items.length) { |
779 |
var stepwidth = diff / items; |
780 |
} else { |
781 |
var stepwidth = diff * ( vI / items); |
782 |
//var stepwidth = diff/absDiff * Math.max(diff * diff,Math.min(absDiff,0.3)) * ( vI / this.items.length); |
783 |
//var stepwidth = this.flowSpeedFactor * diff / this.visibleItems; |
784 |
//var stepwidth = this.flowSpeedFactor * diff * ( this.visibleItems / this.items.length) |
785 |
//var stepwidth = this.flowSpeedFactor * diff / this._millisecondsPerStep * 2; // const. speed |
786 |
} |
787 |
return stepwidth; |
788 |
}, |
789 |
|
790 |
calcSize: function (item) { |
791 |
var rP = item.relativePosition; |
792 |
//var rPN = relativePositionNormed; |
793 |
//var vI = this.conf.visibleItems; |
794 |
|
795 |
var h = 1/(Math.abs(rP)+1); |
796 |
var w = h; |
797 |
return {width: w, height: h}; |
798 |
}, |
799 |
|
800 |
calcCoordinates: function (item) { |
801 |
var rP = item.relativePosition; |
802 |
//var rPN = item.relativePositionNormed; |
803 |
var vI = this.conf.visibleItems; |
804 |
|
805 |
var f = 1 - 1/Math.exp( Math.abs(rP)*0.75); |
806 |
var x = item.side * vI/(vI+1)* f; |
807 |
var y = 1; |
808 |
|
809 |
return {x: x, y: y}; |
810 |
}, |
811 |
|
812 |
/* |
813 |
calcRelativeItemPosition: function (item) { |
814 |
var x = 0; |
815 |
var y = -1; |
816 |
return {x: x, y: y}; |
817 |
}, |
818 |
*/ |
819 |
|
820 |
calcZIndex: function (item) { |
821 |
return -Math.abs(item.relativePositionNormed); |
822 |
}, |
823 |
|
824 |
calcFontSize: function (item) { |
825 |
return item.size.height; |
826 |
}, |
827 |
|
828 |
calcOpacity: function (item) { |
829 |
return Math.max(1 - ((1 - this.conf.endOpacity ) * Math.sqrt(Math.abs(item.relativePositionNormed))), this.conf.endOpacity); |
830 |
} |
831 |
}, |
832 |
|
833 |
/* ---------- end of defaultConf ---------- */ |
834 |
|
835 |
|
836 |
/* |
837 |
* ==================== index helper methods ==================== |
838 |
*/ |
839 |
|
840 |
/* |
841 |
* checks if index is within the index range of the this.items array |
842 |
* returns a value that is within this range |
843 |
*/ |
844 |
_checkIndex: function (index) { |
845 |
index = Math.max(index, 0); |
846 |
index = Math.min(index, this.itemsLastIndex); |
847 |
return index; |
848 |
}, |
849 |
|
850 |
/* |
851 |
* sets the object property itemsLastIndex |
852 |
*/ |
853 |
_setLastIndex: function () { |
854 |
this.itemsLastIndex = this.items.length - 1; |
855 |
}, |
856 |
|
857 |
/* |
858 |
*/ |
859 |
_getItemByIndex: function (index) { |
860 |
return this.items[this._checkIndex(index)]; |
861 |
}, |
862 |
|
863 |
_getItemByPosition: function (position) { |
864 |
return this._getItemByIndex(this._getIndexByPosition(position)); |
865 |
}, |
866 |
|
867 |
/* returns the position of an item-index relative to current position */ |
868 |
_getPositionByIndex: function(index) { |
869 |
if (!this.conf.circularFlow) return this._checkIndex(index); |
870 |
var cI = this._getIndexByPosition(this._currentPosition); |
871 |
var dI = index - cI; |
872 |
if (Math.abs(dI) > dI+this.items.length) |
873 |
dI += this.items.length; |
874 |
else if (Math.abs(dI) > (Math.abs(dI-this.items.length))) |
875 |
dI -= this.items.length; |
876 |
|
877 |
return this._currentPosition + dI; |
878 |
|
879 |
}, |
880 |
|
881 |
/* returns the index an item at position p would have */ |
882 |
_getIndexByPosition: function (position) { |
883 |
if (position < 0) var mod = 0; |
884 |
else var mod = 1; |
885 |
|
886 |
var I = (Math.round(position) + mod) % this.items.length; |
887 |
if (I>0) I -= mod; |
888 |
else if(I<0) I += this.items.length - mod; |
889 |
else if(position<0) I = 0; |
890 |
else I = this.items.length - 1; |
891 |
|
892 |
return I; |
893 |
}, |
894 |
|
895 |
_getIndexByKeyWord: function (keyword, relativeTo, check) { |
896 |
if (relativeTo) |
897 |
var index = relativeTo; |
898 |
else if (this._activeItem) |
899 |
var index = this._activeItem.index; |
900 |
else |
901 |
var index = 0; |
902 |
|
903 |
if (isNaN(keyword)) { |
904 |
switch (keyword) { |
905 |
case "first": |
906 |
case "start": |
907 |
index = 0; |
908 |
break; |
909 |
case "last": |
910 |
case "end": |
911 |
index = this.itemsLastIndex; |
912 |
break; |
913 |
case "middle": |
914 |
case "center": |
915 |
index = Math.round(this.itemsLastIndex/2); |
916 |
break; |
917 |
case "right": |
918 |
case "next": |
919 |
index += 1; |
920 |
break; |
921 |
case "left": |
922 |
case "pre": |
923 |
case "previous": |
924 |
index -= 1; |
925 |
break; |
926 |
case 'visible': |
927 |
case 'visiblePre': |
928 |
case 'visibleLeft': |
929 |
index -= this.conf.visibleItems; |
930 |
break; |
931 |
case 'visibleNext': |
932 |
case 'visibleRight': |
933 |
index += this.conf.visibleItems; |
934 |
break; |
935 |
default: |
936 |
index = index; |
937 |
} |
938 |
} |
939 |
else { |
940 |
index = keyword; |
941 |
} |
942 |
if (check != false) |
943 |
index = this._checkIndex(index); |
944 |
|
945 |
return index; |
946 |
}, |
947 |
|
948 |
|
949 |
_setCaptionLabel: function (index) { |
950 |
if(this.Position && !this.Slider.locked) |
951 |
this.Position.setLabel(index); |
952 |
this._setGlobalCaption(); |
953 |
}, |
954 |
|
955 |
|
956 |
/* |
957 |
* ==================== public methods ==================== |
958 |
*/ |
959 |
getAddOnConf: function(name) { |
960 |
return ContentFlowGlobal.getAddOnConf(name); |
961 |
}, |
962 |
|
963 |
setAddOnConf: function(name, conf) { |
964 |
ContentFlowGlobal.setAddOnConf(name, conf); |
965 |
}, |
966 |
|
967 |
|
968 |
/* |
969 |
* calls _init() if ContentFlow has not been initialized before |
970 |
* needed if ContentFlow is not automatically initialized on window.load |
971 |
*/ |
972 |
init: function () { |
973 |
if(this.isInit) return; |
974 |
this._init(); |
975 |
}, |
976 |
|
977 |
/* |
978 |
* parses configuration object and initializes configuration values |
979 |
*/ |
980 |
setConfig: function(config) { |
981 |
if (!config) return; |
982 |
var dC = this._defaultConf; |
983 |
for (var option in config) { |
984 |
if (dC[option] == "undefined" ) continue; |
985 |
switch (option) { |
986 |
case "scrollInFrom": |
987 |
case "startItem": |
988 |
if (typeof(config[option]) == "number" || typeof(config[option]) == "string") { |
989 |
//this["_"+option] = config[option]; |
990 |
this.conf[option] = config[option]; |
991 |
} |
992 |
break; |
993 |
default: |
994 |
if (typeof(dC[option] == config[option])) { |
995 |
//this["_"+option] = config[option]; |
996 |
if (typeof config[option] == "function") { |
997 |
this.conf[option] = config[option].bind(this); |
998 |
} |
999 |
else { |
1000 |
this.conf[option] = config[option]; |
1001 |
} |
1002 |
} |
1003 |
} |
1004 |
} |
1005 |
switch (this.conf.reflectionColor) { |
1006 |
case this.conf.reflectionColor.search(/#[0-9a-fA-F]{6}/)>= 0?this.conf.reflectionColor:this.conf.reflectionColor+"x": |
1007 |
this._reflectionColorRGB = { |
1008 |
hR: this.conf.reflectionColor.slice(1,3), |
1009 |
hG: this.conf.reflectionColor.slice(3,5), |
1010 |
hB: this.conf.reflectionColor.slice(5,7), |
1011 |
iR: parseInt(this.conf.reflectionColor.slice(1,3), 16), |
1012 |
iG: parseInt(this.conf.reflectionColor.slice(3,5), 16), |
1013 |
iB: parseInt(this.conf.reflectionColor.slice(5,7), 16) |
1014 |
}; |
1015 |
break; |
1016 |
case "none": |
1017 |
case "transparent": |
1018 |
default: |
1019 |
this._reflectionColor = "transparent"; |
1020 |
this._reflectionColorRGB = { |
1021 |
hR: 0, hG: 0, hB:0, |
1022 |
iR: 0, iG: 0, iB:0 |
1023 |
}; |
1024 |
break; |
1025 |
} |
1026 |
if (this.items) { |
1027 |
if (this.conf.visibleItems < 0) |
1028 |
this.conf.visibleItems = Math.round(Math.sqrt(this.items.length)); |
1029 |
this.conf.visibleItems = Math.min(this.conf.visibleItems, this.items.length - 1); |
1030 |
} |
1031 |
|
1032 |
if (this.conf.relativeItemPosition) { |
1033 |
var calcRP = { |
1034 |
x: { |
1035 |
left: function(size) { return -1 }, |
1036 |
center: function(size) { return 0 }, |
1037 |
right: function(size) { return 1 } |
1038 |
}, |
1039 |
y: { |
1040 |
top: function(size) { return -1 }, |
1041 |
center: function(size) { return 0 }, |
1042 |
bottom: function(size) { return 1 } |
1043 |
} |
1044 |
}; |
1045 |
|
1046 |
var iP = this.conf.relativeItemPosition; |
1047 |
iP = iP.replace(/above/,"top").replace(/below/,"bottom"); |
1048 |
var x, y = null; |
1049 |
x = iP.match(/left|right/); |
1050 |
y = iP.match(/top|bottom/); |
1051 |
c = iP.match(/center/); |
1052 |
if (!x) { |
1053 |
if (c) x = "center"; |
1054 |
else x = "center"; |
1055 |
} |
1056 |
if (!y) { |
1057 |
if (c) y = "center"; |
1058 |
else y = "top"; |
1059 |
} |
1060 |
var calcX = calcRP.x[x]; |
1061 |
var calcY = calcRP.y[y]; |
1062 |
this.conf.calcRelativeItemPosition = function (item) { |
1063 |
var x = calcX(item.size); |
1064 |
var y = calcY(item.size); |
1065 |
return {x: x, y: y}; |
1066 |
}; |
1067 |
this.conf.relativeItemPosition = null; |
1068 |
} |
1069 |
|
1070 |
if (this._reflectionType && this._reflectionType != "clientside") { |
1071 |
this.conf.reflectionHeight = 0; |
1072 |
} |
1073 |
|
1074 |
}, |
1075 |
|
1076 |
getItem: function (index) { |
1077 |
return this.items[this._checkIndex(Math.round(index))]; |
1078 |
}, |
1079 |
|
1080 |
/* |
1081 |
* returns the index number of the active item |
1082 |
*/ |
1083 |
getActiveItem: function() { |
1084 |
return this._activeItem; |
1085 |
}, |
1086 |
|
1087 |
/* |
1088 |
* returns the number of items the flow contains |
1089 |
*/ |
1090 |
getNumberOfItems: function () { |
1091 |
return this.items.length; |
1092 |
}, |
1093 |
|
1094 |
/* |
1095 |
* reinitializes sizes. |
1096 |
* called on window.resize |
1097 |
*/ |
1098 |
resize: function () { |
1099 |
this._initSizes(); |
1100 |
this._initStep(); |
1101 |
}, |
1102 |
|
1103 |
/* |
1104 |
* scrolls flow to item i |
1105 |
*/ |
1106 |
moveToPosition: function (p, holdPos) { |
1107 |
if (!this.conf.circularFlow) p = this._checkIndex(p); |
1108 |
this._targetPosition = p; |
1109 |
this.conf.onMoveTo(this._getItemByPosition(p)); |
1110 |
this._initStep(false, holdPos); |
1111 |
}, |
1112 |
moveToIndex: function (index) { |
1113 |
this._targetPosition = Math.round(this._getPositionByIndex(this._getIndexByKeyWord(index, this._activeItem.index, !this.conf.circularFlow))); |
1114 |
this.conf.onMoveTo(this._getItemByPosition(this._targetPosition)); |
1115 |
this._initStep(); |
1116 |
}, |
1117 |
moveToItem: function (item) { |
1118 |
var i; |
1119 |
if (item.itemIndex) i = item.itemIndex; |
1120 |
else i = item.index; |
1121 |
this.moveToIndex(i); |
1122 |
}, |
1123 |
moveTo: function (i) { |
1124 |
if (typeof i == "object") this.moveToItem(i); |
1125 |
else if (isNaN(i) || (i == Math.floor(i) && i < this.items.length) ) this.moveToIndex(i); |
1126 |
else this.moveToPosition(i); |
1127 |
}, |
1128 |
|
1129 |
/* |
1130 |
* initializes item and adds it at index position |
1131 |
*/ |
1132 |
addItem: function(el, index) { |
1133 |
if (typeof index == "string") { |
1134 |
switch (index) { |
1135 |
case "first": |
1136 |
case "start": |
1137 |
index = 0; |
1138 |
break; |
1139 |
case "last": |
1140 |
case "end": |
1141 |
index = this.itemsLastIndex + 1; |
1142 |
break; |
1143 |
default: |
1144 |
index = this._getIndexByKeyWord(index); |
1145 |
} |
1146 |
} |
1147 |
|
1148 |
index = Math.max(index, 0); |
1149 |
index = Math.min(index, this.itemsLastIndex + 1); |
1150 |
|
1151 |
this.Flow.appendChild(el); |
1152 |
|
1153 |
/* init item after insertion. that way it's part of the document and all styles are applied */ |
1154 |
var item = new ContentFlowItem(this, el, index); |
1155 |
if (this.items.length == 0 ) { |
1156 |
if (this.conf.circularFlow) { |
1157 |
item.pre = item; |
1158 |
item.next = item; |
1159 |
} |
1160 |
} |
1161 |
else { |
1162 |
if (index == this.itemsLastIndex + 1) { |
1163 |
item.pre = this.items[this.itemsLastIndex]; |
1164 |
item.next = item.pre.next; |
1165 |
} |
1166 |
else { |
1167 |
item.next = this.items[index]; |
1168 |
item.pre = item.next.pre; |
1169 |
} |
1170 |
if (item.pre) item.pre.next = item; |
1171 |
if (item.next) item.next.pre = item; |
1172 |
} |
1173 |
this.items.splice(index,0, item); |
1174 |
|
1175 |
/* adjust item indices */ |
1176 |
for (var i = index; i < this.items.length; i++) { |
1177 |
this.items[i].setIndex(i); |
1178 |
} |
1179 |
this._setLastIndex(); |
1180 |
|
1181 |
/* adjust targetItem, currentPos so that current view does not change*/ |
1182 |
if (Math.round(this._getPositionByIndex(index)) <= Math.round(this._targetPosition)) { |
1183 |
this._targetPosition++; |
1184 |
if (!this.conf.circularFlow) |
1185 |
this._targetPosition = Math.min(this._targetPosition, this.itemsLastIndex); |
1186 |
} |
1187 |
if (this._getPositionByIndex(index) <= this._currentPosition) { |
1188 |
this._currentPosition++; |
1189 |
if (!this.conf.circularFlow) |
1190 |
this._currentPosition = Math.min(this._currentPosition, this.itemsLastIndex); |
1191 |
} |
1192 |
|
1193 |
// avoid display errors (wrong sizing) |
1194 |
var CF = this; |
1195 |
window.setTimeout(function () { |
1196 |
if(CF.items.length == 1 ) { |
1197 |
CF._currentPosition = -0.01; |
1198 |
CF._targetPosition = 0; |
1199 |
CF.resize(); |
1200 |
} |
1201 |
else { |
1202 |
CF._initStep(); |
1203 |
} |
1204 |
}, 100); |
1205 |
|
1206 |
return index; |
1207 |
|
1208 |
}, |
1209 |
|
1210 |
/* |
1211 |
* removes item at index position, cleans it up and returns it |
1212 |
*/ |
1213 |
rmItem: function(index) { |
1214 |
if (index == "undefined") index = this._activeItem.index; |
1215 |
index = this._getIndexByKeyWord(index); |
1216 |
if (!this.items[index]) return null; |
1217 |
|
1218 |
var item = this.items[index]; |
1219 |
|
1220 |
if (item.pre) item.pre.next = item.next; |
1221 |
if (item.next) item.next.pre = item.pre; |
1222 |
this.items.splice(index,1); |
1223 |
|
1224 |
/* adjust item indices */ |
1225 |
for (var i = index ; i < this.items.length; i++) { |
1226 |
this.items[i].setIndex(i); |
1227 |
} |
1228 |
this._setLastIndex(); |
1229 |
|
1230 |
/* adjust targetItem, currentPos and activeItem so that current view does not change*/ |
1231 |
if (Math.round(this._getPositionByIndex(index)) < Math.round(this._targetPosition)) { |
1232 |
this._targetPosition--; |
1233 |
if (!this.conf.circularFlow) |
1234 |
this._targetPosition = this._checkIndex(this._targetPosition); |
1235 |
} |
1236 |
if (this._getPositionByIndex(index) < this._currentPosition) { |
1237 |
this._currentPosition--; |
1238 |
if (!this.conf.circularFlow) |
1239 |
this._currentPosition = this._checkIndex(this._currentPosition); |
1240 |
} |
1241 |
this._activeItem = this._getItemByPosition(this._currentPosition); |
1242 |
|
1243 |
/* remove item from DOM tree, take the next step and return removed item */ |
1244 |
var removedItem = item.element.parentNode.removeChild(item.element); |
1245 |
// avoid display errors (wrong sizing) |
1246 |
var CF = this; |
1247 |
window.setTimeout(function () { CF._initStep() }, 10); |
1248 |
return removedItem; |
1249 |
|
1250 |
}, |
1251 |
|
1252 |
|
1253 |
/* |
1254 |
* ==================== initialization ==================== |
1255 |
*/ |
1256 |
|
1257 |
|
1258 |
/* -------------------- main init -------------------- */ |
1259 |
_init: function () { |
1260 |
|
1261 |
if (typeof(this.Container) == 'string') { // no node |
1262 |
var container = document.getElementById(this.Container); |
1263 |
if (container) { |
1264 |
this.Container = container; |
1265 |
} else { |
1266 |
throw ('ContentFlow ERROR: No element with id \''+this.Container+'\' found!'); |
1267 |
return; |
1268 |
} |
1269 |
} |
1270 |
|
1271 |
/* ---------- reserve CSS namespace */ |
1272 |
|
1273 |
$CF(this.Container).addClassName('ContentFlow'); |
1274 |
|
1275 |
/* ---------- detect GUI elements */ |
1276 |
var flow = $CF(this.Container).getChildrenByClassName('flow')[0]; |
1277 |
if (!flow) { |
1278 |
throw ('ContentFlow ERROR: No element with class\'flow\' found!'); |
1279 |
return; |
1280 |
} |
1281 |
this.Flow = new ContentFlowGUIElement(this, flow); |
1282 |
|
1283 |
var scrollbar = this.Container.getChildrenByClassName('scrollbar')[0]; |
1284 |
if (scrollbar) { |
1285 |
this.Scrollbar = new ContentFlowGUIElement(this, scrollbar); |
1286 |
var slider = this.Scrollbar.getChildrenByClassName('slider')[0]; |
1287 |
if (slider) { |
1288 |
this.Slider = new ContentFlowGUIElement(this, slider); |
1289 |
var position = this.Slider.getChildrenByClassName('position')[0]; |
1290 |
if (position) { |
1291 |
this.Position = new ContentFlowGUIElement(this, position); |
1292 |
} |
1293 |
} |
1294 |
|
1295 |
} |
1296 |
|
1297 |
/* ---------- init configuration */ |
1298 |
this.setConfig(this._defaultConf); |
1299 |
this._initAddOns(); /* init AddOns */ |
1300 |
this.setConfig(this._userConf); |
1301 |
|
1302 |
this._initSizes(); // ...... |
1303 |
|
1304 |
|
1305 |
/* ---------- init item lists ---------- */ |
1306 |
var items = this.Flow.getChildrenByClassName('item'); |
1307 |
|
1308 |
this.items = new Array(); |
1309 |
for (var i=0; i<items.length; i++) { |
1310 |
var item = this.items[i] = new ContentFlowItem(this, items[i], i); |
1311 |
if (i > 0) { |
1312 |
item.pre = this.items[i-1]; |
1313 |
item.pre.next = item; |
1314 |
} |
1315 |
} |
1316 |
this._setLastIndex(); |
1317 |
if (this.conf.circularFlow && this.items.length > 0) { |
1318 |
var s = this.items[0]; |
1319 |
s.pre = this.items[this.items.length-1]; |
1320 |
s.pre.next = s; |
1321 |
} |
1322 |
|
1323 |
/* ---------- init GUI */ |
1324 |
this._initGUI(); |
1325 |
|
1326 |
/* ---------- init start parameters ---------- */ |
1327 |
if (this._activeElement != "content") |
1328 |
this._activeElement = "element"; |
1329 |
|
1330 |
if (this.conf.visibleItems < 0) |
1331 |
this.conf.visibleItems = Math.round(Math.sqrt(this.items.length)); |
1332 |
this.conf.visibleItems = Math.min(this.conf.visibleItems, this.items.length - 1); |
1333 |
|
1334 |
this._targetPosition = this._getIndexByKeyWord(this.conf.startItem, 0); |
1335 |
|
1336 |
var index = this._getIndexByKeyWord(this.conf.scrollInFrom, this._targetPosition); |
1337 |
switch (this.conf.scrollInFrom) { |
1338 |
case "next": |
1339 |
case "right": |
1340 |
index -= 0.5; |
1341 |
break; |
1342 |
case "pre": |
1343 |
case "previous": |
1344 |
case "left": |
1345 |
index += 0.5; |
1346 |
break; |
1347 |
} |
1348 |
this._currentPosition = index; |
1349 |
|
1350 |
|
1351 |
/* ---------- wait till all images are loaded or |
1352 |
* grace time is up to show all and take the first step |
1353 |
*/ |
1354 |
var now = new Date(); |
1355 |
var cf = this; |
1356 |
var timer = window.setInterval ( |
1357 |
function() { |
1358 |
if ( cf._imagesToLoad == 0 || new Date() - now > cf._loadingTimeout ) { |
1359 |
clearInterval(timer); |
1360 |
|
1361 |
cf._activeItem = cf.getItem(cf._currentPosition); |
1362 |
if (cf._activeItem) { |
1363 |
cf._activeItem.makeActive(); |
1364 |
cf._setCaptionLabel(cf._activeItem.index); |
1365 |
} |
1366 |
|
1367 |
cf.Flow.style.visibility = "visible"; // show flow after images are loaded |
1368 |
if (cf.loadIndicator) cf.loadIndicator.style.display = "none"; |
1369 |
if (cf.Scrollbar) cf.Scrollbar.style.visibility = "visible"; |
1370 |
|
1371 |
cf.resize(); |
1372 |
for (var i=0; i < cf._loadedAddOns.length; i++) { |
1373 |
var a = ContentFlowGlobal.AddOns[cf._loadedAddOns[i]]; |
1374 |
if (a.methods.afterContentFlowInit) |
1375 |
a.methods.afterContentFlowInit(cf); |
1376 |
} |
1377 |
cf.conf.onInit(); |
1378 |
} |
1379 |
}, 10 |
1380 |
); |
1381 |
|
1382 |
this.isInit = true; |
1383 |
|
1384 |
}, |
1385 |
|
1386 |
/* ---------- init AddOns ---------- */ |
1387 |
_initAddOns: function () { |
1388 |
|
1389 |
// get an array of names of all AddOns that should be used |
1390 |
var loadAddOns = []; |
1391 |
if (this._userConf.useAddOns) { |
1392 |
if (typeof this._userConf.useAddOns == "string") { |
1393 |
loadAddOns = this._userConf.useAddOns.split(" "); |
1394 |
} |
1395 |
else if (typeof this._userConf.useAddOns == "array") { |
1396 |
loadAddOns = this._userConf.useAddOns; |
1397 |
} |
1398 |
} |
1399 |
else if (this.Container.getAttribute("useAddOns")) { |
1400 |
loadAddOns = this.Container.getAttribute("useAddOns").split(" "); |
1401 |
} |
1402 |
else { |
1403 |
loadAddOns = this.conf.useAddOns.split(' '); |
1404 |
} |
1405 |
|
1406 |
|
1407 |
// check the names for keywords |
1408 |
for (var i=0; i<loadAddOns.length; i++) { |
1409 |
if (loadAddOns[i] == "none") { |
1410 |
loadAddOns = new Array(); |
1411 |
break; |
1412 |
} |
1413 |
else if (loadAddOns[i] == "all") { |
1414 |
loadAddOns = new Array(); |
1415 |
for (var AddOn in ContentFlowGlobal.AddOns) |
1416 |
loadAddOns.push(AddOn); |
1417 |
break; |
1418 |
} |
1419 |
} |
1420 |
|
1421 |
// init all AddOns that should be used and exist |
1422 |
for (var i=0; i<loadAddOns.length; i++) { |
1423 |
var AddOn = ContentFlowGlobal.AddOns[loadAddOns[i]]; |
1424 |
if (AddOn) { |
1425 |
this._loadedAddOns.push(loadAddOns[i]); |
1426 |
AddOn._init(this); |
1427 |
this.Container.addClassName('ContentFlowAddOn_'+AddOn.name); |
1428 |
if (AddOn.methods.onloadInit) |
1429 |
AddOn.methods.onloadInit(this); |
1430 |
} |
1431 |
} |
1432 |
|
1433 |
}, |
1434 |
|
1435 |
|
1436 |
_initGUI: function () { |
1437 |
|
1438 |
// resize |
1439 |
//if (!this.Browser.iPhone) { |
1440 |
var resize = this.resize.bind(this); |
1441 |
window.addEvent('resize', resize, false); |
1442 |
//} |
1443 |
//else { |
1444 |
//var g = this; |
1445 |
//window.addEvent('resize', function () { |
1446 |
//g._initSizes(); |
1447 |
//g._initStep(); |
1448 |
//} , false); |
1449 |
//} |
1450 |
|
1451 |
// pre and next buttons |
1452 |
var divs = this.Container.getElementsByTagName('div'); |
1453 |
for (var i = 0; i < divs.length; i++) { |
1454 |
if ($CF(divs[i]).hasClassName('preButton')) { |
1455 |
var pre = divs[i]; |
1456 |
var mt = this.conf.onclickPreButton; |
1457 |
pre.addEvent('click', mt, false); |
1458 |
} |
1459 |
else if (divs[i].hasClassName('nextButton')) { |
1460 |
var next = divs[i]; |
1461 |
var mt = this.conf.onclickNextButton; |
1462 |
next.addEvent('click', mt, false); |
1463 |
} |
1464 |
} |
1465 |
|
1466 |
// Container object |
1467 |
// mousewheel |
1468 |
if (this.conf.scrollWheelSpeed != 0) { |
1469 |
var wheel = this._wheel.bind(this); |
1470 |
if(window.addEventListener) this.Container.addEventListener('DOMMouseScroll', wheel, false); |
1471 |
this.Container.onmousewheel = wheel; |
1472 |
} |
1473 |
|
1474 |
// key strokes |
1475 |
var key = this._keyStroke.bind(this); |
1476 |
if (this.conf.keys && !this.Browser.iPhone) { |
1477 |
if (document.addEventListener) { |
1478 |
if (!this.Browser.Opera) { |
1479 |
var mouseoverCheck = document.createElement('div'); |
1480 |
mouseoverCheck.addClassName('mouseoverCheckElement'); |
1481 |
this.Container.appendChild(mouseoverCheck); |
1482 |
|
1483 |
if (this.Browser.WebKit) { |
1484 |
document.body.addEvent('keydown', function (event) { |
1485 |
if (mouseoverCheck.offsetLeft > 0) key(event) ; |
1486 |
}); |
1487 |
} else { |
1488 |
window.addEvent('keydown', function (event) { |
1489 |
if (mouseoverCheck.offsetLeft > 0) key(event) ; |
1490 |
}); |
1491 |
} |
1492 |
} |
1493 |
else { |
1494 |
this.Container.addEvent('keydown', key); |
1495 |
} |
1496 |
} |
1497 |
else { |
1498 |
this.Container.onkeydown = key; |
1499 |
} |
1500 |
} |
1501 |
|
1502 |
|
1503 |
// Flow object |
1504 |
if (this.conf.flowDragFriction > 0) { |
1505 |
var onDrag = function (event) { |
1506 |
var e = event; |
1507 |
if (event.touches) e = event.touches[0]; |
1508 |
var mouseX = e.clientX; |
1509 |
var mouseY = e.clientY; |
1510 |
|
1511 |
if (this.conf.verticalFlow) { |
1512 |
var dist = mouseY - this.Flow.mouseY; // px / or px per sec because _dragFlow wil be called in shorter intervalls if draged fast |
1513 |
var dim = this.Flow.dimensions.height; |
1514 |
} |
1515 |
else { |
1516 |
var dist = mouseX - this.Flow.mouseX; // px / or px per sec because _dragFlow wil be called in shorter intervalls if draged fast |
1517 |
var dim = this.Flow.dimensions.width; |
1518 |
} |
1519 |
var itemDist = (dist / dim )* (2*this.conf.visibleItems +1); // items |
1520 |
var target = this._currentPosition - itemDist * 2*this.conf.visibleItems / this.conf.flowDragFriction ; |
1521 |
|
1522 |
this.Flow.mouseX = mouseX; |
1523 |
this.Flow.mouseY = mouseY; |
1524 |
|
1525 |
this.moveToPosition(target, true); |
1526 |
}.bind(this); |
1527 |
|
1528 |
var beforeDrag = function () {}; |
1529 |
|
1530 |
var afterDrag = function (event) { |
1531 |
var t = Math.round(this._targetPosition); |
1532 |
if (Math.abs( t - this._currentPosition) > 0.001 ) |
1533 |
this.moveToPosition(t); |
1534 |
}.bind(this); |
1535 |
|
1536 |
|
1537 |
this.Flow.makeDraggable(onDrag, beforeDrag, afterDrag); |
1538 |
} |
1539 |
|
1540 |
// Scrollbar Object |
1541 |
if (this.Scrollbar) { |
1542 |
var click = function(event) { |
1543 |
if (!event) var event = window.event; |
1544 |
|
1545 |
if (!this.Scrollbar.clickLocked) { |
1546 |
var mouseX = event.clientX; |
1547 |
var positionOnScrollbar = mouseX - this.Scrollbar.position.left; |
1548 |
var targetIndex = Math.round(positionOnScrollbar/this.Scrollbar.dimensions.width * this.itemsLastIndex); |
1549 |
this.moveToIndex(targetIndex); |
1550 |
} |
1551 |
else |
1552 |
this.Scrollbar.clickLocked = false; |
1553 |
}.bind(this); |
1554 |
this.Scrollbar.addObserver('click', click); |
1555 |
} |
1556 |
|
1557 |
// Slider Object |
1558 |
if (this.Slider) { |
1559 |
|
1560 |
if (this.Browser.IE6) { |
1561 |
var virtualSlider = document.createElement('div'); |
1562 |
virtualSlider.className = 'virtualSlider'; |
1563 |
this.Slider.appendChild(virtualSlider); |
1564 |
} |
1565 |
|
1566 |
// position slider on scrollbar |
1567 |
this.Slider.setPosition = function (relPos) { |
1568 |
relPos = relPos - Math.floor(relPos) + this._getIndexByPosition(Math.floor(relPos)); |
1569 |
if (Math.round(relPos) < 0) |
1570 |
relPos = this.itemsLastIndex; |
1571 |
else if (relPos <= 0) |
1572 |
relPos = 0; |
1573 |
else if (Math.round(relPos) > this.itemsLastIndex) |
1574 |
relPos = 0; |
1575 |
else if (relPos >= this.itemsLastIndex) |
1576 |
relPos = this.itemsLastIndex; |
1577 |
|
1578 |
|
1579 |
if (this.items.length > 1) { |
1580 |
var sPos = (relPos / this.itemsLastIndex)* this.Scrollbar.dimensions.width; |
1581 |
} else { |
1582 |
var sPos = 0.5 * this.Scrollbar.dimensions.width; |
1583 |
} |
1584 |
this.Slider.style.left = sPos - this.Slider.center.x+ "px"; |
1585 |
this.Slider.style.top = this.Scrollbar.center.y - this.Slider.center.y +"px"; |
1586 |
|
1587 |
}.bind(this); |
1588 |
|
1589 |
// make slider draggable |
1590 |
var beforeDrag = function (event) { |
1591 |
this.Scrollbar.clickLocked = true; |
1592 |
}.bind(this); |
1593 |
|
1594 |
var onDrag = function (event) { |
1595 |
var e = event; |
1596 |
if (event.touches) e = event.touches[0]; |
1597 |
var selectedIndex = this._checkIndex((e.clientX - this.Scrollbar.position.left) / this.Scrollbar.dimensions.width * this.itemsLastIndex); |
1598 |
this._targetPosition = this._getPositionByIndex(selectedIndex); |
1599 |
this.Slider.setPosition(selectedIndex); |
1600 |
if (this.Position) this.Position.setLabel(selectedIndex); |
1601 |
this._initStep(true, true); |
1602 |
}.bind(this); |
1603 |
|
1604 |
var afterDrag = function (event) { |
1605 |
this._targetPosition = Math.round(this._targetPosition); |
1606 |
this.conf.onMoveTo(this._getItemByPosition(this._targetPosition)); |
1607 |
this._initStep(true); |
1608 |
}.bind(this); |
1609 |
|
1610 |
this.Slider.makeDraggable(onDrag, beforeDrag, afterDrag); |
1611 |
} |
1612 |
|
1613 |
|
1614 |
// Position object |
1615 |
if (this.Position) { |
1616 |
this.Position.setLabel = function (index) { |
1617 |
index = this._checkIndex(Math.round(index)); |
1618 |
if (this.items && this.items[index].label) |
1619 |
this.Position.innerHTML = this.items[index].label.innerHTML; |
1620 |
else |
1621 |
this.Position.innerHTML = index + 1; |
1622 |
}.bind(this); |
1623 |
} |
1624 |
|
1625 |
|
1626 |
this.globalCaption = this.Container.getChildrenByClassName('globalCaption')[0]; |
1627 |
this.loadIndicator = this.Container.getChildrenByClassName('loadIndicator')[0]; |
1628 |
}, |
1629 |
|
1630 |
/* ---------- init element sizes ---------- */ |
1631 |
_initSizes: function (x) { |
1632 |
//if (this.Browser.Konqueror4 && x != true) { |
1633 |
//var t = this; |
1634 |
//window.setTimeout( function () { t._initSizes(true) }, 0); |
1635 |
//return; |
1636 |
//} |
1637 |
|
1638 |
// sets this.maxHeight |
1639 |
this._initMaxHeight(); |
1640 |
|
1641 |
var scrollbarHeight = this._initScrollbarSize(); |
1642 |
|
1643 |
// reduce maxHeit if container has a fixed height |
1644 |
if (!this.conf.verticalFlow && this.Container.style.height && this.Container.style.height != "auto") |
1645 |
this.maxHeight -= scrollbarHeight; |
1646 |
|
1647 |
if (!this._activeItem) return; |
1648 |
|
1649 |
var mFS = this._findBiggestItem(); |
1650 |
|
1651 |
var pF = this.Flow.findPos(); |
1652 |
|
1653 |
/* set height / width of flow */ |
1654 |
if (this.conf.verticalFlow) { |
1655 |
this.Flow.style.width = mFS.width.width+"px"; |
1656 |
this.Flow.style.height =3* mFS.width.width * (1 + this.conf.reflectionHeight + this.conf.reflectionGap) + "px"; |
1657 |
} else { |
1658 |
this.Flow.style.height = mFS.height.height +(mFS.height.top - pF.top)+"px"; |
1659 |
} |
1660 |
|
1661 |
/* remove gap */ |
1662 |
var s = this.conf.verticalFlow ? mFS.width.width : mFS.height.height; |
1663 |
var cH = s /(1 + this.conf.reflectionHeight + this.conf.reflectionGap); |
1664 |
this.Flow.style.marginBottom = - (s - cH)+ "px"; |
1665 |
|
1666 |
this.Flow.dimensions = this.Flow.getDimensions(); |
1667 |
|
1668 |
if (!this.Browser.IE6) { |
1669 |
if (this.conf.verticalFlow && this.Container.clientWidth < this.Flow.dimensions.width) { |
1670 |
//this.Container.style.width = this.Flow.dimensions.width+"px"; |
1671 |
} |
1672 |
else if (this.Container.clientHeight < this.Flow.dimensions.height) { |
1673 |
this.Container.style.height = this.Flow.dimensions.height+"px"; |
1674 |
} |
1675 |
} |
1676 |
|
1677 |
if (this.conf.verticalFlow) { |
1678 |
this.Flow.center = {x: this.Flow.dimensions.height/2, y:mFS.width.width/2}; |
1679 |
} else { |
1680 |
this.Flow.center = {x: this.Flow.dimensions.width/2, y:mFS.height.height/2}; |
1681 |
} |
1682 |
|
1683 |
}, |
1684 |
|
1685 |
/* -------------------------------------------------------------------------------- */ |
1686 |
|
1687 |
_initScrollbarSize: function () { |
1688 |
var SB; |
1689 |
var SL; |
1690 |
var PO; |
1691 |
if (SB = this.Scrollbar) { |
1692 |
SB.setDimensions(); |
1693 |
var scrollbarHeight = SB.dimensions.height; |
1694 |
|
1695 |
if (SL = this.Slider) { |
1696 |
SL.setDimensions(); |
1697 |
scrollbarHeight += SL.dimensions.height; |
1698 |
|
1699 |
if (PO = this.Position) { |
1700 |
|
1701 |
var oldLabel = PO.innerHTML; |
1702 |
var maxH = maxW = 0; |
1703 |
PO.style.width = "auto"; |
1704 |
|
1705 |
if (this.items) { |
1706 |
for (var i=0; i < this.items.length; i++) { |
1707 |
var item = this.items[i]; |
1708 |
if (item.label) { |
1709 |
PO.innerHTML = item.label.innerHTML; |
1710 |
} |
1711 |
else { |
1712 |
PO.innerHTML = item.index; |
1713 |
} |
1714 |
var h = PO.clientHeight; |
1715 |
var w = PO.clientWidth; |
1716 |
if ( h > maxH) maxH = h; |
1717 |
if ( w > maxW) maxW = w; |
1718 |
} |
1719 |
} |
1720 |
else { |
1721 |
PO.innerHTML = " "; |
1722 |
maxH = PO.clientHeight; |
1723 |
maxW = PO.clientWidth; |
1724 |
} |
1725 |
|
1726 |
PO.innerHTML = oldLabel; |
1727 |
|
1728 |
PO.setDimensions(); |
1729 |
|
1730 |
PO.style.width = maxW +"px"; |
1731 |
PO.style.left = (SL.dimensions.width - maxW)/2 + "px"; |
1732 |
|
1733 |
var extraSpace = PO.position.top - SL.position.top; |
1734 |
if (extraSpace > 0) { |
1735 |
extraSpace += -SB.dimensions.height + maxH; |
1736 |
SB.style.marginBottom = extraSpace + "px"; |
1737 |
} |
1738 |
else { |
1739 |
extraSpace *= -1; |
1740 |
SB.style.marginTop = extraSpace + "px"; |
1741 |
} |
1742 |
scrollbarHeight += extraSpace; |
1743 |
} |
1744 |
} |
1745 |
} |
1746 |
else { |
1747 |
scrollbarHeight = 0; |
1748 |
} |
1749 |
|
1750 |
return scrollbarHeight; |
1751 |
|
1752 |
}, |
1753 |
|
1754 |
/* -------------------------------------------------------------------------------- */ |
1755 |
|
1756 |
_initMaxHeight: function () { |
1757 |
|
1758 |
if (this.conf.verticalFlow) { |
1759 |
var proportion = screen.width/screen.height; |
1760 |
var Csd = this.Container.style.width; |
1761 |
var Cdim = this.Container.clientWidth; |
1762 |
var Fsd = this.Flow.style.width; |
1763 |
var Fdim = this.Flow.clientWidth; |
1764 |
var Fdim_o = this.Flow.clientHeight; |
1765 |
} else { |
1766 |
var proportion = screen.height/screen.width; |
1767 |
var Csd = this.Container.style.height; |
1768 |
var Cdim = this.Container.clientHeight; |
1769 |
var Fsd = this.Flow.style.height; |
1770 |
var Fdim = this.Flow.clientHeight; |
1771 |
var Fdim_o = this.Flow.clientWidth; |
1772 |
} |
1773 |
|
1774 |
// set height of container and flow |
1775 |
if (this.ContainerOldDim) |
1776 |
Csd = this.ContainerOldDim; |
1777 |
if (this.FlowOldDim) |
1778 |
Fsd = this.FlowOldDim; |
1779 |
|
1780 |
this.ContainerOldDim = "auto"; |
1781 |
this.FlowOldDim = "auto"; |
1782 |
|
1783 |
|
1784 |
/* calc maxHeight */ |
1785 |
if (this.conf.maxItemHeight <= 0) { |
1786 |
|
1787 |
this.maxHeight = Fdim_o / 3 * proportion/1 * this.conf.scaleFactor; // divided by 3 because of left/center/right, yes it's a magic number |
1788 |
|
1789 |
if (this.conf.verticalFlow && (this.maxHeight == 0 || this.maxHeight > Fdim)) { |
1790 |
this.maxHeight = Fdim; |
1791 |
} |
1792 |
|
1793 |
if (Csd && Csd != "auto") { |
1794 |
var gap = this.conf.verticalFlow ? 0 : this.conf.reflectionGap; |
1795 |
var rH = this.conf.verticalFlow ? 0 : this.conf.reflectionHeight; |
1796 |
this.maxHeight = Cdim/ (this.conf.scaleFactor* (1 + rH + gap)); |
1797 |
this.ContainerOldDim = Csd; |
1798 |
} |
1799 |
else if (Fsd && Fsd != "auto") { |
1800 |
var gap = this.conf.verticalFlow ? 0 : this.conf.reflectionGap; |
1801 |
this.maxHeight = Fdim / (this.conf.scaleFactor* (1 + this.conf.reflectionHeight + gap)); |
1802 |
this.FlowOldDim = Fsd; |
1803 |
} |
1804 |
} |
1805 |
else { |
1806 |
this.maxHeight = this.conf.maxItemHeight; |
1807 |
} |
1808 |
}, |
1809 |
|
1810 |
/* -------------------------------------------------------------------------------- */ |
1811 |
|
1812 |
_findBiggestItem: function () { |
1813 |
|
1814 |
var currentItem = this._activeItem; |
1815 |
|
1816 |
var itemP = currentItem.pre; |
1817 |
var itemN = currentItem.next; |
1818 |
var mFS = maxFlowSize = { |
1819 |
width: { width: 0, left: 0, height:0, top: 0, item: null, rI: 0 }, |
1820 |
height: { width: 0, left: 0, height:0, top: 0, item: null, rI: 0 } |
1821 |
} |
1822 |
|
1823 |
|
1824 |
var checkMax = function (item, rI) { |
1825 |
var el = item.element; |
1826 |
el.style.display = "block"; |
1827 |
var p = el.findPos(); |
1828 |
var h = el.clientHeight; |
1829 |
var w = el.clientWidth; |
1830 |
if (h + p.top >= mFS.height.height + mFS.height.top) { |
1831 |
mFS.height.height = h; |
1832 |
mFS.height.top = p.top; |
1833 |
mFS.height.item = item; |
1834 |
mFS.height.rI = rI; |
1835 |
} |
1836 |
if (w + p.left >= mFS.width.width + mFS.width.left) { |
1837 |
mFS.width.width = w; |
1838 |
mFS.width.left = p.left; |
1839 |
mFS.width.item = item; |
1840 |
mFS.width.rI = rI; |
1841 |
} |
1842 |
el.style.display = "none"; |
1843 |
} |
1844 |
|
1845 |
var ocp = this._currentPosition; |
1846 |
this._currentPosition = this.conf.visibleItems+1; |
1847 |
|
1848 |
// find the position with highest y-value |
1849 |
for (var i=-this.conf.visibleItems; i <= this.conf.visibleItems; i++) { |
1850 |
currentItem.element.style.display = "none"; |
1851 |
this._positionItem(currentItem, i); |
1852 |
checkMax(currentItem, i); |
1853 |
} |
1854 |
|
1855 |
// find the biggest item |
1856 |
var index = mFS.height.rI; |
1857 |
for (var i=0; i < this.items.length; i++) { |
1858 |
var item = this.items[i]; |
1859 |
item.element.style.display = "none"; |
1860 |
this._positionItem(item, index); |
1861 |
checkMax(item, index); |
1862 |
} |
1863 |
|
1864 |
this._currentPosition = ocp; |
1865 |
|
1866 |
return mFS |
1867 |
}, |
1868 |
|
1869 |
|
1870 |
|
1871 |
/* |
1872 |
* ==================== Key strok ==================== |
1873 |
*/ |
1874 |
|
1875 |
/* |
1876 |
* handles keystroke events |
1877 |
*/ |
1878 |
_keyStroke: function(event) { |
1879 |
if(!event) var event = window.event; |
1880 |
|
1881 |
if (event.which) { |
1882 |
var keyCode = event.which; |
1883 |
} else if (event.keyCode) { |
1884 |
var keyCode = event.keyCode; |
1885 |
} |
1886 |
|
1887 |
if (this.conf.keys[keyCode]) { |
1888 |
this.conf.keys[keyCode].bind(this)(); |
1889 |
return Event.stop(event); |
1890 |
} |
1891 |
else { |
1892 |
return true; |
1893 |
} |
1894 |
}, |
1895 |
|
1896 |
/* |
1897 |
* ==================== mouse wheel ==================== |
1898 |
* Event handler for mouse wheel event |
1899 |
* http://adomas.org/javascript-mouse-wheel/ |
1900 |
*/ |
1901 |
|
1902 |
_wheel: function (event) { |
1903 |
if (!event) var event = window.event; // MS |
1904 |
|
1905 |
var delta = 0; |
1906 |
if (event.wheelDelta) { |
1907 |
delta = event.wheelDelta/120; |
1908 |
} else if (event.detail) { |
1909 |
delta = -event.detail/3; |
1910 |
} |
1911 |
|
1912 |
if (delta) { |
1913 |
var target = this._targetPosition ; |
1914 |
if (delta < 0 ) { |
1915 |
target += (1 * this.conf.scrollWheelSpeed); |
1916 |
} else { |
1917 |
target -= (1 * this.conf.scrollWheelSpeed); |
1918 |
} |
1919 |
this.moveToPosition(Math.round(target)); |
1920 |
} |
1921 |
|
1922 |
return Event.stop(event); |
1923 |
}, |
1924 |
|
1925 |
|
1926 |
/* |
1927 |
* ==================== set global Caption ==================== |
1928 |
*/ |
1929 |
_setGlobalCaption: function () { |
1930 |
if (this.globalCaption) { |
1931 |
this.globalCaption.innerHTML = ''; |
1932 |
if(this._activeItem && this._activeItem.caption) |
1933 |
this.globalCaption.appendChild(this._activeItem.caption.cloneNode(true)); |
1934 |
} |
1935 |
}, |
1936 |
|
1937 |
/* |
1938 |
* ==================== move items ==================== |
1939 |
*/ |
1940 |
|
1941 |
/* |
1942 |
* intend to make a step |
1943 |
*/ |
1944 |
_initStep: function (holdSlider, holdPos) { |
1945 |
if (this.Slider) { |
1946 |
if(holdSlider) { |
1947 |
this.Slider.locked = true; |
1948 |
} else { |
1949 |
this.Slider.locked = false; |
1950 |
} |
1951 |
} |
1952 |
this._holdPos = holdPos == true ? true : false; |
1953 |
if (!this._stepLock) { |
1954 |
this._stepLock = true; |
1955 |
this._step(); |
1956 |
} |
1957 |
}, |
1958 |
|
1959 |
/* |
1960 |
* make a step |
1961 |
*/ |
1962 |
_step: function () { |
1963 |
|
1964 |
var diff = this._targetPosition - this._currentPosition; |
1965 |
var absDiff = Math.abs(diff); |
1966 |
if ( absDiff > 0.001) { // till activeItem is nearly at position 0 |
1967 |
|
1968 |
this._currentPosition += this.conf.flowSpeedFactor * this.conf.calcStepWidth(diff, absDiff, this.items.length, this.conf.visibleItems); |
1969 |
|
1970 |
var AI = this.items[(this._getIndexByPosition(this._currentPosition))]; |
1971 |
|
1972 |
if (AI && AI != this._activeItem) { |
1973 |
if (this._activeItem) this._activeItem.makeInactive(); |
1974 |
this._activeItem = AI; |
1975 |
this._activeItem.makeActive(); |
1976 |
this._setCaptionLabel(this._activeItem.index); |
1977 |
if (Math.abs(this._targetPosition - this._currentPosition) <= 0.5 ) this.conf.onReachTarget(this._activeItem); |
1978 |
} |
1979 |
|
1980 |
this._positionItems(); |
1981 |
|
1982 |
var st = this._step.bind(this); |
1983 |
window.setTimeout(st,this._millisecondsPerStep); |
1984 |
|
1985 |
} else if (!this._holdPos) { |
1986 |
if (this.Slider) this.Slider.locked = false; |
1987 |
this._currentPosition = Math.round(this._currentPosition); |
1988 |
if(this.Position && !this.Slider.locked && this._activeItem) { |
1989 |
this._setCaptionLabel(this._activeItem.index); |
1990 |
} |
1991 |
this._positionItems(); |
1992 |
this._stepLock = false; |
1993 |
} else { |
1994 |
this._stepLock = false; |
1995 |
} |
1996 |
|
1997 |
if (this.Slider && !this.Slider.locked) { |
1998 |
this.Slider.setPosition(this._currentPosition); |
1999 |
} |
2000 |
}, |
2001 |
|
2002 |
|
2003 |
|
2004 |
/* ------------------------------------------------------------------------------------------------------ */ |
2005 |
|
2006 |
/* |
2007 |
* position items |
2008 |
*/ |
2009 |
_positionItems: function () { |
2010 |
|
2011 |
if (this._lastStart) { |
2012 |
var item = this._lastStart; |
2013 |
while (item) { |
2014 |
item.element.style.display="none"; |
2015 |
item = item.next; |
2016 |
if (item == this._lastStart) break; |
2017 |
if (item && item.pre == this._lastEnd) break; |
2018 |
} |
2019 |
} |
2020 |
else { |
2021 |
this._lastStart = this._activeItem; |
2022 |
} |
2023 |
|
2024 |
if (!this._activeItem) return; |
2025 |
var currentItem = this._activeItem; |
2026 |
var itemP = currentItem.pre; |
2027 |
var itemN = currentItem.next; |
2028 |
|
2029 |
this._positionItem(currentItem, 0); |
2030 |
for (var i=1; i <= this.conf.visibleItems && 2*i < this.items.length ; i++) { |
2031 |
if (itemP) { |
2032 |
this._positionItem(itemP, -i); |
2033 |
this._lastStart = itemP; |
2034 |
itemP = itemP.pre; |
2035 |
} |
2036 |
if (itemN) { |
2037 |
this._positionItem(itemN, i); |
2038 |
this._lastEnd = itemN; |
2039 |
itemN = itemN.next; |
2040 |
} |
2041 |
} |
2042 |
|
2043 |
}, |
2044 |
|
2045 |
_positionItem: function (item, relativeIndex) { |
2046 |
|
2047 |
var conf = this.conf; |
2048 |
var vF = conf.verticalFlow; |
2049 |
|
2050 |
var els = item.element.style; |
2051 |
//els.display =" none"; |
2052 |
//if (els.display != "none") return; |
2053 |
|
2054 |
/* Index and position relative to activeItem */ |
2055 |
var p = item.position = this._currentPosition + relativeIndex; |
2056 |
var relativePosition = item.relativePosition = Math.round(p) - this._currentPosition; |
2057 |
var relativePositionNormed = item.relativePositionNormed = conf.visibleItems > 0 ? relativePosition/conf.visibleItems : 0; |
2058 |
var side = relativePosition < 0 ? -1 : 1; |
2059 |
side *= relativePosition == 0 ? 0 : 1; |
2060 |
item.side = side; |
2061 |
|
2062 |
var size = conf.calcSize(item); |
2063 |
size.height = Math.max(size.height, 0); |
2064 |
size.width = Math.max(size.width, 0); |
2065 |
if (item.content.origProportion) size = this._scaleImageSize(item, size); |
2066 |
item.size = size; |
2067 |
|
2068 |
var coords = item.coordinates = conf.calcCoordinates (item); |
2069 |
var relItemPos = item.relativeItemPosition = conf.calcRelativeItemPosition(item); |
2070 |
var zIndex = item.zIndex = conf.calcZIndex (item); |
2071 |
var fontSize = item.fontSize = conf.calcFontSize (item); |
2072 |
var opacity = item.opacity = conf.calcOpacity(item); |
2073 |
|
2074 |
size.height *= this.maxHeight; |
2075 |
size.width *= this.maxHeight; |
2076 |
|
2077 |
/* set position */ |
2078 |
var sA = vF ? size.height : size.width; |
2079 |
var sB = vF ? size.width : size.height; |
2080 |
var pX = this.Flow.center.x * ( 1 + coords.x ) + (relItemPos.x - 1) * sA/2; |
2081 |
var pY = this.maxHeight/2 * ( 1 + coords.y ) + (relItemPos.y - 1 )* sB/2; |
2082 |
els.left = (vF ? pY : pX)+"px"; |
2083 |
els.top = (vF ? pX : pY)+"px"; |
2084 |
|
2085 |
this._setItemSize(item, size); |
2086 |
|
2087 |
/* set opacity */ |
2088 |
if (conf.endOpacity != 1) { |
2089 |
this._setItemOpacity(item); |
2090 |
} |
2091 |
|
2092 |
/* set font size */ |
2093 |
if (!this.Browser.IE) els.fontSize = (fontSize * 100) +"%"; |
2094 |
|
2095 |
/* set z-index */ |
2096 |
els.zIndex = 32768 + Math.round(zIndex * this.items.length); // just for FF |
2097 |
|
2098 |
conf.onDrawItem(item); |
2099 |
|
2100 |
els.visibility = "visible"; |
2101 |
els.display = "block"; |
2102 |
}, |
2103 |
|
2104 |
_scaleImageSize: function (item, size, max) { |
2105 |
var sFL = this.conf.scaleFactorLandscape; |
2106 |
var sFP = this.conf.scaleFactorPortrait; |
2107 |
var vF = this.conf.verticalFlow; |
2108 |
var prop = item.content.origProportion; |
2109 |
var width = size.width; |
2110 |
var height = size.height; |
2111 |
var c = item.content; |
2112 |
|
2113 |
if (vF) { |
2114 |
if (prop <= 1) { |
2115 |
if (sFL != "max" && sFL != 1) { |
2116 |
height *= sFL; |
2117 |
width = Math.min(height * prop, max ? max : 1 ); |
2118 |
} |
2119 |
height = width / prop; |
2120 |
} |
2121 |
else if (prop > 1) { |
2122 |
if (sFP == "max") { |
2123 |
height = max ? max : 1; |
2124 |
} |
2125 |
else if (sFP != 1) { |
2126 |
width *= sFP; |
2127 |
height = Math.min(width/prop, max ? max : 1) |
2128 |
} |
2129 |
else { |
2130 |
height = width / prop; |
2131 |
} |
2132 |
width = height * prop; |
2133 |
} |
2134 |
} |
2135 |
else { |
2136 |
if (prop > 1) { |
2137 |
if (sFL != "max" && sFL != 1) { |
2138 |
width *= sFL; |
2139 |
height = Math.min(width / prop, max ? max : 1); |
2140 |
} |
2141 |
width = height * prop; |
2142 |
} |
2143 |
else if (prop <= 1) { |
2144 |
if (sFP == "max") { |
2145 |
width = max ? max : 1; |
2146 |
} |
2147 |
else if (sFP != 1) { |
2148 |
height *= sFP; |
2149 |
width = Math.min(height*prop, max ? max : 1); |
2150 |
} |
2151 |
else { |
2152 |
width = height * prop; |
2153 |
} |
2154 |
height = width / prop; |
2155 |
} |
2156 |
} |
2157 |
|
2158 |
height = isNaN(height) ? 0 : height; |
2159 |
width = isNaN(width) ? 0 : width; |
2160 |
|
2161 |
if (!max && this.conf.fixItemSize) { |
2162 |
|
2163 |
var propS = size.width / size.height; |
2164 |
|
2165 |
var max = Math.max(size.width, size.height); |
2166 |
var s = this._scaleImageSize(item, {width: max, height: max}, max); |
2167 |
|
2168 |
if (propS < 1) { |
2169 |
height = s.height/size.height; |
2170 |
width = height * prop / propS; |
2171 |
} |
2172 |
else { |
2173 |
width = s.width/size.width; |
2174 |
height = width / prop * propS; |
2175 |
} |
2176 |
|
2177 |
var h = height * 100; |
2178 |
var w = width * 100; |
2179 |
var mL= (1 - width)/2 * 100; |
2180 |
var mT= ( 1 - height ) / propS * 100 * (vF ? 0.5 : 1 ); |
2181 |
c.style.height = h+"%"; |
2182 |
if (item.reflection) item.reflection.style.height = h*this.conf.reflectionHeight+"%"; |
2183 |
c.style.width = w+"%"; |
2184 |
if (item.reflection) item.reflection.style.width = w+"%"; |
2185 |
c.style.marginLeft = mL+"%"; |
2186 |
if (item.reflection) item.reflection.style.marginLeft = mL+"%"; |
2187 |
c.style.marginTop = mT+"%"; |
2188 |
|
2189 |
item.element.style.overflow = "hidden"; |
2190 |
|
2191 |
return size; |
2192 |
} |
2193 |
else { |
2194 |
return {width: width, height: height}; |
2195 |
} |
2196 |
|
2197 |
}, |
2198 |
|
2199 |
_setItemSize: (function () { |
2200 |
if (ContentFlowGlobal.Browser.IE) { |
2201 |
var _setItemSize = function (item, size) { |
2202 |
if (!this.conf.fixItemSize) { |
2203 |
item.content.style.height = size.height+"px"; |
2204 |
} |
2205 |
else if (ContentFlowGlobal.Browser.IE6) { |
2206 |
var h = parseInt(item.content.style.height)/100; |
2207 |
item.content.style.height = size.height*h+"px"; |
2208 |
var mT = parseInt(item.content.style.marginTop)/100; |
2209 |
item.content.style.marginTop = size.height*mT+"px"; |
2210 |
} |
2211 |
if (item.reflection) { |
2212 |
var h = parseInt(item.content.style.height); |
2213 |
item.reflection.style.height = h*this.conf.reflectionHeight+"px"; |
2214 |
item.reflection.style.marginTop = h * this.conf.reflectionGap + "px"; |
2215 |
} |
2216 |
item.element.style.width = size.width +"px"; |
2217 |
item.element.style.height = size.height*(1+this.conf.reflectionHeight+this.conf.reflectionGap)+"px"; |
2218 |
} |
2219 |
} |
2220 |
else { |
2221 |
var _setItemSize = function (item, size) { |
2222 |
if (item.reflection) { |
2223 |
item.element.style.height = size.height*(1+this.conf.reflectionHeight + this.conf.reflectionGap) +"px"; |
2224 |
item.reflection.style.marginTop = size.height * this.conf.reflectionGap + "px"; |
2225 |
} |
2226 |
else if (this._reflectionWithinImage) { |
2227 |
item.element.style.height = size.height*(1+this.conf.reflectionHeight + this.conf.reflectionGap) +"px"; |
2228 |
} |
2229 |
else { |
2230 |
item.element.style.height = size.height +"px"; |
2231 |
} |
2232 |
item.element.style.width = size.width +"px"; |
2233 |
} |
2234 |
} |
2235 |
return _setItemSize; |
2236 |
|
2237 |
})(), |
2238 |
|
2239 |
_setItemOpacity: (function () { |
2240 |
if (ContentFlowGlobal.Browser.IE6) { |
2241 |
var _setItemOpacity = function (item) { |
2242 |
if (item.content.origSrc && item.content.origSrc.match(/\.png$/) ) { |
2243 |
var s = item.content.src; |
2244 |
item.content.src = item.content.origSrc; |
2245 |
item.content.style.filter = item.content.filterString+" progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")"; |
2246 |
item.content.src = s; |
2247 |
} |
2248 |
else { |
2249 |
item.content.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")"; |
2250 |
} |
2251 |
if (item.reflection) item.reflection.style.filter = item.reflection.filterString+"progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")"; |
2252 |
} |
2253 |
} |
2254 |
else if (ContentFlowGlobal.Browser.IE) { |
2255 |
var _setItemOpacity = function (item) { item.element.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")"; } |
2256 |
} |
2257 |
else { |
2258 |
var _setItemOpacity = function (item) { item.element.style.opacity = item.opacity; } |
2259 |
} |
2260 |
return _setItemOpacity; |
2261 |
})() |
2262 |
|
2263 |
|
2264 |
}; |
2265 |
|
2266 |
|
2267 |
/* ==================== extendig javascript/DOM objects ==================== */ |
2268 |
|
2269 |
/* |
2270 |
* adds bind method to Function class |
2271 |
* http://www.digital-web.com/articles/scope_in_javascript/ |
2272 |
*/ |
2273 |
|
2274 |
if (!Function.bind) { |
2275 |
Function.prototype.bind = function(obj) { |
2276 |
var method = this; |
2277 |
return function () { |
2278 |
return method.apply(obj, arguments); |
2279 |
}; |
2280 |
}; |
2281 |
} |
2282 |
|
2283 |
|
2284 |
/* |
2285 |
* extending Math object |
2286 |
*/ |
2287 |
if (!Math.erf2) { |
2288 |
// error function (http://en.wikipedia.org/wiki/Error_function), implemented as erf(x)^2 |
2289 |
Math.erf2 = function (x) { |
2290 |
var a = - (8*(Math.PI -3)/(3*Math.PI*(Math.PI -4))); |
2291 |
var x2 = x*x; |
2292 |
var f = 1 - Math.pow(Math.E, -x2 * (4/Math.PI + a*x2)/(1+a*x2)); |
2293 |
return f; |
2294 |
}; |
2295 |
} |
2296 |
|
2297 |
if (!Math._2PI05) { |
2298 |
Math._2PI05 = Math.sqrt(2*Math.PI); |
2299 |
} |
2300 |
|
2301 |
if (!Math.normDist) { |
2302 |
// normal distribution |
2303 |
Math.normDist = function (x, sig, mu) { |
2304 |
if (!sig) var sig = 1; |
2305 |
if (!mu) var mu = 0; |
2306 |
if (!x) var x = - mu; |
2307 |
return 1/(sig * Math._2PI05) * Math.pow(Math.E, - (x-mu)*(x-mu)/(2*sig*sig) ); |
2308 |
}; |
2309 |
} |
2310 |
|
2311 |
if (!Math.normedNormDist) { |
2312 |
Math.normedNormDist = function (x, sig, mu) { |
2313 |
return this.normDist(x, sig, mu)/this.normDist(mu, sig, mu); |
2314 |
}; |
2315 |
} |
2316 |
|
2317 |
if (!Math.exp) { |
2318 |
Math.exp = function(x) { |
2319 |
return Math.pow(Math.E, x); |
2320 |
}; |
2321 |
} |
2322 |
|
2323 |
if (!Math.ln) { |
2324 |
Math.ln = Math.log; |
2325 |
} |
2326 |
|
2327 |
if (!Math.log2) { |
2328 |
Math.log2 = function (x) { |
2329 |
return Math.log(x)/Math.LN2; |
2330 |
}; |
2331 |
} |
2332 |
|
2333 |
if (!Math.log10) { |
2334 |
Math.log10 = function (x) { |
2335 |
return Math.log(x)/Math.LN10; |
2336 |
}; |
2337 |
} |
2338 |
|
2339 |
if (!Math.logerithm) { |
2340 |
Math.logerithm = function (x, b) { |
2341 |
if (!b || b == Math.E) |
2342 |
return Math.log(x); |
2343 |
else if (b == 2) |
2344 |
return Math.log2(x); |
2345 |
else if (b == 10) |
2346 |
return Math.log10(x); |
2347 |
else |
2348 |
return Math.log(x)/Math.log(b); |
2349 |
}; |
2350 |
} |
2351 |
|
2352 |
|
2353 |
/* |
2354 |
* extending Event object |
2355 |
*/ |
2356 |
if (!Event) var Event = {}; |
2357 |
|
2358 |
if (!Event.stop) { |
2359 |
Event.stop = function (event) { |
2360 |
event.cancelBubble = true; |
2361 |
if (event.preventDefault) event.preventDefault(); |
2362 |
if (event.stopPropagation) event.stopPropagation(); |
2363 |
return false; |
2364 |
}; |
2365 |
} |
2366 |
|
2367 |
/* |
2368 |
* extending Element object |
2369 |
*/ |
2370 |
if (document.all && !window.opera) { |
2371 |
window.$CF = function (el) { |
2372 |
if (typeof el == "string") { |
2373 |
return window.$CF(document.getElementById(el)); |
2374 |
} |
2375 |
else { |
2376 |
if (CFElement.prototype.extend && el && !el.extend) CFElement.prototype.extend(el); |
2377 |
} |
2378 |
return el; |
2379 |
}; |
2380 |
} else { |
2381 |
window.$CF = function (el) { |
2382 |
return el; |
2383 |
}; |
2384 |
} |
2385 |
|
2386 |
if (!window.HTMLElement) { |
2387 |
CFElement = {}; |
2388 |
CFElement.prototype = {}; |
2389 |
CFElement.prototype.extend = function (el) { |
2390 |
for (var method in this) { |
2391 |
if (!el[method]) el[method] = this[method]; |
2392 |
} |
2393 |
}; |
2394 |
} |
2395 |
else { |
2396 |
CFElement = window.HTMLElement; |
2397 |
} |
2398 |
|
2399 |
|
2400 |
/* |
2401 |
* Thanks to Peter-Paul Koch |
2402 |
* http://www.quirksmode.org/js/findpos.html |
2403 |
*/ |
2404 |
if (!CFElement.findPos) { |
2405 |
CFElement.prototype.findPos = function() { |
2406 |
var obj = this; |
2407 |
var curleft = curtop = 0; |
2408 |
try { |
2409 |
if (obj.offsetParent) { |
2410 |
curleft = obj.offsetLeft; |
2411 |
curtop = obj.offsetTop; |
2412 |
while (obj = obj.offsetParent) { |
2413 |
curleft += obj.offsetLeft; |
2414 |
curtop += obj.offsetTop; |
2415 |
} |
2416 |
} |
2417 |
} |
2418 |
catch (ex) {} |
2419 |
return {left:curleft, top:curtop}; |
2420 |
}; |
2421 |
} |
2422 |
|
2423 |
if (!CFElement.getDimensions) { |
2424 |
CFElement.prototype.getDimensions = function() { |
2425 |
return {width: this.clientWidth, height: this.clientHeight}; |
2426 |
}; |
2427 |
} |
2428 |
|
2429 |
/* |
2430 |
* checks if an element has the class className |
2431 |
*/ |
2432 |
if (!CFElement.hasClassName) { |
2433 |
CFElement.prototype.hasClassName = function(className) { |
2434 |
return (new RegExp('\\b'+className+'\\b').test(this.className)); |
2435 |
}; |
2436 |
} |
2437 |
|
2438 |
/* |
2439 |
* adds the class className to the element |
2440 |
*/ |
2441 |
if (!CFElement.addClassName) { |
2442 |
CFElement.prototype.addClassName = function(className) { |
2443 |
if(!this.hasClassName(className)) { |
2444 |
this.className += (this.className ? ' ':'') + className ; |
2445 |
} |
2446 |
}; |
2447 |
} |
2448 |
|
2449 |
/* |
2450 |
* removes the class className from the element el |
2451 |
*/ |
2452 |
if (!CFElement.removeClassName) { |
2453 |
CFElement.prototype.removeClassName = function(className) { |
2454 |
this.className = this.className.replace(new RegExp('\\b'+className+'\\b'), '').replace(/\s\s/g,' '); |
2455 |
}; |
2456 |
} |
2457 |
|
2458 |
/* |
2459 |
* removes or adds the class className from/to the element el |
2460 |
* depending if the element has the class className or not. |
2461 |
*/ |
2462 |
if (!CFElement.toggleClassName) { |
2463 |
CFElement.prototype.toggleClassName = function(className) { |
2464 |
if(this.hasClassName(className)) { |
2465 |
this.removeClassName(className); |
2466 |
} else { |
2467 |
this.addClassName(className); |
2468 |
} |
2469 |
}; |
2470 |
} |
2471 |
|
2472 |
/* |
2473 |
* returns all children of element el, which have the class className |
2474 |
*/ |
2475 |
if (!CFElement.getChildrenByClassName) { |
2476 |
CFElement.prototype.getChildrenByClassName = function(className) { |
2477 |
var children = new Array(); |
2478 |
for (var i=0; i < this.childNodes.length; i++) { |
2479 |
var c = this.childNodes[i]; |
2480 |
if (c.nodeType == 1 && $CF(c).hasClassName(className)) { |
2481 |
children.push(c); |
2482 |
} |
2483 |
} |
2484 |
return children; |
2485 |
}; |
2486 |
} |
2487 |
|
2488 |
/* |
2489 |
* Browser independent event handling method. |
2490 |
* adds the eventListener eventName to element el and attaches the function method to it. |
2491 |
*/ |
2492 |
if (!CFElement.addEvent) { |
2493 |
CFElement.prototype.addEvent = function(eventName, method, capture) { |
2494 |
if (this.addEventListener) |
2495 |
this.addEventListener(eventName, method, capture); |
2496 |
else |
2497 |
this.attachEvent('on'+eventName, method); |
2498 |
}; |
2499 |
} |
2500 |
|
2501 |
/* |
2502 |
* Browser independent event handling method. |
2503 |
* removes the eventListener eventName with the attached function method from element el. |
2504 |
*/ |
2505 |
if (!CFElement.removeEvent) { |
2506 |
CFElement.prototype.removeEvent = function(eventName, method, capture) { |
2507 |
if (this.removeEventListener) |
2508 |
this.removeEventListener(eventName, method, capture); |
2509 |
else |
2510 |
this.detachEvent('on'+eventName, method); |
2511 |
}; |
2512 |
} |
2513 |
|
2514 |
/* |
2515 |
* Browser independent event handling method. |
2516 |
* adds the eventListener eventName to element el and attaches the function method to it. |
2517 |
*/ |
2518 |
if (!window.addEvent) { |
2519 |
window.addEvent = function(eventName, method, capture) { |
2520 |
if (this.addEventListener) { |
2521 |
this.addEventListener(eventName, method, capture); |
2522 |
} else { |
2523 |
if (eventName != 'load' && eventName != 'resize') |
2524 |
document.attachEvent('on'+eventName, method); |
2525 |
else |
2526 |
this.attachEvent('on'+eventName, method); |
2527 |
} |
2528 |
}; |
2529 |
} |
2530 |
|
2531 |
/* |
2532 |
* Browser independent event handling method. |
2533 |
* removes the eventListener eventName with the attached function method from element el. |
2534 |
*/ |
2535 |
if (!window.removeEvent) { |
2536 |
window.removeEvent = function(eventName, method, capture) { |
2537 |
if (this.removeEventListener) { |
2538 |
this.removeEventListener(eventName, method, capture); |
2539 |
} else { |
2540 |
if (eventName != 'load' && eventName != 'resize') |
2541 |
document.detachEvent('on'+eventName, method); |
2542 |
else |
2543 |
this.detachEvent('on'+eventName, method); |
2544 |
} |
2545 |
}; |
2546 |
} |
2547 |
|
2548 |
/* ==================== start it all up ==================== */ |
2549 |
ContentFlowGlobal.init(); |