User:Zocky/PicturePopups.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.

document.write('<link rel="stylesheet" type="text/css" href="'  
             + '/w/index.php?title=User:Zocky/imagenotes.css'
             + '&action=raw&ctype=text/css&dontcountme=s">');

document.addEventListener('click',firstClick,true);

//Handle clicks on document until content is loaded
function firstClick(e)
{
  var c=document.getElementById('content');
  if (c) {
    c.addEventListener('click',imageClick,false);
    document.removeEventListener('click',firstClick,true); }
}

//Handle clicks on images
function imageClick(e)
{
  if (!e.ctrlKey && !e.shiftKey &&e.target.tagName=='IMG')
  {
    try
    {
      var t=e.target;
      while (t.tagName!='A') { t=t.parentNode; }

      var realurl = t.href;
      var pictitle = unescape(realurl.match(/\/wiki\/Image:(.*)$/)[1].replace(/_/g," "));
      x=Math.round(Math.random()*200);
      y=Math.round(Math.random()*200);


      var note_content_div=new_note(x, y, '<a href="'+realurl+'">[ + ]</a> '+pictitle, '<blink><small><i>loading...</i></small></blink>');
      note_content_div.addEventListener('click',noteContentClick,true);
  
      var cbSuccess=function(x,c)
      {
        note_content_div.innerHTML='';
        note_content_div.appendChild(findDescendantById(c,'file')) || (note_content_div.innerHTML="Failed. <a>retry</a>");
        try { note_content_div.appendChild(findDescendantById(c,'imageLicense')); } catch(er) {};
        return true;
      }

      var cbFailure=function(x,c)
      {
        note_content_div.innerHTML==x.statusText;
        return true;
      }

      loadText(realurl,cbSuccess,cbFailure);

      e.preventDefault();
    }
    catch (er){}
  }
}

//Stop popup images from linking to hi-res pages
function noteContentClick(e)
{
  e.target.tagName=='IMG' && e.preventDefault() ;
}


//NOTES

var note_top=100;
var active_note;
var note_back='globalWrapper';

function note_icons(n)
{
  return   '<nobr>[<a onclick="toggle_note(\''+n+'\')"> - </a>] '
        +  '[<a onclick="close_note(\''+n+'\')"> x </a>]</nobr>';
}

function new_note(x,y,title,content)
{
  var note_container=document.getElementById(note_back)
  note_top++;

  var note = document.createElement("div");
  note.id = "note_" + note_top;
  note.setAttribute('class', "imagenote");
  note.setAttribute('minimized', "0");
  x>0 && (note.style.left = x + "px") || (note.style.right = -x + "px");
  y>0 && (note.style.top = y + "px") || (note.style.bottom = -y + "px");
  note.style.zIndex=note_top;


  note.innerHTML = '<table><tr class="imagenotetitlebar">'
                 + '<td class="imagenotetitle" id="'+note.id+'_title"><span>' + title + '</span></td>'
                 + '<td class="imagenoteicons" id="'+note.id+'_icons" align="right">' + note_icons(note.id) + '</td></tr>'
                 + '<tr><td class="imagenotecontent" id="'+note.id+'_content" colspan="2">'+content+'</td></tr></table>';
  note_container.appendChild(note);

  note.addEventListener("mousedown", pick_note, true);
  note.addEventListener("click", click_note, true);
  active_note=note;
  return document.getElementById(note.id+'_content');
}

function close_note(n)
{
  var note_container=document.getElementById(note_back);
  note_container.removeChild(document.getElementById(n));
}

function toggle_note(n)
{
  var note=document.getElementById(n);
  note.setAttribute('minimized', 1-note.getAttribute('minimized'));
}

var note_dragging;

function pick_note(e)
{
  active_note=e.currentTarget;
  note_top++;
  active_note.style.zIndex = note_top;
  mouse_x = e.clientX;	mouse_y = e.clientY;

  active_note_top = parseInt(active_note.style.top); active_note_left = parseInt(active_note.style.left);
  document.addEventListener("mousemove", drag_note, false);
  document.addEventListener("mouseup", drop_note, false);
  e.preventDefault();
  note_dragging=false;
}

function drag_note(e)
{
  var x = e.clientX;
  var y = e.clientY;

  active_note.style.top = (y - mouse_y + active_note_top) + "px"; active_note.style.left = (x - mouse_x + active_note_left) + "px";
  note_dragging=true;
}

function drop_note(e)
{
  document.removeEventListener("mousemove", drag_note, false);
  document.removeEventListener("mouseup", drop_note, false);
}

function click_note(e)
{
  note_dragging && e.preventDefault();
}


//DOWNLOADER
function loadText(url,cb1,cb2) {
  var x = window.XMLHttpRequest ? new XMLHttpRequest()
        : window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP")
        : false;
  var c=document.createElement("div");

  if (x) {
    x.onreadystatechange=function() {
      x.readyState==4 && textLoaded(x,c,cb1,cb2)};
    x.open("GET",url,true);
    x.setRequestHeader('Accept','text/*');
    x.send(null); }
}

function textLoaded(x,c,cb1,cb2) {
  x.status==200
  && ((c.innerHTML=x.responseText) && cb1 && cb1(x,c))
  || ( cb2 && cb2(x,c) || alert(x.statusText));
}

//XML helper functions
function findDescendantById(node, id) {
  if (node.id == id) { return node; }
  var i, c;
  for (i = node.firstChild; i != null; i=i.nextSibling) {
    c = findDescendantById(i,id);
    if (c != null)
      return c; }
  return null;
}