PageRenderTime 57ms CodeModel.GetById 42ms app.highlight 12ms RepoModel.GetById 1ms app.codeStats 0ms

/branches/jsdoc_tk_gui/setup/workingDirectory/Webeo/gui/button/Button.js

http://jsdoc-toolkit.googlecode.com/
JavaScript | 273 lines | 187 code | 38 blank | 48 comment | 56 complexity | dfbd6f5ef2c3f883903591a296372eb0 MD5 | raw file
  1ek.require("gui.tooltip.Tooltip");
  2
  3ek.register("gui.button.Button");
  4
  5ek.requireCSS("css.gui.button.Button", "button.Button");
  6
  7/**
  8  *@require  "position.js"
  9  *@require  "tooltip.js"
 10  **/
 11
 12var PICTURE_BUTTON = 0;
 13var INPUT_BUTTON   = 1;
 14var TEXT_BUTTON    = 2;  
 15
 16function PictureButton(idName, shortName, extension, toolTipText, toggle, mainModel, clickMethod, isAjax, url){
 17	return new Button(PICTURE_BUTTON, idName, shortName, extension, toolTipText, toggle, mainModel, clickMethod, isAjax, url);
 18}
 19function SimpleButton(idName, shortName, extension, toolTipText, toggle, mainModel, clickMethod, isAjax, url){
 20	return new Button(INPUT_BUTTON, idName, shortName, extension, toolTipText, toggle, mainModel, clickMethod, isAjax, url);
 21}
 22function TextButton(idName, shortName, toolTipText, toggle, url, target, clickMethod){
 23	var b = new Button(TEXT_BUTTON, idName, shortName, null, toolTipText, toggle, null, clickMethod);
 24	b.initCSS("textButton", "toggled");
 25	b.initUrlAndTarget(url, target);
 26	return b;
 27}
 28
 29/**
 30 * Construit un bouton 
 31 *@param dom balise dom img de l'image utilisé comme bouton
 32  *@param shortName Nom des images sans sufixes
 33  *@param extension extension des images
 34  *@param tooltip Message d'aide affiché au survol du bouton
 35  *@param toggle true si c'est un bouton poussoir
 36 */
 37function Button(type, idName, shortName, extension, toolTipText, toggle, mainModel, clickMethod, isAjax, url){
 38	
 39 	this.type = type; 
 40	this.toggle = toggle;
 41	this.isPressed = false;
 42	this.isDisabled = false;
 43	
 44	if(this.type == PICTURE_BUTTON){
 45		
 46		this.isImage = true;
 47		
 48		//this.parentDom = parentDom ;
 49		this.domBT = document.createElement("img") ;
 50		this.domBT.setAttribute("id", idName);
 51		//this.drawButton(idName);
 52		
 53		this.normal 		= new Image();
 54		this.normal.src 	= shortName +   '.' + extension;
 55		this.over 			= new Image();
 56		this.over.src 		= shortName + '_o.' + extension;
 57		this.press 			= new Image();
 58		this.press.src 		= shortName + '_p.' + extension;
 59		this.disable 		= new Image();
 60		this.disable.src 	= shortName + '_d.' + extension;
 61		//Init
 62		this.domBT.src = this.normal.src;
 63		
 64		this.domBT.onmouseover = this.getOver;
 65		this.domBT.onmouseout  = this.getOut;
 66		this.domBT.onmousedown  = this.getDown;
 67		this.domBT.onmouseup  = this.getUp;
 68	
 69	}else if(this.type == INPUT_BUTTON){
 70	
 71		this.isImage = false;
 72		this.domBT = document.createElement("input");
 73		this.domBT.setAttribute("id", idName);
 74		this.domBT.setAttribute("type", "button");
 75		this.domBT.setAttribute("value", shortName);
 76		
 77	}else if(this.type == TEXT_BUTTON){
 78	
 79		this.isImage = false;
 80		this.domBT = document.createElement("a");
 81		this.domBT.setAttribute("id", idName);
 82		this.domBT.textContent = shortName;
 83		
 84		this.domBT.onmouseover = this.getOver;
 85		this.domBT.onmouseout  = this.getOut;
 86		this.domBT.onmousedown  = this.getDown;
 87		this.domBT.onmouseup  = this.getUp;		
 88	}
 89	
 90	this.toolTipText = toolTipText;
 91	
 92	//On attache les mod?les du bouton et du container au DOM
 93	this.domBT.buttonModel = this;
 94	this.domBT.mainModel = mainModel;
 95	
 96	//Gestion du clic
 97	/*if(isAjax){
 98		this.url = url;
 99		this.domBT.onclick = clickMethod;
100	}else{*/
101	if(clickMethod){
102		this.domBT.onclick = clickMethod;
103	}
104	//}
105	
106}
107/**
108 *
109 */
110Button.prototype.drawButton = function(parentName){
111	document.getElementById(parentName).appendChild(this.getDom());
112	var ttp = new TooltipParams();
113	ttp.mustManageEvent = false;
114	this.tooltip = new Tooltip(this.domBT, this.toolTipText, ttp);
115}
116
117
118Button.prototype.initCSS = function(mainCSS, toggledCSS){
119	this.mainCSS = mainCSS;
120	this.toggledCSS = toggledCSS;
121	this.domBT.setAttribute("class", this.mainCSS);
122}
123Button.prototype.initUrlAndTarget = function(url, target){
124	if(target)
125		this.domBT.setAttribute("target", target);
126	if(url)
127		this.domBT.setAttribute("href", url);
128}
129Button.prototype.gotoUrl = function(){
130	//parent.frames[1].location.href = "sport.html";
131	//this.domBT.setAttribute("target", target);
132}
133
134/**
135  * Ecrit le button dans le document
136  * <img id="test1" />
137  *//*
138Button.prototype.drawButton = function (idName){
139	this.domBT = document.createElement("img");
140	var id = document.createAttribute("id");
141	id.nodeValue = idName;
142	this.domBT.setAttributeNode(id);
143	this.parentDom.parentNode.appendChild(this.domBT);
144}*/
145Button.prototype.getDom = function(){
146	return this.domBT;
147}
148Button.prototype.getTooltipDom = function(){
149	this.tooltip = new Tooltip(this.domBT, this.toolTipText);
150}
151Button.prototype.getHTML = function(){
152	return this.domBT.innnerHTML;
153}
154Button.prototype.unselect = function(){
155	
156	if(this.type == PICTURE_BUTTON){		
157		if(this.toggle){
158			this.domBT.src = this.normal.src;
159			this.isPressed = false;
160		}
161	}else if(this.type == TEXT_BUTTON){
162		if(this.toggle){
163			this.domBT.className = this.mainCSS;
164			this.isPressed = false;
165		}
166	}
167}
168Button.prototype.select = function(){
169	if(this.type == PICTURE_BUTTON){		
170		if(this.toggle){
171			this.domBT.src = this.press.src;
172			this.isPressed = true;
173		}
174	}else if(this.type == TEXT_BUTTON){
175		if(this.toggle){
176			this.domBT.className = this.mainCSS + " " + this.toggledCSS;
177			this.isPressed = true;
178		}
179	}
180}
181
182/**
183 *@return true si le bouton est desactivé et false sinon
184 */
185Button.prototype.isDisable = function(){
186	return this.isDisabled;
187}
188
189Button.prototype.changeVisibility = function(enable, visible){
190	if(enable){
191		this.domBT.src = this.normal.src;
192		this.domBT.style.visibility = 'visible';
193		this.isDisabled = false;
194	}else{
195		this.isDisabled = true;
196		if(visible){
197			if(this.type == PICTURE_BUTTON){
198				this.domBT.src = this.disable.src;
199			}
200			this.domBT.style.visibility = 'visible';
201		}else{
202			this.domBT.style.visibility = 'hidden';
203			
204		}
205	}
206}
207
208/**
209 * Methods called by an event
210 */
211Button.prototype.getOver = function(){
212
213	//On affiche un tooltip apr?s l'avoir survolé pendant au moins 1000ms
214	if(this.buttonModel.tooltip)
215		this.buttonModel.tooltip.mayShow();
216	
217	if(this.buttonModel.type == PICTURE_BUTTON && !this.buttonModel.isDisable() && !this.buttonModel.isPressed){
218		this.src = this.buttonModel.over.src;	
219	}else if(this.buttonModel.type == TEXT_BUTTON && !this.buttonModel.isDisable() && !this.buttonModel.isPressed){
220		this.className = this.buttonModel.mainCSS + " " + "over";
221	}
222}
223
224Button.prototype.getOut = function(){
225	
226	if(this.buttonModel.tooltip)
227		this.buttonModel.tooltip.mayHide();
228
229	if(this.buttonModel.type == PICTURE_BUTTON && !this.buttonModel.isDisable() && !this.buttonModel.isPressed){
230		this.src = this.buttonModel.normal.src;
231	}else if(this.buttonModel.type == TEXT_BUTTON && !this.buttonModel.isDisable() && !this.buttonModel.isPressed){
232		this.className = this.buttonModel.mainCSS;
233	}
234}
235
236Button.prototype.getDown = function(e){
237	if(!this.buttonModel.isDisable())
238		if(this.buttonModel.type == PICTURE_BUTTON){
239			
240			if(this.buttonModel.toggle){
241				if(this.buttonModel.isPressed){
242					this.src = this.buttonModel.normal.src;
243					this.buttonModel.isPressed = false;
244				}else{
245					this.src = this.buttonModel.press.src;
246					this.buttonModel.isPressed = true;
247				}
248			}else{
249				this.src = this.buttonModel.press.src;
250			}
251		}else if(this.buttonModel.type == TEXT_BUTTON){
252			if(this.buttonModel.toggle){
253				if(this.buttonModel.isPressed){
254					this.className = this.buttonModel.mainCSS;
255					this.buttonModel.isPressed = false;
256				}else{
257					this.className = this.buttonModel.mainCSS + " " + this.buttonModel.toggledCSS;
258					this.buttonModel.isPressed = true;
259				}
260			}else{
261				this.className = this.buttonModel.mainCSS;
262			}
263			
264		}
265}
266
267/**
268 *
269 */
270Button.prototype.getUp = function(){
271	if(this.buttonModel.type == PICTURE_BUTTON && !this.buttonModel.isDisable() && !this.buttonModel.toggle)
272		this.src = this.buttonModel.normal.src;
273}