yctb-SpringBoot/web/js/v2/fw/fw.popwin.js

/**
 * options can be:
 * title
 * width
 * height
 * top
 * left
 * center this option has a hight priority than top and left options
 * content
 * modal
 * canMove
 * glueMouse 
 * closeAction:'close' or 'hide'
 * buttons [NA]
 * 
 * 
 * your can pass these options to the construtor or the show method:
{
	modal:true,  //show as a modal window or not
	canMove:true, //whether your window can be moved
	glueMouse:true,//if set to true and canMove is true,you can move your window without keeping pressing the mouse
	left:500,	//position
	top:300,	//position
	center:true,//whether to center your window in your explorer. If this option is set to true the left and top option will be ignored
	width:400,  //size
	height:300,	//size
	title:'new title', //the title
	content:'your content',//your content
	closeAction:'hide' //'hide' means hide the window and 'close' means destroy the window. You can not show it again if you close a window
}

 */

var CFWPopWin = _FW.fCreateClass();

CFWPopWin.prototype = {
	fInitialize:function(options) {
	
		/**
		 * create window markup:
		 * 
		 * overlay(bgObj) div
		 * <div name='panel'>
		 * 	<table>
		 * 		<tr name='captiontr'>
		 * 			<td name='titlecell'></td><td name='closecell'><span name='closeBtn'></span></td>
		 * 		</tr>
		 * 		<tr><td name='msgBox' colspan=2><div name='contentdiv'></div></td></tr>
		 * 	</table>
		 * </div>
		 */
		var opt=options||{};
		this.options=opt;
		if(opt.canMove===undefined)opt.canMove=true;
		this._minWidth=20;
		this._minHeight=10;
		this._createMoveHandlers();
		var w=opt.width||400,h=opt.height||300;
		this.modal=opt.modal;
		var iWidth = document.documentElement.clientWidth;
		var iHeight = document.documentElement.clientHeight;
		var bgObj = document.createElement("div");
		bgObj.style.width = iWidth+"px";
		bgObj.style.height = Math.max(document.body.clientHeight, iHeight)+"px";
		bgObj.style.display="none";
		bgObj.className = "popwin_bg";
		
		document.body.appendChild(bgObj);
		this.overlay=bgObj;
		
		var msgObj=document.createElement("div");
		if(opt.center){
			msgObj.style.top = (iHeight-h)/2+"px";
			msgObj.style.left = (iWidth-w)/2+"px";
		}else{
			msgObj.style.top = (opt.top||"100")+"px";
			msgObj.style.left = (opt.left||"100")+"px";
		}
		msgObj.style.width = w+"px";
		msgObj.style.height = h+"px";
		msgObj.style.display="none";
		msgObj.className = "popwin";
		document.body.appendChild(msgObj);
		this.panel=msgObj;
	
		var table = document.createElement("table"); 

		this.panel.appendChild(table); 
		var captiontr = table.insertRow(-1); 
		var titlecell = captiontr.insertCell(-1);
		captiontr.className = "popwin_title_bg";
		titlecell.className = "popwin_title";
		this.captionbar=titlecell;
		this.setTitle(opt.title||"please set your title");
		if(opt.canMove){
			this.registerMove();
		}
	
		var closecell = captiontr.insertCell(-1); 
		
		closeBtn = document.createElement("span");
		closeBtn.innerHTML="<span title='关闭'>×</span>"
		closecell.className = "popwin_close";
		closecell.appendChild(closeBtn);
		if(opt.closeAction=="hide"){
			this.options.closeAction="hide";
			closeBtn.onclick = this.dele(this.hide,this);
		}else{
			closeBtn.onclick = this.dele(this.close,this);
			this.options.closeAction="close";
		}
		this.closeButton=closeBtn;
		
		var msgBox = table.insertRow(-1).insertCell(-1); 
		msgBox.className = "popwin_msg_box";
		msgBox.colSpan = "2"; 
		var contentdiv = document.createElement("div"); 
		contentdiv.style.overflow='auto';
		msgBox.appendChild(contentdiv);
		this.contentPanel=contentdiv;
		this.onresize();
		this.setContent(opt.content||"please set your content");
		
	},
	
	
	applyStyles:function (el,obj){
			for (name in obj){
				el.style[name]=obj[name];
			}
		},
		
		isNumber : function(v){
			return typeof v === 'number' && isFinite(v);
		},
		
		 apply: function(o, c, defaults){
				if(defaults){
					apply(o, defaults);
				}
				if(o && c && typeof c == 'object'){
					for(var p in c){
						o[p] = c[p];
					}
				}
				return o;
			},
		getEvent : function() {
			return window.event || arguments.callee.caller.arguments[0];
		},
		
		dele: function (method,scope, args, appendArgs){
			var _this = this;
			return function() {
				
				var callArgs = args || arguments;
				if (appendArgs === true){
					callArgs = Array.prototype.slice.call(arguments, 0);
					callArgs = callArgs.concat(args);
				}else if (_this.isNumber(appendArgs)){
					callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first
					var applyArgs = [appendArgs, 0].concat(args); // create method call params
					Array.prototype.splice.apply(callArgs, applyArgs); // splice them in
				}
				return method.apply(scope || window, callArgs);
			};
		},

	_createMoveHandlers:function(){
		var moveData = {
			startX : 0,
			startY : 0,
			startTop : 0,
			startLeft : 0,
			moving : false,
			mousedown:0,
			docMouseMoveHandler : document.onmousemove,
			docMouseUpHandler : document.onmouseup,
			me:this
		};
		var _this = this;
		this.onCaptionMousedown=function() {
			var e = _this.getEvent();
			moveData.startX = e.clientX;
			moveData.startY = e.clientY;
			moveData.startTop = parseInt(moveData.me.panel.style.top);
			moveData.startLeft = parseInt(moveData.me.panel.style.left);
			
			if (moveData.me.options.glueMouse){
				if(moveData.mousedown==0){
					moveData.moving=true;
					document.onmousemove =moveData.me.onDocMousemove; 
					moveData.mousedown=1;
				}else{
					document.onmousemove = moveData.docMouseMoveHandler;
					moveData.moving = false;
					moveData.mousedown=0;
				}
			}else{
				moveData.moving = true;
				document.onmousemove =moveData.me.onDocMousemove; 
				document.onmouseup = moveData.me.onDocMouseup;
			}
		};
		this.onDocMousemove=function() {
			if (moveData.moving) {
				var e = _this.getEvent();
				var deltaX = moveData.startLeft + e.clientX - moveData.startX;
				var deltaY = moveData.startTop + e.clientY - moveData.startY;
				if ( deltaX > 0 &&( deltaX +2+ moveData.me.getWidth() < document.documentElement.clientWidth) && 
				deltaY > 0 && (deltaY +2+ moveData.me.getHeight() < document.documentElement.clientHeight) ) {
				
					moveData.me.panel.style.left = deltaX + "px";
					moveData.me.panel.style.top = deltaY + "px";
				} 	
			}
		};
		this.onDocMouseup=function () {
			if (moveData.moving) {
				document.onmousemove = moveData.docMouseMoveHandler;
				document.onmouseup = moveData.docMouseUpHandler;
				moveData.moving = false;
			}
		};
	},
	
	registerMove:function(){
		try{
		if(!this._movehandlerregistered){
			this.captionbar.onmousedown = this.onCaptionMousedown;
			this._movehandlerregistered=true;
		}}catch(err){alert(err)}
	},
	unRegisterMove:function(){
		if(this._movehandlerregistered){
			this.captionbar.onmousedown = undefined;
			this._movehandlerregistered=false;
		}
	},



	
	show:function(options){
		this._hideSelectTags();
		if(options){
			if(options.title)this.setTitle(options.title);
			if(options.content)this.setContent(options.content);
			if(this.isNumber(options.width))this.setWidth(options.width);
			if(this.isNumber(options.height))this.setHeight(options.height);
			if(options.center){
				this.center();
			}else{
				if(this.isNumber(options.top))this.setTop(options.top);
				if(this.isNumber(options.left))this.setLeft(options.left);
			}
			if(options.canMove!==undefined){
				if(options.canMove){
					this.registerMove();
				}else{
					this.unRegisterMove();
				}
			}
			if(options.closeAction&&options.closeAction!=this.options.closeAction){
				if(options.closeAction=="hide"){
					this.closeButton.onclick = this.dele(this.hide,this);
				}else{
					this.closeButton.onclick = this.dele(this.close,this);
				}
				this.options.closeAction=options.closeAction;
			}
			if(options.glueMouse!==undefined){
				this.options.glueMouse=options.glueMouse;
			}
		}
		var o=options||{};
		var modal=(o.modal===undefined?this.modal:o.modal);
		if (modal){
			this.overlay.style.display="";
		}else{
			this.overlay.style.display="none";
		}
		this.panel.style.display="";
	},
	hide:function(){
		this._showSelectTags();
		this.overlay.style.display="none";
		this.panel.style.display="none";
	},
	close:function(){
		this._showSelectTags();
		document.body.removeChild(this.overlay); 
		document.body.removeChild(this.panel); 
	},
	_hideSelectTags:function(){
		var sl = document.getElementsByTagName("select");
		this._selects=sl;
		for(var j=0;j<sl.length;j++){
			sl[j].style.display="none";
		}
	},
	_showSelectTags:function(){
		var sl=this._selects;
		if(sl){
			for(var j=0;j<sl.length;j++){
				sl[j].style.display="none";
			}
		}
	},
	setTitle:function(title){
			this.captionbar.innerHTML = title; 
	},
	setContent:function(content){
		this.contentPanel.innerHTML =content;
	},
	setWidth:function(val){
		if(val>=this._minWidth){
			this.panel.style.width=val+"px";
			this.onresize();
		}
	},
	getWidth:function(){
		return parseInt(this.panel.style.width);
	},
	setHeight:function(val){
		if(val>=this._minHeight){
			this.panel.style.height=val+"px";
			this.onresize();
		}
	},
	getHeight:function(){
		return parseInt(this.panel.style.height);
	},
	setTop:function(val){
		if(val>=0&&val+10<= document.documentElement.clientHeight){
		this.panel.style.top=val+"px";
		}
	},
	getTop:function(){
		return parseInt(this.panel.style.top);
	},
	setLeft:function(val){
		if(val>=0&&val+10<=document.documentElement.clientWidth){
		this.panel.style.left=val+"px";
		}
	},
	getLeft:function(){
		return parseInt(this.panel.style.left);
	},
	center:function(){
		this.panel.style.top = (document.documentElement.clientHeight-this.getHeight())/2+"px";
		this.panel.style.left = (document.documentElement.clientWidth-this.getWidth())/2+"px";		
	},
	onresize:function(){
		this.contentPanel.style.width=(this.getWidth()-1)+"px";
		this.contentPanel.style.height=(this.getHeight()-29)+"px";
	}

};