rs.tipspanel.js 5.65 KB
/**
 * rs_tipspanel - Runsa Plugin
 * 
 * Dependencies:
 * 	 rs_load
 */
(function($) {
	var tipspanelId="gen_rs_tipspanel";
	function warpPanel(container) {
		var opts = $.data(container, 'rs_tipspanel');
		var cc = $(container);

		cc.addClass('rs-tipspanel');
		var ghost=$('<div id="'+getGhostId(opts)+'" class="rs-tipspanel-ghost"></div>').appendTo(document.body);
		var body=$('<div class="tipspanel-body"></div>').appendTo(ghost);
		
		if(opts.cls){
			ghost.addClass(opts.cls);
		}
		$.data(ghost[0], 'rs_tipspanel',container);
		if(opts.arrow){
			var arrow=$('<div class="arrow"></div>').appendTo(ghost);
			if(opts.arrowCls){
				arrow.addClass(opts.arrowCls);
			}
		}
		setSize(container);
		
		opts.onWrap.call(container,ghost[0]);
	}
	function initEvent(container){
		var opts = $.data(container, 'rs_tipspanel');
		var ghostId=getGhostId(opts);
		var ghost=$("#"+ghostId);
//		ghost.unbind(".rs_tipspanel").bind("click.rs_tipspanel",function(){
//			opts.onClick.call(container);
//		});
		$(document).bind('mousedown.'+ghostId+' mousewheel.'+ghostId,function(e){
			var target=$(e.target);
			var p=target.closest(".rs-tipspanel-ghost,.rs-tipspanel");
			if (p.length==0){
				var ghost=$('#'+e.handleObj.namespace);
				if(ghost.is(":visible")){
					ghost.hide();
					opts.onHide.call();
				}
			}
		});
	}
	function setSize(container){
		var opts = $.data(container, 'rs_tipspanel');
		var ghost=$("#"+getGhostId(opts));
		var body=ghost.children(".tipspanel-body");
		var arrow = ghost.children('.arrow');
		
		if (opts.width && opts.width > 0) {
			body.width(opts.width);
		}
		if (opts.height && opts.height > 0) {
			body.height(opts.height);
			body.attr("data-options",opts.height);
		}
		arrow.css({top : 5,left:5});
	}
	function setPosition(container) {
		var opts = $.data(container, 'rs_tipspanel');
		var cc=$(container);
		var ghost=$("#"+getGhostId(opts));
		var top=getTop();
		var left=getLeft();
		var offset={left:left,top:top};
		opts.onOffset.call(container,offset);
		ghost.css(offset);
		function getLeft(){
			var left = cc.offset().left;
			var width=$(window).width()|| document.body.clientWidth;
			if (left + ghost.outerWidth() > width + $(document).scrollLeft()){
				left = width + $(document).scrollLeft() - ghost.outerWidth();
			}
			if (left < 0){
				left = 0;
			}
			return left;
		}
		function getTop(){
			var top = cc.offset().top + cc.outerHeight();
			var height=$(window).height()||document.body.clientHeight;
			if (top+ ghost.outerHeight() > height + $(document).scrollTop()){
				top = cc.offset().top - ghost.outerHeight();
			}
			if (top < $(document).scrollTop()){
				top = cc.offset().top + cc.outerHeight();
			}
			return top;
		}
	}
	function show(container){
		var opts = $.data(container, 'rs_tipspanel');
		var ghost=$("#"+getGhostId(opts));
		if(ghost.is(":visible")){
			ghost.hide();
			opts.onHide.call();
		}
		else{
			setPosition(container);
			ghost.show();
			opts.onShow.call();
		}
	}
	function hide(container){
		var ghost=$("#"+getGhostId(container));
		if(ghost.is(":visible")){
			ghost.hide();
		}
	}
	function visible(container){
		var opts = $.data(container, 'rs_tipspanel');
		var ghost=$("#"+getGhostId(opts));
		return ghost.is(":visible");
	}
	function destroy(container){
		var opts = $.data(container, 'rs_tipspanel');
		var cc=$(container);
		var ghostId=getGhostId(opts);
		var ghost=$("#"+ghostId);
		
		if(ghost.is(".rs-load")){
			ghost.rs_load("destroy");
		}
		ghost.unbind(".rs_tipspanel");
		ghost.remove();
		$(document).unbind('.'+ghostId);
		$.removeData(container, 'rs_tipspanel');
		cc.removeClass("rs-tipspanel");
	}
	function instance(container){
		var ghost=$("#"+getGhostId(container));
		return ghost.children(".tipspanel-body");
	}
	function getGhostId(container){
		var opts;
		if(container.constructor==Object){
			opts=container;
		}else{
			opts = $.data(container, 'rs_tipspanel');
		}
		return tipspanelId+opts.idSeed;
	}
	function loading(container){
		var ghost=$("#"+getGhostId(container));
		if(!ghost.is(":visible")){
			show(container);
		}
		if(!ghost.is(".rs-load")){
			ghost.rs_load();
		}
		ghost.rs_load("show");
	}
	function loaded(container){
		var ghost=$("#"+getGhostId(container));
		if(ghost.is(".rs-load")){
			ghost.rs_load("hide");
		}
	}
	$.fn.rs_tipspanel = function(options, param) {
		if (typeof options == 'string') {
			return $.fn.rs_tipspanel.methods[options](this, param);
		}
		options = options || {};
		return this.each(function() {
			var state = $.data(this, 'rs_tipspanel');
			if (state) {
				$.extend(state, options);
			} else {
				var opts = $.extend({},$.fn.rs_tipspanel.defaults,options);
				$.data(this, 'rs_tipspanel', opts);
			}
			warpPanel(this);
			initEvent(this);
			$.fn.rs_tipspanel.defaults.idSeed++;
		});
	};
	$.fn.rs_tipspanel.methods = {
		loading : function(jq){
			return jq.each(function() {
				loading(this);
			});
		},
		loaded : function(jq){
			return jq.each(function() {
				loaded(this);
			});
		},
		inst : function(jq){
			return instance(jq[0]);
		},
		ghostId:function(jq){
			return getGhostId(jq[0]);
		},
		position: function(jq) {
			return jq.each(function() {
				setPosition(this);
			});
		},
		show : function(jq) {
			return jq.each(function() {
				show(this);
			});
		},
		hide : function(jq) {
			return jq.each(function() {
				hide(this);
			});
		},
		visible : function(jq) {
			return visible(jq[0]);
		},
		destroy : function(jq) {
			return jq.each(function() {
				destroy(this);
			});
		}
	};
	$.fn.rs_tipspanel.defaults = {
		width : null,
		height : null,
		arrow:true,
		arrowCls:null,
		cls:null,
		idSeed:1,
		onOffset:function(offset){},
		onWrap:function(ghost){},
//		onClick:function(){},
		onShow:function(){},
		onHide:function(){}
	};
})(jQuery);