Context Navigation

source: trunk/web-app/js/HelpBalloon.js @ 466

Last change on this file since 466 was 449, checked in by gav, 15 years ago
Upgrade to Grails-1.2.1, all plugins upgraded to latest versions and configs adjusted to suite.
File size: 27.2 KB

Rev	Line
[449]	1	//
	2	// Copyright (c) 2008 Beau D. Scott \| http://www.beauscott.com
	3	//
	4	// Permission is hereby granted, free of charge, to any person
	5	// obtaining a copy of this software and associated documentation
	6	// files (the "Software"), to deal in the Software without
	7	// restriction, including without limitation the rights to use,
	8	// copy, modify, merge, publish, distribute, sublicense, and/or sell
	9	// copies of the Software, and to permit persons to whom the
	10	// Software is furnished to do so, subject to the following
	11	// conditions:
	12	//
	13	// The above copyright notice and this permission notice shall be
	14	// included in all copies or substantial portions of the Software.
	15	//
	16	// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
	17	// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
	18	// OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
	19	// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
	20	// HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
	21	// WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
	22	// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
	23	// OTHER DEALINGS IN THE SOFTWARE.
	24	//
	25
	26	/**
	27	* HelpBalloon.js
	28	* Prototype/Scriptaculous based help balloons / dialog balloons
	29	* @version 2.0.1
	30	* @requires prototype.js <http://www.prototypejs.org/>
	31	* @author Beau D. Scott <beau_scott@hotmail.com>
	32	* 4/10/2008
	33	*/
	34	var HelpBalloon = Object.extend(Class.create(), {
	35	/**
	36	* Enumerated value for dynamic rendering position.
	37	* @static
	38	*/
	39	POS_DYNAMIC: -1,
	40	/**
	41	* Enumerated value for the top-left rendering position.
	42	* @static
	43	*/
	44	POS_TOP_LEFT: 0,
	45	/**
	46	* Enumerated value for the top-right rendering position.
	47	* @static
	48	*/
	49	POS_TOP_RIGHT: 1,
	50	/**
	51	* Enumerated value for the bottom-left rendering position.
	52	* @static
	53	*/
	54	POS_BOTTOM_LEFT: 2,
	55	/**
	56	* Enumerated value for the bottom-right rendering position.
	57	* @static
	58	*/
	59	POS_BOTTOM_RIGHT: 3,
	60	/**
	61	* CSS Classname to look for when doing auto link associations.
	62	* @static
	63	*/
	64	ELEMENT_CLASS_NAME: 'HelpBalloon',
	65	/**
	66	* Global array of all HelpBalloon instances.
	67	* (Cheaper than document.getElementByClassName with a property check)
	68	* @static
	69	* @private
	70	*/
	71	_balloons: [],
	72	/**
	73	* Event listener that auto-associates anchors with a dynamic HelpBalloon.
	74	* Also begins mouse movement registration
	75	* @static
	76	*/
	77	registerClassLinks: function(e) {
	78	$A(document.getElementsByClassName(HelpBalloon.ELEMENT_CLASS_NAME))
	79	.each(function(obj){
	80	// Only apply any element with an href tag
	81	if(obj && obj.tagName && obj.href && obj.href != '')
	82	{
	83	new HelpBalloon({
	84	icon:obj,
	85	method: 'get'
	86	});
	87	}
	88	});
	89
	90	Event.observe(document, 'mousemove', HelpBalloon._trackMousePosition);
	91
	92	},
	93
	94	/**
	95	* Private cache of the client's mouseX position
	96	*/
	97	_mouseX: 0,
	98
	99	/**
	100	* Private cache of the client's mouseY position
	101	*/
	102	_mouseY: 0,
	103
	104	/**
	105	* @param {Event} e
	106	*/
	107	_trackMousePosition: function(e) {
	108	if(!e) e = window.event;
	109	HelpBalloon._mouseX = e.clientX;
	110	HelpBalloon._mouseY = e.clientY;
	111	}
	112	});
	113
	114	//
	115	// Event for activating HelpBalloon classed links
	116	//
	117	Event.observe(window, 'load', HelpBalloon.registerClassLinks);
	118
	119	HelpBalloon.prototype = {
	120
	121	//
	122	// Properties
	123	//
	124	/**
	125	* Configuration options
	126	* @var {HelpBalloon.Options}
	127	*/
	128	options: null,
	129
	130	/**
	131	* Containing element of the balloon
	132	* @var {Element}
	133	*/
	134	container: null,
	135	/**
	136	* Inner content container
	137	* @var {Element}
	138	*/
	139	inner: null,
	140	/**
	141	* A reference to the anchoring element/icon
	142	* @var {Element}
	143	*/
	144	icon: null,
	145	/**
	146	* Content container
	147	* @var {Element}
	148	*/
	149	content: null,
	150	/**
	151	* Closing button element
	152	* @var {Element}
	153	*/
	154	button: null,
	155	/**
	156	* The closer object. This can be the same as button, but could
	157	* also be a div with a png loaded as the back ground, browser dependent.
	158	* @var {Element}
	159	*/
	160	closer: null,
	161	/**
	162	* Title container
	163	* @var {Element}
	164	*/
	165	titleContainer: null,
	166	/**
	167	* Background container (houses the balloon images
	168	* @var {Element}
	169	*/
	170	bgContainer: null,
	171	/**
	172	* Array of balloon image references
	173	* @var {Array}
	174	*/
	175	balloons: null,
	176
	177	/**
	178	* The local store of 'title'. Will change if the balloon is making a remote call
	179	* unless options.title is specified
	180	* @var {String}
	181	*/
	182	_titleString: null,
	183
	184	/**
	185	* The balloons visibility state.
	186	* @var {Boolean}
	187	*/
	188	visible: false,
	189
	190	/**
	191	* Rendering status
	192	* @var {Boolean}
	193	*/
	194	drawn: false,
	195
	196	/**
	197	* Stores the balloon coordinates
	198	* @var {Object}
	199	*/
	200	balloonCoords: null,
	201
	202	/**
	203	* Width,height of the balloons
	204	* @var {Array}
	205	*/
	206	balloonDimensions: null,
	207
	208	/**
	209	* ID for HelpBalloon
	210	* @var {String}
	211	*/
	212	id: null,
	213
	214	/**
	215	* Used at render time to measure the dimensions of the loaded balloon
	216	* @private
	217	*/
	218	_lastBalloon: null,
	219
	220	//
	221	// Methods
	222	//
	223
	224	/**
	225	* @param {Object} options
	226	* @see HelpBalloon.Options
	227	* @constructor
	228	*/
	229	initialize: function(options)
	230	{
	231
	232	this.options = new HelpBalloon.Options();
	233	Object.extend(this.options, options \|\| {});
	234
	235	this._titleString = this.options.title;
	236	this.balloonDimensions = [0,0];
	237
	238	//
	239	// Preload the balloon and button images so they're ready
	240	// at render time
	241	//
	242	// 0 1
	243	// X
	244	// 2 3
	245	//
	246	this.balloons = [];
	247	for(var i = 0; i < 4; i++)
	248	{
	249	var balloon = new Element('img', {
	250	src: this.options.balloonPrefix + i + this.options.balloonSuffix
	251	});
	252	this.balloons.push(balloon.src);
	253	}
	254
	255	this._lastBalloon = balloon;
	256
	257	this.button = new Element('img', {
	258	src: this.options.button
	259	});
	260
	261	//
	262	// Create the anchoring icon, or attach the balloon to the given icon element
	263	// If a string is passed in, assume it's a URL, if it's an object, assume it's
	264	// a DOM member.
	265	//
	266	if(typeof this.options.icon == 'string')
	267	{
	268	this.icon = new Element('img', {
	269	src: this.options.icon,
	270	id: this.id + "_icon"
	271	});
	272	Element.setStyle(this.icon, this.options.iconStyle);
	273	}
	274	else
	275	{
	276	//
	277	// Not a string given (most likely an object. Do not append the element
	278	// Kind of a hack for now, but I'll fix it in the next version.
	279	//
	280	this.icon = this.options.icon;
	281	this.options.returnElement = true;
	282	}
	283
	284	this.icon._HelpBalloon = this;
	285
	286	//
	287	// Attach rendering events
	288	//
	289
	290	for(i = 0; i < this.options.useEvent.length; i++)
	291	Event.observe(this.icon, this.options.useEvent[i], this.toggle.bindAsEventListener(this));
	292
	293	this.container = new Element('div');
	294	this.container._HelpBalloon = this;
	295
	296	this.id = 'HelpBalloon_' + Element.identify(this.container);
	297
	298	HelpBalloon._balloons.push(this);
	299
	300	//
	301	// If we are not relying on other javascript to attach the anchoring icon
	302	// to the DOM, we'll just do where the script is called from. Default behavior.
	303	//
	304	// If you want to use external JavaScript to attach it to the DOM, attach this.icon
	305	//
	306	if(!this.options.returnElement)
	307	{
	308	document.write('<span id="' + this.id + '"></span>');
	309	var te = $(this.id);
	310	var p = te.parentNode;
	311	p.insertBefore(this.icon, te);
	312	p.removeChild(te);
	313	}
	314	},
	315
	316	/**
	317	* Toggles the help balloon
	318	* @param {Object} e Event
	319	*/
	320	toggle: function(event)
	321	{
	322	if(!event) event = window.event \|\| {type: this.options.useEvent, target: this.icon};
	323	var icon = Event.element(event);
	324	Event.stop(event);
	325	if(event.type == this.options.useEvent && !this.visible && icon == this.icon)
	326	{
	327	this.show(event);
	328	}
	329	else
	330	this.hide();
	331	},
	332
	333	/**
	334	* Triggers the balloon to appear
	335	*/
	336	show: function(event)
	337	{
	338	if(!this.visible){
	339	if(!event) event = window.event;
	340	if(!this.drawn \|\| !this.options.cacheRemoteContent) this._draw();
	341	this._reposition(event);
	342	this._hideOtherHelps();
	343	if(this.options.showEffect)
	344	{
	345	this.options.showEffect(this.container, Object.extend(this.options.showEffectOptions, {
	346	afterFinish: this._afterShow.bindAsEventListener(this)
	347	}));
	348	}
	349	else
	350	{
	351	this._afterShow();
	352	}
	353	Event.observe(window, 'resize', this._reposition.bindAsEventListener(this));
	354	}
	355	},
	356
	357	/**
	358	* Sets the container to block styling and hides the elements below the
	359	* container (if in IE)
	360	* @private
	361	*/
	362	_afterShow: function()
	363	{
	364	Element.setStyle(this.container, {
	365	'display': 'block'
	366	});
	367	this._hideLowerElements();
	368	this.visible = true;
	369	if(this.options.autoHideTimeout)
	370	{
	371	setTimeout(this._hideQueue.bind(this), this.options.autoHideTimeout);
	372	}
	373	},
	374
	375	/**
	376	* Checks the mouse position and triggers a hide after the time specified in autoHideTimeout
	377	* if the mouse is not currently over the balloon, otherwise it requeue's a hide for later.
	378	*/
	379	_hideQueue: function()
	380	{
	381	if(Position.within(this.container, HelpBalloon._mouseX, HelpBalloon._mouseY))
	382	setTimeout(this._hideQueue.bind(this), this.options.autoHideTimeout);
	383	else
	384	this.hide();
	385	},
	386
	387	/**
	388	* Hides the balloon
	389	*/
	390	hide: function()
	391	{
	392	if(this.visible)
	393	{
	394	this._showLowerElements();
	395	if(this.options.hideEffect)
	396	{
	397	this.options.hideEffect(this.container, Object.extend(this.options.hideEffectOptions, {
	398	afterFinish: this._afterHide.bindAsEventListener(this)
	399	}));
	400	}
	401	else
	402	{
	403	this._afterHide();
	404	}
	405	Event.stopObserving(window, 'resize', this._reposition.bindAsEventListener(this));
	406	}
	407	},
	408
	409	/**
	410	* Sets the container's display to block
	411	* @private
	412	*/
	413	_afterHide: function()
	414	{
	415	Element.setStyle(this.container, {
	416	'display': 'none'
	417	});
	418	this.visible = false;
	419	},
	420
	421	/**
	422	* Redraws the balloon based on the current coordinates of the icon.
	423	* @private
	424	*/
	425	_reposition: function(event)
	426	{
	427	if(this.icon.tagName.toLowerCase() == 'area' \|\| !!this.icon.isMap)
	428	{
	429	this.balloonCoords = Event.pointer(event);
	430	}
	431	else
	432	{
	433	this.balloonCoords = this._getXY(this.icon);
	434	//Horizontal and vertical offsets in relation to the icon's 0,0 position.
	435	// Default is the middle of the object
	436	var ho = this.icon.offsetWidth / 2;
	437	var vo = this.icon.offsetHeight / 2;
	438
	439	var offsets = this.options.anchorPosition.split(/\s+/gi);
	440	// Only use the first two specified values
	441	if(offsets.length > 2)
	442	offsets.length = 2;
	443
	444	for(var i = 0; i < offsets.length; i++)
	445	{
	446	switch(offsets[i].toLowerCase())
	447	{
	448	case 'left':
	449	ho = 0;
	450	break;
	451	case 'right':
	452	ho = this.icon.offsetWidth;
	453	break;
	454	case 'center':
	455	ho = this.icon.offsetWidth / 2;
	456	break;
	457	case 'top':
	458	vo = 0;
	459	break;
	460	case 'middle':
	461	vo = this.icon.offsetHeight / 2;
	462	break;
	463	case 'bottom':
	464	vo = this.icon.offsetHeight;
	465	break;
	466	default:
	467	var numVal = parseInt(offsets[i]);
	468	if(!isNaN(numVal))
	469	{
	470	// 0 = width, 1 = height (WxH)
	471	if(i == 0)
	472	{
	473	if(numVal < 0)
	474	{
	475	ho = 0;
	476	}
	477	else
	478	{
	479	if(numVal > this.icon.offsetWidth)
	480	ho = this.icon.offsetWidth;
	481	else
	482	ho = numVal
	483	}
	484	}
	485	else
	486	{
	487	if(numVal < 0)
	488	{
	489	vo = 0;
	490	}
	491	else
	492	{
	493	if(numVal > this.icon.offsetHeight)
	494	vo = this.icon.offsetHeight;
	495	else
	496	vo = numVal
	497	}
	498	}
	499	}
	500	break;
	501	}
	502	}
	503	this.balloonCoords.x += ho;
	504	this.balloonCoords.y += vo;
	505	}
	506
	507	//
	508	// Figure out what position to show based on available realestate
	509	// unless
	510	// 0 1
	511	// X
	512	// 2 3
	513	// Number indicates position of corner opposite anchor
	514	//
	515	var pos = 1;
	516	if(this.options.fixedPosition == HelpBalloon.POS_DYNAMIC)
	517	{
	518	var offsetHeight = this.balloonCoords.y - this.balloonDimensions[1];
	519	if(offsetHeight < 0)
	520	pos += 2;
	521
	522	var offsetWidth = this.balloonCoords.x + this.balloonDimensions[0];
	523	var ww = Prototype.Browser.IE ? document.body.clientWidth : window.outerWidth;
	524	if(offsetWidth > ww)
	525	pos -- ;
	526	}
	527	else
	528	pos = this.options.fixedPosition;
	529
	530	var zx = 0;
	531	var zy = 0;
	532
	533	//
	534	// 0 1
	535	// X
	536	// 2 3
	537	//
	538	switch(pos)
	539	{
	540	case 0:
	541	zx = this.balloonCoords.x - this.balloonDimensions[0];
	542	zy = this.balloonCoords.y - this.balloonDimensions[1];
	543	break;
	544
	545	case 1:
	546	zx = this.balloonCoords.x;
	547	zy = this.balloonCoords.y - this.balloonDimensions[1];
	548	break;
	549
	550	case 2:
	551	zx = this.balloonCoords.x - this.balloonDimensions[0];
	552	zy = this.balloonCoords.y;
	553	break;
	554
	555	case 3:
	556	zx = this.balloonCoords.x;
	557	zy = this.balloonCoords.y;
	558	break;
	559	}
	560	var containerStyle = {
	561	/*'backgroundRepeat': 'no-repeat',
	562	'backgroundColor': 'transparent',
	563	'backgroundPosition': 'top left',*/
	564	'left' : zx + "px",
	565	'top' : zy + "px",
	566	'width' : this.balloonDimensions[0] + 'px',
	567	'height' : this.balloonDimensions[1] + 'px'
	568	}
	569	if(Prototype.Browser.IE)
	570	{
	571	//
	572	// Fix for IE alpha transparencies
	573	//
	574	if(this.balloons[pos].toLowerCase().indexOf('.png') > -1)
	575	{
	576	Element.setStyle(this.bgContainer, {
	577	'left' : '0px',
	578	'top' : '0px',
	579	'filter' : "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.balloons[pos] + "', sizingMethod='scale')",
	580	'width' : this.balloonDimensions[0] + 'px',
	581	'height' : this.balloonDimensions[1] + 'px',
	582	'position' : 'absolute'
	583	});
	584	}
	585	else
	586	containerStyle['background'] = 'transparent url(' + this.balloons[pos] + ') top left no-repeat';
	587	}
	588	else
	589	{
	590	containerStyle['background'] = 'transparent url(' + this.balloons[pos] + ') top left no-repeat';
	591	}
	592	Element.setStyle(this.container, containerStyle);
	593	},
	594
	595	/**
	596	* Renders the Balloon
	597	* @private
	598	*/
	599	_draw: function()
	600	{
	601	Element.setStyle(
	602	this.container,
	603	Object.extend(this.options.balloonStyle, {
	604	'position': 'absolute',
	605	'display': 'none'
	606	})
	607	);
	608
	609	var url = this.options.dataURL;
	610
	611	//
	612	// Play nicely with anchor tags being used as the icon. Use it's specified href as our
	613	// data URL unless one has already been used specified in this.options.dataURL.
	614	// We'll also force a new request with this as it may be an image map.
	615	//
	616	if(this.icon.className == 'a')
	617	{
	618	if(!this.options.dataURL && this.icon.href != ''){
	619	url = this.icon.href;
	620	this.options.cacheRemoteContent = false;
	621	}
	622	}
	623
	624	if(url && (!this.drawn \|\| !this.options.cacheRemoteContent))
	625	{
	626	var cont = new Ajax.Request(this.options.dataURL, {asynchronous: false, method: this.options.method});
	627	//
	628	// Expects the following XML format:
	629	// <HelpBalloon>
	630	// <title>My Title</title>
	631	// <content>My content</content>
	632	// </HelpBaloon>
	633	//
	634	var doHTML = false;
	635	if(cont.transport.responseXML)
	636	{
	637	var xml = cont.transport.responseXML.getElementsByTagName('HelpBalloon')[0];
	638
	639	if(xml)
	640	{
	641	if(!this.options.title)
	642	{
	643	xmlTitle = xml.getElementsByTagName('title')[0];
	644	if(xmlTitle) this._titleString = xmlTitle.firstChild.nodeValue;
	645	}
	646
	647	xmlContent = xml.getElementsByTagName('content')[0];
	648	if(xmlContent) this.options.content = xmlContent.firstChild.nodeValue;
	649	}
	650	else
	651	doHTML = true;
	652	}
	653	else
	654	doHTML = true;
	655
	656	if(doHTML)
	657	{
	658	// Attempt to get the title from a <title/> HTML tag, unless the title option has been set. If so, use that.
	659	if(!this.options.title)
	660	{
	661	var htmlTitle = cont.transport.responseText.match(/\<title\>([^\<]+)\<\/title\>/gi);
	662	if(htmlTitle)
	663	{
	664	htmlTitle = htmlTitle.toString().replace(/\<title\>\|\<\/title\>/gi, '');
	665	this._titleString = htmlTitle;
	666	}
	667	}
	668	this.options.content = cont.transport.responseText;
	669	}
	670	}
	671
	672	this.balloonDimensions[0] = this._lastBalloon.width;
	673	this.balloonDimensions[1] = this._lastBalloon.height;
	674
	675	var contentDimensions = [
	676	this.balloonDimensions[0] - (2 * this.options.contentMargin),
	677	this.balloonDimensions[1] - (2 * this.options.contentMargin)
	678	];
	679
	680	var buttonDimensions = [
	681	this.button.width,
	682	this.button.height
	683	];
	684
	685	//
	686	// Create all the elements on demand if they haven't been created yet
	687	//
	688	if(!this.drawn)
	689	{
	690	this.inner = new Element('div');
	691
	692	this.titleContainer = new Element('div');
	693	this.inner.appendChild(this.titleContainer);
	694
	695	// PNG fix for IE
	696	if(Prototype.Browser.IE && this.options.button.toLowerCase().indexOf('.png') > -1)
	697	{
	698	this.bgContainer = new Element('div');
	699
	700	// Have to create yet-another-child of container to house the background for IE... when it was set in
	701	// the main container, it for some odd reason prevents child components from being clickable.
	702	this.container.appendChild(this.bgContainer);
	703
	704	this.closer = new Element('div');
	705	Element.setStyle(this.closer, {
	706	'filter':
	707	"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.options.button + "', sizingMethod='scale')"
	708	});
	709	}
	710	else
	711	{
	712	this.closer = this.button;
	713	}
	714
	715	Event.observe(this.closer, 'click', this.toggle.bindAsEventListener(this));
	716	this.inner.appendChild(this.closer);
	717
	718	this.content = new Element('div');
	719	this.inner.appendChild(this.content);
	720
	721	this.container.appendChild(this.inner);
	722
	723	document.getElementsByTagName('body')[0].appendChild(this.container);
	724
	725	this.drawn = true;
	726	}
	727
	728	// Reset the title element and reappend the title value (could have changed with a new URL)
	729	this.titleContainer.innerHTML = '';
	730	this.titleContainer.appendChild(document.createTextNode(this._titleString));
	731
	732	// Reset content value:
	733	this.content.innerHTML = this.options.content;
	734
	735	//
	736	// Reapply styling to components as values might have changed
	737	//
	738
	739	Element.setStyle(this.inner, {
	740	'position': 'absolute',
	741	'top': this.options.contentMargin + 'px',
	742	'left': this.options.contentMargin + 'px',
	743	'width': contentDimensions[0] + 'px',
	744	'height': contentDimensions[1] + 'px'
	745	});
	746
	747	Element.setStyle(this.titleContainer, {
	748	'width': (contentDimensions[0] - buttonDimensions[0]) + 'px',
	749	'height': buttonDimensions[1] + 'px',
	750	'position': 'absolute',
	751	'overflow': 'hidden',
	752	'top': '0px',
	753	'left': '0px'
	754	});
	755
	756	Element.setStyle(this.titleContainer, this.options.titleStyle);
	757
	758	Element.setStyle(this.closer, {
	759	'width': buttonDimensions[0] + 'px',
	760	'height': buttonDimensions[1] + 'px',
	761	'cursor': 'pointer',
	762	'position': 'absolute',
	763	'top': '0px',
	764	'right': '0px'
	765	});
	766
	767	Element.setStyle(this.content, {
	768	'width': contentDimensions[0] + 'px',
	769	'height': (contentDimensions[1] - this.button.height) + 'px',
	770	'overflow': 'auto',
	771	'position': 'absolute',
	772	'top': buttonDimensions[1] + 'px',
	773	'left': '0px',
	774	'fontFamily': 'verdana',
	775	'fontSize': '11px',
	776	'fontWeight': 'normal',
	777	'color': 'black'
	778	});
	779
	780	},
	781
	782	/**
	783	* Gets the current position of the obj
	784	* @param {Element} element to get position of
	785	* @return Object of (x, y, x2, y2)
	786	*/
	787	_getXY: function(obj)
	788	{
	789	var pos = Position.cumulativeOffset(obj)
	790	var y = pos[1];
	791	var x = pos[0];
	792	var x2 = x + parseInt(obj.offsetWidth);
	793	var y2 = y + parseInt(obj.offsetHeight);
	794	return {'x':x, 'y':y, 'x2':x2, 'y2':y2};
	795
	796	},
	797
	798	/**
	799	* Determins if the object is a child of the balloon element
	800	* @param {Element} Element to check parentage
	801	* @return {Boolean}
	802	* @private
	803	*/
	804	_isChild: function(obj)
	805	{
	806	var i = 15;
	807	do{
	808	if(obj == this.container)
	809	return true;
	810	obj = obj.parentNode;
	811	}while(obj && i--);
	812	return false
	813	},
	814
	815	/**
	816	* Determines if the balloon is over this_obj object
	817	* @param {Element} Object to look under
	818	* @return {Boolean}
	819	* @private
	820	*/
	821	_isOver: function(this_obj)
	822	{
	823	if(!this.visible) return false;
	824	if(this_obj == this.container \|\| this._isChild(this_obj)) return false;
	825	var this_coords = this._getXY(this_obj);
	826	var that_coords = this._getXY(this.container);
	827	if(
	828	(
	829	(
	830	(this_coords.x >= that_coords.x && this_coords.x <= that_coords.x2)
	831	\|\|
	832	(this_coords.x2 >= that_coords.x && this_coords.x2 <= that_coords.x2)
	833	)
	834	&&
	835	(
	836	(this_coords.y >= that_coords.y && this_coords.y <= that_coords.y2)
	837	\|\|
	838	(this_coords.y2 >= that_coords.y && this_coords.y2 <= that_coords.y2)
	839	)
	840	)
	841
	842	){
	843	return true;
	844	}
	845	else
	846	return false;
	847	},
	848
	849	/**
	850	* Restores visibility of elements under the balloon
	851	* (For IE)
	852	* TODO: suck yourself
	853	* @private
	854	*/
	855	_showLowerElements: function()
	856	{
	857	if(this.options.hideUnderElementsInIE)
	858	{
	859	var elements = this._getWeirdAPIElements();
	860	for(var i = 0; i < elements.length; i++)
	861	{
	862	if(this._isOver(elements[i]))
	863	{
	864	if(elements[i].style.visibility != 'visible' && elements[i].hiddenBy == this)
	865	{
	866	elements[i].style.visibility = 'visible';
	867	elements[i].hiddenBy = null;
	868	}
	869	}
	870	}
	871	}
	872	},
	873
	874	/**
	875	* Hides elements below the balloon
	876	* (For IE)
	877	* @private
	878	*/
	879	_hideLowerElements: function()
	880	{
	881	if(this.options.hideUnderElementsInIE)
	882	{
	883	var elements = this._getWeirdAPIElements();
	884	for(var i = 0; i < elements.length; i++)
	885	{
	886	if(this._isOver(elements[i]))
	887	{
	888	if(elements[i].style.visibility != 'hidden')
	889	{
	890	elements[i].style.visibility = 'hidden';
	891	elements[i].hiddenBy = this;
	892	}
	893	}
	894	}
	895	}
	896	},
	897
	898	/**
	899	* Determines which elements need to be hidden
	900	* (For IE)
	901	* @return {Array} array of elements
	902	*/
	903	_getWeirdAPIElements: function()
	904	{
	905	if(!Prototype.Browser.IE) return [];
	906	var objs = ['select', 'input', 'object'];
	907	var elements = [];
	908	for(var i = 0; i < objs.length; i++)
	909	{
	910	var e = document.getElementsByTagName(objs[i]);
	911	for(var j = 0; j < e.length; j++)
	912	{
	913	elements.push(e[j]);
	914	}
	915	}
	916	return elements;
	917	},
	918
	919	/**
	920	* Hides the other visible help balloons
	921	* @param {Event} e
	922	*/
	923	_hideOtherHelps: function(e)
	924	{
	925	if(this.options.hideOtherBalloonsOnDisplay)
	926	{
	927	$A(HelpBalloon._balloons).each(function(obj){
	928	if(obj != this)
	929	{
	930	obj.hide();
	931	}
	932	}.bind(this));
	933	}
	934	}
	935	};
	936
	937	/**
	938	* HelpBalloon.Options
	939	* Helper class for defining options for the HelpBalloon object
	940	* @author Beau D. Scott <beau_scott@hotmail.com>
	941	*/
	942	HelpBalloon.Options = Class.create();
	943	HelpBalloon.Options.prototype = {
	944
	945	/**
	946	* @constructor
	947	* @param {Object} overriding options
	948	*/
	949	initialize: function(values){
	950	// Apply the overriding values to this
	951	Object.extend(this, values \|\| {});
	952	},
	953
	954	/**
	955	* Show Effect
	956	* The Scriptaculous (or compatible) showing effect function
	957	* @var Function
	958	*/
	959	showEffect: window.Scriptaculous ? Effect.Appear : null,
	960
	961	/**
	962	* Show Effect options
	963	*/
	964	showEffectOptions: {duration: 0.2},
	965
	966	/**
	967	* Hide Effect
	968	* The Scriptaculous (or compatible) hiding effect function
	969	* @var Function
	970	*/
	971	hideEffect: window.Scriptaculous ? Effect.Fade : null,
	972
	973	/**
	974	* Show Effect options
	975	*/
	976	hideEffectOptions: {duration: 0.2},
	977
	978	/**
	979	* For use with embedding this object into another. If true, the icon is not created
	980	* and not appeneded to the DOM at construction.
	981	* Default is false
	982	* @var {Boolean}
	983	*/
	984	returnElement: false,
	985
	986	/**
	987	* URL to the anchoring icon image file to use. This can also be a direct reference
	988	* to an existing element if you're using that as your anchoring icon.
	989	* @var {Object}
	990	*/
	991	icon: 'images/icon.gif',
	992
	993	/**
	994	* Alt text of the help icon
	995	* @var {String}
	996	*/
	997	altText: 'Click here for help with this topic.',
	998
	999	/**
	1000	* URL to pull the title/content XML
	1001	* @var {String}
	1002	*/
	1003	dataURL: null,
	1004
	1005	/**
	1006	* Static title of the balloon
	1007	* @var {String}
	1008	*/
	1009	title: null,
	1010
	1011	/**
	1012	* Static content of the balloon
	1013	* @var {String}
	1014	*/
	1015	content: null,
	1016
	1017	/**
	1018	* The event type to listen for on the icon to show the balloon.
	1019	* Default 'click'
	1020	* @var {String}
	1021	*/
	1022	useEvent: ['click'],
	1023
	1024	/**
	1025	* Request method for dynamic content. (get, post)
	1026	* Default 'get'
	1027	* @var {String}
	1028	*/
	1029	method: 'get',
	1030
	1031	/**
	1032	* Flag indicating cache the request result. If this is false, every
	1033	* time the balloon is shown, it will retrieve the remote url and parse it
	1034	* before the balloon appears, updating the content. Otherwise, it will make
	1035	* the call once and use the same content with each subsequent showing.
	1036	* Default true
	1037	* @var {Boolean}
	1038	*/
	1039	cacheRemoteContent: true,
	1040
	1041	/**
	1042	* Vertical and horizontal margin of the content pane
	1043	* @var {Number}
	1044	*/
	1045	contentMargin: 35,
	1046
	1047	/**
	1048	* X coordinate of the closing button
	1049	* @var {Number}
	1050	*/
	1051	buttonX: 246,
	1052
	1053	/**
	1054	* Y coordinate of the closing button
	1055	* @var {Number}
	1056	*/
	1057	buttonY: 35,
	1058
	1059	/**
	1060	* Closing button image path
	1061	* @var {String}
	1062	*/
	1063	button: 'images/button.png',
	1064
	1065	/**
	1066	* Balloon image path prefix. There are 4 button images, numerically named, starting with 0.
	1067	* 0 1
	1068	* X
	1069	* 2 3
	1070	* X indicates the anchor corner
	1071	* @var {String}
	1072	*/
	1073	balloonPrefix: 'images/balloon-',
	1074
	1075	/**
	1076	* The image filename suffix, including the file extension
	1077	* @var {String}
	1078	*/
	1079	balloonSuffix: '.png',
	1080
	1081	/**
	1082	* Position of the balloon's anchor relative to the icon element.
	1083	* Combine one horizontal indicator (left, center, right) and one vertical indicator (top, middle, bottom).
	1084	* Numeric values can also be used in an X Y order. So a value of 9 13 would place the anchor 9 pixels from
	1085	* the left and 13 pixels below the top. (0,0 is top left). If values are greater than the width or height
	1086	* the width or height of the anchor are used instead. If less than 0, 0 is used.
	1087	* Default is 'center middle'
	1088	* @var {String}
	1089	*/
	1090	anchorPosition: 'center middle',
	1091
	1092	/**
	1093	* Flag indicating whether to hide the elements under the balloon in IE.
	1094	* Setting this to false can cause rendering issues in Internet Explorer
	1095	* as some elements appear on top of the balloon if they're not hidden.
	1096	* Default is true.
	1097	* @var {Boolean}
	1098	*/
	1099	hideUnderElementsInIE: true,
	1100
	1101	/**
	1102	* Default Balloon styling
	1103	* @var {Object}
	1104	*/
	1105	balloonStyle: {},
	1106
	1107	/**
	1108	* Default Title Bar style
	1109	* @var {Object}
	1110	*/
	1111	titleStyle: {
	1112	'color': 'black',
	1113	'fontSize': '16px',
	1114	'fontWeight': 'bold',
	1115	'fontFamily': 'Verdana'
	1116	},
	1117
	1118	/**
	1119	* Icon custom styling
	1120	* @var {Object}
	1121	*/
	1122	iconStyle: {
	1123	'cursor': 'pointer'
	1124	},
	1125
	1126	/**
	1127	* Flag indication whether to automatically hide any other visible HelpBalloon on the page before showing the current one.
	1128	* @var {Boolean}
	1129	*/
	1130	hideOtherBalloonsOnDisplay: true,
	1131
	1132	/**
	1133	* If you want the balloon to always display in a particular location, set this
	1134	*/
	1135	fixedPosition: HelpBalloon.POS_DYNAMIC,
	1136
	1137	/**
	1138	* Number of milliseconds to hide the balloon after showing and after the mouse is not over the balloon.
	1139	* A value of 0 means it will not auto-hide
	1140	* @var {Number}
	1141	*/
	1142	autoHideTimeout: 0
	1143
	1144	};

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

Download in other formats: