User:Eleazaros/ttipDemo.js

/****************************************************************************\
  Tooltip code.
  basic idea:
    1) parse a page for class="..." in spans at a link.
    2) assign an id to the link so we can match it against the info that is found.
        *  simply "tip0, tip1, tip2, ..., tip60, ..." style so we can match tips 
           to info.
        *  the id names will be stripped for looking up the info.  Both info
           and link ID's will be matched -- ID[0] = info[0] so, onmouseover the
           mouseover handler gets the id, strips it to the number, grabs the tip 
           and displays it.
    3) get the info table from the page the URL points at.
        a) see if it's a valid link -- error if page is missing.
        b) see if it's a redirect, get the real page and try it.
           1) warn on double-redirects.
           2) die on bad redirects to missing pages.
        c) get the table from the page and load it into the info array.
    4) set the mouseover events on the links for showing the tip.
    5) with every showing, simply grab the info from the info array matching 
       the ID number of the link.

  potential problems:  
        This thing will slow down the load of the page holding a lot of tooltips.

        Each link will issue a request to the server for that page then cache
        the tooltip so, once the page is loaded, the tips will run quickly but
        a lot of links will cause the initial page to bog down on the load as it
        grabs the tables from each tooltip source page.

        I chose this method over individual link mouseover loading for a more 
        consistent presentation of the links.  Let the main page eat the time-sink 
        of loading versus a link "perhaps" not loading due to a brief degradation 
        in internet performance/server response. If it happens at page load, no big 
        -- it got sloppy before a tip was requested.  If it happens on a tip...  
        Then it may look like THAT link/tip is faulty when nothing is wrong with it.
 
\****************************************************************************/
// global variables
var triggerName         = "ttip"          // the link class="..."
var infoboxName         = "ttipInfo"      // the table class="..."
var tipStyleName        = "ttipDemo"      // the CSS style to apply in the tip.
var ttipName            = "tip"           // the name of the tip table.
var ttipInfoName        = "tipInfo"       // not sure anymore
var ttipCount           = 0;              // the count of links/tables found/stored.
var ttipLinks           = new Array();    // array holding the link ID's.
var ttipInfo            = new Array();    // array holding the infoboxes.
var regRedir            = new RegExp( '.*<a[^>]*?title="(.*?)".*' );  // regexp for redirects.
var windowSize          = null; 
var getRequest          = getXmlHttpRequestObject();
var RenderURL           = "http://www.lotro-wiki.com/index.php?action=render&title="

/****************************************************************************\
  core functions for the tooltip.
\****************************************************************************/
//Determine what XmlHttpRequest object we will use.
function getXmlHttpRequestObject() {
    if ( window.XMLHttpRequest ) {
    // Not IE browser
        return new XMLHttpRequest(); 
    } else if( window.ActiveXObject ) {
    // IE browser
        return new ActiveXObject( "Microsoft.XMLHTTP" ); 
    } else {
    //do nothing.
    }
}

// hoooked routine.
window.onresize      = windowResize;

function mouseCoords(ev) {
    if(mv.pageX || mv.pageY) return {x:mv.pageX, y:mv.pageY};
        if (document.documentElement && document.documentElement.scrollTop) {
        // IE6 +4.01 and user has scrolled
            scrlL   = document.documentElement.scrollLeft;
            scrlT   = document.documentElement.scrollTop;
            clntL   = document.documentElement.clientLeft;
            clntT   = document.documentElement.clientTop;
        } else {
        // IE5 or DTD 3.2
            scrlL   = document.body.scrollLeft;
            scrlT   = document.body.scrollTop;
            clntL   = document.body.clientLeft;
            clntT   = document.body.clientTop;
    }
    return {x:ev.clientX + scrlL - clntL, y:ev.clientY + scrlT  - clntT};
}

// Keep track of the window size.
function windowResize() {
    if (document.documentElement && document.documentElement.clientWidth) {
    // IE6 +4.01
        clntWidth  = document.documentElement.clientWidth;
        clntHeight = document.documentElement.clientHeight;
    } else {
    // IE5 or DTD 3.2
        clntWidth  = document.body.clientWidth;
        clntHeight = document.body.clientHeight;
    }
    windowSize = {
      x:( clntWidth ) ? clntWidth:window.innerWidth, y:( clntHeight ) ? clntHeight:window.innerHeight
    }
}

/****************************************************************************\
  tooltip link setup
\****************************************************************************/
function getLinks() {
    var Spans = document.getElementsByTagName( "span" );
    for ( var i = 0; i < Spans.length; i++ ) {
        if ( hasClass( Spans[i], "tooltip" ) ) {
            Spans[i].setAttribute("id", "tip" + i);
            Spans[i].onmouseover = displayTip.bind( Spans[i], i );
            Spans[i].onmouseout  = hideTip.bind( Spans[i], i );
            // get the pagename then load the ttipInfo and ttipLinks arrays with their values.
            pagename             = Spans[i].parentNode.title;
            ttipLinks[i]         = Spans[i].id;
            ttipInfo[i]          = getTipInfo(i, pagename);
        }
    }
}

/****************************************************************************\
  fetch the information from the link page.
\****************************************************************************/
function getTipInfo(i, pagename) {
    //Checks to see if XmlHttpRequest object is ready.
    if ( getRequest.readyState == 4 || getRequest.readyState == 0 ) {
        getRequest.open( "GET", RenderURL + pagename, true );
        getRequest.onreadystatechange = parseText;
        getRequest.send( null );
        if (getRequest.readyState == 4) {
            rawText = getRequest.responseText;
            if ( rawText = null ) {
            // hit an error -- missing page.
                ttError("page", pagename);
            } else {
            // check for redirect and try and get the real page.
                if (rawText.indexOf("redirectText") != -1) { // target is a redirect
                    actualPage = rawText.replace(regRedir, "$1");
                    if ( actualPage ) {
                        getInfo( actualPage, 1 );
                        return false;
                    } else
                    // probably a double-redirect -- busted!
                        getTipInfo = ttError( "redirect" );
                    }
                } else {
                // got a page, let's get the tip info.
                    getInfo();
                }
            }
        }
    }
}

functionParseText() {
    //Check to see if the XmlHttpRequests state is finished.
    if (getRequest.readyState == 4) {
        rawText = getRequest.responseText;
    }
}

function getTipInfotable( rawText ) {
    tip.innerHTML = tooltip;
} else if (rawText.indexOf("redirectText") != -1) { // target is a redirect
actualItem = rawText.replace(reR, "$1");
if (actualItem) {
getInfo(actualItem, 1);
return false;
}

}
/****************************************************************************\
  Display and Hide tooltip routines.
\****************************************************************************/
// Show the tip.
function displayTip() {
    var tip              = document.getElementById('tfb');
    tip.style.position   = "absolute";
    tip.style.visibility = "hidden";
    tip.style.display    = "block";
    tip.style.zIndex     = "999";
    tip.style.visibility = "visible";
}

// Hide the tip.
function hideTip() {
    var tip           = document.getElementById('tfb');
    tip.innerHTML     = "";
    tip.style.display = "none";
}

/****************************************************************************\
  page fetch and parse routines.
\****************************************************************************/

/****************************************************************************\
  Hook the page loader process so we execute whenever a page loads.
\****************************************************************************/
addOnloadHook(performTooltips);