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.

//<pre><nowiki>
// Picture Popups for Mediawiki
// (c)2005 [[User:Zocky]] 
// Released under GPL

if (mw.config.get('skin')=='vector') { importScript('User:Zocky/PicturePopupsVector.js'); }
else {

importStylesheetURI('https://en.wikipedia.org/w/index.php?action=raw&ctype=text/css&title=User%3AZocky%2FPicturePopups.css');

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

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

//Handle clicks on images
function imageClick(e)
{
  if (!e.ctrlKey && !e.shiftKey && !e.metaKey && e.target.tagName=='IMG')
  {
      var t=e.target;
      var caption=t.getAttribute('alt');
      while (t.tagName!='A' && t.parentNode) { t=t.parentNode; }
      if(!t) return;
      var realurl = t.href;
      var pictitle = decodeURIComponent(realurl.match(/(\/wiki\/|title=)File:([^&]*)/)[2].replace(/_/g," "));
     
      if (caption!='Enlarge')
      {
        try 
        {
          var captiondiv=t.nextSibling.nextSibling;
          if (captiondiv.getAttribute('class')=='thumbcaption') {caption=captiondiv.innerHTML}
        }
        catch (er){}

        x=Math.round(Math.random()*200);
        y=Math.round(Math.random()*200);
        var note_content_div=new_note(x, y, '[<a href="'+realurl+'"> &gt; </a>] '+pictitle, '<blink><small><i>loading...</i></small></blink>',caption);
        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);
      }
      else
      {
        var img = t.parentNode.parentNode.parentNode.firstChild.firstChild;
        if (img.hasAttribute('thumbwidth'))
        {
           var dummy=img.getAttribute('thumbwidth')
           img.setAttribute('thumbwidth',img.width);
           img.width=dummy;
           img.parentNode.parentNode.style.width=(img.width+2) + "px";
           var dummy=img.getAttribute('thumbheight')
           img.setAttribute('thumbheight',img.height);
           img.height=dummy;
        }
        else
        {
          img.setAttribute('thumbwidth',img.width);
          img.setAttribute('thumbheight',img.height);
    
          var cbSuccess=function(x,c)
          {
            var dummy=findDescendantById(c,'file');
            if (dummy.firstChild.tagName=='IMG')
            { 
              img.src=dummy.firstChild.src;
              img.width=dummy.firstChild.width;
              img.height=dummy.firstChild.height;
            }
            else
            {
              img.width=dummy.firstChild.firstChild.width;
              img.height=dummy.firstChild.firstChild.height;
              img.src=dummy.firstChild.firstChild.src;
            }
            img.parentNode.parentNode.style.width=(img.width+2) + "px";
            return true; 
          }
        
          var cbFailure=function(x,c)
          {
            return true;
          }
          loadText(realurl,cbSuccess,cbFailure);
        }
      }
      e.preventDefault();
  }
}

//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,caption)
{
  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>'
                 + '<tr><td class="imagenotecaption" id="'+note.id+'_caption" colspan="2">'+caption+'</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;
}


}
//</nowiki></pre>