☰

DToast

仿桌面通知

当前为 2020-04-02 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/399356/787349/DToast.js 

  1. function d_toast_init_css() {
  2.     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;}";
  3.     var d_toast_style = document.createElement("style");
  4.     d_toast_style.type = "text/css";
  5.     try {　　
  6.         d_toast_style.appendChild(document.createTextNode(d_toast_text_node));
  7.     }
  8.     catch (ex) {　　
  9.         d_toast_style.styleSheet.cssText = d_toast_text_node;
  10.     }
  11.     var head = document.getElementsByTagName("head")[0];
  12.     head.appendChild(d_toast_style);
  13. }
  14. d_toast_init_css();
  15. class dToast {
  16.     constructor(config) {
  17.         this.toast(config);
  18.     }
  19.     inner(config) {
  20.         var date = new Date();
  21.         date = date.getHours() + ":" + date.getMinutes();
  22.         var _div = document.createElement("div");
  23.         var _div_icon = document.createElement("div");
  24.         var _div_content = document.createElement("div");
  25.         var _close = document.createElement('span');
  26.         var _div_img = document.createElement("img");
  27.         var _div_ul = document.createElement("ul");
  28.         var _div_li_1 = document.createElement("li");
  29.         var _div_li_2 = document.createElement("li");
  30.         var _div_li_3 = document.createElement("li");
  31.         _close.className = "d-toast-close";
  32.         _close.style.transform = "rotate(45deg)";
  33.         _close.style.webkitTransform = "rotate(45deg)";
  34.         _close.style.mskitTransform = "rotate(45deg)";
  35.         _close.style.mozkitTransform = "rotate(45deg)";
  36.         _close.style.oTransform = "rotate(45deg)";
  37.         _close.style.color = "#ADADAD";
  38.         _close.style.fontSize = "26px";
  39.         _close.style.fontWeight = "normal";
  40.         _close.style.position = "absolute";
  41.         _close.style.top = "10px";
  42.         _close.style.right = "10px";
  43.         _close.style.display = "none";
  44.         var toast_data = config.data;
  45.         _div_img.setAttribute("src", config.icon);
  46.         _div_li_1.innerText = config.title;
  47.         _div_li_2.innerText = config.body;
  48.         _div_li_3.innerHTML = date + "<span style='font-size:16px;font-weight:bold;'> · </span>" + config.master;
  49.         _div_img.onerror = function(e) {
  50.             _div_icon.display = "none";
  51.             _div_content.style.left = "30px";
  52.         };
  53.         _div.onmouseover = function(e) {
  54.             _close.style.display = "block";
  55.         };
  56.         _div.onmouseout = function(e) {
  57.             _close.style.display = "none";
  58.         };
  59.         _close.onclick = function(e) {
  60.             _div.className = "d-toast-close-start";
  61.             setTimeout(function() {
  62.                 _div.remove();
  63.                 if (typeof onclose == "function") {
  64.                     config.onclose(e);
  65.                 }
  66.             }, 500);
  67.         };
  68.         _close.onselectstart = function() {
  69.             return false;
  70.         };
  71.         var toast_items = document.getElementsByClassName("d-toast");
  72.         var _div_bottom = (125 * toast_items.length) + 20;
  73.         var _body_height = document.documentElement.clientHeight;
  74.         if (_body_height - 125 < _div_bottom) {
  75.             for (var i = toast_items.length - 1; i >= 0; i--) {
  76.                 toast_items[i].remove();
  77.             }
  78.             _div_bottom = 20;
  79.         }
  80.         if (typeof config.onclick == "function") {
  81.             _div.onclick = function(e) {
  82.                 var _target = e.target;
  83.                 if (_target.nodeName == "SPAN") {
  84.                     _close.click;
  85.                 }
  86.                 else {
  87.                     config.onclick(toast_data);
  88.                 }
  89.             };
  90.         }
  91.         _div.style.cursor = "default";
  92.         _div.style.width = "360px";
  93.         _div.style.height = "120px";
  94.         _div.style.position = "fixed";
  95.         _div.style.bottom = _div_bottom + "px";
  96.         _div.style.right = "20px";
  97.         _div.style.backgroundColor = "#474747";
  98.         _div_img.style.width = "50px";
  99.         _div_img.style.height = "50px";
  100.         _div_img.style.position = "absolute";
  101.         _div_img.style.top = "25px";
  102.         _div_img.style.left = "15px";
  103.         _div_content.style.position = "absolute";
  104.         _div_content.style.left = "80px";
  105.         _div_content.style.top = "6px";
  106.         _div_ul.style.listStyle = "none";
  107.         _div_ul.style.paddingLeft = "0px";
  108.         _div_li_1.style.color = "#FFFFFF";
  109.         _div_li_1.style.fontWeight = "bold";
  110.         _div_li_1.style.fontSize = "16px";
  111.         _div_li_2.style.color = "#ADADAD";
  112.         _div_li_2.style.fontSize = "16px";
  113.         _div_li_3.style.color = "#ADADAD";
  114.         _div_li_3.style.fontSize = "12px";
  115.         _div_li_3.style.marginTop = "-3px";
  116.         _div.className = "d-toast";
  117.         _div_icon.className = "d-toast-icon";
  118.         _div_content.className = "d-toast-content";
  119.         _div_li_1.className = "d-toast-title";
  120.         _div_li_2.className = "d-toast-body";
  121.         _div_li_3.className = "d-toast-info";
  122.         _div_ul.appendChild(_div_li_1);
  123.         _div_ul.appendChild(_div_li_2);
  124.         _div_ul.appendChild(_div_li_3);
  125.         _div_icon.appendChild(_div_img);
  126.         _div_content.appendChild(_div_ul);
  127.         if (typeof config.icon == "string") {
  128.             _div.appendChild(_div_icon);
  129.         }
  130.         else {
  131.             _div_content.style.left = "30px";
  132.         }
  133.         _div.appendChild(_div_content);
  134.         _div.appendChild(_close);
  135.         var _d_toast_timeout = config.timeout;
  136.         if (typeof _d_toast_timeout == "undefined") {
  137.             _d_toast_timeout = 6500;
  138.         }
  139.         if (typeof config.master == "undefined") {
  140.             config.master = document.domain;
  141.         }
  142.         document.body.appendChild(_div);
  143.         setTimeout(function() {
  144.             _div.className = "d-toast-close-start";
  145.             setTimeout(function() {
  146.                 _div.remove();
  147.             }, 500);
  148.         }, _d_toast_timeout);
  149.     }
  150.     toast(config) {
  151.         var self = this;
  152.         var toast_config = config;
  153.         if (window.Notification && Notification.permission !== "denied" && config.inner !== true) {
  154.             Notification.requestPermission(function(status) {
  155.                 if (status == "granted") {
  156.                     var _config = {
  157.                         lang: "zh-CN",
  158.                         tag: "toast-" + (+new Date()),
  159.                         body: config.body,
  160.                     };
  161.                     if (typeof config.icon == "string") {
  162.                         _config.icon = config.icon;
  163.                     }
  164.                     if (typeof config.data != "undefined") {
  165.                         _config.icon = config.data;
  166.                     }
  167.                     if (typeof config.timeout != "undefined") {
  168.                         _config.timestamp = config.timeout;
  169.                     }
  170.                     const d_toast_n = new Notification(config.title, _config);
  171.                     var d_toast_data = config.data;
  172.                     d_toast_n.onclick = function(e) {
  173.                         if (typeof toast_config.onclick == "function") {
  174.                             toast_config.onclick(d_toast_data);
  175.                         }
  176.                     };
  177.                 }
  178.                 else {
  179.                     if (config.dev === true) {
  180.                         console.warn('请允许通知！');
  181.                     }
  182.                     self.inner(config);
  183.                 }
  184.             });
  185.         }
  186.         else {
  187.             if (config.dev === true) {
  188.                 console.warn("你的浏览器不支持！\n1、被禁止通知\n2、请更换浏览器\n3、已设置成浏览器通知");
  189.             }
  190.             self.inner(config);
  191.         }
  192.     }
  193. }