PageRenderTime 35ms CodeModel.GetById 12ms app.highlight 18ms RepoModel.GetById 1ms app.codeStats 0ms

/branches/jsdoc_tk_gui/setup/workingDirectory/Webeo/gui/layout/TabbedPane.js

http://jsdoc-toolkit.googlecode.com/
JavaScript | 236 lines | 174 code | 25 blank | 37 comment | 37 complexity | fcb33bae223b4e03b50310792cc29159 MD5 | raw file
  1ek.require("ao.ajax.Ajax");
  2ek.require("gui.fx.Fade");
  3ek.require("gui.tools.Dom");
  4
  5ek.register("gui.layout.TabbedPane");
  6
  7ek.requireCSS("css.gui.layout.TabbedPane", "layout.tab1"); 
  8
  9/**
 10 * require "tabbedPane.css"
 11 *@require ao.ajax.Ajax.js
 12 *@require gui.tools.FadeManager.js
 13 *@require gui.tools.Dom.js
 14 */
 15function TabbedPane (divName, isFading, requiredCSS){
 16	try{
 17		this.isFading = (isFading != undefined) ? isFading : true;
 18
 19		this.mainPanel = (typeof divName == "object")? divName : Dom.getElement(divName);
 20		if(this.mainPanel == null){
 21		//TODO
 22			this.mainPanel = document.createElement("div");
 23			var id = document.createAttribute("id");
 24			id.nodeValue = divName;
 25			this.mainPanel.setAttributeNode(id);
 26			document.body.appendChild(this.mainPanel);
 27		}	
 28		
 29		this.showedPanelCSS = "selectedPanel";
 30		this.hiddenPanelCSS = "panel";
 31		
 32		this.showedHeaderCSS = "selectedHeader";
 33		this.hiddenHeaderCSS = "header";
 34		
 35		this.headers = new Array();
 36		this.panels = new Array();
 37		this.ajax = new Array();
 38		
 39		this.currentPanel = -1;
 40	}catch(e){
 41		alert(e);
 42	}
 43}
 44
 45/**
 46 * 
 47 */
 48TabbedPane.prototype.read = function (){
 49	var nodes = this.mainPanel.childNodes;
 50	for(var i = 0 ; i < nodes.length ; i++){
 51		//TODO IE COMPATIBILITY alert(typeof nodes[i] +' ' + nodes[i]);
 52		//alert(nodes[i].innerHTML);
 53		if(nodes[i].nodeName == "#text" /* instanceof Text*/){
 54			continue;
 55		}else if(nodes[i].nodeName == "DIV" /*instanceof HTMLDivElement*/){
 56			if(nodes[i].id == this.mainPanel.id + "_headers"){
 57				this.readHeaders(nodes[i].childNodes);
 58				this.headersDom = nodes[i];
 59			}else if(nodes[i].id == this.mainPanel.id + "_panels"){
 60				this.readPanels(nodes[i].childNodes);
 61				this.panelsDom = nodes[i];
 62			}
 63		}
 64	}	
 65	this.createTooltip();
 66	this.show(0);
 67}
 68TabbedPane.prototype.readHeaders = function (divHeaders){
 69	for(var i = 0 ; i < divHeaders.length ; i++){
 70		if(divHeaders[i].nodeName == "#text"/* instanceof Text*/){
 71			continue;
 72		}else if(divHeaders[i].nodeName == "A" /*instanceof HTMLAnchorElement*/){
 73			divHeaders[i].model = this;
 74			divHeaders[i].panel = this.headers.length;
 75			divHeaders[i].onclick = this.performClick;
 76			this.createSpanElements(divHeaders[i]);
 77			//this.checkOutSpanElement(divHeaders[i].childNodes);
 78			this.addHeader(divHeaders[i]);
 79		}
 80	}
 81}
 82TabbedPane.prototype.createSpanElements = function (anchorNode){
 83	var content = anchorNode.innerHTML;
 84	anchorNode.innerHTML = "";
 85	anchorNode.appendChild(Dom.createHTMLSpanElement(null, "leftHeader"));
 86	anchorNode.appendChild(Dom.createHTMLSpanElement(content, "midHeader"));
 87	anchorNode.appendChild(Dom.createHTMLSpanElement(null , "rightHeader"));
 88}
 89
 90TabbedPane.prototype.checkOutSpanElement = function (anchorChildNodes){
 91	var spanCounter = 0;
 92	for(var i = 0 ; i < anchorChildNodes.length ; i++){
 93		if(anchorChildNodes[i].nodeName == "SPAN"){
 94			spanCounter++;
 95			switch(spanCounter){
 96				case 1: anchorChildNodes[i].className = "leftHeader";
 97						anchorChildNodes[i].innerHTML = Dom.NBSP;
 98					break;
 99				case 2: anchorChildNodes[i].className = "midHeader";
100					break;
101				case 3: anchorChildNodes[i].className = "rightHeader";
102						anchorChildNodes[i].innerHTML = Dom.NBSP;
103					break;
104				default: break;	
105			}
106		}
107	}
108}
109
110TabbedPane.prototype.readPanels = function (divPanels){
111	for(var i = 0 ; i < divPanels.length ; i++){
112		if(divPanels[i].nodeName == "#text"/* instanceof Text*/){
113			continue;
114		}else if(divPanels[i].nodeName == "DIV"/* instanceof HTMLDivElement*/){
115			divPanels[i].className = this.hiddenPanelCSS;
116			this.addPanel(divPanels[i]);
117		}
118	}
119}
120TabbedPane.prototype.createTooltip = function (header){
121	/*for(var i = 0 ; i < this.panels.length ;i++){
122		t = new Tooltip(this.panels[i], null, true, "Hellowwww", "tooltip", 50, 50, new Position(false,0,true,0));
123	}*/
124}
125TabbedPane.prototype.addHeader = function (header){
126	header.className = this.hiddenHeaderCSS;
127	this.headers.push(header);
128}
129TabbedPane.prototype.addPanel = function (panel){
130	panel.className = this.hiddenPanelCSS;
131	this.panels.push(panel);
132	if(this.isFading){
133		panel.id = this.mainPanel.id + '_panel_' + this.panels.length;
134		Fade.register(panel.id);
135	}
136}
137
138TabbedPane.prototype.addTab = function (tabName, contentOrLocation){
139	if(!this.headersDom){
140		if(Dom.getElement(this.mainPanel.id + "_headers")==null){
141			this.headersDom = Dom.createHTMLDivElement(null, "headers", this.mainPanel.id + "_headers");
142			this.mainPanel.appendChild(this.headersDom);
143		}else{
144			this.headersDom = Dom.getElement(this.mainPanel.id + "_headers");
145		}
146	}
147	if(!this.panelsDom){
148		if(Dom.getElement(this.mainPanel.id + "_panels")==null){
149			this.panelsDom = Dom.createHTMLDivElement(null, "panels", this.mainPanel.id + "_panels");
150			this.mainPanel.appendChild(this.panelsDom);
151		}else{
152			this.panelsDom = Dom.getElement(this.mainPanel.id + "_panels");
153		}
154	}
155	
156	a = Dom.createHTMLAnchorElement("", null, null, null);
157	a.appendChild(Dom.createHTMLSpanElement(null, "leftHeader"));
158	a.appendChild(Dom.createHTMLSpanElement(tabName, "midHeader"));
159	a.appendChild(Dom.createHTMLSpanElement(null , "rightHeader"));
160	
161	//a = document.createElement("a");
162	//a.textContent = tabName;
163	a.model = this;
164	a.panel = this.headers.length;
165	a.onclick = this.performClick;
166	//this.headersDom.appendChild(Dom.createHTMLQuoteElement("&nbsp;", "leftHeader"));
167	this.headersDom.appendChild(a);
168	//this.headersDom.appendChild(Dom.createHTMLQuoteElement("&nbsp;", "rightHeader"));
169	this.addHeader(a);
170	
171	d = document.createElement("div");
172	if(contentOrLocation instanceof Ajax){
173		contentOrLocation.onload = this.loadAjaxTab;
174		this.ajax[this.headers.length] = contentOrLocation;
175	
176	}else{
177		d.innerHTML = contentOrLocation;
178	}
179	this.panelsDom.appendChild(d);
180	this.addPanel(d);
181}
182TabbedPane.prototype.loadAjaxTab = function (){
183	this.panels[i].innerHTML = 'titi';//.show(this.panel);
184}
185TabbedPane.prototype.performClick = function (){
186	this.model.show(this.panel);
187}
188
189/**
190 * This method is used to change the panel shown.
191 * @newPanel the panel to show
192 */
193TabbedPane.prototype.show = function (newPanel){
194	
195	//If same panel no change
196	if(newPanel == this.currentPanel)
197		return;
198		
199	if(this.isFading){
200		
201		//Fadeout old Panel
202		if(this.currentPanel>=0){
203			//Clear the fading timeout of the current panel
204			//alert(getFadeManager().get(this.panels[this.currentPanel].id));
205			//Fix the min height of the main panel
206			//TODO CHECK minheight
207			this.mainPanel.style.minHeight = this.headers[this.currentPanel].offsetHeight + this.panels[this.currentPanel].offsetHeight + 'px';
208
209			this.headers[this.currentPanel].className = this.hiddenHeaderCSS;
210			Fade.fadeOut(this.panels[this.currentPanel].id, "Fade.fadeIn(\""+this.panels[newPanel].id+"\")");
211			
212		}else{
213			Fade.fadeIn(this.panels[newPanel].id); //first init
214		}
215			
216		//FadeIn the new panel
217		this.headers[newPanel].className = this.showedHeaderCSS;
218		this.panels[newPanel].className = this.showedPanelCSS;
219
220		//getFadeManager().fadeIn(this.panels[newPanel].id);
221	}else{
222		if(this.currentPanel>=0){
223			this.headers[this.currentPanel].className = this.hiddenHeaderCSS;
224			this.panels[this.currentPanel].className = this.hiddenPanelCSS;
225		}
226		//On selectionne le header et on montre le panel
227		this.headers[newPanel].className = this.showedHeaderCSS;
228		this.panels[newPanel].className = this.showedPanelCSS;
229		//this.panels[i].style.left = "-500";
230		//this.panels[i].id = "panel"+i;
231		//move(this.panels[i].id, "0");
232	}
233	
234	//O n change l'index du panel courant
235	this.currentPanel = newPanel;
236}