Context Navigation

source: Dev/branches/rest-dojo-ui/client/dijit/Tooltip.js @ 274

Last change on this file since 274 was 256, checked in by hendrikvanantwerpen, 13 years ago
Reworked project structure based on REST interaction and Dojo library. As soon as this is stable, the old jQueryUI branch can be removed (it's kept for reference).
File size: 17.1 KB

Line
1	define([
2	"dojo/_base/array", // array.forEach array.indexOf array.map
3	"dojo/_base/declare", // declare
4	"dojo/_base/fx", // fx.fadeIn fx.fadeOut
5	"dojo/dom", // dom.byId
6	"dojo/dom-class", // domClass.add
7	"dojo/dom-geometry", // domGeometry.getMarginBox domGeometry.position
8	"dojo/dom-style", // domStyle.set, domStyle.get
9	"dojo/_base/lang", // lang.hitch lang.isArrayLike
10	"dojo/_base/sniff", // has("ie")
11	"dojo/_base/window", // win.body
12	"./_base/manager", // manager.defaultDuration
13	"./place",
14	"./_Widget",
15	"./_TemplatedMixin",
16	"./BackgroundIframe",
17	"dojo/text!./templates/Tooltip.html",
18	"." // sets dijit.showTooltip etc. for back-compat
19	], function(array, declare, fx, dom, domClass, domGeometry, domStyle, lang, has, win,
20	manager, place, _Widget, _TemplatedMixin, BackgroundIframe, template, dijit){
21
22	/*=====
23	var _Widget = dijit._Widget;
24	var BackgroundIframe = dijit.BackgroundIframe;
25	var _TemplatedMixin = dijit._TemplatedMixin;
26	=====*/
27
28	// module:
29	// dijit/Tooltip
30	// summary:
31	// Defines dijit.Tooltip widget (to display a tooltip), showTooltip()/hideTooltip(), and _MasterTooltip
32
33
34	var MasterTooltip = declare("dijit._MasterTooltip", [_Widget, _TemplatedMixin], {
35	// summary:
36	// Internal widget that holds the actual tooltip markup,
37	// which occurs once per page.
38	// Called by Tooltip widgets which are just containers to hold
39	// the markup
40	// tags:
41	// protected
42
43	// duration: Integer
44	// Milliseconds to fade in/fade out
45	duration: manager.defaultDuration,
46
47	templateString: template,
48
49	postCreate: function(){
50	win.body().appendChild(this.domNode);
51
52	this.bgIframe = new BackgroundIframe(this.domNode);
53
54	// Setup fade-in and fade-out functions.
55	this.fadeIn = fx.fadeIn({ node: this.domNode, duration: this.duration, onEnd: lang.hitch(this, "_onShow") });
56	this.fadeOut = fx.fadeOut({ node: this.domNode, duration: this.duration, onEnd: lang.hitch(this, "_onHide") });
57	},
58
59	show: function(innerHTML, aroundNode, position, rtl, textDir){
60	// summary:
61	// Display tooltip w/specified contents to right of specified node
62	// (To left if there's no space on the right, or if rtl == true)
63	// innerHTML: String
64	// Contents of the tooltip
65	// aroundNode: DomNode \|\| dijit.__Rectangle
66	// Specifies that tooltip should be next to this node / area
67	// position: String[]?
68	// List of positions to try to position tooltip (ex: ["right", "above"])
69	// rtl: Boolean?
70	// Corresponds to `WidgetBase.dir` attribute, where false means "ltr" and true
71	// means "rtl"; specifies GUI direction, not text direction.
72	// textDir: String?
73	// Corresponds to `WidgetBase.textdir` attribute; specifies direction of text.
74
75
76	if(this.aroundNode && this.aroundNode === aroundNode && this.containerNode.innerHTML == innerHTML){
77	return;
78	}
79
80	// reset width; it may have been set by orient() on a previous tooltip show()
81	this.domNode.width = "auto";
82
83	if(this.fadeOut.status() == "playing"){
84	// previous tooltip is being hidden; wait until the hide completes then show new one
85	this._onDeck=arguments;
86	return;
87	}
88	this.containerNode.innerHTML=innerHTML;
89
90	this.set("textDir", textDir);
91	this.containerNode.align = rtl? "right" : "left"; //fix the text alignment
92
93	var pos = place.around(this.domNode, aroundNode,
94	position && position.length ? position : Tooltip.defaultPosition, !rtl, lang.hitch(this, "orient"));
95
96	// Position the tooltip connector for middle alignment.
97	// This could not have been done in orient() since the tooltip wasn't positioned at that time.
98	var aroundNodeCoords = pos.aroundNodePos;
99	if(pos.corner.charAt(0) == 'M' && pos.aroundCorner.charAt(0) == 'M'){
100	this.connectorNode.style.top = aroundNodeCoords.y + ((aroundNodeCoords.h - this.connectorNode.offsetHeight) >> 1) - pos.y + "px";
101	this.connectorNode.style.left = "";
102	}else if(pos.corner.charAt(1) == 'M' && pos.aroundCorner.charAt(1) == 'M'){
103	this.connectorNode.style.left = aroundNodeCoords.x + ((aroundNodeCoords.w - this.connectorNode.offsetWidth) >> 1) - pos.x + "px";
104	}
105
106	// show it
107	domStyle.set(this.domNode, "opacity", 0);
108	this.fadeIn.play();
109	this.isShowingNow = true;
110	this.aroundNode = aroundNode;
111	},
112
113	orient: function(/DomNode/ node, /String/ aroundCorner, /String/ tooltipCorner, /Object/ spaceAvailable, /Object/ aroundNodeCoords){
114	// summary:
115	// Private function to set CSS for tooltip node based on which position it's in.
116	// This is called by the dijit popup code. It will also reduce the tooltip's
117	// width to whatever width is available
118	// tags:
119	// protected
120	this.connectorNode.style.top = ""; //reset to default
121
122	//Adjust the spaceAvailable width, without changing the spaceAvailable object
123	var tooltipSpaceAvaliableWidth = spaceAvailable.w - this.connectorNode.offsetWidth;
124
125	node.className = "dijitTooltip " +
126	{
127	"MR-ML": "dijitTooltipRight",
128	"ML-MR": "dijitTooltipLeft",
129	"TM-BM": "dijitTooltipAbove",
130	"BM-TM": "dijitTooltipBelow",
131	"BL-TL": "dijitTooltipBelow dijitTooltipABLeft",
132	"TL-BL": "dijitTooltipAbove dijitTooltipABLeft",
133	"BR-TR": "dijitTooltipBelow dijitTooltipABRight",
134	"TR-BR": "dijitTooltipAbove dijitTooltipABRight",
135	"BR-BL": "dijitTooltipRight",
136	"BL-BR": "dijitTooltipLeft"
137	}[aroundCorner + "-" + tooltipCorner];
138
139	// reduce tooltip's width to the amount of width available, so that it doesn't overflow screen
140	this.domNode.style.width = "auto";
141	var size = domGeometry.getContentBox(this.domNode);
142
143	var width = Math.min((Math.max(tooltipSpaceAvaliableWidth,1)), size.w);
144	var widthWasReduced = width < size.w;
145
146	this.domNode.style.width = width+"px";
147
148	//Adjust width for tooltips that have a really long word or a nowrap setting
149	if(widthWasReduced){
150	this.containerNode.style.overflow = "auto"; //temp change to overflow to detect if our tooltip needs to be wider to support the content
151	var scrollWidth = this.containerNode.scrollWidth;
152	this.containerNode.style.overflow = "visible"; //change it back
153	if(scrollWidth > width){
154	scrollWidth = scrollWidth + domStyle.get(this.domNode,"paddingLeft") + domStyle.get(this.domNode,"paddingRight");
155	this.domNode.style.width = scrollWidth + "px";
156	}
157	}
158
159	// Reposition the tooltip connector.
160	if(tooltipCorner.charAt(0) == 'B' && aroundCorner.charAt(0) == 'B'){
161	var mb = domGeometry.getMarginBox(node);
162	var tooltipConnectorHeight = this.connectorNode.offsetHeight;
163	if(mb.h > spaceAvailable.h){
164	// The tooltip starts at the top of the page and will extend past the aroundNode
165	var aroundNodePlacement = spaceAvailable.h - ((aroundNodeCoords.h + tooltipConnectorHeight) >> 1);
166	this.connectorNode.style.top = aroundNodePlacement + "px";
167	this.connectorNode.style.bottom = "";
168	}else{
169	// Align center of connector with center of aroundNode, except don't let bottom
170	// of connector extend below bottom of tooltip content, or top of connector
171	// extend past top of tooltip content
172	this.connectorNode.style.bottom = Math.min(
173	Math.max(aroundNodeCoords.h/2 - tooltipConnectorHeight/2, 0),
174	mb.h - tooltipConnectorHeight) + "px";
175	this.connectorNode.style.top = "";
176	}
177	}else{
178	// reset the tooltip back to the defaults
179	this.connectorNode.style.top = "";
180	this.connectorNode.style.bottom = "";
181	}
182
183	return Math.max(0, size.w - tooltipSpaceAvaliableWidth);
184	},
185
186	_onShow: function(){
187	// summary:
188	// Called at end of fade-in operation
189	// tags:
190	// protected
191	if(has("ie")){
192	// the arrow won't show up on a node w/an opacity filter
193	this.domNode.style.filter="";
194	}
195	},
196
197	hide: function(aroundNode){
198	// summary:
199	// Hide the tooltip
200
201	if(this._onDeck && this._onDeck[1] == aroundNode){
202	// this hide request is for a show() that hasn't even started yet;
203	// just cancel the pending show()
204	this._onDeck=null;
205	}else if(this.aroundNode === aroundNode){
206	// this hide request is for the currently displayed tooltip
207	this.fadeIn.stop();
208	this.isShowingNow = false;
209	this.aroundNode = null;
210	this.fadeOut.play();
211	}else{
212	// just ignore the call, it's for a tooltip that has already been erased
213	}
214	},
215
216	_onHide: function(){
217	// summary:
218	// Called at end of fade-out operation
219	// tags:
220	// protected
221
222	this.domNode.style.cssText=""; // to position offscreen again
223	this.containerNode.innerHTML="";
224	if(this._onDeck){
225	// a show request has been queued up; do it now
226	this.show.apply(this, this._onDeck);
227	this._onDeck=null;
228	}
229	},
230
231	_setAutoTextDir: function(/Object/node){
232	// summary:
233	// Resolve "auto" text direction for children nodes
234	// tags:
235	// private
236
237	this.applyTextDir(node, has("ie") ? node.outerText : node.textContent);
238	array.forEach(node.children, function(child){this._setAutoTextDir(child); }, this);
239	},
240
241	_setTextDirAttr: function(/String/ textDir){
242	// summary:
243	// Setter for textDir.
244	// description:
245	// Users shouldn't call this function; they should be calling
246	// set('textDir', value)
247	// tags:
248	// private
249
250	this._set("textDir", typeof textDir != 'undefined'? textDir : "");
251	if (textDir == "auto"){
252	this._setAutoTextDir(this.containerNode);
253	}else{
254	this.containerNode.dir = this.textDir;
255	}
256	}
257	});
258
259	dijit.showTooltip = function(innerHTML, aroundNode, position, rtl, textDir){
260	// summary:
261	// Static method to display tooltip w/specified contents in specified position.
262	// See description of dijit.Tooltip.defaultPosition for details on position parameter.
263	// If position is not specified then dijit.Tooltip.defaultPosition is used.
264	// innerHTML: String
265	// Contents of the tooltip
266	// aroundNode: dijit.__Rectangle
267	// Specifies that tooltip should be next to this node / area
268	// position: String[]?
269	// List of positions to try to position tooltip (ex: ["right", "above"])
270	// rtl: Boolean?
271	// Corresponds to `WidgetBase.dir` attribute, where false means "ltr" and true
272	// means "rtl"; specifies GUI direction, not text direction.
273	// textDir: String?
274	// Corresponds to `WidgetBase.textdir` attribute; specifies direction of text.
275	if(!Tooltip._masterTT){ dijit._masterTT = Tooltip._masterTT = new MasterTooltip(); }
276	return Tooltip._masterTT.show(innerHTML, aroundNode, position, rtl, textDir);
277	};
278
279	dijit.hideTooltip = function(aroundNode){
280	// summary:
281	// Static method to hide the tooltip displayed via showTooltip()
282	return Tooltip._masterTT && Tooltip._masterTT.hide(aroundNode);
283	};
284
285	var Tooltip = declare("dijit.Tooltip", _Widget, {
286	// summary:
287	// Pops up a tooltip (a help message) when you hover over a node.
288
289	// label: String
290	// Text to display in the tooltip.
291	// Specified as innerHTML when creating the widget from markup.
292	label: "",
293
294	// showDelay: Integer
295	// Number of milliseconds to wait after hovering over/focusing on the object, before
296	// the tooltip is displayed.
297	showDelay: 400,
298
299	// connectId: String\|String[]
300	// Id of domNode(s) to attach the tooltip to.
301	// When user hovers over specified dom node, the tooltip will appear.
302	connectId: [],
303
304	// position: String[]
305	// See description of `dijit.Tooltip.defaultPosition` for details on position parameter.
306	position: [],
307
308	_setConnectIdAttr: function(/String\|String[]/ newId){
309	// summary:
310	// Connect to specified node(s)
311
312	// Remove connections to old nodes (if there are any)
313	array.forEach(this._connections \|\| [], function(nested){
314	array.forEach(nested, lang.hitch(this, "disconnect"));
315	}, this);
316
317	// Make array of id's to connect to, excluding entries for nodes that don't exist yet, see startup()
318	this._connectIds = array.filter(lang.isArrayLike(newId) ? newId : (newId ? [newId] : []),
319	function(id){ return dom.byId(id); });
320
321	// Make connections
322	this._connections = array.map(this._connectIds, function(id){
323	var node = dom.byId(id);
324	return [
325	this.connect(node, "onmouseenter", "_onHover"),
326	this.connect(node, "onmouseleave", "_onUnHover"),
327	this.connect(node, "onfocus", "_onHover"),
328	this.connect(node, "onblur", "_onUnHover")
329	];
330	}, this);
331
332	this._set("connectId", newId);
333	},
334
335	addTarget: function(/DOMNODE \|\| String/ node){
336	// summary:
337	// Attach tooltip to specified node if it's not already connected
338
339	// TODO: remove in 2.0 and just use set("connectId", ...) interface
340
341	var id = node.id \|\| node;
342	if(array.indexOf(this._connectIds, id) == -1){
343	this.set("connectId", this._connectIds.concat(id));
344	}
345	},
346
347	removeTarget: function(/DomNode \|\| String/ node){
348	// summary:
349	// Detach tooltip from specified node
350
351	// TODO: remove in 2.0 and just use set("connectId", ...) interface
352
353	var id = node.id \|\| node, // map from DOMNode back to plain id string
354	idx = array.indexOf(this._connectIds, id);
355	if(idx >= 0){
356	// remove id (modifies original this._connectIds but that's OK in this case)
357	this._connectIds.splice(idx, 1);
358	this.set("connectId", this._connectIds);
359	}
360	},
361
362	buildRendering: function(){
363	this.inherited(arguments);
364	domClass.add(this.domNode,"dijitTooltipData");
365	},
366
367	startup: function(){
368	this.inherited(arguments);
369
370	// If this tooltip was created in a template, or for some other reason the specified connectId[s]
371	// didn't exist during the widget's initialization, then connect now.
372	var ids = this.connectId;
373	array.forEach(lang.isArrayLike(ids) ? ids : [ids], this.addTarget, this);
374	},
375
376	_onHover: function(/Event/ e){
377	// summary:
378	// Despite the name of this method, it actually handles both hover and focus
379	// events on the target node, setting a timer to show the tooltip.
380	// tags:
381	// private
382	if(!this._showTimer){
383	var target = e.target;
384	this._showTimer = setTimeout(lang.hitch(this, function(){this.open(target)}), this.showDelay);
385	}
386	},
387
388	_onUnHover: function(/Event/ /===== e =====/){
389	// summary:
390	// Despite the name of this method, it actually handles both mouseleave and blur
391	// events on the target node, hiding the tooltip.
392	// tags:
393	// private
394
395	// keep a tooltip open if the associated element still has focus (even though the
396	// mouse moved away)
397	if(this._focus){ return; }
398
399	if(this._showTimer){
400	clearTimeout(this._showTimer);
401	delete this._showTimer;
402	}
403	this.close();
404	},
405
406	open: function(/DomNode/ target){
407	// summary:
408	// Display the tooltip; usually not called directly.
409	// tags:
410	// private
411
412	if(this._showTimer){
413	clearTimeout(this._showTimer);
414	delete this._showTimer;
415	}
416	Tooltip.show(this.label \|\| this.domNode.innerHTML, target, this.position, !this.isLeftToRight(), this.textDir);
417
418	this._connectNode = target;
419	this.onShow(target, this.position);
420	},
421
422	close: function(){
423	// summary:
424	// Hide the tooltip or cancel timer for show of tooltip
425	// tags:
426	// private
427
428	if(this._connectNode){
429	// if tooltip is currently shown
430	Tooltip.hide(this._connectNode);
431	delete this._connectNode;
432	this.onHide();
433	}
434	if(this._showTimer){
435	// if tooltip is scheduled to be shown (after a brief delay)
436	clearTimeout(this._showTimer);
437	delete this._showTimer;
438	}
439	},
440
441	onShow: function(/===== target, position =====/){
442	// summary:
443	// Called when the tooltip is shown
444	// tags:
445	// callback
446	},
447
448	onHide: function(){
449	// summary:
450	// Called when the tooltip is hidden
451	// tags:
452	// callback
453	},
454
455	uninitialize: function(){
456	this.close();
457	this.inherited(arguments);
458	}
459	});
460
461	Tooltip._MasterTooltip = MasterTooltip; // for monkey patching
462	Tooltip.show = dijit.showTooltip; // export function through module return value
463	Tooltip.hide = dijit.hideTooltip; // export function through module return value
464
465	// dijit.Tooltip.defaultPosition: String[]
466	// This variable controls the position of tooltips, if the position is not specified to
467	// the Tooltip widget or *TextBox widget itself. It's an array of strings with the following values:
468	//
469	// * before: places tooltip to the left of the target node/widget, or to the right in
470	// the case of RTL scripts like Hebrew and Arabic
471	// * after: places tooltip to the right of the target node/widget, or to the left in
472	// the case of RTL scripts like Hebrew and Arabic
473	// * above: tooltip goes above target node
474	// * below: tooltip goes below target node
475	// * top: tooltip goes above target node but centered connector
476	// * bottom: tooltip goes below target node but centered connector
477	//
478	// The list is positions is tried, in order, until a position is found where the tooltip fits
479	// within the viewport.
480	//
481	// Be careful setting this parameter. A value of "above" may work fine until the user scrolls
482	// the screen so that there's no room above the target node. Nodes with drop downs, like
483	// DropDownButton or FilteringSelect, are especially problematic, in that you need to be sure
484	// that the drop down and tooltip don't overlap, even when the viewport is scrolled so that there
485	// is only room below (or above) the target node, but not both.
486	Tooltip.defaultPosition = ["after", "before"];
487
488
489	return Tooltip;
490	});

Note: See TracBrowser for help on using the repository browser.

Download in other formats: