User:Omegatron/monobook.js/audiopops.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> */

/* Popup audio help links */
document.write(
    '<st' + 'yle type="text/css">             ' +
    ' div.audiolinkbox {                      ' +
    '     border: 1px solid rgb(170,170,170); ' +
    '     -moz-border-radius: 1em;            ' +
    '     background-color: white;            ' +
    '     position: absolute;                 ' +
    '     margin: -1.2em;                     ' +
    '     padding: 0.5em;                     ' +
    '     width: 250px;                       ' +
    '     display: none;                      ' +
    '     /* Just override for now: */        ' +
    '     font-weight: normal;                ' +
    '     text-decoration: none;              ' +
    ' }                                       ' +
    '<' + '/style>'
    );

$(function () {
    
     /* Should be renamed */
    function lightup () {
        this.audioPop.style.display="inline";
    }

     /* Should be renamed */
    function lightout () {
        var savedThis=this;
        clearInterval(this.lightTimer);
        this.lightTimer=setInterval(function(){hideAudioPop(savedThis);}, 2000);
    }

    function hideAudioPop (caller) {
        clearInterval(caller.lightTimer);
        caller.audioPop.style.display="none";
        caller.audioPop.onmouseout = null;
    }

    function mouseoverAudioPop () {
        var hotspot = this.hotspot;
        if (!hotspot) { return; }
        clearInterval(hotspot.lightTimer);
        this.onmouseout = function () {
            hotspot.lightTimer=setInterval(function(){hideAudioPop(hotspot);},2000);
        };
    }

    /* Get all the span tags */
    spans = document.getElementsByTagName('span');

    /* go through them all */
    for (i=0;i<spans.length;i++) {
    /* If the span is class audiolinkinfo */
        if (spans[i].className.indexOf("audiolinkinfo") != -1) {
            /* Put the span in a box */
            box = document.createElement('div');
            box.className="audiolinkbox";
            spans[i].parentNode.insertBefore(box,spans[i]);
            box.appendChild(spans[i]);
            
            /* And replace the standard template text with expanded description */
            /* (This only works with the template of May 18th, 2006. */
            /* Any changes to the template would require the script to change.) */
            insidebox = spans[i].firstChild
            for (j=0;j<insidebox.childNodes.length;j++) {
                if (insidebox.childNodes[j].nodeValue == "(") {
                    insidebox.childNodes[j].nodeValue = " This is an audio file.  See ";
                    /* Label the first node so a speaker icon can be placed before it */
                    firstnode = insidebox.childNodes[j];
                }
                if (insidebox.childNodes[j].href && insidebox.childNodes[j].text == "help") {
                    insidebox.childNodes[j].firstChild.nodeValue = "Media help";
                }
                if (insidebox.childNodes[j].nodeValue == "·") {
                    insidebox.childNodes[j].nodeValue = " for information on listening in your player. See the ";
                }
                if (insidebox.childNodes[j].href && insidebox.childNodes[j].text == "info") {
                    insidebox.childNodes[j].firstChild.nodeValue = "file's description page";
                }
                if (insidebox.childNodes[j].textContent == ")") {
                    insidebox.childNodes[j].nodeValue = " for more details about the recording, creator, and license.";
                }
            }
            
            /* Add the speaker icon after going through all the nodes, since it changes the number of nodes */
            speakerimage = document.createElement('img');
            speakerimage.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Loudspeaker.svg/15px-Loudspeaker.svg.png";
                        firstnode.parentNode.insertBefore(speakerimage,firstnode);
                        
            /* Add the hover thing to the audiolink span */
            var hotspot = spans[i-1];
            hotspot.onmouseout=lightout;
            hotspot.onmouseover=lightup;
            hotspot.audioPop=box;
            box.hotspot = hotspot;
            box.onmouseover = mouseoverAudioPop;
        }
    }

});

/* </nowiki></pre> */