These are the JS classes ContactCenter uses on its interface.

dJSWin -> Javascript Window
dTabs  -> Javascript Tabs Manager
dftree -> Javascript Tree View
wz_dragdrop -> base DHTML manipulation lib
This commit is contained in:
raphaelpereira 2004-11-05 22:54:41 +00:00
parent 2a9e2713b2
commit 465041f39c
5 changed files with 2844 additions and 0 deletions

View File

@ -0,0 +1,463 @@
/****************************************************************************\
* Dynamic JS Win - Javascript Object *
* *
* Written by: *
* - Raphael Derosso Pereira <raphaelpereira@users.sourceforge.net> *
* ------------------------------------------------------------------------ *
* This program is free software; you can redistribute it and/or modify it *
* under the terms of the GNU General Public License as published by the *
* Free Software Foundation; either version 2 of the License, or (at your *
* option) any later version. *
\****************************************************************************/
if (!window.__DEFINE_DJSWIN__)
{
__DEFINE_DJSWIN__ = true;
if (document.all)
{
navigator.userAgent.toLowerCase().indexOf('msie 5') != -1 ? is_ie5 = true : is_ie5 = false;
is_ie = true;
is_moz1_6 = false;
is_mozilla = false;
is_ns4 = false;
}
else if (document.getElementById)
{
navigator.userAgent.toLowerCase().match('mozilla.*rv[:]1\.6.*gecko') ? is_moz1_6 = true : is_moz1_6 = false;
is_ie = false;
is_ie5 = false;
is_mozilla = true;
is_ns4 = false;
}
else if (document.layers)
{
is_ie = false;
is_ie5 = false
is_moz1_6 = false;
is_mozilla = false;
is_ns4 = true;
}
if (!window.dd)
{
throw("wz_dragdrop lib must be loaded!");
}
function dJSWin(params)
{
if (!params || typeof(params) != 'object' || !params.id || !params.width || !params.height || !params.content_id)
{
throw("Can't create empty window or window without width, height or ID");
}
/* Internal Variables */
if (is_ie)
{
this.winContainer = document.createElement('iframe');
}
this.clientArea = document.createElement('div');
this.title = document.createElement('div');
this.title_text = document.createElement('span');
this.buttons = new Array();
this.shadows = new Array();
this.border = new Array();
this.content = _dJSWinElement(params.content_id);
this.includedContents = params['include_contents'];
var _this = this;
if (is_moz1_6)
{
var content_ = this.content;
this.content = this.content.cloneNode(true);
content_.id = content_.id+'CLONE';
content_.style.display = 'none';
}
this.border['t'] = document.createElement('div');
this.border['b'] = document.createElement('div');
this.border['l'] = document.createElement('div');
this.border['r'] = document.createElement('div');
this.shadows['r'] = document.createElement('div');
this.shadows['b'] = document.createElement('div');
this.buttons['xDIV'] = document.createElement('div');
if (params['button_x_img'])
{
this.buttons['xIMG'] = document.createElement('IMG');
this.buttons['xIMG'].src = params['button_x_img'];
this.buttons['xIMG'].style.cursor = 'hand';
this.buttons['xDIV'].appendChild(this.buttons['xIMG']);
}
else
{
this.buttons.xDIV.innerHTML = 'X';
}
/* Inicialization */
this.title.id = params['id'];
this.title.style.position = 'absolute';
this.title.style.visibility = 'hidden';
this.title.style.width = parseInt(params['width']) + 2 + 'px';
this.title.style.height = params['title_height'] ? params['title_height'] : '18px';
this.title.style.backgroundColor = params['title_color'];
this.title.style.top = '0px';
this.title.style.left = '0px';
this.title.style.zIndex = '1';
this.title_text.style.position = 'relative';
this.title_text.className = params['title_class'];
this.title_text.style.fontWeight = 'bold';
this.title_text.style.color = params['title_text_color'] ? params['title_text_color'] : 'black';
// this.title_text.style.cursor = 'move';
this.title_text.innerHTML = params['title'];
this.title_text.style.zIndex = '1';
if (is_ie)
{
this.winContainer.id = params['id']+'_winContainer';
this.winContainer.style.position = 'absolute';
this.winContainer.style.visibility = 'hidden';
this.winContainer.style.width = params['width'];
//this.winContainer.style.height = parseInt(params['height']) + parseInt(this.title.style.height) + 'px';
this.winContainer.style.height = params['height'];
// this.winContainer.style.top = '0px';
this.winContainer.style.top = this.title.style.height;
this.winContainer.style.left = '0px';
this.winContainer.style.zIndex = '-1';
// this.winContainer.style.backgroundColor = params['bg_color'];
// this.winContainer.className = params['win_class'];
this.winContainer.src = '';
}
this.clientArea.id = params['id']+'_clientArea';
this.clientArea.style.position = 'absolute';
this.clientArea.style.visibility = 'hidden';
this.clientArea.style.width = parseInt(params['width']) + 2 + 'px';
this.clientArea.style.height = params['height'];
this.clientArea.style.top = parseInt(this.title.style.height) + 'px';
this.clientArea.style.left = '0px';
this.clientArea.style.backgroundColor = params['bg_color'];
// this.clientArea.style.overflow = 'auto';
this.clientArea.className = params['win_class'];
this.buttons.xDIV.id = params['id']+'_button';
this.buttons.xDIV.style.position = 'absolute';
this.buttons.xDIV.style.visibility = 'hidden';
this.buttons.xDIV.style.cursor = 'hand';
this.buttons.xDIV.style.top = '1px';
this.buttons.xDIV.style.left = parseInt(params['width']) - 13 + 'px';
this.buttons.xDIV.style.zIndex = '1';
this.buttons.xDIV.onclick = function() {_this.close();};
this.content.style.visibility = 'hidden';
//this.content.style.top = parseInt(this.title.style.height) + 'px';
this.content.style.top = '0px';
this.content.style.left = '0px';
this.shadows.b.id = params['id']+'_shadowb';
this.shadows.b.style.position = 'absolute';
this.shadows.b.style.visibility = 'hidden';
this.shadows.b.style.backgroundColor = '#666';
this.shadows.b.style.width = params['width'];
this.shadows.b.style.height = '4px';
this.shadows.b.style.top = parseInt(this.title.style.height) + parseInt(params['height']) + 'px';
this.shadows.b.style.left = '4px';
this.shadows.r.id = params['id']+'_shadowr';
this.shadows.r.style.position = 'absolute';
this.shadows.r.style.visibility = 'hidden';
this.shadows.r.style.backgroundColor = '#666';
this.shadows.r.style.width = '4px';
this.shadows.r.style.height = parseInt(params['height']) + parseInt(this.title.style.height) + 'px';
this.shadows.r.style.top = '4px';
this.shadows.r.style.left = params['width'];
this.border.t.id = params['id']+'_border_t';
this.border.b.id = params['id']+'_border_b';
this.border.l.id = params['id']+'_border_l';
this.border.r.id = params['id']+'_border_r';
this.border.t.style.position = 'absolute';
this.border.b.style.position = 'absolute';
this.border.l.style.position = 'absolute';
this.border.r.style.position = 'absolute';
this.border.t.style.visibility = 'hidden';
this.border.b.style.visibility = 'hidden';
this.border.l.style.visibility = 'hidden';
this.border.r.style.visibility = 'hidden';
this.border.t.style.backgroundColor = params['title_color'];
this.border.b.style.backgroundColor = params['title_color'];
this.border.l.style.backgroundColor = params['title_color'];
this.border.r.style.backgroundColor = params['title_color'];
this.border.t.className = params['title_class'];
this.border.b.className = params['title_class'];
this.border.l.className = params['title_class'];
this.border.r.className = params['title_class'];
this.border.t.style.border = '0px';
this.border.b.style.border = '0px';
this.border.l.style.border = '0px';
this.border.r.style.border = '0px';
if (params['border'])
{
this.border.t.style.width = parseInt(params['width']) + 2 + 'px';
this.border.b.style.width = parseInt(params['width']) + 2 + 'px';
this.border.l.style.width = '2px';
this.border.r.style.width = '2px';
if (is_ie)
{
this.border.t.style.height = '0';
this.border.b.style.height = '0';
this.border.l.style.height = parseInt(params['height']) + parseInt(this.title.style.height) + 2 + 'px';
this.border.r.style.height = parseInt(params['height']) + parseInt(this.title.style.height) + 2 + 'px';
this.border.t.style.top = '0';
this.border.b.style.top = parseInt(params['height']) + parseInt(this.title.style.height) + 'px';
this.border.l.style.top = '0';
this.border.r.style.top = '0';
}
else
{
this.border.t.style.height = '2px';
this.border.b.style.height = '2px';
this.border.l.style.height = parseInt(params['height']) + parseInt(this.title.style.height) + 4 + 'px';
this.border.r.style.height = parseInt(params['height']) + parseInt(this.title.style.height) + 4 + 'px';
this.border.t.style.top = '-2px';
this.border.b.style.top = parseInt(params['height']) + parseInt(this.title.style.height) + 'px';
this.border.l.style.top = '-2px';
this.border.r.style.top = '-2px';
}
this.border.t.style.left = '-2px';
this.border.b.style.left = '-2px';
this.border.l.style.left = '-2px';
this.border.r.style.left = params['width'];
//this.winContainer.style.width = parseInt(this.winContainer.style.width) + 4 + 'px';
//this.winContainer.style.height = parseInt(this.winContainer.style.height) + 4 + 'px';
//this.clientArea.style.width = parseInt(this.clientArea.style.width) + 4 + 'px';
//this.clientArea.style.height = parseInt(this.clientArea.style.height) + 4 + 'px';
//this.title.style.top = parseInt(this.title.style.top) + 2 + 'px';
//this.clientArea.style.top = parseInt(this.clientArea.style.top) + 2 + 'px';
//this.buttons.xDIV.style.top = parseInt(this.buttons.xDIV.style.top) + 2 + 'px';
this.shadows.b.style.top = parseInt(this.shadows.b.style.top) + 2 + 'px';
this.shadows.r.style.top = parseInt(this.shadows.r.style.top) + 2 + 'px';
//this.content.style.top = parseInt(this.content.style.top) + 2 + 'px';
//this.title.style.left = parseInt(this.title.style.left) + 2 + 'px';
//this.clientArea.style.left = parseInt(this.clientArea.style.left) + 2 + 'px';
//this.buttons.xDIV.style.left = parseInt(this.buttons.xDIV.style.left) + 2 + 'px';
this.shadows.b.style.left = parseInt(this.shadows.b.style.left) + 2 + 'px';
this.shadows.r.style.left = parseInt(this.shadows.r.style.left) + 2 + 'px';
//this.content.style.left = '2px';
}
else
{
this.border.t.style.width = '0px';
this.border.b.style.width = '0px';
this.border.l.style.width = '0px';
this.border.r.style.width = '0px';
}
if (!is_moz1_6)
{
this.content.parentNode.removeChild(this.content);
}
/*
this.winContainer.appendChild(this.title);
this.winContainer.appendChild(this.buttons.xDIV);
this.winContainer.appendChild(this.border.t);
this.winContainer.appendChild(this.border.b);
this.winContainer.appendChild(this.border.l);
this.winContainer.appendChild(this.border.r);
this.winContainer.appendChild(this.shadows.r);
this.winContainer.appendChild(this.shadows.b);
this.winContainer.appendChild(this.content);
*/
if (is_ie)
{
this.title.appendChild(this.winContainer);
}
else
{
this.title.appendChild(this.border.t);
}
this.title.appendChild(this.title_text);
this.title.appendChild(this.clientArea);
this.title.appendChild(this.buttons.xDIV);
this.title.appendChild(this.border.b);
this.title.appendChild(this.border.l);
this.title.appendChild(this.border.r);
this.title.appendChild(this.shadows.r);
this.title.appendChild(this.shadows.b);
this.clientArea.appendChild(this.content);
document.body.appendChild(this.title);
}
dJSWin.prototype.close = function()
{
dd.elements[this.title.id].hide();
}
dJSWin.prototype.open = function()
{
/* if (is_ie)
{
this.moveTo(document.body.offsetWidth/2 - dd.elements[this.title.id].w/2,
document.body.offsetHeight/2 - dd.elements[this.winContainer.id].h/2);
}
else
{
this.moveTo(window.innerWidth/2 - dd.elements[this.title.id].w/2,
window.innerHeight/2 - dd.elements[this.clientArea.id].h/2);
}
*/
if (is_ie)
{
this.moveTo(document.body.offsetWidth/2 + document.body.scrollLeft - dd.elements[this.title.id].w/2,
document.body.offsetHeight/2 + document.body.scrollTop - dd.elements[this.winContainer.id].h/2);
}
else
{
this.moveTo(window.innerWidth/2 + window.pageXOffset - dd.elements[this.title.id].w/2,
window.innerHeight/2 + window.pageYOffset - dd.elements[this.clientArea.id].h/2);
}
dd.elements[this.title.id].maximizeZ();
dd.elements[this.title.id].show();
}
dJSWin.prototype.show = function()
{
this.open();
}
dJSWin.prototype.hide = function()
{
this.close();
}
dJSWin.prototype.moveTo = function(x,y)
{
dd.elements[this.title.id].moveTo(x,y);
}
dJSWin.prototype.x = function()
{
return dd.elements[this.title.id].x;
}
dJSWin.prototype.y = function()
{
return dd.elements[this.title.id].y;
}
dJSWin.prototype.draw = function()
{
if (dd.elements && dd.elements[this.title.id])
{
return;
}
if (is_ie)
{
ADD_DHTML(this.winContainer.id+NO_DRAG);
}
else
{
ADD_DHTML(this.border.t.id+NO_DRAG);
}
ADD_DHTML(this.title.id+CURSOR_MOVE);
ADD_DHTML(this.clientArea.id+NO_DRAG);
ADD_DHTML(this.buttons.xDIV.id+NO_DRAG);
ADD_DHTML(this.content.id+NO_DRAG);
ADD_DHTML(this.shadows.r.id+NO_DRAG);
ADD_DHTML(this.shadows.b.id+NO_DRAG);
ADD_DHTML(this.border.b.id+NO_DRAG);
ADD_DHTML(this.border.l.id+NO_DRAG);
ADD_DHTML(this.border.r.id+NO_DRAG);
if (is_ie)
{
dd.elements[this.title.id].addChild(dd.elements[this.winContainer.id]);
}
else
{
dd.elements[this.title.id].addChild(dd.elements[this.border.t.id]);
}
//dd.elements[this.title.id].setZ(dd.elements[this.border.t.id].z+1);
//dd.elements[this.title.id].maximizeZ();
dd.elements[this.title.id].addChild(dd.elements[this.clientArea.id]);
dd.elements[this.title.id].addChild(dd.elements[this.buttons.xDIV.id]);
dd.elements[this.title.id].addChild(dd.elements[this.content.id]);
dd.elements[this.title.id].addChild(dd.elements[this.shadows.r.id]);
dd.elements[this.title.id].addChild(dd.elements[this.shadows.b.id]);
dd.elements[this.title.id].addChild(dd.elements[this.border.b.id]);
dd.elements[this.title.id].addChild(dd.elements[this.border.l.id]);
dd.elements[this.title.id].addChild(dd.elements[this.border.r.id]);
if (typeof(this.includedContents) == 'object')
{
for (var i in this.includedContents)
{
ADD_DHTML(this.includedContents[i]+NO_DRAG);
dd.elements[this.title.id].addChild(dd.elements[this.includedContents[i]]);
}
}
// dd.elements[this.title.id].setZ('-1');
if (is_ie)
{
dd.elements[this.title.id].moveTo(document.body.offsetWidth/2 - dd.elements[this.winContainer.id].w/2,
document.body.offsetHeight/2 - dd.elements[this.winContainer.id].h/2)
}
else
{
dd.elements[this.title.id].moveTo(window.innerWidth/2 - dd.elements[this.clientArea.id].w/2,
window.innerHeight/2 - dd.elements[this.clientArea.id].h/2);
}
dd.elements[this.title.id].hide();
}
function _dJSWinElement(id)
{
if (document.getElementById)
{
return document.getElementById(id);
}
else if (document.all)
{
return document.all[id];
}
else
{
throw("Browser Not Supported!");
}
}
if (!dd.elements)
{
var div = document.createElement('div');
div.id = '__NONE__#';
div.style.position = 'absolute';
SET_DHTML(div.id);
}
}

345
phpgwapi/js/dTabs/dTabs.js Normal file
View File

@ -0,0 +1,345 @@
/****************************************************************************\
* Dynamic Tabs - Javascript Object *
* *
* Written by: *
* - Raphael Derosso Pereira <raphaelpereira@users.sourceforge.net> *
* ------------------------------------------------------------------------ *
* This program is free software; you can redistribute it and/or modify it *
* under the terms of the GNU General Public License as published by the *
* Free Software Foundation; either version 2 of the License, or (at your *
* option) any later version. *
\****************************************************************************/
/*
* Dynamic Tabs - On-The-Fly Tabs in Javascript
*
* Usage:
* var tabs = new dTabsManager({'id': <DIV id to be used>, 'width': '498px'});
*
* tabs.addTab({'id': <ID of the Contents DIV (must be absolute)>,
* 'name': <text to be shown on tab selector>,
* 'selectedClass': <name of the class to be used when Tab is selected>,
* 'unselectedClass': <name of the class to be used when Tab is not selected>});
*/
if (document.all)
{
navigator.userAgent.toLowerCase().indexOf('msie 5') != -1 ? is_ie5 = true : is_ie5 = false;
is_ie = true;
is_moz1_6 = false;
is_mozilla = false;
is_ns4 = false;
}
else if (document.getElementById)
{
navigator.userAgent.toLowerCase().match('mozilla.*rv[:]1\.6.*gecko') ? is_moz1_6 = true : is_moz1_6 = false;
is_ie = false;
is_ie5 = false;
is_mozilla = true;
is_ns4 = false;
}
else if (document.layers)
{
is_ie = false;
is_ie5 = false
is_moz1_6 = false;
is_mozilla = false;
is_ns4 = true;
}
/* The code below is a wrapper to call the dTabs content insertion
* just after the document is loaded in IE... I still don't know why people
* use this crap!
*/
var _dTabs_onload;
if (document.all)
{
_dTabs_onload = false;
var _dTabs_onload_f = document.body.onload;
var _dTabs_f = function(e)
{
_dTabs_onload = true;
if (_dTabs_onload_f)
{
_dTabs_onload_f();
}
};
document.body.onload = _dTabs_f;
}
else
{
_dTabs_onload = true;
}
function dTabsManager(params)
{
/* Attributes definition */
this._Tabs = new Array();
this._Tabs['root'] = null;
this._Tabs['tabIndexTR'] = null;
this._Tabs['tabIndexTDs'] = new Array();
this._Tabs['contents'] = null;
this._Tabs['contentsDIV'] = null;
this._selectedIndex = null;
this._nTabs = params['nTabs'] ? params['nTabs'] : 0;
this._maxTabs = params['maxTabs'] ? params['maxTabs'] : 0;
/* Create and insert the container */
var table, tbody, tr, td;
this._Tabs['root'] = document.createElement('div');
this._Tabs['root'].id = params['id'];
this._Tabs['root'].style.position = 'absolute';
//this._Tabs['root'].style.visibility = 'hidden';
this._Tabs['root'].style.top = '150px';
this._Tabs['root'].style.left = '0px';
this._Tabs['root'].style.width = params['width'] ? params['width'] : 0;
table = document.createElement('table');
tbody = document.createElement('tbody');
table.style.border = '0px solid black';
table.style.width = '100%';
table.style.height = '100%';
this._Tabs['tabIndexTR'] = document.createElement('tr');
this._Tabs['tabIndexTR'].style.height = '30px';
//this._Tabs['tabIndexTR'].style.width = '100%';
tr = document.createElement('tr');
td = document.createElement('td');
tr.style.width = '100%';
tr.style.height = '100%';
//this._Tabs['contentsDIV'] = document.createElement('div');
//this._Tabs['contentsDIV'].style.position = 'relative';
this._Tabs['contentsDIV'] = td;
this._Tabs['root'].appendChild(table);
table.appendChild(tbody);
tbody.appendChild(this._Tabs['tabIndexTR']);
tbody.appendChild(tr);
tr.appendChild(td);
//td.appendChild(this._Tabs['contentsDIV']);
tr.appendChild(this._Tabs['contentsDIV']);
this._Tabs['contents'] = new Array();
if (!_dTabs_onload)
{
if (document.getElementById && !document.all)
{
document.body.appendChild(this._Tabs['root']);
}
else
{
var _this = this;
var now = document.body.onload ? document.body.onload : null;
var f = function(e)
{
document.body.appendChild(_this._Tabs['root']);
now ? now() : false;
};
document.body.onload = f;
}
}
else
{
document.body.appendChild(this._Tabs['root']);
}
}
/*
@method addTab
@abstract Inserts a tab
*/
dTabsManager.prototype.addTab = function (params)
{
if (typeof(params) != 'object')
{
return false;
}
if (!params['id'] || !_dtElement(params['id']) ||
_dtElement(params['id']).tagName.toLowerCase() != 'div' ||
_dtElement(params['id']).style.position.toLowerCase() != 'absolute')
{
return false;
}
if (this._Tabs['contents'][params['id']])
{
this.replaceTab(params);
return;
}
//var contents, tdIndex;
var element = _dtElement(params['id']);
if (is_moz1_6)
{/*
var element_ = element;
element = element.cloneNode(true);
//element_.parentNode.replaceChild(element, element_);
element_.id = element_.id+'CLONED';
element_.style.display = 'none';*/
element.style.position = 'absolute';
}
else
{
element.parentNode.removeChild(element);
}
element.style.top = parseInt(this._Tabs['tabIndexTR'].style.height) + 5 + 'px';
element.style.left = this._Tabs['root'].style.left;
element.style.zIndex = '-1';
this._Tabs['contents'][params['id']] = element;
this._Tabs.tabIndexTDs[params['id']] = document.createElement('td');
var _this = this;
this._Tabs.tabIndexTDs[params['id']].innerHTML = params['name'] ? params['name'] : 'undefined';
this._Tabs.tabIndexTDs[params['id']].selectedClassName = params['selectedClass'];
this._Tabs.tabIndexTDs[params['id']].unselectedClassName = params['unselectedClass'];
this._Tabs.tabIndexTDs[params['id']].className = params['unselectedClass'];
this._Tabs.tabIndexTDs[params['id']].onclick = function() {_this._showTab(params['id']);};
for (var i in this._Tabs.tabIndexTDs)
{
if (i == 'length')
{
return;
}
this._Tabs.tabIndexTDs[i].style.width = (100/(this._nTabs+1)) + '%';
}
this._Tabs.tabIndexTR.appendChild(this._Tabs.tabIndexTDs[params['id']]);
if (!is_moz1_6)
{
this._Tabs.contentsDIV.appendChild(this._Tabs['contents'][params['id']]);
}
this._nTabs++;
if (this._nTabs == 1)
{
this._showTab(params['id']);
}
return;
}
dTabsManager.prototype.removeTab = function (id)
{
if (!this._Tabs.contents[params['id']])
{
return false;
}
this._Tabs.tabIndexTR.removeChild(this._Tabs.tabIndexTDs[params['id']]);
this._Tabs.contentsDIV.removeChild(this._Tabs.contents[params['id']]);
this._Tabs.contents[params['id']] = null;
this._Tabs.tabIndexTDs[params['id']] = null;
return true;
}
dTabsManager.prototype.getTabObject = function()
{
return this._Tabs.root;
}
/****************************************************************************\
* Private Methods *
\****************************************************************************/
dTabsManager.prototype._showTab = function (id)
{
if (!this._Tabs.contents[id])
{
return false;
}
/* Ajust the tabIndexTR width to be the same as the contents width*/
if (this._Tabs.contents[id].style.width)
{
this._Tabs['root'].style.width = this._Tabs.contents[id].style.width;
this._Tabs['root'].style.height = this._Tabs.contents[id].style.height;
}
/*
else
{
this._Tabs['root'].style.width = '0px';
}*/
this._Tabs.tabIndexTDs[id].className = this._Tabs.tabIndexTDs[id].selectedClassName;
for (var i in this._Tabs.contents)
{
if (i == 'length')
{
continue;
}
this._Tabs.contents[i].style.visibility = 'hidden';
this._Tabs.contents[i].style.zIndex = '-1';
}
this._Tabs.contents[id].style.visibility = 'visible';
this._Tabs.contents[id].style.zIndex = '10';
if (this._selectedIndex && this._selectedIndex != id)
{
this._Tabs.tabIndexTDs[this._selectedIndex].className = this._Tabs.tabIndexTDs[this._selectedIndex].unselectedClassName;
if (!document.all)
{
this._focus(this._Tabs.contents[id]);
}
}
this._selectedIndex = id;
}
dTabsManager.prototype._focus = function(obj)
{
for (var i in obj.childNodes)
{
if (obj.childNodes[i].focus)
{
obj.childNodes[i].focus();
return true;
}
else
{
if (this._focus(obj.childNodes[i]))
{
return true;
}
}
}
}
function _dtElement(id)
{
if (document.getElementById)
{
return document.getElementById(id);
}
else if (document.all)
{
return document.all[id];
}
else
{
throw('Browser not supported');
}
}

View File

@ -0,0 +1,67 @@
.son {
position: relative;
left: 10px;
/* width: 0px;*/
}
.plus {
font-size: 15px;
font-weight: bold;
cursor: pointer;
cursor: hand;
color: #000000;
font-family: monospace;
}
.plus:hover {
color: #FF0000;
}
.opened {
display: inline;
/* width: 0px;*/
}
.closed {
display: none;
/* width: 0px;*/
}
/* link */
.l {
padding: 2px;
font-weight: bold;
font-size: 12px;
color: #666666;
text-decoration: none;
cursor: pointer;
cursor: hand;
white-space: nowrap;
font-family: sans-serif;
}
.l:hover {
text-decoration: underline;
}
/* selected link */
.sl {
padding: 2px;
font-weight: bold;
font-size: 12px;
color: #0000FF;
text-decoration: none;
cursor: pointer;
cursor: hand;
white-space: nowrap;
font-family: sans-serif;
}
.sl:hover {
text-decoration: underline;
}

View File

@ -0,0 +1,561 @@
/* Dynamic Folder Tree
* Generates DHTML tree dynamically (on the fly).
* License: GNU LGPL
*
* Copyright (c) 2004, Vinicius Cubas Brand, Raphael Derosso Pereira
* {viniciuscb,raphaelpereira} at users.sourceforge.net
* All rights reserved.
*
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 2.1 of the License, or (at your option) any later version.
*
* This library is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public
* License along with this library; if not, write to the Free Software
* Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
*/
// NODE
//Usage: a = new dNode({id:2, caption:'tree root', url:'http://www.w3.org'});
function dNode(arrayProps) {
//mandatory fields
this.id; //node id
this.caption; //node caption
//optional fields
this.url; //url to open
this.target; //target to open url
this.onClick; //javascript to execute onclick
this.onOpen; //javascript to execute when a node of the tree opens
this.onClose; //javascript to execute when a node of the tree closes
this.onFirstOpen; //javascript to execute only on the first open
this.iconClosed; //img.src of closed icon
this.iconOpen; //img.src of open icon
this.runJS = true; //(bool) if true, runs the on* props defined above
this.plusSign = true; //(bool) if the plus sign will appear or not
this.captionClass = 'l'; //(string) the class for this node's caption
//The parameters below are private
this._opened = false; //already opened
this._io = false; //is opened
this._children = []; //references to children
this._parent; //pointer to parent
this._myTree; //pointer to myTree
this._drawn = false;
for (var i in arrayProps)
{
if (i.charAt(0) != '_')
{
eval('this.'+i+' = arrayProps[\''+i+'\'];');
}
}
}
//changes node state from open to closed, and vice-versa
dNode.prototype.changeState = function()
{
if (this._io)
{
this.close();
}
else
{
this.open();
}
//cons = COokie of Node Status
//setCookie("cons"+this.id,this._io);
}
dNode.prototype.open = function () {
if (!this._io)
{
if (!this._opened && this.runJS && this.onFirstOpen != null)
{
eval(this.onFirstOpen);
}
else if (this.runJS && this.onOpen != null)
{
eval(this.onOpen);
}
this._debug = true;
this._opened = true;
this._io = true;
this._refresh();
}
}
dNode.prototype.close = function() {
if (this._io)
{
if (this.runJS && this.onClose != null)
{
eval(this.onClose);
}
this._io = false;
this._refresh();
}
}
//alter node label and other properties
dNode.prototype.alter = function(arrayProps)
{
for (var i in arrayProps)
{
if (i != 'id' && i.charAt(0) != '_')
{
eval('this.'+i+' = arrayProps[\''+i+'\'];');
}
}
}
//css and dhtml refresh part
dNode.prototype._refresh = function() {
var nodeDiv = getObjectById("n"+this.id+this._myTree.name);
var plusSpan = getObjectById("p"+this.id+this._myTree.name);
var captionSpan = getObjectById("l"+this.id+this._myTree.name);
var childrenDiv = getObjectById("ch"+this.id+this._myTree.name);
if (nodeDiv != null)
{
//Handling open and close: checks this._io and changes class as needed
if (!this._io) //just closed
{
childrenDiv.className = "closed";
}
else //just opened
{
//prevents IE undesired behaviour when displaying empty DIVs
/* if (this._children.length > 0)
{*/
childrenDiv.className = "opened";
// }
}
plusSpan.innerHTML = this._properPlus();
captionSpan.innerHTML = this.caption;
}
//alter onLoad, etc
}
//gets the proper plus for this moment
dNode.prototype._properPlus = function()
{
if (!this._io)
{
if (this._myTree.useIcons)
{
return (this.plusSign)?imageHTML(this._myTree.icons.plus):"";
}
else
{
return (this.plusSign)?"+":"";
}
}
else
{
if (this._myTree.useIcons)
{
return (this.plusSign)?imageHTML(this._myTree.icons.minus):"";
}
else
{
return (this.plusSign)?"-":"";
}
}
}
//changes node to selected style class. Perform further actions.
dNode.prototype._select = function()
{
var captionSpan;
if (this._myTree._selected)
{
this._myTree._selected._unselect();
}
this._myTree._selected = this;
captionSpan = getObjectById("l"+this.id+this._myTree.name);
//changes class to selected link
if (captionSpan)
{
captionSpan.className = 'sl';
}
}
//changes node to unselected style class. Perform further actions.
dNode.prototype._unselect = function()
{
var captionSpan = getObjectById("l"+this.id+this._myTree.name);
this._myTree._lastSelected = this._myTree._selected;
this._myTree._selected = null;
//changes class to selected link
if (captionSpan)
{
captionSpan.className = this.captionClass;
}
}
//state can be open or closed
//warning: if drawed node is not child or root, bugs will happen
dNode.prototype._draw = function()
{
var str;
var _this = this;
var divN, divCH, spanP, spanL, parentChildrenDiv;
var myClass = (this._io)? "opened" : "closed";
var myPlus = this._properPlus();
var append = true;
var captionOnClickEvent = null;
// var cook;
var plusEventHandler = function(){
_this.changeState();
}
var captionEventHandler = function(){
eval(captionOnClickEvent);
}
/* if (this.myTree.followCookies)
{
this._io = getCookie("cons"+this.id);
}*/
//FIXME put this in a separate function, as this will be necessary in
//various parts
if (this.onClick) //FIXME when onclick && url
{
captionEventHandler = function () { _this._select(); typeof(_this.onClick) == 'function' ? _this.onClick() : eval(_this.onClick); };
}
else if (this.url && this.target)
{
captionEventHandler = function () { _this._select(); window.open(_this.url,_this.target); };
}
else if (this.url)
{
captionEventHandler = function () { _this._select(); window.location=_this.url; };
}
//The div of this node
divN = document.createElement('div');
divN.id = 'n'+this.id+this._myTree.name;
divN.className = 'son';
// divN.style.border = '1px solid black';
//The span that holds the plus/minus sign
spanP = document.createElement('span');
spanP.id = 'p'+this.id+this._myTree.name;
spanP.className = 'plus';
spanP.onclick = plusEventHandler;
spanP.innerHTML = myPlus;
// spanP.style.border = '1px solid green';
//The span that holds the label/caption
spanL = document.createElement('span');
spanL.id = 'l'+this.id+this._myTree.name;
spanL.className = this.captionClass;
spanL.onclick = captionEventHandler;
spanL.innerHTML = this.caption;
// spanL.style.border = '1px solid red';
//The div that holds the children
divCH = document.createElement('div');
divCH.id = 'ch'+this.id+this._myTree.name;
divCH.className = myClass;
// divCH.style.border = '1px solid blue';
// div.innerHTML = str;
divN.appendChild(spanP);
divN.appendChild(spanL);
divN.appendChild(divCH);
if (this._parent != null)
{
parentChildrenDiv = getObjectById("ch"+this._parent.id+this._myTree.name);
}
else //is root
{
parentChildrenDiv = getObjectById("dftree_"+this._myTree.name);
}
if (parentChildrenDiv)
{
parentChildrenDiv.appendChild(divN);
}
}
// TREE
//Usage: t = new dFTree({name:t, caption:'tree root', url:'http://www.w3.org'});
function dFTree(arrayProps) {
//mandatory fields
this.name; //the value of this must be the name of the object
//optional fields
this.is_dynamic = true; //tree is dynamic, i.e. updated on the fly
this.followCookies = true;//use previous state (o/c) of nodes
this.useIcons = false; //use icons or not
//arrayProps[icondir]: Icons Directory
iconPath = (arrayProps['icondir'] != null)? arrayProps['icondir'] : '';
this.icons = {
root : iconPath+'/foldertree_base.gif',
folder : iconPath+'/foldertree_folder.gif',
folderOpen : iconPath+'/foldertree_folderopen.gif',
node : iconPath+'/foldertree_folder.gif',
empty : iconPath+'/foldertree_empty.gif',
line : iconPath+'/foldertree_line.gif',
join : iconPath+'/foldertree_join.gif',
joinBottom : iconPath+'/foldertree_joinbottom.gif',
plus : iconPath+'/foldertree_plus.gif',
plusBottom : iconPath+'/foldertree_plusbottom.gif',
minus : iconPath+'/foldertree_minus.gif',
minusBottom : iconPath+'/foldertree_minusbottom.gif',
nlPlus : iconPath+'/foldertree_nolines_plus.gif',
nlMinus : iconPath+'/foldertree_nolines_minus.gif'
};
//private
this._root = false; //reference to root node
this._aNodes = [];
this._lastSelected; //The last selected node
this._selected; //The actual selected node
for (var i in arrayProps)
{
if (i.charAt(0) != '_')
{
eval('this.'+i+' = arrayProps[\''+i+'\'];');
}
}
}
dFTree.prototype.draw = function(dest_element) {
var main_div;
if (!getObjectById("dftree_"+this.name) && dest_element)
{
main_div = document.createElement('div');
main_div.id = 'dftree_'+this.name;
dest_element.appendChild(main_div);
this._drawn = true;
}
if (this._root != false)
{
this._root._draw();
this._drawBranch(this._root._children);
}
}
//Transforms tree in HTML code
dFTree.prototype.toString = function() {
var str = '';
if (!getObjectById("dftree_"+this.name))
{
str = '<div id="dftree_'+this.name+'"></div>';
}
return str;
/* if (this.root != false)
{
this.root._draw();
this._drawBranch(this.root.children);
}*/
}
//Recursive function, draws children
dFTree.prototype._drawBranch = function(childrenArray) {
var a=0;
for (a;a<childrenArray.length;a++)
{
childrenArray[a]._draw();
this._drawBranch(childrenArray[a]._children);
}
}
//add into a position
dFTree.prototype.add = function(node,pid) {
var auxPos;
var addNode = false;
if (typeof (auxPos = this._searchNode(node.id)) != "number")
{
// if parent exists, add node as its child
if (typeof (auxPos = this._searchNode(pid)) == "number")
{
node._parent = this._aNodes[auxPos];
this._aNodes[auxPos]._children[this._aNodes[auxPos]._children.length] = node;
addNode = true;
}
else //if parent cannot be found and there is a tree root, ignores node
{
if (!this._root)
{
this._root = node;
addNode = true;
}
}
if (addNode)
{
this._aNodes[this._aNodes.length] = node;
node._myTree = this;
if (this.is_dynamic && this._drawn)
{
node._draw();
}
}
}
else {
var arrayProps = new Array();
arrayProps['id'] = node.id;
arrayProps['caption'] = node.caption;
arrayProps['url'] = node.url;
arrayProps['target'] = node.target;
arrayProps['onClick'] = node.onClick;
arrayProps['onOpen'] = node.onOpen;
arrayProps['onClose'] = node.onClose;
arrayProps['onFirstOpen'] = node.onFirstOpen;
arrayProps['iconClosed'] = node.iconClosed;
arrayProps['iconOpen'] = node.iconOpen;
arrayProps['runJS'] = node.runJS;
arrayProps['plusSign'] = node.plusSign;
arrayProps['captionClass'] = node.captionClass;
delete node;
this.alter(arrayProps);
}
}
//arrayProps: same properties of Node
dFTree.prototype.alter = function(arrayProps) {
this.getNodeById(arrayProps['id']).alter(arrayProps);
}
dFTree.prototype.getNodeById = function(nodeid) {
return this._aNodes[this._searchNode(nodeid)];
}
dFTree.prototype.openTo = function(nodeid)
{
var node = this.getNodeById(nodeid);
if (node && node._parent)
{
node._parent.open();
this.openTo(node._parent.id);
}
}
//Searches for a node in the node array, returning the position of the array 4it
dFTree.prototype._searchNode = function(id) {
var a=0;
for (a;a<this._aNodes.length;a++)
{
if (this._aNodes[a].id == id)
{
return a;
}
}
return false;
}
//Auxiliar functions
//For multi-browser compatibility
function getObjectById(name)
{
if (document.getElementById)
{
return document.getElementById(name);
}
else if (document.all)
{
return document.all[name];
}
else if (document.layers)
{
return document.layers[name];
}
return false;
}
// [Cookie] Clears a cookie
function clearCookie(cookieName) {
var now = new Date();
var yesterday = new Date(now.getTime() - 1000 * 60 * 60 * 24);
this.setCookie(cookieName, 'cookieValue', yesterday);
this.setCookie(cookieName, 'cookieValue', yesterday);
};
// [Cookie] Sets value in a cookie
function setCookie(cookieName, cookieValue, expires, path, domain, secure) {
document.cookie =
escape(cookieName) + '=' + escape(cookieValue)
+ (expires ? '; expires=' + expires.toGMTString() : '')
+ (path ? '; path=' + path : '')
+ (domain ? '; domain=' + domain : '')
+ (secure ? '; secure' : '');
};
// [Cookie] Gets a value from a cookie
function getCookie(cookieName) {
var cookieValue = '';
var posName = document.cookie.indexOf(escape(cookieName) + '=');
if (posName != -1) {
var posValue = posName + (escape(cookieName) + '=').length;
var endPos = document.cookie.indexOf(';', posValue);
if (endPos != -1)
{
cookieValue = unescape(document.cookie.substring(posValue, endPos));
}
else
{
cookieValue = unescape(document.cookie.substring(posValue));
}
}
return (cookieValue);
};
function imageHTML(src,attributes) {
if (attributes != null)
{
attributes = '';
}
return "<img "+attributes+" src=\""+src+"\">";
}

File diff suppressed because it is too large Load Diff