User:Huawei251/MediaWiki:Gadget-bluedeck-ding.js

// <nowiki>
/**
 * Bluedeck ding
 * 
 * 在页面顶端展示的提示框。具体样式可参见维基小工具“确认登出”。
 * 
 * 基本用法：bluedeck.ding("提示信息", "type");
 * type可取default、warning、info、success、confusion
 * 
 * @source https://meta.wikimedia.org/wiki/User:Bluedeck/source/confirm-logout.js
 * @author Bluedeck
 * @author 高文海 (组件化)
 */

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

        if (!document.getElementById("bluedeck_ding")) {
            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;
            } else if (!ttl) {
                ttl = 3500;
            } else 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', 'info', 'success', 'confusion', 'default'];
            if (color_sets.indexOf(type) === -1) {
                type = "confusion";
            }

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

            ding_ele.insertAdjacentHTML("beforeend",
                "<div " + retractant + "class='ding " + type + "'>" +
                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>