Userscripts.org

There are 3 previous versions of this script.

// ==UserScript==
// @author         Andreas Jung (sd-daken.deviantart.com)
// @name           Improved tooltips for danbooru-based image boards
// @namespace      http://www.w3.org/1999/xhtml 
// @description    Improves the info tooltips of thumbnails (makes them look prettier and adds further information).
// @include        *
// ==/UserScript==

// This file is licensed under Creative Commons Attribution License
//
// http://creativecommons.org/licenses/by/3.0/
//
// Initial Developer:
// Andreas Jung (sd-daken.deviantart.com)
//
// Contributor(s):
//

var images = document.getElementsByTagName('img');
var previews = new Array();
var style_added = false;
var preview_timeout;
var previews_found = false;


function getPreviews() {
   //Get the preview images
   for (i = 0; i < images.length; i++) {
      imgclass = images[i].getAttribute('class');
      if (!imgclass) {
         imgclass = '';
      }
      if (imgclass.indexOf('preview') != -1) {
         previews[previews.length] = images[i];
      }
   }
   //Continue only if there are previews...
   if (previews.length > 0) {
      addStyles();
      addEventListeners();
      previews_found = true;
   }
}

function addStyles() {
   if(!style_added) {
      //Add styles to the site header
      head = document.getElementsByTagName('head')[0];
      style = head.appendChild(document.createElement('style'));
      style.setAttribute('type','text/css');
      style.appendChild(document.createTextNode('#tooltip{background-color: rgb(17, 17, 17); -moz-border-radius: 5px; min-height: 50px; min-width: 50px; max-width: 200px; z-index: 100; position: absolute; border: 2px solid white; padding: 5px; opacity: 0.95;}'));
      style.appendChild(document.createTextNode('.tooltipheader{font-weight: bold; line-height: 150%;}'));
      style.appendChild(document.createTextNode('#tooltip > a{font-size: 75%; color: white; font-family: verdana, sans-serif !important;}'));
      style.appendChild(document.createTextNode('#imgurl{display:none;}'));
      style_added = true;
   }
}

function addEventListeners() {
   //Add EventListeners to the previews
   for (i = 0; i < previews.length; i++) {
      previews[i].addEventListener('mouseover', function(){showInfo(this)} ,false);
      previews[i].addEventListener('mousemove', function(e){moveInfo(e)} ,false);
      previews[i].addEventListener('mouseout', function(){removeInfo(this)} ,false);
      previews[i].setAttribute('title','');
   }
}

function showInfo(img) {
   //Extract information from alt-attribute
   imgtitle = img.getAttribute('alt');

   try {
      imgrating = imgtitle.match(/Rating..\w*/i);
      imgrating = imgrating.toString().slice(7);
   }
   catch (e) {
   }

   try {
      imgscore = imgtitle.match(/Score..\w*/i);
      imgscore = imgscore.toString().slice(6);
   }
   catch (e) {
   }

   try {
      imgtags = imgtitle.match(/Tags.*User/i);
      imgtags = imgtags.toString().slice(6,(imgtags.toString().length - 4));
      imgtags = imgtags.replace(/\s/g,"\n");
   }
   catch (e) {
      try {
         imgtags = imgtitle.match(/(.*)rating/i)[1];
      }
      catch (e) {
         if (!imgscore && !imgrating) {
            imgtags = imgtitle.match(/.*/i);
         }
      }
   }

   try {
      imguser = imgtitle.match(/User..\w*/i);
      imguser = imguser.toString().slice(5);
   }
   catch (e) {
   }

   //DEBUG: are all information extracted correctly?
   //alert(imgrating + "\n" + imgtags + "\n" + imgscore + "\n" + imguser);

   body = document.getElementsByTagName('body')[0];

   //if an old tooltip still exists, remove it first
   if (document.getElementById('tooltip')) {
      body.removeChild(document.getElementById('tooltip'));
      window.clearTimeout(timeoutid);
   }

   //add tooltip and information
   tooltip = body.appendChild(document.createElement('div'));
   tooltip.setAttribute('id', 'tooltip');

   ratingheader = tooltip.appendChild(document.createElement('a'));
   ratingheader.appendChild(document.createTextNode('Rating: '));
   ratingheader.setAttribute('class', 'tooltipheader');
   ratingtext = tooltip.appendChild(document.createElement('a'));
   ratingtext.appendChild(document.createTextNode(imgrating));
   tooltip.appendChild(document.createElement('br'));

   scoreheader = tooltip.appendChild(document.createElement('a'));
   scoreheader.appendChild(document.createTextNode('Score: '));
   scoreheader.setAttribute('class', 'tooltipheader');
   scoretext = tooltip.appendChild(document.createElement('a'));
   scoretext.appendChild(document.createTextNode(imgscore));
   tooltip.appendChild(document.createElement('br'));

   tagsheader = tooltip.appendChild(document.createElement('a'));
   tagsheader.appendChild(document.createTextNode('Tags: '));
   tagsheader.setAttribute('class', 'tooltipheader');
   tagstext = tooltip.appendChild(document.createElement('a'));
   tagstext.appendChild(document.createTextNode(imgtags));
   tooltip.appendChild(document.createElement('br'));

   userheader = tooltip.appendChild(document.createElement('a'));
   userheader.appendChild(document.createTextNode('User: '));
   userheader.setAttribute('class', 'tooltipheader');
   usertext = tooltip.appendChild(document.createElement('a'));
   usertext.appendChild(document.createTextNode(imguser));
   tooltip.appendChild(document.createElement('br'));

   //Check if the href attribute begins with a slash, if not add one...
   var href_attr = img.parentNode.getAttribute('href');
   if (href_attr.slice(0, 1) != "/") href_attr = "/" + href_attr;

   //This is needed later to test if the the tooltip displayed when the request for additional
   //details was made is the sames as the one displayed at the moment
   imgurl = "http://" + window.location.hostname + href_attr;

   //we request additional details only if the tooltip is displayed longer than a second
   //to avoid unecessary network traffic
   timeoutid2 = window.setTimeout(function() {showAdditionalDetails("http://" + window.location.hostname + href_attr)}, 1000);

   //remove the tooltip automatically after 60 seconds
   timeoutid = window.setTimeout(function() {removeInfo()}, 60000);
   
}

function showAdditionalDetails(imgpg) {
   //DEBUG: is the correct URL provided?
   //alert(imgpg);

   //request additional details
   req = new XMLHttpRequest();
   req.open('GET', imgpg, true);
   req.onreadystatechange = function (aEvt) {
     if (req.readyState == 4) {
        if (req.status == 200) {
           response = req.responseText;
           stats = response.toString().match(/<li>.*?<\/li>/gim);

           imgid = "";
           imgdate = "";

           //extract additional details
           for (i = 0; i < stats.length; i++) {
              if (stats[i].toString().match(/Id.*/)) {
                 imgid = stats[i].toString();
                 imgid = imgid.slice(8, imgid.length - 5);
              }
              if (stats[i].toString().match(/Posted.*/)) {
                 try {
                    imgdate = stats[i].toString().match(/Posted.*/);
                    imgdate = imgdate.toString().match(/>.*<\/a> by/);
                    imgdate = imgdate.toString().slice(1, imgdate.toString().length - 7);
                 }
                 catch (e) {
                    try {
                       imgdate = stats[i].toString().match(/Posted.*/);
                       imgdate = imgdate.toString().match(/>(.*)<b/)[1];
                    }
                    catch (e) {
                    }
                 }
              }
           }

          if (imgid == "") imgid = imgpg.match(/post\/show\/([^/]*)/)[1];

           //DEBUG: are additional details extracted correctly?
           //alert(imgid + "\n" + imgdate);

           //Add details if the requesting tooltip is still displayed
           if (document.getElementById('tooltip') && (imgurl == imgpg)) {
              tooltip = document.getElementById('tooltip');

              idheader = tooltip.appendChild(document.createElement('a'));
              idheader.appendChild(document.createTextNode('Id: '));
              idheader.setAttribute('class', 'tooltipheader');
              idtext = tooltip.appendChild(document.createElement('a'));
              idtext.appendChild(document.createTextNode(imgid));
              tooltip.appendChild(document.createElement('br'));

              dateheader = tooltip.appendChild(document.createElement('a'));
              dateheader.appendChild(document.createTextNode('Added: '));
              dateheader.setAttribute('class', 'tooltipheader');
              datetext = tooltip.appendChild(document.createElement('a'));
              datetext.appendChild(document.createTextNode(imgdate));
              tooltip.appendChild(document.createElement('br'));
           }
           else {
              // DEBUG: requesting tooltip and displayed tooltip aren't the same.
              // This happens if the User stays long enough over the preview to start the request
              // but not long enough to have the information displayed. Nothing unusual.
              // The information might be intersting if the code fails unexpected.
              // alert(imgurl + "\n" + imgpg);
           }
        }
     }
   };
   req.send(null);
}

function moveInfo(coords) {
   X = coords.pageX;
   Y = coords.pageY;
   if (document.getElementById('tooltip')) {
      document.getElementById('tooltip').setAttribute('style', 'left:' + (X + 20) + 'px; top:' + (Y - 50) + 'px');
   }
}

function removeInfo(img) {
      if (document.getElementById('tooltip')) {
      body.removeChild(document.getElementById('tooltip'));
      window.clearTimeout(timeoutid);
      window.clearTimeout(timeoutid2);
   }
}

window.addEventListener("load", function() {
   getPreviews();
   if(previews_found) {
      window.addEventListener("DOMNodeInserted", function() {
         //This is needed if the content is loaded dynamically (e.g. by AutoPagerize)
         //The timeout is needed because else we will call getPreviews() way too often,
         //while the content is added (this would freeze the browser!).
         window.clearTimeout(preview_timeout);
         preview_timeout = window.setTimeout(getPreviews, 1500);
      }, false);
   }
}, false);