2753 linhas
92 KiB
JavaScript
2753 linhas
92 KiB
JavaScript
/* ContentFlow, version 1.0.2
|
|
* (c) 2007 - 2010 Sebastian Kutsch
|
|
* <http://www.jacksasylum.eu/ContentFlow/>
|
|
*
|
|
* ContentFlow is distributed under the terms of the MIT license.
|
|
* (see http://www.jacksasylum.eu/ContentFlow/LICENSE)
|
|
*
|
|
*--------------------------------------------------------------------------*/
|
|
/*
|
|
* ============================================================
|
|
* Global configutaion and initilization object
|
|
* ============================================================
|
|
*/
|
|
var ContentFlowGlobal = {
|
|
Flows: new Array,
|
|
AddOns: {},
|
|
scriptName: 'contentflow.js',
|
|
scriptElement: null,
|
|
batchmessage: null,
|
|
Browser: new (function () {
|
|
this.Opera = window.opera ? true : false;
|
|
this.IE = document.all && !this.Opera ? true : false;
|
|
this.IE6 = this.IE && typeof(window.XMLHttpRequest) == "undefined" ? true : false;
|
|
this.IE8 = this.IE && typeof(document.querySelectorAll) != "undefined" ? true : false;
|
|
this.IE7 = this.IE && ! this.IE6 && !this.IE8 ? true : false;
|
|
this.WebKit = /WebKit/i.test(navigator.userAgent) ? true : false,
|
|
this.iPhone = /iPhone|iPod/i.test(navigator.userAgent)? true : false;
|
|
this.Chrome = /Chrome/i.test(navigator.userAgent) ? true : false;
|
|
this.Safari = /Safari/i.test(navigator.userAgent) && !this.Chrome ? true : false;
|
|
this.Konqueror = navigator.vendor == "KDE" ? true : false;
|
|
this.Konqueror4 = this.Konqueror && /native code/.test(document.getElementsByClassName) ? true : false;
|
|
this.Gecko = !this.WebKit && navigator.product == "Gecko" ? true : false;
|
|
this.Gecko19 = this.Gecko && Array.reduce ? true : false;
|
|
})(),
|
|
|
|
getAddOnConf: function(name) {
|
|
if(this.AddOns[name])
|
|
return this.AddOns[name].conf;
|
|
else
|
|
return {};
|
|
},
|
|
|
|
setAddOnConf: function (name, conf) {
|
|
this.AddOns[name].setConfig(conf);
|
|
},
|
|
|
|
getScriptElement:function (scriptName) {
|
|
var regex = new RegExp(scriptName);
|
|
var scripts = document.getElementsByTagName('script');
|
|
for (var i=0; i<scripts.length; i++) {
|
|
if (scripts[i].src && regex.test(scripts[i].src))
|
|
return scripts[i];
|
|
}
|
|
return '';
|
|
},
|
|
|
|
getScriptPath: function (scriptElement, scriptName) {
|
|
var regex = new RegExp(scriptName+".*");
|
|
return scriptElement.src.replace(regex, '');
|
|
},
|
|
|
|
addScript: function (path) {
|
|
if (this.Browser.IE || this.Browser.WebKit || this.Browser.Konqueror) {
|
|
document.write('<script type="text/javascript" src="'+path+'"><\/script>');
|
|
}
|
|
else {
|
|
var script = document.createElement('script');
|
|
script.src = path;
|
|
script.setAttribute('type', 'text/javascript');
|
|
document.getElementsByTagName('head')[0].appendChild(script);
|
|
}
|
|
},
|
|
|
|
addScripts: function (basePath, filenames) {
|
|
for (var i=0; i<filename.length; i++)
|
|
this.addScript(basepath+filenames[i]);
|
|
},
|
|
|
|
addStylesheet: function (path) {
|
|
if (this.Browser.Gecko19) {
|
|
var link = document.createElement('link');
|
|
link.setAttribute('rel', 'stylesheet');
|
|
link.setAttribute('href', path);
|
|
link.setAttribute('type', 'text/css');
|
|
link.setAttribute('media', 'screen');
|
|
document.getElementsByTagName('head')[0].appendChild(link);
|
|
}
|
|
else {
|
|
document.write('<link rel="stylesheet" href="'+path+'" type="text/css" media="screen" />');
|
|
}
|
|
|
|
},
|
|
|
|
addStylesheets: function (basePath, filenames) {
|
|
for (var i=0; i<filename.length; i++)
|
|
this.addStylesheet(basepath+filenames[i]);
|
|
},
|
|
|
|
initPath: function () {
|
|
/* get / set basic values */
|
|
this.scriptElement = this.getScriptElement(this.scriptName);
|
|
if (!this.scriptElement) {
|
|
this.scriptName = 'contentflow_src.js';
|
|
this.scriptElement = this.getScriptElement(this.scriptName);
|
|
}
|
|
|
|
this.BaseDir = this.getScriptPath(this.scriptElement, this.scriptName) ;
|
|
if (!this.AddOnBaseDir) this.AddOnBaseDir = this.BaseDir;
|
|
if (!this.CSSBaseDir) this.CSSBaseDir = this.BaseDir;
|
|
},
|
|
|
|
init: function () {
|
|
/* add default stylesheets */
|
|
this.addStylesheet(this.CSSBaseDir+'contentflow.css');
|
|
this.addStylesheet(this.CSSBaseDir+'mycontentflow.css'); // FF2: without adding a css-file FF2 hangs on a reload.
|
|
// I don't have the slidest idea why
|
|
// Could be timing problem
|
|
this.loadAddOns = new Array();
|
|
/* add AddOns scripts */
|
|
if (this.scriptElement.getAttribute('load')) {
|
|
var AddOns = this.loadAddOns = this.scriptElement.getAttribute('load').replace(/\ +/g,' ').split(' ');
|
|
for (var i=0; i<AddOns.length; i++) {
|
|
if (AddOns[i] == '') continue;
|
|
//if (AddOns[i] == 'myStyle') {
|
|
//this.addStylesheet(this.BaseDir+'mycontentflow.css');
|
|
//continue;
|
|
//}
|
|
this.addScript(this.AddOnBaseDir+'ContentFlowAddOn_'+AddOns[i]+'.js');
|
|
}
|
|
}
|
|
|
|
/* ========== ContentFlow auto initialization on document load ==========
|
|
* thanks to Dean Edwards
|
|
* http://dean.edwards.name/weblog/2005/02/order-of-events/
|
|
*/
|
|
var CFG = this;
|
|
|
|
/* for Mozilla, Opera 9, Safari */
|
|
if (document.addEventListener) {
|
|
/* for Safari */
|
|
if (this.Browser.WebKit) {
|
|
var _timer = setInterval(function() {
|
|
if (/loaded|complete/.test(document.readyState)) {
|
|
clearInterval(_timer);
|
|
CFG.onloadInit(); // call the onload handler
|
|
}
|
|
}, 10);
|
|
}
|
|
else {
|
|
document.addEventListener("DOMContentLoaded", CFG.onloadInit, false);
|
|
}
|
|
}
|
|
else if (this.Browser.IE) {
|
|
document.write("<script id=__ie_cf_onload defer src=javascript:void(0)><\/script>");
|
|
var script = document.getElementById("__ie_cf_onload");
|
|
script.onreadystatechange = function() {
|
|
if (this.readyState == "complete") {
|
|
CFG.onloadInit(); // call the onload handler
|
|
}
|
|
};
|
|
}
|
|
|
|
/* for all other browsers */
|
|
window.addEvent('load', CFG.onloadInit, false);
|
|
|
|
/* ================================================================== */
|
|
|
|
},
|
|
|
|
onloadInit: function () {
|
|
// quit if this function has already been called
|
|
if (arguments.callee.done) return;
|
|
for (var i=0; i< ContentFlowGlobal.loadAddOns.length; i++) {
|
|
var a = ContentFlowGlobal.loadAddOns[i];
|
|
if (!ContentFlowGlobal.AddOns[a]) {
|
|
var CFG = ContentFlowGlobal;
|
|
window.setTimeout( CFG.onloadInit, 10);
|
|
return;
|
|
}
|
|
}
|
|
// flag this function so we don't do the same thing twice
|
|
arguments.callee.done = true;
|
|
|
|
/* fix for mootools */
|
|
if (window.Element && Element.implement && document.all && !window.opera) {
|
|
for (var prop in window.CFElement.prototype) {
|
|
if(!window.Element.prototype[prop]) {
|
|
var implement = {};
|
|
implement[prop] = window.CFElement.prototype[prop];
|
|
Element.implement(implement);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* init all manualy created flows */
|
|
for (var i=0; i< ContentFlowGlobal.Flows.length; i++) {
|
|
ContentFlowGlobal.Flows[i].init();
|
|
}
|
|
|
|
/* init the rest */
|
|
var divs = document.getElementsByTagName('div');
|
|
DIVS: for (var i = 0; i < divs.length; i++) {
|
|
if (divs[i].className.match(/\bContentFlow\b/)) {
|
|
for (var j=0; j<ContentFlowGlobal.Flows.length; j++) {
|
|
if (divs[i] == ContentFlowGlobal.Flows[j].Container) continue DIVS;
|
|
}
|
|
var CF = new ContentFlow(divs[i],{}, false);
|
|
CF.init();
|
|
}
|
|
}
|
|
|
|
/* DM disable standard webview right click*/
|
|
window.addEventListener("contextmenu", function(event) {
|
|
event.preventDefault();
|
|
}, false);
|
|
/* DM disable standard webview drag-drop*/
|
|
window.addEventListener("drop", function(event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}, false);
|
|
window.addEventListener("dragover", function(event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}, false);
|
|
}
|
|
};
|
|
|
|
ContentFlowGlobal.initPath();
|
|
|
|
|
|
/*
|
|
* ============================================================
|
|
* ContentFlowAddOn
|
|
* ============================================================
|
|
*/
|
|
var ContentFlowAddOn = function (name, methods, register) {
|
|
if (typeof register == "undefined" || register != false)
|
|
ContentFlowGlobal.AddOns[name] = this;
|
|
|
|
this.name = name;
|
|
if (!methods) methods = {};
|
|
this.methods = methods;
|
|
this.conf = {};
|
|
if (this.methods.conf) {
|
|
this.setConfig(this.methods.conf);
|
|
delete this.methods.conf;
|
|
}
|
|
|
|
|
|
this.scriptpath = ContentFlowGlobal.AddOnBaseDir;
|
|
if (methods.init) {
|
|
var init = methods.init.bind(this);
|
|
init(this);
|
|
}
|
|
};
|
|
|
|
ContentFlowAddOn.prototype = {
|
|
Browser: ContentFlowGlobal.Browser,
|
|
|
|
addScript: ContentFlowGlobal.addScript,
|
|
addScripts: ContentFlowGlobal.addScripts,
|
|
|
|
addStylesheet: function (path) {
|
|
if (!path)
|
|
path = this.scriptpath+'ContentFlowAddOn_'+this.name+'.css';
|
|
ContentFlowGlobal.addStylesheet(path);
|
|
},
|
|
addStylesheets: ContentFlowGlobal.addStylesheets,
|
|
|
|
setConfig: function (conf) {
|
|
for (var c in conf) {
|
|
this.conf[c] = conf[c];
|
|
}
|
|
},
|
|
|
|
_init: function (flow) {
|
|
if (this.methods.ContentFlowConf) {
|
|
flow.setConfig(this.methods.ContentFlowConf);
|
|
}
|
|
}
|
|
|
|
|
|
};
|
|
|
|
/*
|
|
* ============================================================
|
|
* lets pass messages to python
|
|
* ============================================================
|
|
*/
|
|
function message_signal() {
|
|
// create a JSON string from the args passed
|
|
// we assume the first arg is the signal name
|
|
var obj = { }
|
|
obj['signal'] = arguments[0];
|
|
var args = new Array();
|
|
|
|
for (var i = 1; i < arguments.length; i++) {
|
|
args[i-1] = String(arguments[i]);
|
|
}
|
|
obj['param'] = args;
|
|
|
|
document.title = JSON.stringify(obj);
|
|
document.title = JSON.stringify('clear'); // clear title for next call
|
|
}
|
|
|
|
/*
|
|
* ============================================================
|
|
* our callback from python
|
|
* ============================================================
|
|
*/
|
|
function jscallback(msg) {
|
|
var obj = eval('(' + msg + ')');
|
|
|
|
var table = document.getElementById("mytable");
|
|
|
|
/* delete all the rows first*/
|
|
for(var i = table.rows.length; i > 0;i--)
|
|
{
|
|
table.deleteRow(i -1);
|
|
}
|
|
|
|
/* now create rows dynamically for data passed*/
|
|
for (var i=0;i < obj.album.length; i++) {
|
|
|
|
var newJob = document.createElement("tr");
|
|
newJob.innerHTML = "<td>"+obj.album[i].track+"</td><td>" +
|
|
obj.album[i].artist + "</td>";
|
|
table.tBodies[0].appendChild(newJob);
|
|
}
|
|
|
|
};
|
|
|
|
function update_album(msg) {
|
|
var obj = eval('(' + msg + ')');
|
|
var index = Math.floor(obj.identifier);
|
|
var item = cf.getItem(index);
|
|
//console.log(item.content.getAttribute('src'))
|
|
//item.content.setAttribute('src', '/home/dad/.cache/rhythmbox/album-art/000000ab');
|
|
//item.content.setAttribute('src', obj.filename);
|
|
//item.caption.innerHTML = obj.caption;
|
|
//item.content.setAttribute('title', obj.title);
|
|
//console.log(x);
|
|
console.log(index)
|
|
console.log(item.pre)
|
|
console.log(item.pre.index)
|
|
var element = cf.rmItem(index)
|
|
item = cf.getActiveItem()
|
|
console.log(item.index)
|
|
var link = document.createElement('img');
|
|
link.setAttribute('src', obj.filename);
|
|
link.setAttribute('title', obj.title);
|
|
link.setAttribute('caption', obj.filename);
|
|
link.setAttribute('identifier', obj.identifier);
|
|
cf.addItem(link, index - 1);
|
|
cf.moveTo(index - 1)
|
|
};
|
|
|
|
function new_flow_batch(msg) {
|
|
return;
|
|
var obj = eval('(' + msg + ')');
|
|
var ic = document.getElementById('flow');
|
|
var position = obj.batchtype;
|
|
|
|
if (position != 'stop') {
|
|
for (var i=0; i < obj.flowbatch.length; i++) {
|
|
var link = document.createElement('img');
|
|
link.setAttribute('src', obj.flowbatch[i].filename);
|
|
link.setAttribute('title', obj.flowbatch[i].title);
|
|
link.setAttribute('caption', obj.flowbatch[i].filename);
|
|
link.setAttribute('identifier', obj.flowbatch[i].identifier);
|
|
cf.addItem(link, position);
|
|
}
|
|
}
|
|
ContentFlowGlobal.batchmessage = null;
|
|
};
|
|
|
|
function scroll_to_identifier(msg) {
|
|
var index = Math.floor(msg);
|
|
cf.moveTo(index);
|
|
};
|
|
|
|
/*
|
|
* ============================================================
|
|
* ContentFlowGUIElement
|
|
* ============================================================
|
|
*/
|
|
|
|
var ContentFlowGUIElement = function (CFobj, element) {
|
|
element.setDimensions = function () {
|
|
this.dimensions = this.getDimensions();
|
|
this.center = {x: this.dimensions.width/2, y:this.dimensions.height/2};
|
|
this.position = this.findPos();
|
|
};
|
|
element.addObserver = function (eventName, method) {
|
|
var m = this.eventMethod = method.bind(CFobj);
|
|
this.observedEvent = eventName;
|
|
this.addEvent(eventName, m, false);
|
|
};
|
|
|
|
element.makeDraggable = function (onDrag, beforeDrag, afterDrag) {
|
|
|
|
this.stopDrag = function(event) {
|
|
if (!event) var event = window.event;
|
|
if (this.Browser.iPhone) {
|
|
window.removeEvent('touchemove', onDrag, false);
|
|
if (!this.ontochmove) {
|
|
var t = event.target;
|
|
if (t.firstChild) t = t.firstChild;
|
|
var e = document.createEvent('MouseEvents');
|
|
e.initEvent('click', true, true);
|
|
t.dispatchEvent(e);
|
|
}
|
|
}
|
|
else {
|
|
window.removeEvent('mousemove', onDrag, false);
|
|
}
|
|
afterDrag(event);
|
|
}.bind(this);
|
|
|
|
this.initDrag = function (event) {
|
|
if (!event) var event = window.event;
|
|
var e = event;
|
|
if (event.touches) e = event.touches[0];
|
|
|
|
this.mouseX = e.clientX;
|
|
this.mouseY = e.clientY;
|
|
|
|
beforeDrag(event);
|
|
|
|
}.bind(this);
|
|
|
|
this.startDrag = function (event) {
|
|
if (!event) var event = window.event;
|
|
|
|
var stopDrag = this.stopDrag;
|
|
|
|
if (this.Browser.iPhone) {
|
|
var s = this;
|
|
s.ontouchmove = false
|
|
window.addEvent('touchmove', function (e) {
|
|
s.ontouchmove = true;
|
|
onDrag(e);
|
|
}, false);
|
|
event.preventDefault();
|
|
window.addEvent('touchend', stopDrag, false);
|
|
}
|
|
else {
|
|
window.addEvent('mousemove', onDrag, false);
|
|
window.addEvent('mouseup', stopDrag, false);
|
|
}
|
|
if(event.preventDefault) { event.preventDefault() }
|
|
|
|
}.bind(this);
|
|
|
|
var startDrag = this.startDrag;
|
|
if (this.Browser.iPhone) {
|
|
this.addEventListener('touchstart', startDrag, false);
|
|
}
|
|
else {
|
|
this.addEvent('mousedown', startDrag, false);
|
|
}
|
|
|
|
};
|
|
|
|
element.Browser = ContentFlowGlobal.Browser;
|
|
$CF(element).setDimensions();
|
|
return element;
|
|
};
|
|
|
|
|
|
/*
|
|
* ============================================================
|
|
* ContentFlowItem
|
|
* ============================================================
|
|
*/
|
|
var ContentFlowItem = function (CFobj, element, index) {
|
|
this.CFobj = CFobj;
|
|
this._activeElement = CFobj.conf.activeElement;
|
|
this.pre = null;
|
|
this.next = null;
|
|
/*
|
|
* ==================== item click events ====================
|
|
* handles the click event on an active and none active item
|
|
*/
|
|
|
|
this.rightclickItem = function (event) {
|
|
if(!event) var event = window.event;
|
|
var el = event.target ? event.target : event.srcElement;
|
|
var index = el.itemIndex ? el.itemIndex : el.parentNode.itemIndex;
|
|
var item = this.items[index];
|
|
if (this._activeItem == item && event.button==2) {
|
|
this.conf.onrightclickActiveItem(item);
|
|
|
|
}
|
|
}.bind(CFobj),
|
|
|
|
this.setIndex = function (index) {
|
|
this.index = index;
|
|
this.element.itemIndex = index;
|
|
};
|
|
|
|
this.dblclickItem = function (event) {
|
|
if(!event) var event = window.event;
|
|
var el = event.target ? event.target : event.srcElement;
|
|
var index = el.itemIndex ? el.itemIndex : el.parentNode.itemIndex;
|
|
var item = this.items[index];
|
|
if (this._activeItem == item) {
|
|
this.conf.ondblclickActiveItem(item);
|
|
}
|
|
}.bind(CFobj),
|
|
|
|
this.setIndex = function (index) {
|
|
this.index = index;
|
|
this.element.itemIndex = index;
|
|
};
|
|
|
|
this.clickItem = function (event) {
|
|
if(!event) var event = window.event;
|
|
var el = event.target ? event.target : event.srcElement;
|
|
var index = el.itemIndex ? el.itemIndex : el.parentNode.itemIndex;
|
|
var item = this.items[index];
|
|
if (this._activeItem == item) {
|
|
this.conf.onclickActiveItem(item);
|
|
}
|
|
else {
|
|
if (this.conf.onclickInactiveItem(item) != false ) {
|
|
this.moveToIndex(index);
|
|
this.conf.onclickActiveItem(this.items[index]);
|
|
}
|
|
}
|
|
}.bind(CFobj),
|
|
|
|
this.dropItem = function (event) {
|
|
if(!event) var event = window.event;
|
|
var el = event.target ? event.target : event.srcElement;
|
|
var index = el.itemIndex ? el.itemIndex : el.parentNode.itemIndex;
|
|
var item = this.items[index];
|
|
event.preventDefault();
|
|
|
|
if (this._activeItem == item) {
|
|
this.conf.ondropActiveItem(item, event.dataTransfer.getData("Text"));
|
|
}
|
|
}.bind(CFobj),
|
|
|
|
this.setIndex = function (index) {
|
|
this.index = index;
|
|
this.element.itemIndex = index;
|
|
};
|
|
this.getIndex = function () {
|
|
return this.index;
|
|
};
|
|
|
|
|
|
/* generate deault HTML structure if item is an image */
|
|
if ($CF(element).nodeName == "IMG") {
|
|
var el = document.createElement('div');
|
|
el.className = "item";
|
|
|
|
var cont = element.parentNode.replaceChild( el, element);
|
|
cont.className = "content";
|
|
el.appendChild(cont);
|
|
|
|
if (element.title) {
|
|
var cap = document.createElement('div');
|
|
cap.className = "caption";
|
|
cap.innerHTML = element.title;
|
|
el.appendChild(cap);
|
|
}
|
|
element = el;
|
|
}
|
|
|
|
/* create item object */
|
|
this.element = $CF(element);
|
|
this.item = element;
|
|
if (typeof index != "undefined") this.setIndex(index);
|
|
this.content = this.element.getChildrenByClassName('content')[0];
|
|
this.caption = this.element.getChildrenByClassName('caption')[0];
|
|
this.label = this.element.getChildrenByClassName('label')[0];
|
|
|
|
/* if content is image set properties */
|
|
if (this.content.nodeName == "IMG") {
|
|
CFobj._imagesToLoad++;
|
|
|
|
var foobar = function () {
|
|
CFobj._imagesToLoad--;
|
|
this.image = this.content;
|
|
this.setImageFormat(this.image);
|
|
if ( CFobj.conf.reflectionHeight > 0) {
|
|
this.addReflection();
|
|
}
|
|
this.initClick();
|
|
CFobj._addItemCueProcess(true);
|
|
}.bind(this);
|
|
|
|
if (this.content.complete && this.content.width > 0)
|
|
window.setTimeout(foobar, 100);
|
|
else if (this.Browser.IE && !this.content.onload) {
|
|
var self = this;
|
|
var t = window.setInterval( function () {
|
|
if (self.content.complete && self.content.width > 0) {
|
|
window.clearInterval(t);
|
|
foobar();
|
|
}
|
|
}, 10);
|
|
}
|
|
else
|
|
this.content.onload = window.setTimeout(foobar, 100);
|
|
}
|
|
else {
|
|
this.initClick();
|
|
CFobj._addItemCueProcess(true);
|
|
}
|
|
|
|
};
|
|
|
|
ContentFlowItem.prototype = {
|
|
|
|
Browser: ContentFlowGlobal.Browser,
|
|
|
|
makeActive: function () {
|
|
this.element.addClassName('active');
|
|
this.CFobj.conf.onMakeActive(this);
|
|
},
|
|
|
|
makeInactive: function () {
|
|
this.element.removeClassName('active');
|
|
this.CFobj.conf.onMakeInactive(this);
|
|
},
|
|
|
|
initClick: function () {
|
|
var cItem = this.clickItem;
|
|
var rcItem = this.rightclickItem;
|
|
var dcItem = this.dblclickItem;
|
|
var dropItem = this.dropItem;
|
|
this[this._activeElement].addEvent('click', cItem, false);
|
|
this[this._activeElement].addEvent('mouseup', rcItem, false);
|
|
this[this._activeElement].addEvent('dblclick', dcItem, false);
|
|
this[this._activeElement].addEvent('drop', dropItem, false);
|
|
},
|
|
|
|
setImageFormat: function (img) {
|
|
if (this.Browser.IE6 || this.Browser.IE7) img.style.width = "auto";
|
|
img.origProportion = img.width / img.height;
|
|
img.setAttribute('origProportion', img.width / img.height);
|
|
if (this.Browser.IE6 || this.Browser.IE7) img.style.width = "";
|
|
//img.origWidth = img.width;
|
|
//img.origHeight = img.height;
|
|
if (img.origProportion <= 1)
|
|
img.addClassName('portray');
|
|
else
|
|
img.addClassName('landscape');
|
|
},
|
|
|
|
/*
|
|
* add reflection to item
|
|
*/
|
|
addReflection: function() {
|
|
var CFobj = this.CFobj;
|
|
var reflection;
|
|
var image = this.content;
|
|
|
|
|
|
if (this.Browser.IE) {
|
|
var filterString = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)';
|
|
if (CFobj._reflectionColorRGB) {
|
|
// transparent gradient
|
|
if (CFobj.conf.reflectionColor == "transparent") {
|
|
var RefImg = reflection = this.reflection = document.createElement('img');
|
|
reflection.src = image.src;
|
|
}
|
|
// color gradient
|
|
else {
|
|
reflection = this.reflection = document.createElement('div');
|
|
var RefImg = document.createElement('img');
|
|
RefImg.src = image.src;
|
|
reflection.width = RefImg.width;
|
|
reflection.height = RefImg.height;
|
|
RefImg.style.width = '100%';
|
|
RefImg.style.height = '100%';
|
|
var color = CFobj._reflectionColorRGB;
|
|
reflection.style.backgroundColor = '#'+color.hR+color.hG+color.hB;
|
|
reflection.appendChild(RefImg);
|
|
}
|
|
filterString += ' progid:DXImageTransform.Microsoft.Alpha(opacity=0, finishOpacity=50, style=1, finishX=0, startY='+CFobj.conf.reflectionHeight*100+' finishY=0)';
|
|
} else {
|
|
var RefImg = reflection = this.reflection = document.createElement('img');
|
|
reflection.src = image.src;
|
|
}
|
|
// crop image (streches and crops (clip on default dimensions), original proportions will be restored through CSS)
|
|
filterString += ' progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22='+1/CFobj.conf.reflectionHeight+')';
|
|
|
|
if (ContentFlowGlobal.Browser.IE6) {
|
|
if (image.src.match(/\.png$/) ) {
|
|
image.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+image.src+"', sizingMethod=scale )";
|
|
image.filterString = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+image.src+"', sizingMethod=scale )";
|
|
filterString += " progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+image.src+"', sizingMethod=scale )";
|
|
image.origSrc = image.src;
|
|
image.src='img/blank.gif';
|
|
RefImg.src="img/blank.gif";
|
|
}
|
|
}
|
|
|
|
reflection.filterString = filterString;
|
|
RefImg.style.filter = filterString;
|
|
|
|
} else {
|
|
if (CFobj._reflectionWithinImage)
|
|
var canvas = this.canvas = $CF(document.createElement('canvas'));
|
|
else
|
|
var canvas = reflection = this.reflection = document.createElement('canvas');
|
|
|
|
if (canvas.getContext) {
|
|
if (CFobj._reflectionWithinImage) {
|
|
for (var i=0; i <image.attributes.length; i++) {
|
|
canvas.setAttributeNode(image.attributes[i].cloneNode(true));
|
|
}
|
|
}
|
|
|
|
var context = canvas.getContext("2d");
|
|
|
|
/* calc image size */
|
|
var max = CFobj.maxHeight;
|
|
var size = CFobj._scaleImageSize(this, {width: max, height: max }, max)
|
|
var width = size.width;
|
|
var height = size.height;
|
|
|
|
// overwrite default height and width
|
|
if (CFobj._reflectionWithinImage) {
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
this.setImageFormat(canvas);
|
|
canvas.height = height * (1 + CFobj.conf.reflectionHeight + CFobj.conf.reflectionGap);
|
|
|
|
}
|
|
else {
|
|
canvas.width = width;
|
|
canvas.height = height * CFobj.conf.reflectionHeight;
|
|
}
|
|
|
|
context.save(); /* save default context */
|
|
|
|
/* draw image into canvas */
|
|
if (CFobj._reflectionWithinImage) {
|
|
context.drawImage(image, 0, 0, width, height);
|
|
}
|
|
|
|
/* mirror image by transformation of context and image drawing */
|
|
if (CFobj._reflectionWithinImage) {
|
|
var contextHeight = height * ( 1 + CFobj.conf.reflectionGap/2) * 2;
|
|
}
|
|
else {
|
|
var contextHeight = image.height;
|
|
}
|
|
// -1 for FF 1.5
|
|
contextHeight -= 1;
|
|
|
|
context.translate(0, contextHeight);
|
|
context.scale(1, -1);
|
|
/* draw reflection image into canvas */
|
|
context.drawImage(image, 0, 0, width, height);
|
|
|
|
/* restore default context for simpler further canvas manupulation */
|
|
context.restore();
|
|
|
|
if (CFobj._reflectionColorRGB) {
|
|
var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
|
|
|
|
var alpha = [0, 0.5, 1];
|
|
if (CFobj._reflectionColor == "transparent") {
|
|
context.globalCompositeOperation = "destination-in";
|
|
alpha = [1, 0.5, 0];
|
|
}
|
|
|
|
var red = CFobj._reflectionColorRGB.iR;
|
|
var green = CFobj._reflectionColorRGB.iG;
|
|
var blue = CFobj._reflectionColorRGB.iB;
|
|
if (CFobj._reflectionWithinImage) {
|
|
gradient.addColorStop(0, 'rgba('+red+','+green+','+blue+','+alpha[0]+')');
|
|
gradient.addColorStop(height/canvas.height, 'rgba('+red+','+green+','+blue+','+alpha[0]+')');
|
|
gradient.addColorStop(height/canvas.height, 'rgba('+red+','+green+','+blue+','+alpha[1]+')');
|
|
}
|
|
else {
|
|
gradient.addColorStop(0, 'rgba('+red+','+green+','+blue+','+alpha[1]+')');
|
|
}
|
|
gradient.addColorStop(1, 'rgba('+red+','+green+','+blue+','+alpha[2]+')');
|
|
|
|
context.fillStyle = gradient;
|
|
context.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
}
|
|
|
|
if (CFobj._reflectionWithinImage) {
|
|
image.parentNode.replaceChild(canvas, image);
|
|
this.content = canvas;
|
|
this.origContent = canvas;
|
|
delete this.image;// = true;
|
|
|
|
}
|
|
|
|
} else {
|
|
CFobj._reflectionWithinImage = false;
|
|
delete this.reflection;
|
|
}
|
|
|
|
}
|
|
if (reflection) {
|
|
reflection.className = "reflection";
|
|
this.element.appendChild(reflection);
|
|
|
|
/* be sure that caption is last child */
|
|
if (this.caption) this.element.appendChild(this.caption);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
/*
|
|
* ============================================================
|
|
* ContentFlow
|
|
* ============================================================
|
|
*/
|
|
var ContentFlow = function (container, config) {
|
|
|
|
if (container) {
|
|
ContentFlowGlobal.Flows.push(this);
|
|
this.Container = container;
|
|
this._userConf = config?config:{};
|
|
this.conf = {};
|
|
this._loadedAddOns = new Array();
|
|
} else {
|
|
throw ('ContentFlow ERROR: No flow container node or id given');
|
|
}
|
|
|
|
};
|
|
|
|
ContentFlow.prototype = {
|
|
_imagesToLoad: 0,
|
|
_activeItem: 0,
|
|
_currentPosition: 0,
|
|
_targetPosition: 0,
|
|
_stepLock: false,
|
|
_millisecondsPerStep: 40,
|
|
_reflectionWithinImage: true,
|
|
Browser: ContentFlowGlobal.Browser,
|
|
|
|
_defaultConf: {
|
|
/* pre conf */
|
|
useAddOns: 'all', // all, none, [AddOn1, ... , AddOnN]
|
|
|
|
biggestItemPos: 0,
|
|
loadingTimeout: 30000, //milliseconds
|
|
activeElement: 'content', // item or content
|
|
|
|
maxItemHeight: 0,
|
|
scaleFactor: 1,
|
|
scaleFactorLandscape: 1.33,
|
|
scaleFactorPortrait: 1.0,
|
|
fixItemSize: false,
|
|
relativeItemPosition: "top center", // align top/above, bottom/below, left, right, center of position coordinate
|
|
|
|
circularFlow: true,
|
|
verticalFlow: false,
|
|
visibleItems: -1,
|
|
endOpacity: 1,
|
|
startItem: "center",
|
|
scrollInFrom: "pre",
|
|
|
|
flowSpeedFactor: 1.0,
|
|
flowDragFriction: 1.0,
|
|
scrollWheelSpeed: 1.0,
|
|
keys: {
|
|
13: function () { this.conf.onclickActiveItem(this._activeItem) },
|
|
37: function () { this.moveTo('pre') },
|
|
38: function () { this.moveTo('visibleNext') },
|
|
39: function () { this.moveTo('next') },
|
|
40: function () { this.moveTo('visiblePre') }
|
|
},
|
|
|
|
reflectionColor: "transparent", // none, transparent or hex RGB CSS style #RRGGBB
|
|
reflectionHeight: 0.5, // float (relative to original image height)
|
|
reflectionGap: 0.0,
|
|
|
|
/* ==================== actions ==================== */
|
|
|
|
onInit: function () {},
|
|
|
|
onclickInactiveItem: function (item) {},
|
|
|
|
onclickActiveItem: function (item) {
|
|
var identifier;
|
|
identifier = item.content.getAttribute('identifier');
|
|
message_signal('clickactive', identifier);
|
|
},
|
|
|
|
onrightclickActiveItem: function (item) {
|
|
var identifier;
|
|
identifier = item.content.getAttribute('identifier');
|
|
|
|
message_signal('rightclickactive', identifier);
|
|
},
|
|
|
|
ondblclickActiveItem: function (item) {
|
|
var identifier;
|
|
identifier = item.content.getAttribute('identifier');
|
|
|
|
message_signal('doubleclickactive', identifier);
|
|
},
|
|
|
|
ondropActiveItem: function (item, webpath) {
|
|
var identifier;
|
|
identifier = item.content.getAttribute('identifier');
|
|
message_signal('dropactive', identifier, webpath);
|
|
},
|
|
|
|
onMakeInactive: function (item) {},
|
|
|
|
onMakeActive: function (item) {},
|
|
|
|
onReachTarget: function(item) {},
|
|
|
|
onMoveTo: function(item) {},
|
|
|
|
//onDrawItem: function(item, relativePosition, relativePositionNormed, side, size) {},
|
|
onDrawItem: function(item) {},
|
|
|
|
onclickPreButton: function (event) {
|
|
this.moveToIndex('pre');
|
|
return Event.stop(event);
|
|
},
|
|
|
|
onclickNextButton: function (event) {
|
|
this.moveToIndex('next');
|
|
return Event.stop(event);
|
|
},
|
|
|
|
/* ==================== calculations ==================== */
|
|
|
|
calcStepWidth: function(diff) {
|
|
var vI = this.conf.visibleItems;
|
|
var items = this.items.length;
|
|
items = items == 0 ? 1 : items;
|
|
if (Math.abs(diff) > vI) {
|
|
if (diff > 0) {
|
|
var stepwidth = diff - vI;
|
|
} else {
|
|
var stepwidth = diff + vI;
|
|
}
|
|
} else if (vI >= this.items.length) {
|
|
var stepwidth = diff / items;
|
|
} else {
|
|
var stepwidth = diff * ( vI / items);
|
|
//var stepwidth = diff/absDiff * Math.max(diff * diff,Math.min(absDiff,0.3)) * ( vI / this.items.length);
|
|
//var stepwidth = this.flowSpeedFactor * diff / this.visibleItems;
|
|
//var stepwidth = this.flowSpeedFactor * diff * ( this.visibleItems / this.items.length)
|
|
//var stepwidth = this.flowSpeedFactor * diff / this._millisecondsPerStep * 2; // const. speed
|
|
}
|
|
return stepwidth;
|
|
},
|
|
|
|
calcSize: function (item) {
|
|
var rP = item.relativePosition;
|
|
//var rPN = relativePositionNormed;
|
|
//var vI = this.conf.visibleItems;
|
|
|
|
var h = 1/(Math.abs(rP)+1);
|
|
var w = h;
|
|
return {width: w, height: h};
|
|
},
|
|
|
|
calcCoordinates: function (item) {
|
|
var rP = item.relativePosition;
|
|
//var rPN = item.relativePositionNormed;
|
|
var vI = this.conf.visibleItems;
|
|
|
|
var f = 1 - 1/Math.exp( Math.abs(rP)*0.75);
|
|
var x = item.side * vI/(vI+1)* f;
|
|
var y = 1;
|
|
|
|
return {x: x, y: y};
|
|
},
|
|
|
|
/*
|
|
calcRelativeItemPosition: function (item) {
|
|
var x = 0;
|
|
var y = -1;
|
|
return {x: x, y: y};
|
|
},
|
|
*/
|
|
|
|
calcZIndex: function (item) {
|
|
return -Math.abs(item.relativePositionNormed);
|
|
},
|
|
|
|
calcFontSize: function (item) {
|
|
return item.size.height;
|
|
},
|
|
|
|
calcOpacity: function (item) {
|
|
return Math.max(1 - ((1 - this.conf.endOpacity ) * Math.sqrt(Math.abs(item.relativePositionNormed))), this.conf.endOpacity);
|
|
}
|
|
},
|
|
|
|
/* ---------- end of defaultConf ---------- */
|
|
|
|
|
|
/*
|
|
* ==================== index helper methods ====================
|
|
*/
|
|
|
|
/*
|
|
* checks if index is within the index range of the this.items array
|
|
* returns a value that is within this range
|
|
*/
|
|
_checkIndex: function (index) {
|
|
index = Math.max(index, 0);
|
|
index = Math.min(index, this.itemsLastIndex);
|
|
return index;
|
|
},
|
|
|
|
/*
|
|
* sets the object property itemsLastIndex
|
|
*/
|
|
_setLastIndex: function () {
|
|
this.itemsLastIndex = this.items.length - 1;
|
|
},
|
|
|
|
/*
|
|
*/
|
|
_getItemByIndex: function (index) {
|
|
return this.items[this._checkIndex(index)];
|
|
},
|
|
|
|
_getItemByPosition: function (position) {
|
|
return this._getItemByIndex(this._getIndexByPosition(position));
|
|
},
|
|
|
|
/* returns the position of an item-index relative to current position */
|
|
_getPositionByIndex: function(index) {
|
|
if (!this.conf.circularFlow) return this._checkIndex(index);
|
|
var cI = this._getIndexByPosition(this._currentPosition);
|
|
var dI = index - cI;
|
|
if (Math.abs(dI) > dI+this.items.length)
|
|
dI += this.items.length;
|
|
else if (Math.abs(dI) > (Math.abs(dI-this.items.length)))
|
|
dI -= this.items.length;
|
|
|
|
return this._currentPosition + dI;
|
|
|
|
},
|
|
|
|
/* returns the index an item at position p would have */
|
|
_getIndexByPosition: function (position) {
|
|
if (position < 0) var mod = 0;
|
|
else var mod = 1;
|
|
|
|
var I = (Math.round(position) + mod) % this.items.length;
|
|
if (I>0) I -= mod;
|
|
else if(I<0) I += this.items.length - mod;
|
|
else if(position<0) I = 0;
|
|
else I = this.items.length - 1;
|
|
|
|
return I;
|
|
},
|
|
|
|
_getIndexByKeyWord: function (keyword, relativeTo, check) {
|
|
if (relativeTo)
|
|
var index = relativeTo;
|
|
else if (this._activeItem)
|
|
var index = this._activeItem.index;
|
|
else
|
|
var index = 0;
|
|
|
|
if (isNaN(keyword)) {
|
|
switch (keyword) {
|
|
case "first":
|
|
case "start":
|
|
index = 0;
|
|
break;
|
|
case "last":
|
|
case "end":
|
|
index = this.itemsLastIndex;
|
|
break;
|
|
case "middle":
|
|
case "center":
|
|
index = Math.round(this.itemsLastIndex/2);
|
|
break;
|
|
case "right":
|
|
case "next":
|
|
index += 1;
|
|
break;
|
|
case "left":
|
|
case "pre":
|
|
case "previous":
|
|
index -= 1;
|
|
break;
|
|
case 'visible':
|
|
case 'visiblePre':
|
|
case 'visibleLeft':
|
|
index -= this.conf.visibleItems;
|
|
break;
|
|
case 'visibleNext':
|
|
case 'visibleRight':
|
|
index += this.conf.visibleItems;
|
|
break;
|
|
default:
|
|
index = index;
|
|
}
|
|
}
|
|
else {
|
|
index = keyword;
|
|
}
|
|
if (check != false)
|
|
index = this._checkIndex(index);
|
|
|
|
return index;
|
|
},
|
|
|
|
|
|
_setCaptionLabel: function (index) {
|
|
if(this.Position && !this.Slider.locked)
|
|
this.Position.setLabel(index);
|
|
this._setGlobalCaption();
|
|
},
|
|
|
|
|
|
/*
|
|
* ==================== public methods ====================
|
|
*/
|
|
getAddOnConf: function(name) {
|
|
return ContentFlowGlobal.getAddOnConf(name);
|
|
},
|
|
|
|
setAddOnConf: function(name, conf) {
|
|
ContentFlowGlobal.setAddOnConf(name, conf);
|
|
},
|
|
|
|
|
|
/*
|
|
* calls _init() if ContentFlow has not been initialized before
|
|
* needed if ContentFlow is not automatically initialized on window.load
|
|
*/
|
|
init: function () {
|
|
if(this.isInit) return;
|
|
this._init();
|
|
},
|
|
|
|
/*
|
|
* parses configuration object and initializes configuration values
|
|
*/
|
|
setConfig: function(config) {
|
|
if (!config) return;
|
|
var dC = this._defaultConf;
|
|
for (var option in config) {
|
|
if (dC[option] == "undefined" ) continue;
|
|
switch (option) {
|
|
case "scrollInFrom":
|
|
case "startItem":
|
|
if (typeof(config[option]) == "number" || typeof(config[option]) == "string") {
|
|
//this["_"+option] = config[option];
|
|
this.conf[option] = config[option];
|
|
}
|
|
break;
|
|
default:
|
|
if (typeof(dC[option] == config[option])) {
|
|
//this["_"+option] = config[option];
|
|
if (typeof config[option] == "function") {
|
|
this.conf[option] = config[option].bind(this);
|
|
}
|
|
else {
|
|
this.conf[option] = config[option];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
switch (this.conf.reflectionColor) {
|
|
case this.conf.reflectionColor.search(/#[0-9a-fA-F]{6}/)>= 0?this.conf.reflectionColor:this.conf.reflectionColor+"x":
|
|
this._reflectionColorRGB = {
|
|
hR: this.conf.reflectionColor.slice(1,3),
|
|
hG: this.conf.reflectionColor.slice(3,5),
|
|
hB: this.conf.reflectionColor.slice(5,7),
|
|
iR: parseInt(this.conf.reflectionColor.slice(1,3), 16),
|
|
iG: parseInt(this.conf.reflectionColor.slice(3,5), 16),
|
|
iB: parseInt(this.conf.reflectionColor.slice(5,7), 16)
|
|
};
|
|
break;
|
|
case "none":
|
|
case "transparent":
|
|
default:
|
|
this._reflectionColor = "transparent";
|
|
this._reflectionColorRGB = {
|
|
hR: 0, hG: 0, hB:0,
|
|
iR: 0, iG: 0, iB:0
|
|
};
|
|
break;
|
|
}
|
|
if (this.items) {
|
|
if (this.conf.visibleItems < 0)
|
|
this.conf.visibleItems = Math.round(Math.sqrt(this.items.length));
|
|
this.conf.visibleItems = Math.min(this.conf.visibleItems, this.items.length - 1);
|
|
}
|
|
|
|
if (this.conf.relativeItemPosition) {
|
|
var calcRP = {
|
|
x: {
|
|
left: function(size) { return -1 },
|
|
center: function(size) { return 0 },
|
|
right: function(size) { return 1 }
|
|
},
|
|
y: {
|
|
top: function(size) { return -1 },
|
|
center: function(size) { return 0 },
|
|
bottom: function(size) { return 1 }
|
|
}
|
|
};
|
|
|
|
var iP = this.conf.relativeItemPosition;
|
|
iP = iP.replace(/above/,"top").replace(/below/,"bottom");
|
|
var x, y = null;
|
|
x = iP.match(/left|right/);
|
|
y = iP.match(/top|bottom/);
|
|
c = iP.match(/center/);
|
|
if (!x) {
|
|
if (c) x = "center";
|
|
else x = "center";
|
|
}
|
|
if (!y) {
|
|
if (c) y = "center";
|
|
else y = "top";
|
|
}
|
|
var calcX = calcRP.x[x];
|
|
var calcY = calcRP.y[y];
|
|
this.conf.calcRelativeItemPosition = function (item) {
|
|
var x = calcX(item.size);
|
|
var y = calcY(item.size);
|
|
return {x: x, y: y};
|
|
};
|
|
this.conf.relativeItemPosition = null;
|
|
}
|
|
|
|
if (this._reflectionType && this._reflectionType != "clientside") {
|
|
this.conf.reflectionHeight = 0;
|
|
}
|
|
|
|
},
|
|
|
|
getItem: function (index) {
|
|
return this.items[this._checkIndex(Math.round(index))];
|
|
},
|
|
|
|
/*
|
|
* returns the index number of the active item
|
|
*/
|
|
getActiveItem: function() {
|
|
return this._activeItem;
|
|
},
|
|
|
|
/*
|
|
* returns the number of items the flow contains
|
|
*/
|
|
getNumberOfItems: function () {
|
|
return this.items.length;
|
|
},
|
|
|
|
/*
|
|
* reinitializes sizes.
|
|
* called on window.resize
|
|
*/
|
|
resize: function () {
|
|
this._initSizes();
|
|
this._initStep();
|
|
},
|
|
|
|
/*
|
|
* scrolls flow to item i
|
|
*/
|
|
moveToPosition: function (p, holdPos) {
|
|
if (!this.conf.circularFlow) p = this._checkIndex(p);
|
|
this._targetPosition = p;
|
|
this.conf.onMoveTo(this._getItemByPosition(p));
|
|
this._initStep(false, holdPos);
|
|
},
|
|
moveToIndex: function (index) {
|
|
this._targetPosition = Math.round(this._getPositionByIndex(this._getIndexByKeyWord(index, this._activeItem.index, !this.conf.circularFlow)));
|
|
this.conf.onMoveTo(this._getItemByPosition(this._targetPosition));
|
|
this._initStep();
|
|
},
|
|
moveToItem: function (item) {
|
|
var i;
|
|
if (item.itemIndex) i = item.itemIndex;
|
|
else i = item.index;
|
|
this.moveToIndex(i);
|
|
},
|
|
moveTo: function (i) {
|
|
if (typeof i == "object") this.moveToItem(i);
|
|
else if (isNaN(i) || (i == Math.floor(i) && i < this.items.length) ) this.moveToIndex(i);
|
|
else this.moveToPosition(i);
|
|
},
|
|
|
|
/*
|
|
* initializes item and adds it at index position
|
|
*/
|
|
_addItemCue: [],
|
|
_addItemCueProcess: function (deleteFirst) {
|
|
var c = this._addItemCue;
|
|
if (deleteFirst == true)
|
|
c.shift();
|
|
if (c.length > 0 && ! c[0].p) {
|
|
c[0].p = true;
|
|
var self = this;
|
|
var t = c.length > 5 ? 1 : 40;
|
|
window.setTimeout(function () { self._addItem(c[0].el, c[0].i)}, t) ;
|
|
}
|
|
},
|
|
addItem: function(el, index) {
|
|
this._addItemCue.push({ el: el, i: index, p: false});
|
|
if (this._addItemCue.length == 1)
|
|
this._addItemCueProcess();
|
|
},
|
|
|
|
_addItem: function(el, index) {
|
|
if (typeof index == "string") {
|
|
switch (index) {
|
|
case "first":
|
|
case "start":
|
|
index = 0;
|
|
break;
|
|
case "last":
|
|
case "end":
|
|
index = isNaN(this.itemsLastIndex) ? 0 : this.itemsLastIndex;
|
|
index += 1;
|
|
break;
|
|
default:
|
|
index = this._getIndexByKeyWord(index);
|
|
}
|
|
}
|
|
|
|
index = Math.max(index, 0);
|
|
index = Math.min(index, this.itemsLastIndex + 1);
|
|
index = isNaN(index) ? 0 : index;
|
|
|
|
this.Flow.appendChild(el);
|
|
|
|
/* init item after insertion. that way it's part of the document and all styles are applied */
|
|
var item = new ContentFlowItem(this, el, index);
|
|
if (this.items.length == 0 ) {
|
|
this.resize();
|
|
if (this.conf.circularFlow) {
|
|
item.pre = item;
|
|
item.next = item;
|
|
}
|
|
}
|
|
else {
|
|
if (index == this.itemsLastIndex + 1) {
|
|
item.pre = this.items[this.itemsLastIndex];
|
|
item.next = item.pre.next;
|
|
}
|
|
else {
|
|
item.next = this.items[index];
|
|
item.pre = item.next.pre;
|
|
}
|
|
if (item.pre) item.pre.next = item;
|
|
if (item.next) item.next.pre = item;
|
|
}
|
|
this.items.splice(index,0, item);
|
|
|
|
/* adjust item indices */
|
|
for (var i = index; i < this.items.length; i++) {
|
|
this.items[i].setIndex(i);
|
|
}
|
|
this._setLastIndex();
|
|
|
|
if (this.conf.origVisibleItems < 0) {
|
|
this.conf.visibleItems = Math.round(Math.sqrt(this.items.length));
|
|
}
|
|
this.conf.visibleItems = Math.min(this.conf.visibleItems, this.items.length - 1);
|
|
|
|
/* adjust targetItem, currentPos so that current view does not change*/
|
|
if (Math.round(this._getPositionByIndex(index)) <= Math.round(this._targetPosition)) {
|
|
this._targetPosition++;
|
|
if (!this.conf.circularFlow)
|
|
this._targetPosition = Math.min(this._targetPosition, this.itemsLastIndex);
|
|
}
|
|
if (this._getPositionByIndex(index) <= this._currentPosition) {
|
|
this._currentPosition++;
|
|
if (!this.conf.circularFlow)
|
|
this._currentPosition = Math.min(this._currentPosition, this.itemsLastIndex);
|
|
}
|
|
|
|
// avoid display errors (wrong sizing)
|
|
var CF = this;
|
|
window.setTimeout(function () {
|
|
if(CF.items.length == 1 ) {
|
|
CF._currentPosition = -0.01;
|
|
CF._targetPosition = 0;
|
|
CF.resize();
|
|
}
|
|
else {
|
|
CF._initStep();
|
|
}
|
|
}, 100);
|
|
|
|
return index;
|
|
|
|
},
|
|
|
|
/*
|
|
* removes item at index position, cleans it up and returns it
|
|
*/
|
|
rmItem: function(index) {
|
|
if (index == "undefined") index = this._activeItem.index;
|
|
index = this._getIndexByKeyWord(index);
|
|
if (!this.items[index]) return null;
|
|
|
|
var item = this.items[index];
|
|
|
|
if (item.pre) item.pre.next = item.next;
|
|
if (item.next) item.next.pre = item.pre;
|
|
this.items.splice(index,1);
|
|
|
|
/* adjust item indices */
|
|
for (var i = index ; i < this.items.length; i++) {
|
|
this.items[i].setIndex(i);
|
|
}
|
|
this._setLastIndex();
|
|
|
|
/* adjust targetItem, currentPos and activeItem so that current view does not change*/
|
|
if (Math.round(this._getPositionByIndex(index)) < Math.round(this._targetPosition)) {
|
|
this._targetPosition--;
|
|
if (!this.conf.circularFlow)
|
|
this._targetPosition = this._checkIndex(this._targetPosition);
|
|
}
|
|
if (this._getPositionByIndex(index) < this._currentPosition) {
|
|
this._currentPosition--;
|
|
if (!this.conf.circularFlow)
|
|
this._currentPosition = this._checkIndex(this._currentPosition);
|
|
}
|
|
this._activeItem = this._getItemByPosition(this._currentPosition);
|
|
|
|
/* remove item from DOM tree, take the next step and return removed item */
|
|
var removedItem = item.element.parentNode.removeChild(item.element);
|
|
// avoid display errors (wrong sizing)
|
|
var CF = this;
|
|
window.setTimeout(function () { CF._initStep() }, 10);
|
|
return removedItem;
|
|
|
|
},
|
|
|
|
|
|
/*
|
|
* ==================== initialization ====================
|
|
*/
|
|
|
|
|
|
/* -------------------- main init -------------------- */
|
|
_init: function () {
|
|
|
|
if (typeof(this.Container) == 'string') { // no node
|
|
var container = document.getElementById(this.Container);
|
|
if (container) {
|
|
this.Container = container;
|
|
} else {
|
|
throw ('ContentFlow ERROR: No element with id \''+this.Container+'\' found!');
|
|
return;
|
|
}
|
|
}
|
|
|
|
/* ---------- reserve CSS namespace */
|
|
|
|
$CF(this.Container).addClassName('ContentFlow');
|
|
|
|
/* ---------- detect GUI elements */
|
|
var flow = $CF(this.Container).getChildrenByClassName('flow')[0];
|
|
if (!flow) {
|
|
throw ('ContentFlow ERROR: No element with class\'flow\' found!');
|
|
return;
|
|
}
|
|
this.Flow = new ContentFlowGUIElement(this, flow);
|
|
|
|
var scrollbar = this.Container.getChildrenByClassName('scrollbar')[0];
|
|
if (scrollbar) {
|
|
this.Scrollbar = new ContentFlowGUIElement(this, scrollbar);
|
|
var slider = this.Scrollbar.getChildrenByClassName('slider')[0];
|
|
if (slider) {
|
|
this.Slider = new ContentFlowGUIElement(this, slider);
|
|
var position = this.Slider.getChildrenByClassName('position')[0];
|
|
if (position) {
|
|
this.Position = new ContentFlowGUIElement(this, position);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/* ---------- init configuration */
|
|
this.setConfig(this._defaultConf);
|
|
this._initAddOns(); /* init AddOns */
|
|
this.setConfig(this._userConf);
|
|
|
|
this._initSizes(); // ......
|
|
|
|
|
|
/* ---------- init item lists ---------- */
|
|
var items = this.Flow.getChildrenByClassName('item');
|
|
|
|
this.items = new Array();
|
|
for (var i=0; i<items.length; i++) {
|
|
var item = this.items[i] = new ContentFlowItem(this, items[i], i);
|
|
if (i > 0) {
|
|
item.pre = this.items[i-1];
|
|
item.pre.next = item;
|
|
}
|
|
}
|
|
this._setLastIndex();
|
|
if (this.conf.circularFlow && this.items.length > 0) {
|
|
var s = this.items[0];
|
|
s.pre = this.items[this.items.length-1];
|
|
s.pre.next = s;
|
|
}
|
|
|
|
/* ---------- init GUI */
|
|
this._initGUI();
|
|
|
|
/* ---------- init start parameters ---------- */
|
|
if (this._activeElement != "content")
|
|
this._activeElement = "element";
|
|
|
|
this.conf.origVisibleItems = this.conf.visibleItems;
|
|
if (this.conf.visibleItems < 0) {
|
|
this.conf.visibleItems = Math.round(Math.sqrt(this.items.length));
|
|
}
|
|
this.conf.visibleItems = Math.min(this.conf.visibleItems, this.items.length - 1);
|
|
|
|
this._targetPosition = this._getIndexByKeyWord(this.conf.startItem, 0);
|
|
|
|
var index = this._getIndexByKeyWord(this.conf.scrollInFrom, this._targetPosition);
|
|
switch (this.conf.scrollInFrom) {
|
|
case "next":
|
|
case "right":
|
|
index -= 0.5;
|
|
break;
|
|
case "pre":
|
|
case "previous":
|
|
case "left":
|
|
index += 0.5;
|
|
break;
|
|
}
|
|
this._currentPosition = index;
|
|
|
|
|
|
/* ---------- wait till all images are loaded or
|
|
* grace time is up to show all and take the first step
|
|
*/
|
|
var now = new Date();
|
|
var cf = this;
|
|
var timer = window.setInterval (
|
|
function() {
|
|
if ( cf._imagesToLoad == 0 || new Date() - now > cf._loadingTimeout ) {
|
|
clearInterval(timer);
|
|
|
|
cf._activeItem = cf.getItem(cf._currentPosition);
|
|
if (cf._activeItem) {
|
|
cf._activeItem.makeActive();
|
|
cf._setCaptionLabel(cf._activeItem.index);
|
|
}
|
|
|
|
cf.Flow.style.visibility = "visible"; // show flow after images are loaded
|
|
if (cf.loadIndicator) cf.loadIndicator.style.display = "none";
|
|
if (cf.Scrollbar) cf.Scrollbar.style.visibility = "visible";
|
|
|
|
cf.resize();
|
|
for (var i=0; i < cf._loadedAddOns.length; i++) {
|
|
var a = ContentFlowGlobal.AddOns[cf._loadedAddOns[i]];
|
|
if (a.methods.afterContentFlowInit)
|
|
a.methods.afterContentFlowInit(cf);
|
|
}
|
|
cf.conf.onInit();
|
|
}
|
|
}, 10
|
|
);
|
|
|
|
this.isInit = true;
|
|
|
|
},
|
|
|
|
/* ---------- init AddOns ---------- */
|
|
_initAddOns: function () {
|
|
|
|
// get an array of names of all AddOns that should be used
|
|
var loadAddOns = [];
|
|
if (this._userConf.useAddOns) {
|
|
if (typeof this._userConf.useAddOns == "string") {
|
|
loadAddOns = this._userConf.useAddOns.split(" ");
|
|
}
|
|
else if (typeof this._userConf.useAddOns == "array") {
|
|
loadAddOns = this._userConf.useAddOns;
|
|
}
|
|
}
|
|
else if (this.Container.getAttribute("useAddOns")) {
|
|
loadAddOns = this.Container.getAttribute("useAddOns").split(" ");
|
|
}
|
|
else {
|
|
loadAddOns = this.conf.useAddOns.split(' ');
|
|
}
|
|
|
|
|
|
// check the names for keywords
|
|
for (var i=0; i<loadAddOns.length; i++) {
|
|
if (loadAddOns[i] == "none") {
|
|
loadAddOns = new Array();
|
|
break;
|
|
}
|
|
else if (loadAddOns[i] == "all") {
|
|
loadAddOns = new Array();
|
|
for (var AddOn in ContentFlowGlobal.AddOns)
|
|
loadAddOns.push(AddOn);
|
|
break;
|
|
}
|
|
}
|
|
|
|
// init all AddOns that should be used and exist
|
|
for (var i=0; i<loadAddOns.length; i++) {
|
|
var AddOn = ContentFlowGlobal.AddOns[loadAddOns[i]];
|
|
if (AddOn) {
|
|
this._loadedAddOns.push(loadAddOns[i]);
|
|
AddOn._init(this);
|
|
this.Container.addClassName('ContentFlowAddOn_'+AddOn.name);
|
|
if (AddOn.methods.onloadInit)
|
|
AddOn.methods.onloadInit(this);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
|
|
_initGUI: function () {
|
|
|
|
// resize
|
|
//if (!this.Browser.iPhone) {
|
|
var resize = this.resize.bind(this);
|
|
window.addEvent('resize', resize, false);
|
|
//}
|
|
//else {
|
|
//var g = this;
|
|
//window.addEvent('resize', function () {
|
|
//g._initSizes();
|
|
//g._initStep();
|
|
//} , false);
|
|
//}
|
|
|
|
// pre and next buttons
|
|
var divs = this.Container.getElementsByTagName('div');
|
|
for (var i = 0; i < divs.length; i++) {
|
|
if ($CF(divs[i]).hasClassName('preButton')) {
|
|
var pre = divs[i];
|
|
var mt = this.conf.onclickPreButton;
|
|
pre.addEvent('click', mt, false);
|
|
}
|
|
else if (divs[i].hasClassName('nextButton')) {
|
|
var next = divs[i];
|
|
var mt = this.conf.onclickNextButton;
|
|
next.addEvent('click', mt, false);
|
|
}
|
|
}
|
|
|
|
// Container object
|
|
// mousewheel
|
|
if (this.conf.scrollWheelSpeed != 0) {
|
|
var wheel = this._wheel.bind(this);
|
|
if(window.addEventListener) this.Container.addEventListener('DOMMouseScroll', wheel, false);
|
|
this.Container.onmousewheel = wheel;
|
|
}
|
|
|
|
// key strokes
|
|
var key = this._keyStroke.bind(this);
|
|
if (this.conf.keys && !this.Browser.iPhone) {
|
|
if (document.addEventListener) {
|
|
if (!this.Browser.Opera) {
|
|
var mouseoverCheck = document.createElement('div');
|
|
mouseoverCheck.addClassName('mouseoverCheckElement');
|
|
this.Container.appendChild(mouseoverCheck);
|
|
|
|
if (this.Browser.WebKit) {
|
|
document.body.addEvent('keydown', function (event) {
|
|
//(if (mouseoverCheck.offsetLeft > 0) key(event) ;
|
|
key(event);
|
|
});
|
|
} else {
|
|
window.addEvent('keydown', function (event) {
|
|
if (mouseoverCheck.offsetLeft > 0) key(event) ;
|
|
});
|
|
}
|
|
}
|
|
else {
|
|
this.Container.addEvent('keydown', key);
|
|
}
|
|
}
|
|
else {
|
|
this.Container.onkeydown = key;
|
|
}
|
|
}
|
|
|
|
|
|
// Flow object
|
|
if (this.conf.flowDragFriction > 0) {
|
|
var onDrag = function (event) {
|
|
var e = event;
|
|
if (event.touches) e = event.touches[0];
|
|
var mouseX = e.clientX;
|
|
var mouseY = e.clientY;
|
|
|
|
if (this.conf.verticalFlow) {
|
|
var dist = mouseY - this.Flow.mouseY; // px / or px per sec because _dragFlow wil be called in shorter intervalls if draged fast
|
|
var dim = this.Flow.dimensions.height;
|
|
}
|
|
else {
|
|
var dist = mouseX - this.Flow.mouseX; // px / or px per sec because _dragFlow wil be called in shorter intervalls if draged fast
|
|
var dim = this.Flow.dimensions.width;
|
|
}
|
|
var itemDist = (dist / dim )* (2*this.conf.visibleItems +1); // items
|
|
var target = this._currentPosition - itemDist * 2*this.conf.visibleItems / this.conf.flowDragFriction ;
|
|
|
|
this.Flow.mouseX = mouseX;
|
|
this.Flow.mouseY = mouseY;
|
|
|
|
this.moveToPosition(target, true);
|
|
}.bind(this);
|
|
|
|
var beforeDrag = function () {};
|
|
|
|
var afterDrag = function (event) {
|
|
var t = Math.round(this._targetPosition);
|
|
if (Math.abs( t - this._currentPosition) > 0.001 )
|
|
this.moveToPosition(t);
|
|
}.bind(this);
|
|
|
|
|
|
this.Flow.makeDraggable(onDrag, beforeDrag, afterDrag);
|
|
}
|
|
|
|
// Scrollbar Object
|
|
if (this.Scrollbar) {
|
|
var click = function(event) {
|
|
if (!event) var event = window.event;
|
|
|
|
if (!this.Scrollbar.clickLocked) {
|
|
var mouseX = event.clientX;
|
|
var positionOnScrollbar = mouseX - this.Scrollbar.position.left;
|
|
var targetIndex = Math.round(positionOnScrollbar/this.Scrollbar.dimensions.width * this.itemsLastIndex);
|
|
this.moveToIndex(targetIndex);
|
|
}
|
|
else
|
|
this.Scrollbar.clickLocked = false;
|
|
}.bind(this);
|
|
this.Scrollbar.addObserver('click', click);
|
|
}
|
|
|
|
// Slider Object
|
|
if (this.Slider) {
|
|
|
|
if (this.Browser.IE6) {
|
|
var virtualSlider = document.createElement('div');
|
|
virtualSlider.className = 'virtualSlider';
|
|
this.Slider.appendChild(virtualSlider);
|
|
}
|
|
|
|
// position slider on scrollbar
|
|
this.Slider.setPosition = function (relPos) {
|
|
relPos = relPos - Math.floor(relPos) + this._getIndexByPosition(Math.floor(relPos));
|
|
if (Math.round(relPos) < 0)
|
|
relPos = this.itemsLastIndex;
|
|
else if (relPos <= 0)
|
|
relPos = 0;
|
|
else if (Math.round(relPos) > this.itemsLastIndex)
|
|
relPos = 0;
|
|
else if (relPos >= this.itemsLastIndex)
|
|
relPos = this.itemsLastIndex;
|
|
|
|
|
|
if (this.items.length > 1) {
|
|
var sPos = (relPos / this.itemsLastIndex)* this.Scrollbar.dimensions.width;
|
|
} else {
|
|
var sPos = 0.5 * this.Scrollbar.dimensions.width;
|
|
}
|
|
this.Slider.style.left = sPos - this.Slider.center.x+ "px";
|
|
this.Slider.style.top = this.Scrollbar.center.y - this.Slider.center.y +"px";
|
|
|
|
}.bind(this);
|
|
|
|
// make slider draggable
|
|
var beforeDrag = function (event) {
|
|
this.Scrollbar.clickLocked = true;
|
|
}.bind(this);
|
|
|
|
var onDrag = function (event) {
|
|
var e = event;
|
|
if (event.touches) e = event.touches[0];
|
|
var selectedIndex = this._checkIndex((e.clientX - this.Scrollbar.position.left) / this.Scrollbar.dimensions.width * this.itemsLastIndex);
|
|
this._targetPosition = this._getPositionByIndex(selectedIndex);
|
|
this.Slider.setPosition(selectedIndex);
|
|
if (this.Position) this.Position.setLabel(selectedIndex);
|
|
this._initStep(true, true);
|
|
}.bind(this);
|
|
|
|
var afterDrag = function (event) {
|
|
this._targetPosition = Math.round(this._targetPosition);
|
|
this.conf.onMoveTo(this._getItemByPosition(this._targetPosition));
|
|
this._initStep(true);
|
|
}.bind(this);
|
|
|
|
this.Slider.makeDraggable(onDrag, beforeDrag, afterDrag);
|
|
}
|
|
|
|
|
|
// Position object
|
|
if (this.Position) {
|
|
this.Position.setLabel = function (index) {
|
|
index = this._checkIndex(Math.round(index));
|
|
if (this.items && this.items[index].label)
|
|
this.Position.innerHTML = this.items[index].label.innerHTML;
|
|
else
|
|
this.Position.innerHTML = index + 1;
|
|
}.bind(this);
|
|
}
|
|
|
|
|
|
this.globalCaption = this.Container.getChildrenByClassName('globalCaption')[0];
|
|
this.loadIndicator = this.Container.getChildrenByClassName('loadIndicator')[0];
|
|
},
|
|
|
|
/* ---------- init element sizes ---------- */
|
|
_initSizes: function (x) {
|
|
//if (this.Browser.Konqueror4 && x != true) {
|
|
//var t = this;
|
|
//window.setTimeout( function () { t._initSizes(true) }, 0);
|
|
//return;
|
|
//}
|
|
|
|
// sets this.maxHeight
|
|
this._initMaxHeight();
|
|
|
|
var scrollbarHeight = this._initScrollbarSize();
|
|
|
|
// reduce maxHeit if container has a fixed height
|
|
if (!this.conf.verticalFlow && this.Container.style.height && this.Container.style.height != "auto")
|
|
this.maxHeight -= scrollbarHeight;
|
|
|
|
if (!this._activeItem) return;
|
|
|
|
var mFS = this._findBiggestItem();
|
|
|
|
var pF = this.Flow.findPos();
|
|
|
|
/* set height / width of flow */
|
|
if (this.conf.verticalFlow) {
|
|
this.Flow.style.width = mFS.width.width+"px";
|
|
this.Flow.style.height =3* mFS.width.width * (1 + this.conf.reflectionHeight + this.conf.reflectionGap) + "px";
|
|
} else {
|
|
this.Flow.style.height = mFS.height.height +(mFS.height.top - pF.top)+"px";
|
|
}
|
|
|
|
/* remove gap */
|
|
var s = this.conf.verticalFlow ? mFS.width.width : mFS.height.height;
|
|
var cH = s /(1 + this.conf.reflectionHeight + this.conf.reflectionGap);
|
|
this.Flow.style.marginBottom = - (s - cH)+ "px";
|
|
|
|
this.Flow.dimensions = this.Flow.getDimensions();
|
|
|
|
if (!this.Browser.IE6) {
|
|
if (this.conf.verticalFlow && this.Container.clientWidth < this.Flow.dimensions.width) {
|
|
//this.Container.style.width = this.Flow.dimensions.width+"px";
|
|
}
|
|
else if (this.Container.clientHeight < this.Flow.dimensions.height) {
|
|
this.Container.style.height = this.Flow.dimensions.height+"px";
|
|
}
|
|
}
|
|
|
|
if (this.conf.verticalFlow) {
|
|
this.Flow.center = {x: this.Flow.dimensions.height/2, y:mFS.width.width/2};
|
|
} else {
|
|
this.Flow.center = {x: this.Flow.dimensions.width/2, y:mFS.height.height/2};
|
|
}
|
|
|
|
},
|
|
|
|
/* -------------------------------------------------------------------------------- */
|
|
|
|
_initScrollbarSize: function () {
|
|
var SB;
|
|
var SL;
|
|
var PO;
|
|
if (SB = this.Scrollbar) {
|
|
SB.setDimensions();
|
|
var scrollbarHeight = SB.dimensions.height;
|
|
|
|
if (SL = this.Slider) {
|
|
SL.setDimensions();
|
|
scrollbarHeight += SL.dimensions.height;
|
|
|
|
if (PO = this.Position) {
|
|
|
|
var oldLabel = PO.innerHTML;
|
|
var maxH = maxW = 0;
|
|
PO.style.width = "auto";
|
|
|
|
if (this.items) {
|
|
for (var i=0; i < this.items.length; i++) {
|
|
var item = this.items[i];
|
|
if (item.label) {
|
|
PO.innerHTML = item.label.innerHTML;
|
|
}
|
|
else {
|
|
PO.innerHTML = item.index;
|
|
}
|
|
var h = PO.clientHeight;
|
|
var w = PO.clientWidth;
|
|
if ( h > maxH) maxH = h;
|
|
if ( w > maxW) maxW = w;
|
|
}
|
|
}
|
|
else {
|
|
PO.innerHTML = " ";
|
|
maxH = PO.clientHeight;
|
|
maxW = PO.clientWidth;
|
|
}
|
|
|
|
PO.innerHTML = oldLabel;
|
|
|
|
PO.setDimensions();
|
|
|
|
PO.style.width = maxW +"px";
|
|
PO.style.left = (SL.dimensions.width - maxW)/2 + "px";
|
|
|
|
var extraSpace = PO.position.top - SL.position.top;
|
|
if (extraSpace > 0) {
|
|
extraSpace += -SB.dimensions.height + maxH;
|
|
SB.style.marginBottom = extraSpace + "px";
|
|
}
|
|
else {
|
|
extraSpace *= -1;
|
|
SB.style.marginTop = extraSpace + "px";
|
|
}
|
|
scrollbarHeight += extraSpace;
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
scrollbarHeight = 0;
|
|
}
|
|
|
|
return scrollbarHeight;
|
|
|
|
},
|
|
|
|
/* -------------------------------------------------------------------------------- */
|
|
|
|
_initMaxHeight: function () {
|
|
|
|
if (this.conf.verticalFlow) {
|
|
var proportion = screen.width/screen.height;
|
|
var Csd = this.Container.style.width;
|
|
var Cdim = this.Container.clientWidth;
|
|
var Fsd = this.Flow.style.width;
|
|
var Fdim = this.Flow.clientWidth;
|
|
var Fdim_o = this.Flow.clientHeight;
|
|
} else {
|
|
var proportion = screen.height/screen.width;
|
|
var Csd = this.Container.style.height;
|
|
var Cdim = this.Container.clientHeight;
|
|
var Fsd = this.Flow.style.height;
|
|
var Fdim = this.Flow.clientHeight;
|
|
var Fdim_o = this.Flow.clientWidth;
|
|
}
|
|
|
|
// set height of container and flow
|
|
if (this.ContainerOldDim)
|
|
Csd = this.ContainerOldDim;
|
|
if (this.FlowOldDim)
|
|
Fsd = this.FlowOldDim;
|
|
|
|
this.ContainerOldDim = "auto";
|
|
this.FlowOldDim = "auto";
|
|
|
|
|
|
/* calc maxHeight */
|
|
if (this.conf.maxItemHeight <= 0) {
|
|
|
|
this.maxHeight = Fdim_o / 3 * proportion/1 * this.conf.scaleFactor; // divided by 3 because of left/center/right, yes it's a magic number
|
|
|
|
if (this.conf.verticalFlow && (this.maxHeight == 0 || this.maxHeight > Fdim)) {
|
|
this.maxHeight = Fdim;
|
|
}
|
|
|
|
if (Csd && Csd != "auto") {
|
|
var gap = this.conf.verticalFlow ? 0 : this.conf.reflectionGap;
|
|
var rH = this.conf.verticalFlow ? 0 : this.conf.reflectionHeight;
|
|
this.maxHeight = Cdim/ (this.conf.scaleFactor* (1 + rH + gap));
|
|
this.ContainerOldDim = Csd;
|
|
}
|
|
else if (Fsd && Fsd != "auto") {
|
|
var gap = this.conf.verticalFlow ? 0 : this.conf.reflectionGap;
|
|
this.maxHeight = Fdim / (this.conf.scaleFactor* (1 + this.conf.reflectionHeight + gap));
|
|
this.FlowOldDim = Fsd;
|
|
}
|
|
}
|
|
else {
|
|
this.maxHeight = this.conf.maxItemHeight;
|
|
}
|
|
},
|
|
|
|
/* -------------------------------------------------------------------------------- */
|
|
|
|
_findBiggestItem: function () {
|
|
|
|
var currentItem = this._activeItem;
|
|
|
|
var itemP = currentItem.pre;
|
|
var itemN = currentItem.next;
|
|
var mFS = maxFlowSize = {
|
|
width: { width: 0, left: 0, height:0, top: 0, item: null, rI: 0 },
|
|
height: { width: 0, left: 0, height:0, top: 0, item: null, rI: 0 }
|
|
}
|
|
|
|
|
|
var checkMax = function (item, rI) {
|
|
var el = item.element;
|
|
el.style.display = "block";
|
|
var p = el.findPos();
|
|
var h = el.clientHeight;
|
|
var w = el.clientWidth;
|
|
if (h + p.top >= mFS.height.height + mFS.height.top) {
|
|
mFS.height.height = h;
|
|
mFS.height.top = p.top;
|
|
mFS.height.item = item;
|
|
mFS.height.rI = rI;
|
|
}
|
|
if (w + p.left >= mFS.width.width + mFS.width.left) {
|
|
mFS.width.width = w;
|
|
mFS.width.left = p.left;
|
|
mFS.width.item = item;
|
|
mFS.width.rI = rI;
|
|
}
|
|
el.style.display = "none";
|
|
}
|
|
|
|
var ocp = this._currentPosition;
|
|
this._currentPosition = this.conf.visibleItems+1;
|
|
|
|
// find the position with highest y-value
|
|
for (var i=-this.conf.visibleItems; i <= this.conf.visibleItems; i++) {
|
|
currentItem.element.style.display = "none";
|
|
this._positionItem(currentItem, i);
|
|
checkMax(currentItem, i);
|
|
}
|
|
|
|
// find the biggest item
|
|
var index = mFS.height.rI;
|
|
for (var i=0; i < this.items.length; i++) {
|
|
var item = this.items[i];
|
|
item.element.style.display = "none";
|
|
this._positionItem(item, index);
|
|
checkMax(item, index);
|
|
}
|
|
|
|
this._currentPosition = ocp;
|
|
|
|
return mFS
|
|
},
|
|
|
|
|
|
|
|
/*
|
|
* ==================== Key strok ====================
|
|
*/
|
|
|
|
/*
|
|
* handles keystroke events
|
|
*/
|
|
_keyStroke: function(event) {
|
|
if(!event) var event = window.event;
|
|
|
|
if (event.which) {
|
|
var keyCode = event.which;
|
|
} else if (event.keyCode) {
|
|
var keyCode = event.keyCode;
|
|
}
|
|
|
|
if (this.conf.keys[keyCode]) {
|
|
this.conf.keys[keyCode].bind(this)();
|
|
return Event.stop(event);
|
|
}
|
|
else {
|
|
return true;
|
|
}
|
|
},
|
|
|
|
/*
|
|
* ==================== mouse wheel ====================
|
|
* Event handler for mouse wheel event
|
|
* http://adomas.org/javascript-mouse-wheel/
|
|
*/
|
|
|
|
_wheel: function (event) {
|
|
if (!event) var event = window.event; // MS
|
|
|
|
var delta = 0;
|
|
if (event.wheelDelta) {
|
|
delta = event.wheelDelta/120;
|
|
} else if (event.detail) {
|
|
delta = -event.detail/3;
|
|
}
|
|
|
|
if (delta) {
|
|
var target = this._targetPosition ;
|
|
if (delta < 0 ) {
|
|
target += (1 * this.conf.scrollWheelSpeed);
|
|
} else {
|
|
target -= (1 * this.conf.scrollWheelSpeed);
|
|
}
|
|
this.moveToPosition(Math.round(target));
|
|
}
|
|
|
|
return Event.stop(event);
|
|
},
|
|
|
|
|
|
/*
|
|
* ==================== set global Caption ====================
|
|
*/
|
|
_setGlobalCaption: function () {
|
|
if (this.globalCaption) {
|
|
this.globalCaption.innerHTML = '';
|
|
if(this._activeItem && this._activeItem.caption)
|
|
this.globalCaption.appendChild(this._activeItem.caption.cloneNode(true));
|
|
}
|
|
this.conf.onclickActiveItem(this._activeItem);
|
|
},
|
|
|
|
/*
|
|
* ==================== move items ====================
|
|
*/
|
|
|
|
/*
|
|
* intend to make a step
|
|
*/
|
|
_initStep: function (holdSlider, holdPos) {
|
|
if (this.Slider) {
|
|
if(holdSlider) {
|
|
this.Slider.locked = true;
|
|
} else {
|
|
this.Slider.locked = false;
|
|
}
|
|
}
|
|
this._holdPos = holdPos == true ? true : false;
|
|
if (!this._stepLock) {
|
|
this._stepLock = true;
|
|
this._step();
|
|
}
|
|
},
|
|
|
|
/*
|
|
* make a step
|
|
*/
|
|
_step: function () {
|
|
|
|
var diff = this._targetPosition - this._currentPosition;
|
|
var absDiff = Math.abs(diff);
|
|
if ( absDiff > 0.001) { // till activeItem is nearly at position 0
|
|
|
|
this._currentPosition += this.conf.flowSpeedFactor * this.conf.calcStepWidth(diff, absDiff, this.items.length, this.conf.visibleItems);
|
|
|
|
var AI = this.items[(this._getIndexByPosition(this._currentPosition))];
|
|
|
|
if (AI && AI != this._activeItem) {
|
|
if (this._activeItem) this._activeItem.makeInactive();
|
|
this._activeItem = AI;
|
|
this._activeItem.makeActive();
|
|
this._setCaptionLabel(this._activeItem.index);
|
|
if (Math.abs(this._targetPosition - this._currentPosition) <= 0.5 ) this.conf.onReachTarget(this._activeItem);
|
|
}
|
|
|
|
this._positionItems();
|
|
|
|
var st = this._step.bind(this);
|
|
window.setTimeout(st,this._millisecondsPerStep);
|
|
|
|
} else if (!this._holdPos) {
|
|
if (this.Slider) this.Slider.locked = false;
|
|
this._currentPosition = Math.round(this._currentPosition);
|
|
if(this.Position && !this.Slider.locked && this._activeItem) {
|
|
this._setCaptionLabel(this._activeItem.index);
|
|
}
|
|
this._positionItems();
|
|
this._stepLock = false;
|
|
} else {
|
|
this._stepLock = false;
|
|
}
|
|
|
|
if (this.Slider && !this.Slider.locked) {
|
|
this.Slider.setPosition(this._currentPosition);
|
|
}
|
|
},
|
|
|
|
|
|
|
|
/* ------------------------------------------------------------------------------------------------------ */
|
|
|
|
/*
|
|
* position items
|
|
*/
|
|
_positionItems: function () {
|
|
|
|
if (this._lastStart) {
|
|
var item = this._lastStart;
|
|
while (item) {
|
|
item.element.style.display="none";
|
|
item = item.next;
|
|
if (item == this._lastStart) break;
|
|
if (item && item.pre == this._lastEnd) break;
|
|
}
|
|
}
|
|
else {
|
|
this._lastStart = this._activeItem;
|
|
}
|
|
|
|
if (!this._activeItem) return;
|
|
var currentItem = this._activeItem;
|
|
var itemP = currentItem.pre;
|
|
var itemN = currentItem.next;
|
|
|
|
this._positionItem(currentItem, 0);
|
|
for (var i=1; i <= this.conf.visibleItems && 2*i < this.items.length ; i++) {
|
|
if (itemP) {
|
|
this._positionItem(itemP, -i);
|
|
this._lastStart = itemP;
|
|
itemP = itemP.pre;
|
|
}
|
|
if (itemN) {
|
|
this._positionItem(itemN, i);
|
|
this._lastEnd = itemN;
|
|
itemN = itemN.next;
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
_positionItem: function (item, relativeIndex) {
|
|
|
|
var conf = this.conf;
|
|
var vF = conf.verticalFlow;
|
|
|
|
var els = item.element.style;
|
|
//els.display =" none";
|
|
//if (els.display != "none") return;
|
|
|
|
/* Index and position relative to activeItem */
|
|
var p = item.position = this._currentPosition + relativeIndex;
|
|
var relativePosition = item.relativePosition = Math.round(p) - this._currentPosition;
|
|
var relativePositionNormed = item.relativePositionNormed = conf.visibleItems > 0 ? relativePosition/conf.visibleItems : 0;
|
|
var side = relativePosition < 0 ? -1 : 1;
|
|
side *= relativePosition == 0 ? 0 : 1;
|
|
item.side = side;
|
|
|
|
var size = conf.calcSize(item);
|
|
size.height = Math.max(size.height, 0);
|
|
size.width = Math.max(size.width, 0);
|
|
if (item.content.origProportion) size = this._scaleImageSize(item, size);
|
|
item.size = size;
|
|
|
|
var coords = item.coordinates = conf.calcCoordinates (item);
|
|
var relItemPos = item.relativeItemPosition = conf.calcRelativeItemPosition(item);
|
|
var zIndex = item.zIndex = conf.calcZIndex (item);
|
|
var fontSize = item.fontSize = conf.calcFontSize (item);
|
|
var opacity = item.opacity = conf.calcOpacity(item);
|
|
|
|
size.height *= this.maxHeight;
|
|
size.width *= this.maxHeight;
|
|
|
|
/* set position */
|
|
var sA = vF ? size.height : size.width;
|
|
var sB = vF ? size.width : size.height;
|
|
var pX = this.Flow.center.x * ( 1 + coords.x ) + (relItemPos.x - 1) * sA/2;
|
|
var pY = this.maxHeight/2 * ( 1 + coords.y ) + (relItemPos.y - 1 )* sB/2;
|
|
els.left = (vF ? pY : pX)+"px";
|
|
els.top = (vF ? pX : pY)+"px";
|
|
|
|
this._setItemSize(item, size);
|
|
|
|
/* set opacity */
|
|
if (conf.endOpacity != 1) {
|
|
this._setItemOpacity(item);
|
|
}
|
|
|
|
/* set font size */
|
|
if (!this.Browser.IE) els.fontSize = (fontSize * 100) +"%";
|
|
|
|
/* set z-index */
|
|
els.zIndex = 32768 + Math.round(zIndex * this.items.length); // just for FF
|
|
|
|
conf.onDrawItem(item);
|
|
|
|
els.visibility = "visible";
|
|
els.display = "block";
|
|
},
|
|
|
|
_scaleImageSize: function (item, size, max) {
|
|
var sFL = this.conf.scaleFactorLandscape;
|
|
var sFP = this.conf.scaleFactorPortrait;
|
|
var vF = this.conf.verticalFlow;
|
|
var prop = item.content.origProportion;
|
|
var width = size.width;
|
|
var height = size.height;
|
|
var c = item.content;
|
|
|
|
if (vF) {
|
|
if (prop <= 1) {
|
|
if (sFL != "max" && sFL != 1) {
|
|
height *= sFL;
|
|
width = Math.min(height * prop, max ? max : 1 );
|
|
}
|
|
height = width / prop;
|
|
}
|
|
else if (prop > 1) {
|
|
if (sFP == "max") {
|
|
height = max ? max : 1;
|
|
}
|
|
else if (sFP != 1) {
|
|
width *= sFP;
|
|
height = Math.min(width/prop, max ? max : 1)
|
|
}
|
|
else {
|
|
height = width / prop;
|
|
}
|
|
width = height * prop;
|
|
}
|
|
}
|
|
else {
|
|
if (prop > 1) {
|
|
if (sFL != "max" && sFL != 1) {
|
|
width *= sFL;
|
|
height = Math.min(width / prop, max ? max : 1);
|
|
}
|
|
width = height * prop;
|
|
}
|
|
else if (prop <= 1) {
|
|
if (sFP == "max") {
|
|
width = max ? max : 1;
|
|
}
|
|
else if (sFP != 1) {
|
|
height *= sFP;
|
|
width = Math.min(height*prop, max ? max : 1);
|
|
}
|
|
else {
|
|
width = height * prop;
|
|
}
|
|
height = width / prop;
|
|
}
|
|
}
|
|
|
|
height = isNaN(height) ? 0 : height;
|
|
width = isNaN(width) ? 0 : width;
|
|
|
|
if (!max && this.conf.fixItemSize) {
|
|
|
|
var propS = size.width / size.height;
|
|
|
|
var max = Math.max(size.width, size.height);
|
|
var s = this._scaleImageSize(item, {width: max, height: max}, max);
|
|
|
|
if (propS < 1) {
|
|
height = s.height/size.height;
|
|
width = height * prop / propS;
|
|
}
|
|
else {
|
|
width = s.width/size.width;
|
|
height = width / prop * propS;
|
|
}
|
|
|
|
var h = height * 100;
|
|
var w = width * 100;
|
|
var mL= (1 - width)/2 * 100;
|
|
var mT= ( 1 - height ) / propS * 100 * (vF ? 0.5 : 1 );
|
|
c.style.height = h+"%";
|
|
if (item.reflection) item.reflection.style.height = h*this.conf.reflectionHeight+"%";
|
|
c.style.width = w+"%";
|
|
if (item.reflection) item.reflection.style.width = w+"%";
|
|
c.style.marginLeft = mL+"%";
|
|
if (item.reflection) item.reflection.style.marginLeft = mL+"%";
|
|
c.style.marginTop = mT+"%";
|
|
|
|
item.element.style.overflow = "hidden";
|
|
|
|
return size;
|
|
}
|
|
else {
|
|
return {width: width, height: height};
|
|
}
|
|
|
|
},
|
|
|
|
_setItemSize: (function () {
|
|
if (ContentFlowGlobal.Browser.IE) {
|
|
var _setItemSize = function (item, size) {
|
|
if (!this.conf.fixItemSize) {
|
|
item.content.style.height = size.height+"px";
|
|
}
|
|
else if (ContentFlowGlobal.Browser.IE6) {
|
|
var h = parseInt(item.content.style.height)/100;
|
|
item.content.style.height = size.height*h+"px";
|
|
var mT = parseInt(item.content.style.marginTop)/100;
|
|
item.content.style.marginTop = size.height*mT+"px";
|
|
}
|
|
if (item.reflection) {
|
|
var h = parseInt(item.content.style.height);
|
|
item.reflection.style.height = h*this.conf.reflectionHeight+"px";
|
|
item.reflection.style.marginTop = h * this.conf.reflectionGap + "px";
|
|
}
|
|
item.element.style.width = size.width +"px";
|
|
item.element.style.height = size.height*(1+this.conf.reflectionHeight+this.conf.reflectionGap)+"px";
|
|
}
|
|
}
|
|
else {
|
|
var _setItemSize = function (item, size) {
|
|
if (item.reflection) {
|
|
item.element.style.height = size.height*(1+this.conf.reflectionHeight + this.conf.reflectionGap) +"px";
|
|
item.reflection.style.marginTop = size.height * this.conf.reflectionGap + "px";
|
|
}
|
|
else if (this._reflectionWithinImage) {
|
|
item.element.style.height = size.height*(1+this.conf.reflectionHeight + this.conf.reflectionGap) +"px";
|
|
}
|
|
else {
|
|
item.element.style.height = size.height +"px";
|
|
}
|
|
item.element.style.width = size.width +"px";
|
|
}
|
|
}
|
|
return _setItemSize;
|
|
|
|
})(),
|
|
|
|
_setItemOpacity: (function () {
|
|
if (ContentFlowGlobal.Browser.IE6) {
|
|
var _setItemOpacity = function (item) {
|
|
if (item.content.origSrc && item.content.origSrc.match(/\.png$/) ) {
|
|
var s = item.content.src;
|
|
item.content.src = item.content.origSrc;
|
|
item.content.style.filter = item.content.filterString+" progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")";
|
|
item.content.src = s;
|
|
}
|
|
else {
|
|
item.content.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")";
|
|
}
|
|
if (item.reflection) item.reflection.style.filter = item.reflection.filterString+"progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")";
|
|
}
|
|
}
|
|
else if (ContentFlowGlobal.Browser.IE) {
|
|
var _setItemOpacity = function (item) { item.element.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")"; }
|
|
}
|
|
else {
|
|
var _setItemOpacity = function (item) { item.element.style.opacity = item.opacity; }
|
|
}
|
|
return _setItemOpacity;
|
|
})()
|
|
|
|
|
|
};
|
|
|
|
|
|
/* ==================== extendig javascript/DOM objects ==================== */
|
|
|
|
/*
|
|
* adds bind method to Function class
|
|
* http://www.digital-web.com/articles/scope_in_javascript/
|
|
*/
|
|
|
|
if (!Function.bind) {
|
|
Function.prototype.bind = function(obj) {
|
|
var method = this;
|
|
return function () {
|
|
return method.apply(obj, arguments);
|
|
};
|
|
};
|
|
}
|
|
|
|
|
|
/*
|
|
* extending Math object
|
|
*/
|
|
if (!Math.erf2) {
|
|
// error function (http://en.wikipedia.org/wiki/Error_function), implemented as erf(x)^2
|
|
Math.erf2 = function (x) {
|
|
var a = - (8*(Math.PI -3)/(3*Math.PI*(Math.PI -4)));
|
|
var x2 = x*x;
|
|
var f = 1 - Math.pow(Math.E, -x2 * (4/Math.PI + a*x2)/(1+a*x2));
|
|
return f;
|
|
};
|
|
}
|
|
|
|
if (!Math._2PI05) {
|
|
Math._2PI05 = Math.sqrt(2*Math.PI);
|
|
}
|
|
|
|
if (!Math.normDist) {
|
|
// normal distribution
|
|
Math.normDist = function (x, sig, mu) {
|
|
if (!sig) var sig = 1;
|
|
if (!mu) var mu = 0;
|
|
if (!x) var x = - mu;
|
|
return 1/(sig * Math._2PI05) * Math.pow(Math.E, - (x-mu)*(x-mu)/(2*sig*sig) );
|
|
};
|
|
}
|
|
|
|
if (!Math.normedNormDist) {
|
|
Math.normedNormDist = function (x, sig, mu) {
|
|
return this.normDist(x, sig, mu)/this.normDist(mu, sig, mu);
|
|
};
|
|
}
|
|
|
|
if (!Math.exp) {
|
|
Math.exp = function(x) {
|
|
return Math.pow(Math.E, x);
|
|
};
|
|
}
|
|
|
|
if (!Math.ln) {
|
|
Math.ln = Math.log;
|
|
}
|
|
|
|
if (!Math.log2) {
|
|
Math.log2 = function (x) {
|
|
return Math.log(x)/Math.LN2;
|
|
};
|
|
}
|
|
|
|
if (!Math.log10) {
|
|
Math.log10 = function (x) {
|
|
return Math.log(x)/Math.LN10;
|
|
};
|
|
}
|
|
|
|
if (!Math.logerithm) {
|
|
Math.logerithm = function (x, b) {
|
|
if (!b || b == Math.E)
|
|
return Math.log(x);
|
|
else if (b == 2)
|
|
return Math.log2(x);
|
|
else if (b == 10)
|
|
return Math.log10(x);
|
|
else
|
|
return Math.log(x)/Math.log(b);
|
|
};
|
|
}
|
|
|
|
|
|
/*
|
|
* extending Event object
|
|
*/
|
|
if (!Event) var Event = {};
|
|
|
|
if (!Event.stop) {
|
|
Event.stop = function (event) {
|
|
event.cancelBubble = true;
|
|
if (event.preventDefault) event.preventDefault();
|
|
if (event.stopPropagation) event.stopPropagation();
|
|
return false;
|
|
};
|
|
}
|
|
|
|
/*
|
|
* extending Element object
|
|
*/
|
|
if (document.all && !window.opera) {
|
|
window.$CF = function (el) {
|
|
if (typeof el == "string") {
|
|
return window.$CF(document.getElementById(el));
|
|
}
|
|
else {
|
|
if (CFElement.prototype.extend && el && !el.extend) CFElement.prototype.extend(el);
|
|
}
|
|
return el;
|
|
};
|
|
} else {
|
|
window.$CF = function (el) {
|
|
return el;
|
|
};
|
|
}
|
|
|
|
if (!window.HTMLElement) {
|
|
CFElement = {};
|
|
CFElement.prototype = {};
|
|
CFElement.prototype.extend = function (el) {
|
|
for (var method in this) {
|
|
if (!el[method]) el[method] = this[method];
|
|
}
|
|
};
|
|
}
|
|
else {
|
|
CFElement = window.HTMLElement;
|
|
}
|
|
|
|
|
|
/*
|
|
* Thanks to Peter-Paul Koch
|
|
* http://www.quirksmode.org/js/findpos.html
|
|
*/
|
|
if (!CFElement.findPos) {
|
|
CFElement.prototype.findPos = function() {
|
|
var obj = this;
|
|
var curleft = curtop = 0;
|
|
try {
|
|
if (obj.offsetParent) {
|
|
curleft = obj.offsetLeft;
|
|
curtop = obj.offsetTop;
|
|
while (obj = obj.offsetParent) {
|
|
curleft += obj.offsetLeft;
|
|
curtop += obj.offsetTop;
|
|
}
|
|
}
|
|
}
|
|
catch (ex) {}
|
|
return {left:curleft, top:curtop};
|
|
};
|
|
}
|
|
|
|
if (!CFElement.getDimensions) {
|
|
CFElement.prototype.getDimensions = function() {
|
|
return {width: this.clientWidth, height: this.clientHeight};
|
|
};
|
|
}
|
|
|
|
/*
|
|
* checks if an element has the class className
|
|
*/
|
|
if (!CFElement.hasClassName) {
|
|
CFElement.prototype.hasClassName = function(className) {
|
|
return (new RegExp('\\b'+className+'\\b').test(this.className));
|
|
};
|
|
}
|
|
|
|
/*
|
|
* adds the class className to the element
|
|
*/
|
|
if (!CFElement.addClassName) {
|
|
CFElement.prototype.addClassName = function(className) {
|
|
if(!this.hasClassName(className)) {
|
|
this.className += (this.className ? ' ':'') + className ;
|
|
}
|
|
};
|
|
}
|
|
|
|
/*
|
|
* removes the class className from the element el
|
|
*/
|
|
if (!CFElement.removeClassName) {
|
|
CFElement.prototype.removeClassName = function(className) {
|
|
this.className = this.className.replace(new RegExp('\\b'+className+'\\b'), '').replace(/\s\s/g,' ');
|
|
};
|
|
}
|
|
|
|
/*
|
|
* removes or adds the class className from/to the element el
|
|
* depending if the element has the class className or not.
|
|
*/
|
|
if (!CFElement.toggleClassName) {
|
|
CFElement.prototype.toggleClassName = function(className) {
|
|
if(this.hasClassName(className)) {
|
|
this.removeClassName(className);
|
|
} else {
|
|
this.addClassName(className);
|
|
}
|
|
};
|
|
}
|
|
|
|
/*
|
|
* returns all children of element el, which have the class className
|
|
*/
|
|
if (!CFElement.getChildrenByClassName) {
|
|
CFElement.prototype.getChildrenByClassName = function(className) {
|
|
var children = new Array();
|
|
for (var i=0; i < this.childNodes.length; i++) {
|
|
var c = this.childNodes[i];
|
|
if (c.nodeType == 1 && $CF(c).hasClassName(className)) {
|
|
children.push(c);
|
|
}
|
|
}
|
|
return children;
|
|
};
|
|
}
|
|
|
|
/*
|
|
* Browser independent event handling method.
|
|
* adds the eventListener eventName to element el and attaches the function method to it.
|
|
*/
|
|
if (!CFElement.addEvent) {
|
|
CFElement.prototype.addEvent = function(eventName, method, capture) {
|
|
if (this.addEventListener)
|
|
this.addEventListener(eventName, method, capture);
|
|
else
|
|
this.attachEvent('on'+eventName, method);
|
|
};
|
|
}
|
|
|
|
/*
|
|
* Browser independent event handling method.
|
|
* removes the eventListener eventName with the attached function method from element el.
|
|
*/
|
|
if (!CFElement.removeEvent) {
|
|
CFElement.prototype.removeEvent = function(eventName, method, capture) {
|
|
if (this.removeEventListener)
|
|
this.removeEventListener(eventName, method, capture);
|
|
else
|
|
this.detachEvent('on'+eventName, method);
|
|
};
|
|
}
|
|
|
|
/*
|
|
* Browser independent event handling method.
|
|
* adds the eventListener eventName to element el and attaches the function method to it.
|
|
*/
|
|
if (!window.addEvent) {
|
|
window.addEvent = function(eventName, method, capture) {
|
|
if (this.addEventListener) {
|
|
this.addEventListener(eventName, method, capture);
|
|
} else {
|
|
if (eventName != 'load' && eventName != 'resize')
|
|
document.attachEvent('on'+eventName, method);
|
|
else
|
|
this.attachEvent('on'+eventName, method);
|
|
}
|
|
};
|
|
}
|
|
|
|
/*
|
|
* Browser independent event handling method.
|
|
* removes the eventListener eventName with the attached function method from element el.
|
|
*/
|
|
if (!window.removeEvent) {
|
|
window.removeEvent = function(eventName, method, capture) {
|
|
if (this.removeEventListener) {
|
|
this.removeEventListener(eventName, method, capture);
|
|
} else {
|
|
if (eventName != 'load' && eventName != 'resize')
|
|
document.detachEvent('on'+eventName, method);
|
|
else
|
|
this.detachEvent('on'+eventName, method);
|
|
}
|
|
};
|
|
}
|
|
|
|
/* ==================== start it all up ==================== */
|
|
ContentFlowGlobal.init();
|
|
|