☰

DToast

仿桌面通知

Version vom 07.03.2022. Aktuellste Version

Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://update.greasyfork.org/scripts/399356/1025166/DToast.js 

function d_toast_init_css() {
    var d_toast_text_node = ".d-toast-close:hover{color:#FFFFFF !important}.d-toast{animation:d-toast-left-in 0.5s;-moz-animation:d-toast-left-in 0.5s; /* Firefox */-webkit-animation:d-toast-left-in 0.5s; /* Safari and Chrome */-o-animation:d-toast-left-in 0.5s; /* Opera */}.d-toast-close::before{content:\"＋\";}@keyframes d-toast-left-in{from {right:-400px ;}to {right:30px;}}@-moz-keyframes d-toast-left-in /* Firefox */{from {right:-400px;}to {right:30px;}}@-webkit-keyframes d-toast-left-in /* Safari 和 Chrome */{from {right:-400px;}to {right:30px;}}@-o-keyframes d-toast-left-in /* Opera */{from {right:-400px;}to {right:30px;}}@keyframes d-toast-right-out{from{right: 30px;}to{right: -400px;}}@-webkit-keyframes d-toast-right-out{from{right: 30px;}to{right: -400px;}}@-moz-keyframes d-toast-right-out{from{right: 30px;}to{right: -400px;}}@-o-keyframes d-toast-right-out{from{right: 30px;}to{right: -400px;}}.d-toast-close-start{animation: d-toast-right-out 0.5s;-webkit-animation: d-toast-right-out 0.5s;-moz-animation: d-toast-right-out 0.5s;-o-animation: d-toast-right-out 0.5s;}";
    var d_toast_style = document.createElement("style");
    d_toast_style.type = "text/css";
    try {　　
        d_toast_style.appendChild(document.createTextNode(d_toast_text_node));
    }
    catch (ex) {　　
        d_toast_style.styleSheet.cssText = d_toast_text_node;
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(d_toast_style);
}
d_toast_init_css();
class dToast {
    constructor(config) {
        this.toast(config);
    }
    inner(config) {
        var date = new Date();
        date = date.getHours() + ":" + date.getMinutes();
        var _div = document.createElement("div");
        var _div_icon = document.createElement("div");
        var _div_content = document.createElement("div");
        var _close = document.createElement('span');
        var _div_img = document.createElement("img");
        var _div_ul = document.createElement("ul");
        var _div_li_1 = document.createElement("li");
        var _div_li_2 = document.createElement("li");
        var _div_li_3 = document.createElement("li");
        _close.className = "d-toast-close";
        _close.style.transform = "rotate(45deg)";
        _close.style.webkitTransform = "rotate(45deg)";
        _close.style.mskitTransform = "rotate(45deg)";
        _close.style.mozkitTransform = "rotate(45deg)";
        _close.style.oTransform = "rotate(45deg)";
        _close.style.color = "#ADADAD";
        _close.style.fontSize = "26px";
        _close.style.fontWeight = "normal";
        _close.style.position = "absolute";
        _close.style.top = "10px";
        _close.style.right = "10px";
        _close.style.display = "none";
        var toast_data = config.data;
        _div_img.setAttribute("src", config.icon);
        _div_li_1.innerText = config.title;
        _div_li_2.innerText = config.body;
        _div_li_3.innerHTML = date + "<span style='font-size:16px;font-weight:bold;'> · </span>" + config.master;
        _div_img.onerror = function(e) {
            _div_icon.display = "none";
            _div_content.style.left = "30px";
        };
        _div.onmouseover = function(e) {
            _close.style.display = "block";
        };
        _div.onmouseout = function(e) {
            _close.style.display = "none";
        };
        _close.onclick = function(e) {
            _div.className = "d-toast-close-start";
            setTimeout(function() {
                _div.remove();
                if (typeof onclose == "function") {
                    config.onclose(e);
                }
            }, 500);
        };
        _close.onselectstart = function() {
            return false;
        };
        var toast_items = document.getElementsByClassName("d-toast");
        var _div_bottom = (125 * toast_items.length) + 20;
        var _body_height = document.documentElement.clientHeight;
        if (_body_height - 125 < _div_bottom) {
            for (var i = toast_items.length - 1; i >= 0; i--) {
                toast_items[i].remove();
            }
            _div_bottom = 20;
        }
        if (typeof config.onclick == "function") {
            _div.onclick = function(e) {
                var _target = e.target;
                if (_target.nodeName == "SPAN") {
                    _close.click;
                }
                else {
                    config.onclick(toast_data);
                }
            };
        }
        _div.style.cursor = "default";
        _div.style.width = "360px";
        _div.style.height = "120px";
        _div.style.position = "fixed";
        _div.style.bottom = _div_bottom + "px";
        _div.style.right = "20px";
        _div.style.backgroundColor = "#474747";
        _div_img.style.width = "50px";
        _div_img.style.height = "50px";
        _div_img.style.position = "absolute";
        _div_img.style.top = "25px";
        _div_img.style.left = "15px";
        _div_content.style.position = "absolute";
        _div_content.style.left = "80px";
        _div_content.style.top = "6px";
        _div_ul.style.listStyle = "none";
        _div_ul.style.paddingLeft = "0px";
        _div_li_1.style.color = "#FFFFFF";
        _div_li_1.style.fontWeight = "bold";
        _div_li_1.style.fontSize = "16px";
        _div_li_2.style.color = "#ADADAD";
        _div_li_2.style.fontSize = "16px";
        _div_li_3.style.color = "#ADADAD";
        _div_li_3.style.fontSize = "12px";
        _div_li_3.style.marginTop = "-3px";
        _div.className = "d-toast";
        _div_icon.className = "d-toast-icon";
        _div_content.className = "d-toast-content";
        _div_li_1.className = "d-toast-title";
        _div_li_2.className = "d-toast-body";
        _div_li_3.className = "d-toast-info";
        _div_ul.appendChild(_div_li_1);
        _div_ul.appendChild(_div_li_2);
        _div_ul.appendChild(_div_li_3);
        _div_icon.appendChild(_div_img);
        _div_content.appendChild(_div_ul);
        if (typeof config.icon == "string") {
            _div.appendChild(_div_icon);
        }
        else {
            _div_content.style.left = "30px";
        }
        _div.appendChild(_div_content);
        _div.appendChild(_close);
        var _d_toast_timeout = config.timeout;
        if (typeof _d_toast_timeout == "undefined") {
            _d_toast_timeout = 6500;
        }
        if (typeof config.master == "undefined") {
            config.master = document.domain;
        }
        document.body.appendChild(_div);
        setTimeout(function() {
            _div.className = "d-toast-close-start";
            setTimeout(function() {
                _div.remove();
            }, 500);
        }, _d_toast_timeout);
    }
    toast(config) {
        var self = this;
        var toast_config = config;
        if (window.Notification && Notification.permission !== "denied" && config.inner !== true) {
            Notification.requestPermission(function(status) {
                if (status == "granted") {
                    var _config = {
                        lang: "zh-CN",
                        tag: "toast-" + (+new Date()),
                        body: config.body,
                    };
                    if (typeof config.icon == "string") {
                        _config.icon = config.icon;
                    }
                    if (typeof config.data != "undefined") {
                        _config.icon = config.data;
                    }
                    if (typeof config.timeout != "undefined") {
                        _config.timestamp = config.timeout;
                    }
                    const d_toast_n = new Notification(config.title, _config);
                    var d_toast_data = config.data;
                    d_toast_n.onclick = function(e) {
                        if (typeof toast_config.onclick == "function") {
                            toast_config.onclick(d_toast_data);
                        }
                    };
                }
                else {
                    if (config.dev === true) {
                        console.warn('请允许通知！');
                    }
                    self.inner(config);
                }
            });
        }
        else {
            if (config.dev === true) {
                console.warn("你的浏览器不支持！\n1、被禁止通知\n2、请更换浏览器\n3、已设置成浏览器通知");
            }
            self.inner(config);
        }
    }
}