User:Zocky/Draglets.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/*<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);
}