DToast

仿桌面通知

Този скрипт не може да бъде инсталиран директно. Това е библиотека за други скриптове и може да бъде използвана с мета-директива // @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);
        }
    }
}