Subversion Repositories svnkaklik

// {{{ docs <-- this is a VIM (text editor) text fold

/**
 * DOM Tooltip 0.6.0
 *
 * Summary:
 * Allows developers to add custom tooltips to the webpages.  Tooltips are
 * controlled through three style class definitions.  This library also detects
 * collisions against native widgets in the browser that cannot handle the
 * zIndex property.  But this library is even more than that...with all the
 * features it has, it has the potential to replace the need for popups
 * entirely as it can embed just about any html inside the tooltip, leading to
 * the possibility of having whole forms or iframes right inside the tip...even
 * other programs!!!
 *
 * Maintainer: Dan Allen <dan@mojavelinux.com>
 *
 * License: LGPL
 * However, if you use this library, you become an official bug reporter :)
 * Please post to my forum where you use it so that I get a chance to see my
 * baby in action.  If you are doing this for commercial work perhaps you could
 * send me a few Starbucks Coffee gift dollars to encourage future developement
 * (NOT REQUIRED).  E-mail me for my address.
 *
 * Homepage: http://www.mojavelinux.com/forum/viewtopic.php?t=127
 *
 * Freshmeat Project: http://freshmeat.net/projects/domtt/?topic_id=92
 *
 * Updated: 2003/02/14
 *
 * Supported Browsers: Mozilla (Gecko), IE 5.0+, Konqueror, Opera 7
 *
 * Usage:
 * All this is required is to put the function call in the event tag for an
 * html element. The status option (for changing the status bar text) is only
 * available through all events, but when used with 'onmouseover' you have to
 * return true so that the browser does not display the link text in the status
 * bar.  To do this, wrap the domTT_activate call in the function makeTrue(),
 * which will just return true, and then prefix it with a 'return'
 *
 * Example: <a href="index.html" onmouseover="return makeTrue(domTT_activate(this, event, 'caption', 'Help', 'content', 'This is a link with a tooltip', 'statusText', 'Link', 'trial', true));">click me</a>
 *
 * Options:
 * Each option is followed by the value for that option.  The variable event
 * must be the first parameter, as shown above.  The options avaiable are:
 *
 *      predefined (optional, must be first item if used, loads default values)
 *      caption (optional)
 *      content (required)
 *      closeLink (optional, defaults to domTT_closeLink global setting variable)
 *      statusText (optional, if used with mouseover must wrap call in 'return domTT_true()')
 *      type (optional, defaults to 'greasy' but can be 'sticky' or 'velcro')
 *      classPrefix (optional, defaults to 'domTT', for changing style class)
 *      delay (optional, defaults to global delay value domTT_activateDelay)
 *      parent (optional, defaults to document.body)
 *      closeAction (optional, defaults to global domTT_closeAction, either 'hide' or 'remove')
 *      trail (optional, follow the mouse cursor while tooltip is active)
**/

// }}}
// {{{ Settings (editable)

/**
 * Settings (editable)
 */
var domTT_offsetX = 0;
var domTT_offsetY = 2;
var domTT_direction = 'southeast';
var domTT_mouseHeight = 20;
var domTT_closeLink = 'X';
var domTT_screenEdgePadding = 5;
var domTT_activateDelay = 500;
var domTT_maxWidth = 300;
var domTT_useGlobalMousePosition = true;
var domTT_classPrefix = 'domTT';
var domTT_fade = 'neither';
var domTT_lifetime = 0;
var domTT_grid = 0;
var domTT_closeAction = 'hide';
var domTT_dragStickyTips;
if (typeof(domTT_dragStickyTips) == 'undefined')
{
        var domTT_dragStickyTips = false;
}

// }}}
// {{{ Global constants

/**
 * Global constants (DO NOT EDIT)
 */
var domTT_predefined = new Hash();
var domTT_tooltips = new Hash();

// }}}
// {{{ document.onmousemove

if (domLib_useLibrary && domTT_useGlobalMousePosition)
{
        var domTT_mousePosition = new Hash();
        document.onmousemove = function(in_event)
        {
                if (typeof(in_event) == 'undefined')
                {
                        in_event = event;
                }

                domTT_mousePosition = domLib_getEventPosition(in_event);
                if (domTT_dragStickyTips && domTT_dragMouseDown)
                {
                        domTT_dragUpdate(in_event);
                }
        }
}

// }}}
// {{{ domTT_activate()

function domTT_activate(in_this, in_event)
{
        if (!domLib_useLibrary) { return false; }

        // make sure in_event is set (for IE, some cases we have to use window.event)
        if (typeof(in_event) == 'undefined')
        {
                in_event = window.event;
        }

        var owner = document.body;
        // we have an active event so get the owner
        if (in_event.type.match(/key|mouse|click|contextmenu/i))
        {
                // make sure we have nothing higher than the body element
                if (in_this.nodeType && in_this.nodeType != 9)
                {
                        var owner = in_this;
                }
        }
        // non active event
        else
        {
                if (!(owner = document.getElementById(in_this)))
                {
                        owner = document.body.appendChild(document.createElement('div'));
                        owner.style.display = 'none';
                        owner.id = in_this;
                }
        }

        // make sure the owner has a unique id
        if (!owner.id)
        {
                owner.id = '__autoId' + domLib_autoId++;
        }

        var tooltip = domTT_tooltips.get(owner.id);
        if (tooltip)
        {
                if (tooltip.get('eventType') != in_event.type)
                {
                        if (tooltip.get('type') == 'greasy')
                        {
                                tooltip.set('closeAction', 'destroy');
                                domTT_deactivate(owner.id);
                        }
                        else if (tooltip.get('status') != 'inactive')
                        {
                                return owner.id;
                        }
                }
                else
                {
                        if (tooltip.get('status') == 'inactive')
                        {
                                tooltip.set('status', 'pending');
                                tooltip.set('activateTimeout', domLib_setTimeout(function(argv) { 
                                        domTT_show(argv[0], argv[1]); 
                                }, tooltip.get('delay'), [owner.id, in_event]));

                                return owner.id;
                        }
                        // either pending or active, let it be
                        else
                        {
                                return owner.id;
                        }
                }
        }

        // setup the default options hash
        var options = new Hash(
                'caption',              '',
                'content',              '',
                'closeLink',    domTT_closeLink,
                'parent',               document.body,
                'position',             'absolute',
                'type',                 'greasy',
                'direction',    domTT_direction,
                'delay',                domTT_activateDelay,
                'classPrefix',  domTT_classPrefix,
                'closeAction',  domTT_closeAction,
                'lifetime',             domTT_lifetime,
                'grid',                 domTT_grid,
                'fade',                 domTT_fade,
                'trail',                false
        );

        // load in the options from the function call
        for (var i = 2; i < arguments.length; i += 2)
        {
                // load in predefined
                if (arguments[i] == 'predefined')
                {
                        var predefinedOptions = domTT_predefined.get(arguments[i + 1]);
                        for (var j in predefinedOptions.elementData)
                        {
                                options.set(j, predefinedOptions.get(j));
                        }
                }
                // set option
                else
                {
                        options.set(arguments[i], arguments[i + 1]);
                }
        }

        options.set('eventType', in_event.type);

        // immediately set the status text if provided
        if (options.has('statusText')) {
                try { window.status = options.get('statusText'); } catch(e) {}
        }

        // if we didn't give content...assume we just wanted to change the status and return
        if (!options.has('content') || options.get('content') == '')
        {
                if (typeof(owner.onmouseout) != 'function')
                {
                        owner.onmouseout = function(in_event) { domTT_mouseout(this, in_event); };
                }

                return owner.id;
        }

        options.set('owner', owner);
        options.set('id', '[domTT]' + owner.id);
        domTT_create(options);
        // determine the show delay
        options.set('delay', in_event.type.match(/click|mousedown|contextmenu/i) ? 0 : parseInt(options.get('delay')));
        domTT_tooltips.set(owner.id, options);
        options.set('status', 'pending');
        options.set('activateTimeout', domLib_setTimeout(function(argv) { 
                domTT_show(argv[0], argv[1]); 
        }, options.get('delay'), [owner.id, in_event]));

        return owner.id;
}

// }}}
// {{{ domTT_create()

function domTT_create(in_options)
{
        var owner = in_options.get('owner');

        // create the tooltip and hide it
        var tipObj = document.body.appendChild(document.createElement('div'));
        tipObj.style.position = 'absolute';
        tipObj.style.left = '0px';
        tipObj.style.top = '0px';
        tipObj.style.visibility = 'hidden';
        tipObj.id = in_options.get('id');
        tipObj.className = in_options.get('classPrefix');

        if (in_options.get('caption') || (in_options.get('type') == 'sticky' && in_options.get('caption') !== false))
        {

                // layout the tip with a hidden formatting table
                var tipLayoutTable = tipObj.appendChild(document.createElement('table'));
                tipLayoutTable.style.borderCollapse = 'collapse';
                if (domLib_isKonq)
                {
                        tipLayoutTable.cellSpacing = 0;
                }

                var tipLayoutTbody = tipLayoutTable.appendChild(document.createElement('tbody'));

                var numCaptionCells = 0;
                var captionRow = tipLayoutTbody.appendChild(document.createElement('tr'));
                var captionCell = captionRow.appendChild(document.createElement('td'));
                captionCell.style.padding = '0px';
                var caption = captionCell.appendChild(document.createElement('div'));
                caption.className = in_options.get('classPrefix') + 'Caption';
                caption.style.height = '100%';
                caption.appendChild(document.createTextNode(in_options.get('caption')));

                if (in_options.get('type') == 'sticky')
                {
                        var numCaptionCells = 2;
                        var closeLinkCell = captionRow.appendChild(document.createElement('td'));
                        closeLinkCell.style.padding = '0px';
                        var closeLink = closeLinkCell.appendChild(document.createElement('div'));
                        closeLink.className = in_options.get('classPrefix') + 'Caption';
                        closeLink.style.height = '100%';
                        closeLink.style.textAlign = 'right';
                        closeLink.style.cursor = domLib_stylePointer;
                        // merge the styles of the two cells
                        closeLink.style.borderLeftWidth = caption.style.borderRightWidth = '0px';
                        closeLink.style.paddingLeft = caption.style.paddingRight = '0px';
                        closeLink.style.marginLeft = caption.style.marginRight = '0px';
                        if (in_options.get('closeLink').nodeType)
                        {
                                closeLink.appendChild(in_options.get('closeLink').cloneNode(1));
                        }
                        else
                        {
                                closeLink.innerHTML = in_options.get('closeLink');
                        }

                        closeLink.onclick = function() { domTT_deactivate(owner.id); };
                        closeLink.onmousedown = function(in_event) { if (typeof(in_event) == 'undefined') { in_event = event; } in_event.cancelBubble = true; };
                }

                var contentRow = tipLayoutTbody.appendChild(document.createElement('tr'));
                var contentCell = contentRow.appendChild(document.createElement('td'));
                contentCell.style.padding = '0px';
                if (numCaptionCells)
                {
                        if (domLib_isIE)
                        {
                                contentCell.colSpan = numCaptionCells;
                        }
                        else
                        {
                                contentCell.setAttribute('colspan', numCaptionCells);
                        }
                }

                var content = contentCell.appendChild(document.createElement('div'));
                if (domLib_isIE50)
                {
                        content.style.height = '100%';
                }
        }
        else
        {
                var content = tipObj.appendChild(document.createElement('div'));
        }

        content.className = in_options.get('classPrefix') + 'Content';

        if (in_options.get('content').nodeType)
        {
                content.appendChild(in_options.get('content').cloneNode(1));
        }
        else
        {
                content.innerHTML = in_options.get('content');
        }

        // adjust the width if specified
        if (in_options.has('width'))
        {
                tipObj.style.width = parseInt(in_options.get('width')) + 'px';
        }

        // check if we are overridding the maxWidth
        // if the browser supports maxWidth, the global setting will be ignored (assume stylesheet)
        var maxWidth = domTT_maxWidth;
        if (in_options.has('maxWidth'))
        {
                if ((maxWidth = in_options.get('maxWidth')) === false)
                {
                        tipObj.style.maxWidth = domLib_styleNoMaxWidth;
                }
                else
                {
                        maxWidth = parseInt(in_options.get('maxWidth'));
                        tipObj.style.maxWidth = maxWidth + 'px';
                }
        }

        // :HACK: fix lack of maxWidth in CSS for Konq and IE
        if (maxWidth !== false && (domLib_isIE || domLib_isKonq) && tipObj.offsetWidth > maxWidth)
        {
                tipObj.style.width = maxWidth + 'px';
        }

        // tooltip floats
        if (in_options.get('position') == 'absolute' && !(in_options.has('x') && in_options.has('y')))
        {
                // determine the offset relative to the pointer
                switch (in_options.get('direction'))
                {
                        case 'northeast':
                                var offset_x = domTT_offsetX;
                                var offset_y = 0 - tipObj.offsetHeight - domTT_offsetY;
                        break;
                        case 'northwest':
                                var offset_x = 0 - tipObj.offsetWidth - domTT_offsetX;
                                var offset_y = 0 - tipObj.offsetHeight - domTT_offsetY;
                        break;
                        case 'southwest':
                                var offset_x = 0 - tipObj.offsetWidth - domTT_offsetX;
                                var offset_y = domTT_mouseHeight + domTT_offsetY;
                        break;
                        case 'southeast':
                                var offset_x = domTT_offsetX;
                                var offset_y = domTT_mouseHeight + domTT_offsetY;
                        break;
                }
        }
        // tooltip is fixed
        else
        {
                var offset_x = 0;
                var offset_y = 0;
                in_options.set('trail', false);
        }

        in_options.set('offsetX', offset_x);
        in_options.set('offsetY', offset_y);
        in_options.set('offsetWidth', tipObj.offsetWidth);
        in_options.set('offsetHeight', tipObj.offsetHeight);
        if (domLib_canFade && typeof(alphaAPI) == 'function')
        {
                if (in_options.get('fade') != 'neither')
                {
                        var fadeHandler = new alphaAPI(tipObj, 50, 50, 100, 0, null, 10);
                        fadeHandler.setAlpha(0);
                        in_options.set('fadeHandler', fadeHandler);
                }
        }
        else
        {
                in_options.set('fade', 'neither');
        }

        // setup mouse events
        if (in_options.get('trail') && typeof(owner.onmousemove) != 'function')
        {
                owner.onmousemove = function(in_event) { domTT_mousemove(this, in_event); };
        }

        if (typeof(owner.onmouseout) != 'function')
        {
                owner.onmouseout = function(in_event) { domTT_mouseout(this, in_event); };
        }

        if (in_options.get('type') == 'sticky')
        {
                if (in_options.get('position') == 'absolute' && domTT_dragStickyTips)
                {
                        if (domLib_isIE)
                        {
                                captionRow.onselectstart = function() { return false; };
                        }

                        // setup drag
                        captionRow.onmousedown = function(in_event) { domTT_dragStart(tipObj, in_event);  };
                        captionRow.onmousemove = function(in_event) { domTT_dragUpdate(in_event); };
                        captionRow.onmouseup = function() { domTT_dragStop(); };
                }
        }
        else if (in_options.get('type') == 'velcro')
        {
                tipObj.onmouseout = function(in_event) { if (typeof(in_event) == 'undefined') { in_event = event; } if (!domLib_isDescendantOf(in_event[domLib_eventTo], tipObj)) { domTT_deactivate(owner.id); }};
        }

        if (in_options.get('position') == 'relative')
        {
                tipObj.style.position = 'relative';
        }

        if (in_options.get('parent') != document.body)
        {
                in_options.get('parent').appendChild(tipObj);
        }

        in_options.set('node', tipObj);
        in_options.set('status', 'inactive');
}

// }}}
// {{{ domTT_show()

function domTT_show(in_ownerId, in_event)
{
        // should always find one since this call would be cancelled if tip was killed
        var tooltip = domTT_tooltips.get(in_ownerId);
        var status = tooltip.get('status');
        var tipObj = tooltip.get('node');

        if (tooltip.get('position') == 'absolute')
        {
                if (tooltip.has('x') && tooltip.has('y'))
                {
                        var mouse_x = tooltip.get('x');
                        var mouse_y = tooltip.get('y');
                }
                else if (!domTT_useGlobalMousePosition || status == 'active' || tooltip.get('delay') == 0)
                {
                        var eventPosition = domLib_getEventPosition(in_event);
                        var mouse_x = eventPosition.get('x');
                        var mouse_y = eventPosition.get('y');
                }
                else
                {
                        var mouse_x = domTT_mousePosition.get('x');
                        var mouse_y = domTT_mousePosition.get('y');
                }

                // we are using a grid for updates
                if (tooltip.get('grid'))
                {
                        // if this is not a mousemove event or it is a mousemove event on an active tip and
                        // the movement is bigger than the grid
                        if (in_event.type != 'mousemove' || (status == 'active' && (Math.abs(tooltip.get('lastX') - mouse_x) > tooltip.get('grid') || Math.abs(tooltip.get('lastY') - mouse_y) > tooltip.get('grid'))))
                        {
                                tooltip.set('lastX', mouse_x);
                                tooltip.set('lastY', mouse_y);
                        }
                        // did not satisfy the grid movement requirement
                        else
                        {
                                return false;
                        }
                }

                var coordinates = {'x' : mouse_x + tooltip.get('offsetX'), 'y' : mouse_y + tooltip.get('offsetY')};
                coordinates = domTT_correctEdgeBleed(tooltip.get('offsetWidth'), tooltip.get('offsetHeight'), coordinates.x, coordinates.y, domTT_offsetX, domTT_offsetY, tooltip.get('type'));

                // update the position
                tipObj.style.left = coordinates.x + 'px';
                tipObj.style.top = coordinates.y + 'px';

                // increase the tip zIndex so it goes over previously shown tips
                tipObj.style.zIndex = domLib_zIndex++;
        }

        // if tip is not active, active it now and check for a fade in
        if (status == 'pending')
        {
                // unhide the tooltip
                tooltip.set('status', 'active');
                tipObj.style.display = '';
                tipObj.style.visibility = 'visible';

                var fade = tooltip.get('fade');
                if (fade != 'neither')
                {
                        var fadeHandler = tooltip.get('fadeHandler');
                        if (fade == 'out' || fade == 'both')
                        {
                                fadeHandler.pause();
                                if (fade == 'out')
                                {
                                        fadeHandler.reset();
                                }
                        }

                        if (fade == 'in' || fade == 'both')
                        {
                                fadeHandler.fadeIn();
                        }
                }

                if (tooltip.get('type') == 'greasy' && tooltip.get('lifetime') != 0)
                {
                        tooltip.set('lifetimeTimeout', domLib_setTimeout(function(argv) { domTT_deactivate(argv[0]); }, tooltip.get('lifetime'), [in_ownerId]));
                }
        }

        if (tooltip.get('position') == 'absolute')
        {
                domLib_detectCollisions(tipObj);
        }
}

// }}}
// {{{ domTT_deactivate()

function domTT_deactivate(in_ownerId)
{
        var tooltip = domTT_tooltips.get(in_ownerId);
        if (tooltip)
        {
                var status = tooltip.get('status');
                if (status == 'pending')
                {
                        // cancel the creation of this tip if it is still pending
                        domLib_clearTimeout(tooltip.get('activateTimeout'));
                        tooltip.set('status', 'inactive');
                }
                else if (status == 'active')
                {
                        if (tooltip.get('lifetime'))
                        {
                                domLib_clearTimeout(tooltip.get('lifetimeTimeout'));
                        }

                        var tipObj = tooltip.get('node');
                        if (tooltip.get('closeAction') == 'hide')
                        {
                                var fade = tooltip.get('fade');
                                if (fade != 'neither')
                                {
                                        var fadeHandler = tooltip.get('fadeHandler');
                                        if (fade == 'out' || fade == 'both')
                                        {
                                                fadeHandler.pause();
                                                fadeHandler.fadeOut();
                                        }
                                        else
                                        {
                                                fadeHandler.stop();
                                        }
                                }
                                else
                                {
                                        tipObj.style.display = 'none';
                                }
                        }
                        else
                        {
                                tooltip.get('parent').removeChild(tipObj);
                                domTT_tooltips.remove(in_ownerId);
                        }

                        tooltip.set('status', 'inactive');
                        // unhide all of the selects that are owned by this object
                        domLib_detectCollisions(tipObj, true); 
                }
        }
}

// }}}
// {{{ domTT_mouseout()

function domTT_mouseout(in_owner, in_event)
{
        if (!domLib_useLibrary) { return false; }

        if (typeof(in_event) == 'undefined')
        {
                in_event = event;
        }

        var toChild = domLib_isDescendantOf(in_event[domLib_eventTo], in_owner);
        var tooltip = domTT_tooltips.get(in_owner.id);
        if (tooltip && (tooltip.get('type') == 'greasy' || tooltip.get('status') != 'active'))
        {
                // deactivate tip if exists and we moved away from the owner
                if (!toChild)
                {
                        domTT_deactivate(in_owner.id);
                }
        }
        else if (!toChild)
        {
                try { window.status = window.defaultStatus; } catch(e) {}
        }
}

// }}}
// {{{ domTT_mousemove()

function domTT_mousemove(in_owner, in_event)
{
        if (!domLib_useLibrary) { return false; }

        if (typeof(in_event) == 'undefined')
        {
                in_event = event;
        }

        var tooltip = domTT_tooltips.get(in_owner.id);
        if (tooltip && tooltip.get('trail') && tooltip.get('status') == 'active')
        {
                domTT_show(in_owner.id, in_event);
        }
}

// }}}
// {{{ domTT_addPredefined()

function domTT_addPredefined(in_id)
{
        var options = new Hash();
        for (var i = 1; i < arguments.length; i += 2)
        {
                options.set(arguments[i], arguments[i + 1]);
        }

        domTT_predefined.set(in_id, options);
}

// }}}
// {{{ domTT_correctEdgeBleed()

function domTT_correctEdgeBleed(in_width, in_height, in_x, in_y, in_offsetX, in_offsetY, in_type)
{
        var bleedRight;
        var bleedBottom;
        // for IE in compliance mode, maybe others
        if (document.documentElement.clientHeight)
        {
                var pageHeight = document.documentElement.clientHeight;
                var pageWidth = document.documentElement.clientWidth;
                var pageYOffset = document.documentElement.scrollTop;
                var pageXOffset = document.documentElement.scrollLeft;
        }
        else
        {
                var pageWidth = document.body.clientWidth;
                var pageYOffset = window.pageYOffset;
                var pageXOffset = window.pageXOffset;
                if (domLib_isKonq)
                {
                        var pageHeight = window.innerHeight;
                }
                else
                {
                        var pageHeight = document.body.clientHeight;
                }
        }

        // we are bleeding off the right, move tip over to stay on page
        if ((bleedRight = (in_x - pageXOffset) + in_width - (pageWidth - domTT_screenEdgePadding)) > 0)
        {
                in_x -= bleedRight;
        }

        // we are bleeding to the left, move tip over to stay on page
        // we don't want an 'else if' here, because if it doesn't fit we will bleed off the right
        if ((in_x - pageXOffset) < domTT_screenEdgePadding)
        {
                in_x = domTT_screenEdgePadding + pageXOffset;
        }

        // ** top/bottom corrections depends on type, because we can't end up with the mouse over
        // the tip if this is a greasy **
        // if we are bleeding off the bottom, flip to north
        if ((bleedBottom = (in_y - pageYOffset) + in_height - (pageHeight - domTT_screenEdgePadding)) > 0) {
                if (in_type == 'sticky') {
                        in_y -= bleedBottom;
                }
                else
                {
                        in_y -= in_height + (2 * in_offsetY) + domTT_mouseHeight;
                }
        }

        // if we are bleeding off the top, flip to south
        // we don't want an 'else if' here, because if we just can't fit it, bleed off the bottom
        if ((in_y - pageYOffset) < domTT_screenEdgePadding)
        {
                if (in_type == 'sticky')
                {
                        in_y = domTT_screenEdgePadding + pageYOffset;
                }
                else
                {
                        in_y += in_height + (2 * in_offsetY) + domTT_mouseHeight;
                }
        }

        return {'x' : in_x, 'y' : in_y};
}

// }}}
// {{{ domTT_isActive()

function domTT_isActive(in_ownerId)
{
        var tooltip = domTT_tooltips.get(in_ownerId);
        if (!tooltip || tooltip.get('status') != 'active')
        {
                return false;
        }
        else
        {
                return true;
        }
}

// }}}