MediaWiki:Gadget-tipsy-deprecated.js

$(function () {
    function maybeCall(thing, ctx) {
        return typeof thing == "function" ? thing.call(ctx) : thing;
    }
    function Tipsy(element, options) {
        this.$element = $(element);
        this.options = options;
        this.enabled = true;
        this.keyHandler = $.proxy(this.closeOnEsc, this);
        this.fixTitle();
    }
    Tipsy.prototype = {
        show: function () {
            var title = this.getTitle();
            if (title && this.enabled) {
                var $tip = this.tip();
                $tip.find(".tipsy-inner")[this.options.html ? "html" : "text"](title);
                $tip[0].className = "tipsy";
                if (this.options.className) {
                    $tip.addClass(maybeCall(this.options.className, this.$element[0]));
                }
                $tip.remove().css({ top: 0, left: 0, visibility: "hidden", display: "block" }).attr("aria-hidden", "true").appendTo(document.body);
                var pos = $.extend({}, this.$element.offset(), { width: this.$element[0].offsetWidth, height: this.$element[0].offsetHeight });
                var gravity = typeof this.options.gravity == "function" ? this.options.gravity.call(this.$element[0]) : this.options.gravity;
                $tip.addClass("tipsy-" + gravity);
                if (this.options.className) {
                    $tip.addClass(maybeCall(this.options.className, this.$element[0]));
                }
                var actualWidth = $tip[0].offsetWidth,
                    actualHeight = $tip[0].offsetHeight;
                var tp;
                switch (gravity.charAt(0)) {
                    case "n":
                        tp = { top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2 };
                        break;
                    case "s":
                        tp = { top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2 };
                        break;
                    case "e":
                        tp = { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset };
                        break;
                    case "w":
                        tp = { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset };
                        break;
                }
                if (gravity.length == 2) {
                    if (gravity.charAt(1) == "w") {
                        if (this.options.center) {
                            tp.left = pos.left + pos.width / 2 - 15;
                        } else {
                            tp.left = pos.left;
                        }
                    } else {
                        if (this.options.center) {
                            tp.left = pos.left + pos.width / 2 - actualWidth + 15;
                        } else {
                            tp.left = pos.left + pos.width;
                        }
                    }
                }
                $tip.css(tp);
                $(document).on("keydown", this.keyHandler);
                if (this.options.fade) {
                    $tip.stop().css({ opacity: 0, display: "block", visibility: "visible" }).attr("aria-hidden", "false").animate({ opacity: this.options.opacity }, 100);
                } else {
                    $tip.css({ visibility: "visible", opacity: this.options.opacity }).attr("aria-hidden", "false");
                }
            }
        },
        hide: function () {
            $(document).off("keydown", this.keyHandler);
            if (this.options.fade) {
                this.tip()
                    .stop()
                    .fadeOut(100, function () {
                        $(this).remove();
                    });
            } else {
                this.tip().remove();
            }
        },
        fixTitle: function () {
            var $e = this.$element;
            if ($e.attr("title") || typeof $e.attr("original-title") != "string") {
                $e.attr("original-title", $e.attr("title") || "").removeAttr("title");
            }
        },
        getTitle: function () {
            var title,
                $e = this.$element,
                o = this.options;
            this.fixTitle();
            if (typeof o.title == "string") {
                title = $e.attr(o.title == "title" ? "original-title" : o.title);
            } else if (typeof o.title == "function") {
                title = o.title.call($e[0]);
            }
            title = ("" + title).replace(/(^\s*|\s*$)/, "");
            return title || o.fallback;
        },
        tip: function () {
            if (!this.$tip) {
                this.$tip = $('<div class="tipsy" role="tooltip"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>');
            }
            return this.$tip;
        },
        validate: function () {
            if (!this.$element[0].parentNode) {
                this.hide();
                this.$element = null;
                this.options = null;
            }
        },
        closeOnEsc: function (e) {
            if (e.keyCode === 27) {
                this.hide();
            }
        },
        enable: function () {
            this.enabled = true;
        },
        disable: function () {
            this.enabled = false;
        },
        toggleEnabled: function () {
            this.enabled = !this.enabled;
        },
    };
    $.fn.tipsy = function (options) {
        if (options === true) {
            return this.data("tipsy");
        } else if (typeof options == "string") {
            var tipsy = this.data("tipsy");
            if (tipsy) tipsy[options]();
            return this;
        }
        options = $.extend({}, $.fn.tipsy.defaults, options);
        function get(ele) {
            var tipsy = $.data(ele, "tipsy");
            if (!tipsy) {
                tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options));
                $.data(ele, "tipsy", tipsy);
            }
            return tipsy;
        }
        function enter() {
            var tipsy = get(this);
            tipsy.hoverState = "in";
            if (options.delayIn == 0) {
                tipsy.show();
            } else {
                tipsy.fixTitle();
                setTimeout(function () {
                    if (tipsy.hoverState == "in") tipsy.show();
                }, options.delayIn);
            }
        }
        function leave() {
            var tipsy = get(this);
            tipsy.hoverState = "out";
            if (options.delayOut == 0) {
                tipsy.hide();
            } else {
                setTimeout(function () {
                    if (tipsy.hoverState == "out") tipsy.hide();
                }, options.delayOut);
            }
        }
        this.each(function () {
            get(this);
        });
        if (options.trigger != "manual") {
            var eventIn = options.trigger == "hover" ? "mouseenter focus" : "focus",
                eventOut = options.trigger == "hover" ? "mouseleave blur" : "blur";
            if (options.live) {
                mw.track("mw.deprecate", "tipsy-live");
                mw.log.warn('Use of the "live" option of jquery.tipsy is no longer supported.');
            }
            this.on(eventIn, enter).on(eventOut, leave);
        }
        return this;
    };
    $.fn.tipsy.defaults = { className: null, delayIn: 0, delayOut: 0, fade: true, fallback: "", gravity: "n", center: true, html: false, live: false, offset: 0, opacity: 1.0, title: "title", trigger: "hover" };
    $.fn.tipsy.elementOptions = function (ele, options) {
        return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
    };
    $.fn.tipsy.autoNS = function () {
        return $(this).offset().top > $(document).scrollTop() + $(window).height() / 2 ? "s" : "n";
    };
    $.fn.tipsy.autoWE = function () {
        return $(this).offset().left > $(document).scrollLeft() + $(window).width() / 2 ? "e" : "w";
    };
    $.fn.tipsy.autoBounds = function (margin, prefer) {
        return function () {
            var dir = { ns: prefer[0], ew: prefer.length > 1 ? prefer[1] : false },
                boundTop = $(document).scrollTop() + margin,
                boundLeft = $(document).scrollLeft() + margin,
                $this = $(this);
            if ($this.offset().top < boundTop) dir.ns = "n";
            if ($this.offset().left < boundLeft) dir.ew = "w";
            if ($(window).width() + $(document).scrollLeft() - $this.offset().left < margin) dir.ew = "e";
            if ($(window).height() + $(document).scrollTop() - $this.offset().top < margin) dir.ns = "s";
            return dir.ns + (dir.ew ? dir.ew : "");
        };
    };
});
mw.util.addCSS(".tipsy{padding:5px;position:absolute;z-index:100000;cursor:default}.tipsy-inner{background-color:#fff;color:#000;max-width:15em;padding:5px 8px 4px 8px;border:1px solid #a2a9b1;border-radius:2px}.tipsy-arrow{position:absolute;background:url(/w/resources/src/jquery.tipsy/images/tipsy.png?93eac) no-repeat top left;width:11px;height:6px} .tipsy-n .tipsy-arrow{top:0;left:50%;margin-left:-5px} .tipsy-nw .tipsy-arrow{top:0;left:10px} .tipsy-ne .tipsy-arrow{top:0;right:10px} .tipsy-s .tipsy-arrow{bottom:0;left:50%;margin-left:-5px;background-position:bottom left} .tipsy-sw .tipsy-arrow{bottom:0;left:10px;background-position:bottom left} .tipsy-se .tipsy-arrow{bottom:0;right:10px;background-position:bottom left} .tipsy-e .tipsy-arrow{top:50%;margin-top:-5px;right:0;width:6px;height:11px;background-position:top right} .tipsy-w .tipsy-arrow{top:50%;margin-top:-5px;left:0;width:6px;height:11px}");