User:Zocky/Draglets.js

From Wikipedia, the free encyclopedia

Note: After saving, you have to bypass your browser's cache to see the changes. In Internet Explorer and Firefox, hold down the Ctrl key and click the Refresh or Reload button. Opera users have to clear their caches through Tools→Preferences, see the instructions for Opera. Konqueror and Safari users can just click the Reload button. 

/*<pre>
'''Draglets for Mediawiki'''
HTML/CSS draggable popup windows
(c)2005 [[en:User:Zocky]] 
Released under [[GPL]]
*/
 
/*
== Includes ==
*/
document.write('<script type="text/javascript" src="'
                + 'http://en.wikipedia.org/w/index.php?title=User:Zocky/Prototype.js'
                + '&action=raw&ctype=text/javascript&dontcountme=s"></script>');
 
document.write('<link rel="stylesheet" type="text/css" href="'  
                + 'http://en.wikipedia.org/w/index.php?title=User:Zocky/Draglets.css'
                + '&action=raw&ctype=text/css&dontcountme=s"/>');
 
// DRAGLETS
 
var dragletTop=100;
 
// Create new draglet
function dragletNew(title,x,y,width)
{
  dragletTop++;
  id = "draglet_" + dragletTop;
 
  var w = width ? width + 'px' : 'auto';
  var p;
  if (window.addEventListener)
  {
    p = 'fixed'
  } 
  else 
  {
    p = 'absolute';
    y+= document.documentElement.scrollTop;
    x+= document.documentElement.scrollLeft;
  }
 
  dragletCode
  = '<div class="draglet" id="'+id+'" style="top:'+y+'px;left:'+x+'px;z-index:'+dragletTop+';width:'+w+ ';position:' + p +'">'  
  +   '<div class="draglet_titlebar" id="'+id+'_titlebar">'
  +     '<span class="draglet_titlebar_right"><a href="javascript:dragletClose(\''+id+'\');">[Ă—]</a></span>'
  +     '<span class="draglet_title" id="'+id+'_title">'+title+'</span>'
  +   '</div>'
  +   '<div class="draglet_content" id="'+id+'_content"></div>'
  + '</div>';
 
  new Insertion.Bottom($('globalWrapper'),dragletCode);
  Event.observe($(id+'_titlebar'),'mousedown',dragletPick, false);
  Event.observe($(id+'_titlebar'),'click',dragletClick, false);
  return (id);
}
 
//Close draglet
function dragletClose(id)
{
 $('globalWrapper').removeChild($(id));
}
 
// drag and drop
var dragletMouseX = 0;	
var dragletMouseY = 0;
var dragletStartX = 0;	
var dragletStartY = 0;
var dragletActive;
 
function dragletClick(e)
{
  dragletActive && Event.stop(e);
}
 
function dragletPick(e)
{
  dragletActive = Event.findElementByClass(e,'draglet');
  dragletTop++;
  dragletActive.style.zIndex = dragletTop;
  dragletMouseX = Event.pointerX(e);	
  dragletMouseY = Event.pointerY(e);
  dragletStartX = parseInt(dragletActive.style.left);
  dragletStartY = parseInt(dragletActive.style.top); 
 
  Event.observe(document,"mousemove", dragletDrag, false);
  Event.observe(document,"mouseup", dragletDrop, false);
  Event.stop(e);
}
 
function dragletDrag(e)
{
  dragletActive.style.left = (Event.pointerX(e) - dragletMouseX + dragletStartX) + "px"; 
  dragletActive.style.top  = (Event.pointerY(e) - dragletMouseY + dragletStartY) + "px"; 
  Event.stop(e);
}
 
function dragletDrop(e)
{
  Event.stopObserving(document,"mousemove", dragletDrag, false);
  Event.stopObserving(document,"mouseup", dragletDrop, false);
  dragletActive=null;
  Event.stop(e);
}