User:Huawei251/MediaWiki:Gadget-bluedeck-ding.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>
/**
 * Bluedeck ding 提示框
 * 
 * 取自：https://meta.wikimedia.org/wiki/User:Bluedeck/source/confirm-logout.js
 * 
 * 基本用法：bluedeck.ding("提示信息", "type");
 * type可取default、warning、info、success、confusion
 */

(function (window, document) {
    var _ding = (function () {

        if (!document.getElementById("bluedeck_ding")) {
            document.getElementsByTagName("body")[0].insertAdjacentHTML("afterbegin", "<style>#bluedeck_ding button{margin: 0 0.2em; background:transparent; border:0.2em solid white; border-radius: 9em; padding: 0 0.7em; box-sizing: border-box; color: inherit; font-weight: inherit;}#bluedeck_ding button:active{background:rgba(255,255,255,0.6)}</style>");
            document.getElementsByTagName("body")[0].insertAdjacentHTML("afterbegin", "<div id='bluedeck_ding'></div>");
        }

        if (!document.getElementById("bluedeck_ding_history")) {
            document.getElementsByTagName("body")[0].insertAdjacentHTML("afterbegin", "<div id='bluedeck_ding_history'></div>");
        }

        return function (message, type, ttl, history, persist)  // default type="info", ttl=3500, history=true, persist = false.
        {
            if (!type)
                type = "info";

            if (typeof ttl === "number" && ttl < 1)
                ttl = 1;

            if (!ttl)
                ttl = 3500;

            if (ttl === "long")
                ttl = "long";

            if (!history)
                history = true;

            if (!persist)
                persist = false;

            var ding_ele = document.getElementById("bluedeck_ding");
            var ding_hist_ele = document.getElementById("bluedeck_ding_history");

            if (ding_ele.lastChild) {
                var previous_ding = ding_ele.lastChild;
                previous_ding.style.transform = "translateY(-130%)";
                setTimeout(function () { previous_ding.remove(); }, 500);
            }

            if (message === false || message === null || message === 0 || typeof message === "undefined")
                return;

            var color_sets = {
                warning: { text: "rgba(255, 255, 255, 1)", background: "rgba(221, 51,  51,  1)" },
                info: { text: "rgba(255, 255, 255, 1)", background: "rgba(51,  102, 204, 1)" },
                success: { text: "rgba(255, 255, 255, 1)", background: "rgba(0,   175, 137, 1)" },
                confusion: { text: "rgba(0,   0,   0,   1)", background: "rgba(234, 236, 240, 1)" },
                default: { text: "rgba(0,   0,   0,   1)", background: "rgba(234, 236, 240, 1)" }
            };

            if (!color_sets[type])
                type = "confusion";

            var retractant = persist ? "" : "onclick='this.style.transform = \"translateY(-130%)\";setTimeout(function(){this.remove()}.bind(this), 500);' ";

            ding_ele.insertAdjacentHTML("beforeend",
                "<div " +
                retractant +
                "style='" +
                "position:fixed; top:0; left:0; right:0; margin: 0 0 auto 0; height: auto; line-height: 1.4em; " +
                "padding: 0.6em 2em; opacity: 1; text-align: center; z-index: 9999; font-size: 86%; box-shadow: 0 2px 5px rgba(0,0,0,0.2); " +
                "font-weight: bold; transform: translateY(-130%); transition: all 0.2s;" +
                "background: " + color_sets[type].background + "; color:" + color_sets[type].text + "; ' " +
                ">" +
                message +
                "</div>"
            );

            var notice_ele = ding_ele.lastChild;

            setTimeout(function () { notice_ele.style.transform = "translateY(0%)"; }, 10);
            if (ttl !== "long") {
                setTimeout(function () { notice_ele.style.transform = "translateY(-130%)"; }, ttl + 10);
                setTimeout(function () { notice_ele.remove(); }, ttl + 510);
            }

        };

    })();

    if (window.bluedeck) {
        window.bluedeck.ding = _ding;
    } else {
        window.bluedeck = {
            ding: _ding
        };
    }
})(window, document);
// <nowiki>