PHP Code:
// -------------------------------------------------------------------
// DHTML Window Widget- By Dynamic Drive, available at: http://www.dynamicdrive.com
// v1.0: Script created Feb 15th, 07'
// v1.01: Feb 21th, 07' (see changelog.txt)
// v1.02: March 26th, 07' (see changelog.txt)
// v1.03: May 5th, 07' (see changelog.txt)
// -------------------------------------------------------------------
var dhtmlwindow={
imagefiles:['windowfiles/min.gif', 'windowfiles/close.gif', 'windowfiles/restore.gif', 'windowfiles/resize.gif'], //Path to 4 images used by script, in that order
ajaxbustcache: true, //Bust caching when fetching a file via Ajax?
minimizeorder: 0,
tobjects: [], //object to contain references to dhtml window divs, for cleanup purposes
init:function(t){
var domwindow=document.createElement("div") //create dhtml window div
domwindow.id=t
domwindow.className="dhtmlwindow"
var domwindowdata=''
domwindowdata='<div class="drag-handle">'
domwindowdata+='DHTML Window <div class="drag-controls"><img src="'+this.imagefiles[0]+'" title="Minimize" /><img src="'+this.imagefiles[1]+'" title="Close" /></div>'
domwindowdata+='</div>'
domwindowdata+='<div class="drag-contentarea"></div>'
domwindowdata+='<div class="drag-statusarea"><div class="drag-resizearea" style="background: transparent url('+this.imagefiles[3]+') top right no-repeat;"> </div></div>'
domwindowdata+='</div>'
domwindow.innerHTML=domwindowdata
document.getElementById("dhtmlwindowholder").appendChild(domwindow)
this.zIndexvalue=(this.zIndexvalue)? this.zIndexvalue+1 : 100 //z-index value for DHTML window: starts at 0, increments whenever a window has focus
var t=document.getElementById(t)
var divs=t.getElementsByTagName("div")
for (var i=0; i<divs.length; i++){ //go through divs inside dhtml window and extract all those with class="drag-" prefix
if (/drag-/.test(divs[i].className))
t[divs[i].className.replace(/drag-/, "")]=divs[i] //take out the "drag-" prefix for shorter access by name
}
t.style.zIndex=this.zIndexvalue //set z-index of this dhtml window
t.handle._parent=t //store back reference to dhtml window
t.resizearea._parent=t //same
t.controls._parent=t //same
t.onclose=function(){return true} //custom event handler "onclose"
t.onmousedown=function(){dhtmlwindow.zIndexvalue++; this.style.zIndex=dhtmlwindow.zIndexvalue} //Increase z-index of window when focus is on it
t.handle.onmousedown=dhtmlwindow.setupdrag //set up drag behavior when mouse down on handle div
t.resizearea.onmousedown=dhtmlwindow.setupdrag //set up drag behavior when mouse down on resize div
t.controls.onclick=dhtmlwindow.enablecontrols
t.show=function(){dhtmlwindow.show(this)} //public function for showing dhtml window
t.hide=function(){dhtmlwindow.close(this)} //public function for hiding dhtml window
t.setSize=function(w, h){dhtmlwindow.setSize(this, w, h)} //public function for setting window dimensions
t.moveTo=function(x, y){dhtmlwindow.moveTo(this, x, y)} //public function for moving dhtml window (relative to viewpoint)
t.isResize=function(bol){dhtmlwindow.isResize(this, bol)} //public function for specifying if window is resizable
t.isScrolling=function(bol){dhtmlwindow.isScrolling(this, bol)} //public function for specifying if window content contains scrollbars
t.load=function(contenttype, contentsource, title){dhtmlwindow.load(this, contenttype, contentsource, title)} //public function for loading content into window
this.tobjects[this.tobjects.length]=t
return t //return reference to dhtml window div
},
open:function(t, contenttype, contentsource, title, attr, recalonload){
var d=dhtmlwindow //reference dhtml window object
function getValue(Name){
var config=new RegExp(Name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,)
return (config.test(attr))? parseInt(RegExp.$1) : 0 //return value portion (int), or 0 (false) if none found
}
if (document.getElementById(t)==null) //if window doesn't exist yet, create it
t=this.init(t) //return reference to dhtml window div
else
t=document.getElementById(t)
t.setSize(getValue(("width")), (getValue("height"))) //Set dimensions of window
var xpos=getValue("center")? "middle" : getValue("left") //Get x coord of window
var ypos=getValue("center")? "middle" : getValue("top") //Get y coord of window
//t.moveTo(xpos, ypos) //Position window
if (typeof recalonload!="undefined" && recalonload=="recal" && this.scroll_top==0){ //reposition window when page fully loads with updated window viewpoints?
if (window.attachEvent && !window.opera) //In IE, add another 400 milisecs on page load (viewpoint properties may return 0 b4 then)
this.addEvent(window, function(){setTimeout(function(){t.moveTo(xpos, ypos)}, 400)}, "load")
else
this.addEvent(window, function(){t.moveTo(xpos, ypos)}, "load")
}
t.isResize(getValue("resize")) //Set whether window is resizable
t.isScrolling(getValue("scrolling")) //Set whether window should contain scrollbars
t.style.visibility="visible"
t.style.display="block"
t.contentarea.style.display="block"
t.moveTo(xpos, ypos) //Position window
t.load(contenttype, contentsource, title)
if (t.state=="minimized" && t.controls.firstChild.title=="Restore"){ //If window exists and is currently minimized?
t.controls.firstChild.setAttribute("src", dhtmlwindow.imagefiles[0]) //Change "restore" icon within window interface to "minimize" icon
t.controls.firstChild.setAttribute("title", "Minimize")
t.state="fullview" //indicate the state of the window as being "fullview"
}
return t
},
setSize:function(t, w, h){ //set window size (min is 150px wide by 100px tall)
t.style.width=Math.max(parseInt(w), 150)+"px"
t.contentarea.style.height=Math.max(parseInt(h), 100)+"px"
},
moveTo:function(t, x, y){ //move window. Position includes current viewpoint of document
this.getviewpoint() //Get current viewpoint numbers
t.style.left=(x=="middle")? this.scroll_left+(this.docwidth-t.offsetWidth)/2+"px" : this.scroll_left+parseInt(x)+"px"
t.style.top=(y=="middle")? this.scroll_top+(this.docheight-t.offsetHeight)/2+"px" : this.scroll_top+parseInt(y)+"px"
},
isResize:function(t, bol){ //show or hide resize inteface (part of the status bar)
t.statusarea.style.display=(bol)? "block" : "none"
t.resizeBool=(bol)? 1 : 0
},
isScrolling:function(t, bol){ //set whether loaded content contains scrollbars
t.contentarea.style.overflow=(bol)? "auto" : "hidden"
},
load:function(t, contenttype, contentsource, title){ //loads content into window plus set its title (3 content types: "inline", "iframe", or "ajax")
var contenttype=contenttype.toLowerCase() //convert string to lower case
if (typeof title!="undefined")
t.handle.firstChild.nodeValue=title
if (contenttype=="inline")
t.contentarea.innerHTML=contentsource
else if (contenttype=="div"){
t.contentarea.innerHTML=document.getElementById(contentsource).innerHTML //Populate window with contents of specified div on page
document.getElementById(contentsource).style.display="none" //hide that div
}
else if (contenttype=="iframe"){
t.contentarea.style.overflow="hidden" //disable window scrollbars, as iframe already contains scrollbars
if (!t.contentarea.firstChild || t.contentarea.firstChild.tagName!="IFRAME") //If iframe tag doesn't exist already, create it first
t.contentarea.innerHTML='<iframe src="" style="margin:0; padding:0; width:100%; height: 100%" name="_iframe-'+t.id+'"></iframe>'
window.frames["_iframe-"+t.id].location.replace(contentsource) //set location of iframe window to specified URL
}
else if (contenttype=="ajax"){
this.ajax_connect(contentsource, t) //populate window with external contents fetched via Ajax
}
t.contentarea.datatype=contenttype //store contenttype of current window for future reference
},
setupdrag:function(e){
var d=dhtmlwindow //reference dhtml window object
var t=this._parent //reference dhtml window div
d.etarget=this //remember div mouse is currently held down on ("handle" or "resize" div)
var e=window.event || e
d.initmousex=e.clientX //store x position of mouse onmousedown
d.initmousey=e.clientY
d.initx=parseInt(t.offsetLeft) //store offset x of window div onmousedown
d.inity=parseInt(t.offsetTop)
d.width=parseInt(t.offsetWidth) //store width of window div
d.contentheight=parseInt(t.contentarea.offsetHeight) //store height of window div's content div
if (t.contentarea.datatype=="iframe"){ //if content of this window div is "iframe"
t.style.backgroundColor="#F8F8F8" //colorize and hide content div (while window is being dragged)
t.contentarea.style.visibility="hidden"
}
document.onmousemove=d.getdistance //get distance travelled by mouse as it moves
document.onmouseup=function(){
if (t.contentarea.datatype=="iframe"){ //restore color and visibility of content div onmouseup
t.contentarea.style.backgroundColor="white"
t.contentarea.style.visibility="visible"
}
d.stop()
}
return false
},
Window widget 1.03 z-index refresh
Reply With Quote
Bookmarks