StickyWin.PointyTip.js

/*
---
name: StickyWin.PointyTip

description: Positions a pointy tip relative to the element you specify.

license: MIT-Style License

requires: StickyWin.UI.Pointy

provides: StickyWin.PointyTip

...
*/
StickyWin.PointyTip = new Class({
	Extends: StickyWin,
	options: {
		point: "left",
		pointyOptions: {}
	},
	initialize: function(){
		var args = this.getArgs(arguments);
		this.setOptions(args.options);
		var popts = this.options.pointyOptions;
		var d = popts.direction;
		if (!d) {
			var map = {
				left: 9,
				right: 3,
				up: 12,
				down: 6
			};
			d = map[this.options.point];
			if (!d) d = this.options.point;
			popts.direction = d;
		}
		if (!popts.width) popts.width = this.options.width;
		this.pointy = new StickyWin.UI.Pointy(args.caption, args.body, popts);
		this.options.content = null;
		this.setOptions(args.options, this.getPositionSettings());
		this.parent(this.options);
		this.win.empty().adopt(document.id(this.pointy));
		this.attachHandlers(this.win);
		if (this.options.showNow) this.position();
	},
	getArgs: function(){
		return StickyWin.UI.getArgs.apply(this, arguments);
	},
	getPositionSettings: function(){
		var s = this.pointy.options.divotSize;
		var d = this.options.point;
		var offset = this.options.offset || {};
		switch(d) {
			case "left": case 8: case 9: case 10:
				return {
					edge: {
						x: 'left',
						y: d==10?'top':d==8?'bottom':'center'
					},
					position: {x: 'right', y: 'center'},
					offset: {
						x: s/2 + (offset.x || 0),
						y: offset.y || 0
					}
				};
			case "right": case 2:  case 3: case 4:
				return {
					edge: {
						x: 'right',
						y: (d==2?'top':d==4?'bottom':'center') + (offset.y || 0)
					},
					position: {x: 'left', y: 'center'},
					offset: {
						x: -s/2 + (offset.x || 0),
						y: offset.y || 0
					}
				};
			case "up": case 11: case 12: case 1:
				return {
					edge: {
						x: d==11?'left':d==1?'right':'center',
						y: 'top'
					},
					position: {	x: 'center', y: 'bottom' },
					offset: {
						y: s/2 + (offset.y || 0),
						x: (d==11?-s:d==1?s:0) + (offset.x || 0)
					}
				};
			case "down": case 5: case 6: case 7:
				return {
					edge: {
						x: (d==7?'left':d==5?'right':'center') + (offset.x || 0),
						y: 'bottom'
					},
					position: {x: 'center', y: 'top'},
					offset: {
						y: -s/2 + (offset.y || 0),
						x: (d==7?-s:d==5?s:0) + (offset.x || 0)
					}
				};
		};
	},
	setContent: function() {
		var args = this.getArgs(arguments);
		this.pointy.setContent(args.caption, args.body);
		[this.pointy.h1, this.pointy.body].each(this.attachHandlers, this);
		if (this.visible) this.position();
		return this;
	},
	showWin: function(){
		this.parent();
		this.pointy.positionPointer();
	},
	position: function(options){
		this.parent(options);
		this.pointy.positionPointer();
	},
	attachHandlers: function(content) {
		if (!content) return;
		content.getElements('.'+this.options.closeClassName).addEvent('click', function(){ this.hide(); }.bind(this));
		content.getElements('.'+this.options.pinClassName).addEvent('click', function(){ this.togglepin(); }.bind(this));
	}
});