DToast

仿桌面通知

Este script no debería instalarse directamente. Es una biblioteca que utilizan otros scripts mediante la meta-directiva de inclusión // @require https://update.greasyfork.org/scripts/399356/1025166/DToast.js

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

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);
        }
    }
}