MediaWiki:Gadget-QDmodal.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* <nowiki>
    QDmodal - flexbox-based modal library
    CSS located at [[MediaWiki:Gadget-QDmodal.css]]

    @author OneTwoThreeFall
    @source <https://dev.fandom.com/wiki/QDmodal>
    @source <https://dev.fandom.com/wiki/MediaWiki:QDmodal.js>
*/

/*jslint browser, long, this */
/*global jQuery, mediaWiki */

(function ($, mw) {
    "use strict";

    var version = 20180212;

    if (mw.libs.QDmodal && mw.libs.QDmodal.version >= version) {
        return;
    }

    var visibleModals = document.getElementsByClassName("qdmodal");
    var $window = $(window);
    var $body = $(document.body);
    var $closeIcon = $(
        "<svg class='qdmodal-close' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>"
          + "<title>Close</title>"
          + "<path stroke='currentColor' d='M 3,3 13,13 M 13,3 3,13'/>"
        + "</svg>"
    );

    function addButton(button) {
        var $button = $("<span>");

        if (button.href) {
            $button = $("<a>").attr({
                href: button.href,
                target: "_blank"
            });
        }

        if (typeof button.handler === "function") {
            $button.on("click", button.handler);
        }

        if (button.attr) {
            $button.attr(button.attr);
        }

        $button.addClass("qdmodal-button").text(button.text);

        this.$footer.append($button);
    }

    //// QDmodal constructor ////

    mw.libs.QDmodal = function (id) {
        if (this === mw.libs) {
            throw new Error("mw.libs.QDmodal should be called as a constructor.");
        }

        var $close = $closeIcon.clone();

        this.$container = $("<div>").addClass("qdmodal-container");
        this.$element = $("<div>").addClass("qdmodal");
        this.$title = $("<h3>");
        this.$content = $("<section>");
        this.$footer = $("<footer>");

        this.$container.append(
            this.$element.append(
                $("<header>").append(
                    this.$title,
                    $close
                ),
                this.$content,
                this.$footer
            )
        );

        this.visible = false;
        this.data = null;

        if (typeof id === "string") {
            this.$element.attr("id", id);
        }

        $close.on("click", this.hide.bind(this));

        // close modal if the background outside the modal is clicked
        this.$container.on("click", function (event) {
            if (event.target === event.delegateTarget) {
                this.hide();
            }
        }.bind(this));

        // close modal if the escape key is pressed
        $window.on("keydown", function (event) {
            if (this.visible && event.which === 27) {
                this.hide();
            }
        }.bind(this));
    };

    mw.libs.QDmodal.prototype.hide = function () {
        if (this.data && typeof this.data.onHide === "function") {
            this.data.onHide(this);
        }

        this.visible = false;
        this.data = null;
        this.$container.detach();

        if (!visibleModals.length) {
            $body.removeClass("qdmodal-no-scroll");
        }
    };

    mw.libs.QDmodal.prototype.show = function (data) {
        if (!data) {
            return;
        }

        this.data = data;

        this.$content.toggleClass("mw-ajax-loader", Boolean(data.loading));

        // only set title if one is given, else keep previous title
        if (data.title) {
            this.$title.text(data.title);
        }

        this.$content.html(data.content || "");

        this.$footer.empty();

        if (Array.isArray(data.buttons)) {
            data.buttons.forEach(addButton.bind(this));
        }

        if (data.hook) {
            mw.hook(data.hook).fire(this);
        }

        if (!this.visible) {
            $body
                .addClass("qdmodal-no-scroll")
                .append(this.$container);
            this.visible = true;
        }

        if (typeof this.data.onShow === "function") {
            this.data.onShow(this);
        }
    };

    mw.libs.QDmodal.version = version;

    // fire hook for convenience
    mw.hook("dev.qdmodal").fire(mw.libs.QDmodal);

    //// QDmodal theming ////

    function initStyles() {
        var theme = {
            scrollbarWidth: window.innerWidth - document.body.offsetWidth
        };

        var styles = (
            "body.qdmodal-no-scroll {"
              // add a margin equivalent to the scrollbar width to
              // prevent page content moving due to hidden overflow
              + "margin-right: ${scrollbarWidth}px;"
            + "}"
        );

        // replace placeholders with theme data
        mw.util.addCSS(styles.replace(/\$\{([^}]+)\}/g, function (ignore, p1) {
            return theme[p1];
        }));
    }

    mw.loader.using("mediawiki.util").then(initStyles);
}(jQuery, mediaWiki));