PageRenderTime 28ms CodeModel.GetById 9ms app.highlight 14ms RepoModel.GetById 1ms app.codeStats 0ms

/branches/jsdoc_tk_gui/setup/workingDirectory/Webeo/gui/tooltip/Tooltip.js

http://jsdoc-toolkit.googlecode.com/
JavaScript | 310 lines | 151 code | 48 blank | 111 comment | 24 complexity | 3a0157ff61402a96a7f917c7c190ab86 MD5 | raw file
  1//TODO
  2ek.require("gui.tools.Position");
  3ek.require("gui.tools.Dom");
  4ek.require("gui.fx.Fade");
  5ek.require("gui.tooltip.TooltipManager");
  6ek.require("gui.tooltip.TooltipTemplate");
  7
  8ek.register("gui.tooltip.Tooltip");
  9
 10ek.requireCSS("css.gui.tooltip.Tooltip", "tooltip.Tooltip");
 11
 12//LINKS
 13//Tooltip = Tooltip;
 14
 15/**
 16 * The Object used to parameterize a Tooltip component.
 17 *
 18 * @param cssClass
 19 * @param pos
 20 * @param timeToShow
 21 * @param timeToHide
 22 * @param isAlpha
 23 * @param mustManageEvent 
 24 * @param tooltipTemplate The template used to render the tooltip
 25 * @param logLevel the level of the logger
 26 * @class
 27 * @constructor
 28 */
 29function TooltipParams (cssClass, pos, timeToShow, timeToHide, isAlpha, mustManageEvent, tooltipTemplate, logLevel){
 30
 31	this.cssClass = (cssClass)? cssClass : 'tooltip';
 32	this.position = (pos && pos instanceof Position) ? pos : new Position();
 33	this.timeToShow = (timeToShow)? timeToShow : 1000;
 34	this.timeToHide = (timeToHide)? timeToHide : 500;
 35	
 36	this.isAlpha = (isAlpha!=null && !isAlpha instanceof FadeParams) ? isAlpha : true;
 37	this.fadeParams = (isAlpha instanceof FadeParams) ? isAlpha : null;
 38	
 39	this.mustManageEvent = (mustManageEvent!=null)? mustManageEvent : true;
 40	
 41	this.tooltipTemplate = new TooltipTemplate(tooltipTemplate); 
 42	
 43	this.logLevel = (logLevel) ? logLevel : Logger.LEVEL_NONE;
 44}
 45
 46
 47Tooltip.prototype.version = "1.0";
 48
 49/**
 50 *@vis public
 51 */
 52Tooltip.prototype.getVersion = function (alert){
 53	if(alert)
 54		alert('Tooltip.js => version: ' +this.version);
 55	else
 56		return this.version;
 57}
 58
 59/**
 60  * Affiche un Tooltip pour un élement Dom
 61  * Exemple de classe CSS pour le tooltip
 62  * .tooltip{
 63  *	position: absolute;
 64  *	z-index: 3;
 65  *	background-color : #cdd7e1;
 66  *	border-style: solid;
 67  *	border-width: 1px;
 68  *	border-color: #6688aa;
 69  *	text-align: center  ;
 70  *	color:637e9a;
 71  *	font-size: 11pt;
 72  *	font-style: normal;		
 73  * }
 74  *@requires Position
 75  *@requires Fade
 76  *@requires Dom
 77  *@requires Logger
 78  *@param dom élément Dom du tooltip ou l'id de l'élément dom
 79  *@param relativeDom élément Dom par rapport auqiel le tooltip se placera ou l'id de l'élément dom
 80  *@param mustManageEvent si Vrai on gére les event de la souris Sinon le developpeur doit appeler mayShow et mayHide
 81  *@param toolTipText Texte du tooltip
 82  *@param cssClass ==> Classe CSS ? utiliser par le tooltip
 83  *@param timeToShow ==> temps d'attente avant de montrer le tooltip
 84  *@param timeToHide ==> temps d'attente avant de caher le tooltip
 85  *@param pos Objet position
 86  *@vis public
 87 */
 88function Tooltip (dom, toolTipText, params, relativeDom){
 89	
 90	this.hideTimer = undefined;
 91	this.showTimer = undefined;	
 92	
 93	this.parentDom = new Array();
 94	
 95	//PARAMETERS SET
 96	this.params = (params !=null && params instanceof TooltipParams)? params : new TooltipParams();
 97
 98	//try{
 99	
100		if(dom instanceof Array){
101			for(var i = 0 ; i < dom.length ; i++){
102				this.parentDom[i] = (typeof dom[i] == "object")? dom[i] : Dom.getElement(dom[i]);
103			}
104		}else{
105			this.parentDom[0] = (typeof dom == "object")? dom : Dom.getElement(dom);
106		}
107		
108		
109		this.getLogger().trace("new Tooltip( dom="+dom+", tooltiptext="+toolTipText+", params="+params+", relativeDom="+relativeDom+")");
110
111		this.divNameTT = this.parentDom[0].id + '_TT';
112		this.drawTooltip(toolTipText, this.params.cssClass);	
113
114		if(relativeDom != null )
115			this.relativeDom = (typeof relativeDom == "object") ? relativeDom : Dom.getElement(relativeDom);
116	    else
117			this.relativeDom = this.parentDom[0];
118		
119		//this.domTT.innerHTML = toolTipText;
120		//this.domTT.className = this.params.cssClass;
121		
122		//Sauvegarde this pour les événements
123		this.domTT.ttModel = this;
124		
125		//Gestion des événements
126		this.domTT.onmouseover = this.getOver;
127		this.domTT.onmouseout = this.getOut;
128
129		//Positionnement par rapport ? l'élément parent
130		if(this.parentDom[0].style.position=="")
131			this.parentDom[0].style.position = "relative";
132		
133		this.domTT.style.position = "absolute";
134		if(this.params.mustManageEvent){
135			for(var i = 0 ; i < this.parentDom.length; i++){
136				this.parentDom[i].ttModel = this;
137				this.parentDom[i].onmouseover = this.getParentOver;
138				this.parentDom[i].onmouseout = this.getParentOut;
139			}
140		}
141		//Else you must call the mayShow and mayHide functions with your own listener
142
143		if(this.params.isAlpha){
144			Fade.register(this.divNameTT, this.params.fadeParams);
145		}
146		this.hide();
147			
148	/*}catch(e){
149		alert("Tooltip error: "+e);
150	}*/
151} 
152
153Tooltip.prototype.getLogger = function (){
154	if(!this.logger){
155		this.logger = getLogger("TOOLTIP");
156		this.logger.setLevel(this.params.logLevel);
157	}
158	this.logger.setCurrentID(this.parentDom[0].id);
159	return this.logger;
160}
161
162/**
163  * Write the tooltip into the document
164  * <div class="tooltip style="display:none;" "id="TT_'+name+'_'+ this.divName+ '"></div>
165  *@vis public
166  */
167Tooltip.prototype.drawTooltip = function (text, clazz){
168	this.getLogger().trace("Drawing the tooltip");
169
170	//this.domTT = Dom.createHTMLDivElement(text, clazz, this.divNameTT);
171	this.domTT = this.params.tooltipTemplate.getTemplate(text, clazz, this.divNameTT);
172	if(this.parentDom[0].parentNode)
173		this.parentDom[0].parentNode.appendChild(this.domTT);
174}
175Tooltip.prototype.applyParams = function (params){
176	this.getLogger().trace("Apply Params: "+params.toString());
177
178	this.params = params;
179	this.domTT.className = this.params.cssClass;
180	if(this.params.isAlpha){
181		Fade.register(this.divNameTT);
182	}
183}
184
185/**
186 * Affiche le Tooltip
187 *@vis private
188  */
189Tooltip.prototype.show = function (){
190
191	this.getLogger().trace("Show Tooltip");
192
193	
194ll = Dom.getStyle(this.domTT, "width");
195this.domTT.style.left = this.params.position.getLeftPosition(this.relativeDom.offsetLeft, this.relativeDom.offsetWidth, ll.substring(0,ll.indexOf('px')) ) +"px";
196
197tt = Dom.getStyle(this.domTT, "height");
198this.domTT.style.top = this.params.position.getTopPosition(this.relativeDom.offsetTop, this.relativeDom.offsetHeight , tt.substring(0,tt.indexOf('px')) ) +"px";
199
200//this.domTT.style.left = this.params.position.getLeftPosition(this.relativeDom.offsetLeft, this.relativeDom.offsetWidth, this.domTT.style.width.substring(0,this.domTT.style.width.indexOf('px')) );
201//this.domTT.style.top = this.params.position.getTopPosition(this.relativeDom.offsetHeight, this.relativeDom.offsetHeight, this.domTT.style.height.substring(0,this.domTT.style.height.indexOf('px')) );
202
203	//this.clearTimer(false);	
204	
205	if(this.params.isAlpha){
206		Fade.fadeIn(this.divNameTT);
207		this.isShown = true;
208	}else{
209		this.domTT.style.display = '';
210		this.isShown = true;
211	}
212}
213/**
214  * Cache le Tooltip
215   *@private
216  */
217Tooltip.prototype.hide = function (e){
218	
219	this.getLogger().trace("Hide Tooltip");
220	
221	//this.clearTimer(true);	
222	
223	if(this.params.isAlpha){
224		Fade.fadeOut(this.divNameTT);
225		this.isShown = false;
226	}else{
227		this.domTT.style.display ='none';
228		this.isShown = false;
229	}
230}
231/** 
232 * Si un compte a rebours pour cacher le tooltip existe alors on le stoppe
233  *@private
234 */
235Tooltip.prototype.clearTimer = function (show){
236	
237	
238	(show) ? this.getLogger().trace("Clear Show-timer") : this.getLogger().trace("Clear Hide-timer");
239
240	if(show && this.showTimer){
241		window.clearTimeout(this.showTimer);	
242		this.showTimer = undefined;
243	}
244	if(!show && this.hideTimer){
245		window.clearTimeout(this.hideTimer);	
246		this.hideTimer = undefined;
247	}
248}
249/** 
250 * Lors d'un survol du tooltip on le montre
251  *@vis private
252 */
253Tooltip.prototype.getOver = function (){
254	this.ttModel.getLogger().trace("onMouseOver");
255	this.ttModel.clearTimer(false);	
256	this.ttModel.show();
257}
258/** 
259 * Lorsqu'on quitte le survol du tooltip on le cache
260 */
261Tooltip.prototype.getOut = function (){
262	this.ttModel.getLogger().trace("onMouseOut");
263	this.ttModel.clearTimer(true);	
264	this.ttModel.hide();
265}
266/** 
267 * Lors d'un survol du parent on montre le tooltip
268  *@vis private
269 */
270Tooltip.prototype.getParentOver = function (){
271	this.ttModel.getLogger().trace("onParentMouseOver")
272	this.ttModel.mayShow();
273}
274/** 
275 * Lorsqu'on quitte le survol du parent on cache le tooltip
276 */
277Tooltip.prototype.getParentOut = function (){
278	this.ttModel.getLogger().trace("onParentMouseOut")
279	this.ttModel.mayHide();
280}
281/** 
282 * Lors d'un survol du tooltip on le montre
283 *@vis private
284 */
285Tooltip.prototype.mayShow = function (){
286	this.getLogger().trace("mayShow");
287	this.clearTimer(false);	
288	//if(!this.isShown)
289		this.showTimer = window.setTimeout("document.getElementById('" + this.divNameTT + "').ttModel.show()", this.params.timeToShow);
290}
291/** 
292 * Lors d'un survol du tooltip on le montre
293 *@vis private
294 */
295Tooltip.prototype.mayHide = function (){
296	this.getLogger().trace("mayHide");
297	this.clearTimer(true);	
298	//On annule le timeout destiné ? affiché le tooltip
299	//window.clearTimeout(this.showTimer);
300	//if(this.isShown)
301		this.hideTimer = window.setTimeout("document.getElementById('" + this.divNameTT + "').ttModel.hide()", this.params.timeToHide);
302}
303/**
304 *
305 */
306Tooltip.prototype.erase = function (){
307	this.getLogger().trace("Erase");
308	alert("erasing tooltip "+this.divName);
309}
310