MediaWiki:Common.js/Tooltip.js

Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

• Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
• Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
• Internet Explorer/Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
• Opera: Strg+F5

/**
 * Überarbeitung [[Benutzer:Yukii|Yukii]]
 *
 * @author [[User:Meitar]]
 *
 * PLEASE NOTE: This software requires jQuery and assumes it is present.
 *
 * Permission to use, copy, modify, and distribute this software for any
 * purpose with or without fee is hereby granted, provided that this
 * permission notice appear in all copies.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
 * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
 * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
 * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
 * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
 * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 *
 * TODO: There's probably plenty of refactoring work that can be done here &
 *       might be fun for someone to do. I'm hoping that porting this script
 *       from [[User:Anthoron/tooltip.js]], which used Prototype, to Wikia's
 *       new jQuery underpinnings will provide the community with a headstart
 *       using the new framework. Cheers!
 */
 
// Create a safe namespace in which to work.
var sehTooltip = {};
 
// Default CSS, originally called "options".
sehTooltip.popupCSS = {
    position: 'absolute',
    margin: '0',
    padding: '5px',
    'background-color': '#d6d6fc',
    zindex: 1000
};
 
sehTooltip.showTooltip = function () {
    // The IDs of these elements are broken; they begin with '.' (an invalid char)
    // so we have to resort to some strangeness here by accessing them natively.
    var el = $(document.getElementById(this.id + '-tooltip'));
    el.css(sehTooltip.popupCSS);
    el.show();
};
 
sehTooltip.hideTooltip = function () {
    $(document.getElementById(this.id + '-tooltip')).hide();
};
 
sehTooltip.moveTooltip = function (e) {
    sehTooltip.positionTooltip(e.pageX, e.pageY, $(document.getElementById(this.id + '-tooltip')));
};
 
sehTooltip.positionTooltip = function (mouse_x, mouse_y, el) {
 
    var delta_x = 5;
    var delta_y = 5;
 
    // Initialize offset calculations.
    var x_offset = mouse_x;
    var y_offset = mouse_y;
 
    var skin_x_offset = -210;
    var skin_y_offset = -55;
 
    // For deciding if we need to switch sides for the tooltip
    var element_width = el.outerWidth(); // outerWidth() gives us more room.
    var element_height = el.outerHeight();
 
    // position it in the standard place (below the cursor)
    y_offset = mouse_y + delta_y;
 
    // adjust it so it doesn't over-hang the window
    if ((y_offset + element_height) > ($(window).height() + $(window).scrollTop())) {
        y_offset = mouse_y - (element_height - ($(window).height() - mouse_y)) + $(window).scrollTop();
        // give ourselves a bit of the margin at the bottom
        y_offset -= delta_y * 3;
    }
 
    x_offset = mouse_x + delta_x;
    if ((x_offset + element_width) > ($(window).width() + $(window).scrollLeft())) {
        x_offset = mouse_x - (element_width - ($(window).width() - mouse_x)) + $(window).scrollLeft();
        x_offset -= delta_x * 3;
    }
 
    if (x_offset < mouse_x && (x_offset + element_width) > mouse_x &&
        y_offset < mouse_y && (y_offset + element_height) > mouse_y) {
        x_offset = mouse_x - element_width - (delta_x * 3) + $(window).scrollLeft();
    }
 
    el.css({
        left: x_offset + skin_x_offset + "px",
        top: y_offset + skin_y_offset + "px"
    });
 
};
 
sehTooltip.toggleSticky = function (e) {
    // Not all tooltips have the same DOM structure, so the second case
    // is used to detect both situations.
    if (!$(e.target).hasClass('tooltip') && !$(e.target.parentNode.parentNode.parentNode.parentNode).hasClass('.tooltip')) {
        // We didn't click a tooltip, so close all tooltips.
        $('.tooltip').mouseout(sehTooltip.hideTooltip);
        $('.tooltip').trigger('mouseout');
    } else {
        var el = e.target;
        // Check for odd structure.
        if (!$(el).hasClass('tooltip')) {
            el = $(el).closest('.tooltip')[0];
        }
        // We clicked a tooltip. Was it already open?
        if ($(el).hasClass('seh-tooltip-sticky')) {
            sehTooltip.makeUnsticky(el);
        } else {
            sehTooltip.makeSticky(e, el);
        }
    }
};
 
sehTooltip.makeSticky = function (e, el) {
    e.preventDefault();
    // Leave tooltip in place.
    $(el).unbind('mousemove');
    $(el).unbind('mouseout');
 
    // Remember that this is sticky now.
    $(el).addClass('seh-tooltip-sticky');
};
 
sehTooltip.makeUnsticky = function (el) {
    $('.tooltip').mouseout(sehTooltip.hideTooltip);
    $('.tooltip').trigger('mouseout');
    $(el).removeClass('seh-tooltip-sticky');
};
 
$(document).ready(function () {
    $('.tooltip').each(function () {
        // attach events
        $(this).mouseover(sehTooltip.showTooltip);
        $(this).mouseout(sehTooltip.hideTooltip);
        $(this).mousemove(sehTooltip.moveTooltip);
        $(document).click(sehTooltip.toggleSticky);
    });
});