MediaWiki:Common.js

/* [[Category:AutoDumpContentFromCommons]] */
/* Any JavaScript here will be loaded for all users on every page load. */
$(function( $ ) {

    enhanceDomPre();

    function enhanceDomPre() {	
        $('pre').each(function(){

            var pointers = [];
            var boxes = [];
            var pointersI = 0;
            var boxesI = 0;
            var thisparent = $(this).parent('div');
            var thisorigtext = $(this).html();

            function returnUnboxedText(match, p1) { return p1; }
            function returnBoxedText(match, p1) { return '<span class="temp-mw-box-anchor">' + p1 + '</span>'; }
            function returnSpanPosStr(match, p1) { return '<span class="temp-mw-point-anchor" data-pos="' + p1 + '"></span>'; }

            /* transform MW pointer anchors to full spans */
            var newText = thisorigtext.replace(/&lt;point-here&gt;/g, '<span class="temp-mw-point-anchor" data-pos="bl"></span>');
            newText = newText.replace(/&lt;point-here-(\S*)&gt;/g, returnSpanPosStr);
            
            /* transform MW box anchors to full spans */
            newText = newText.replace(/&lt;box&gt;(.*)&lt;\/box&gt;/g,returnBoxedText);
            
            /* set new PRE text, including custom spans */
            $(this).html(newText);


            /* search for pointer anchors, add to pointers object */
            $(".temp-mw-point-anchor").each(function(){ pointers[ pointersI ] = $(this).position(); pointers[ pointersI ]["position"] = $(this).data('pos'); pointersI++; });
            
            /* search for box anchors, add to box object */
            $(".temp-mw-box-anchor").each(function(){ boxes[ boxesI ] = $(this).position(); boxes[ boxesI ]["content"] = $(this)[0].outerText; boxesI++; });

            if (pointers.length > 0 || boxes.length > 0) {
                
                /* Place back original text without key-text */
                var finalText = thisorigtext.replace(/&lt;point-here&gt;/g,'');
                finalText = finalText.replace(/&lt;point-here-\S{2}&gt;/g,'');
                finalText = finalText.replace(/&lt;box&gt;(.*)&lt;\/box&gt;/g,returnUnboxedText);
                $(this).html(finalText);

                /* append DOM pointer divs to PRE's parent DIV */
                if (pointers.length > 0) {
                    $( pointers ).each(function(){
                        var data = {};
                        data.top = $(this)[0].top;
                        data.left = data.rotation = 0;
                        switch($(this)[0].position) {
                            case "tr":        
                                data.top = $(this)[0].top + 5;
                                data.left = $(this)[0].left + 5;
                                data.rotation = 225;
                                break;
                            case "br":
                                data.top = $(this)[0].top + 20;
                                data.left = $(this)[0].left;
                                data.rotation = 315;
                                break;
                            case "bl":
                                data.top = $(this)[0].top + 10;
                                data.left = $(this)[0].left - 5;
                                data.rotation = 45;
                                break;
                            case "tl":
                                data.left = $(this)[0].left - 5;
                                data.rotation = 135;
                                break;
                        }
                        thisparent.append( '<div class="pre-arrow" style="position: absolute; left: ' + data.left + 'px; top: ' + data.top + 'px; transform: rotate(' + data.rotation + 'deg); transform-origin: 0% 0%;">&nbsp</div>' );
                    });
                }
                
                if (boxes.length > 0) {
                    $( boxes ).each(function(){
                        thisparent.append( '<div class="pre-box-overlay" style="position: absolute; left: ' + ($(this)[0].left - 4) + 'px; top: ' + ($(this)[0].top - 4) + 'px;">' + $(this)[0].content + '</div>' );
                    });
                }
            }
        });
    }
    
} );