|
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(); |
| 2550 |
|