[jQuery] Re: DOM friendly link creation

[Gordon]

Thanks for the tips, but I'm working as part of a larger design team
and am constrained with regards to making server-side changes, as for
the inline link generation, that is what was requested and so it's
what I must deliver (I will be building in a cookie check though so
the option to turn it off client side will at least be in the code).

I found some code at http://dossy.org/archives/000338.html which
showed promise, and I did manage to build a version of the highlighter
that is based around it, but I can't deploy this version because

a) Doesn't work in Internet Explorer
b) EXTREMELY slow!  In some cases it will cause FireFox to throw up
the warnign about excessive script exexution time.

The only other solution I've got is to add code into the highlighter
script that checks for the presence of incompatible scripts, the
highlighter will just refuse to run if it finds one.  Very inelegant,
but it's better than what happens if the two scripts try to run
together.

Anyway, here's the latest version of my code, based on the highlighter
from the above link:

var jargonEnabled       = true;
var disableCaching      = true;

var jDivOffsetX         = -10;
var jDivOffsetY         = 12;

var jargonElems         = '#content *';

var regexOptions        = 'gi';
var ignoreTags          = 'a';

function newJargonEntry (xmlNode)

// Create an entry for this item in the jargonTerms array
{
        var newTerm = null;
        if (thisDesc = xmlNode.getElementsByTagName ('description')[0])
        {
                newTerm                                 = new Object ();
                newTerm ['term']                = xmlNode.getAttribute ('term');
                newTerm ['href']                = xmlNode.getAttribute ('href');
                newTerm ['description'] = thisDesc.firstChild.data;
        }
        return (newTerm);
}

function insertTerm (thisTerm)
{
        // Create a new jargon entry
        jargonTerms [thisTerm.getAttribute ('id')] = newJargonEntry
(thisTerm);
        // Do Search and Replace
        searchTerm = new RegExp ('', '');
        searchTerm.compile ('(' + thisTerm.getAttribute ('regex') + ')',
regexOptions);
        $(jargonElems).each (function ()
        {
                if ($(this).children ().size () > 0) return;
                if (($(this).is (ignoreTags)) || ($(this).parent ().is
(ignoreTags))) return;
                var html = $(this).html();
                html = html.replace (searchTerm, '<a class="jargonbuster" 
href="' +
thisTerm.getAttribute ('href') + '" onclick="window.open (\'' +
thisTerm.getAttribute ('href') + '\', \'Jargon\',
\'width=647,height=680,scrollbars=yes,resizable=yes\').focus ();
return (false);" onmouseover="createJargonDiv (this, \'' +
thisTerm.getAttribute ('id') + '\');" onmouseout="destroyJargonDiv
();">$&</a>');
                $(this).html (html);
        });
}

function insertJargon (xmlObject)

// Insert Jargon hyperlinks into content div
{
        // Parse the returned XML
        if (xmlObject.getElementsByTagName('jargon')[0])
        {
                xmlRoot = xmlObject.documentElement;
                // Get the jargon terms
                if (xmlTerms = xmlRoot.getElementsByTagName ('jargonterm'))
                {
                        $(xmlTerms).each (function ()
                        {
                                // Do search and replace on all the children of 
the target node
                                insertTerm (this);
                        });
                }
        }
        return (false);
}

function startJargon ()

// Event handler for AJAX get
{
        $.get (dataSource, function (response)
        {
                insertJargon (response);
                // Attach mousemove handlers to all generated links
                $('a.jargonbuster').mousemove (function (evt)
                {
                        $(ajaxNode).css ('left',        (evt.pageX + 
jDivOffsetX));
                        $(ajaxNode).css ('top',         (evt.pageY + 
jDivOffsetY));
                });
                return (false);
        });
}

function createJargonDiv (evt, selectedTerm)
{
        // Node used for displaying help
        ajaxNode                        = document.createElement ('div');
        ajaxNode.id                     = 'ajaxNode';

        // Child divs for jargon node
        ajaxNodeTitle           = document.createElement ('div');
        ajaxNodeText            = document.createElement ('div');

        ajaxNodeTitle.id        = 'ajaxNodeTitle';
        ajaxNodeText.id         = 'ajaxNodeText';

        // Help title
        ajaxHeadTitle           = document.createElement ('h3');
        ajaxHeadTitle.id        = 'ajaxHeadTitle';

        // Associate child nodes with the main div
        ajaxNode.appendChild (ajaxNodeTitle);
        ajaxNode.appendChild (ajaxNodeText);
        ajaxNodeTitle.appendChild (ajaxHeadTitle);

        // Update div contents
        $(ajaxHeadTitle).html   (jargonTerms [selectedTerm]['term']);
        $(ajaxNodeText).html    (jargonTerms [selectedTerm]['description']);

        // Set div position
        $(ajaxNode).css ('left',        (evt.pageX + jDivOffsetX));
        $(ajaxNode).css ('top',         (evt.pageY + jDivOffsetY));

        // Show the div
        document.body.appendChild (ajaxNode);
        return (ajaxNode);
}

function destroyJargonDiv ()
{
        $('#ajaxNode').remove ();
}

//
---------------------------------------------------------------------------------------------

if (jargonEnabled)
{
        // Variable initialization
        var jargonTerms         = new Object ();
        // Start the search and replace process
        $(document).ready (startJargon);
}