/** * 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 *
* * * * * *
*
*/ 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="×" 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=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"; } };