☰

toast.js

coco-message TheWindRises-2 js toast

目前为 2021-05-09 提交的版本，查看 最新版本。

此脚本不应直接安装，它是供其他脚本使用的外部库。如果你需要使用该库，请在脚本元属性加入：// @require https://update.cn-greasyfork.org/scripts/426194/929421/toastjs.js 

  1. "use strict";
  2.  
  3. function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
  4.  
  5. function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
  6.  
  7. function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
  8.  
  9. function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
  10.  
  11. !function (global, factory) {
  12.   (typeof exports === "undefined" ? "undefined" : _typeof(exports)) === "object" && typeof module !== "undefined" ? module.exports = factory() : typeof define === "function" && define.amd ? define(factory) : (global = global || self, global.cocoMessage = factory());
  13. }(void 0, function () {
  14.   "use strict";
  15.  
  16.   var msgWrapper = c({
  17.     className: "coco-msg-stage"
  18.   });
  19.  
  20.   function c(args, children) {
  21.     var el = document.createElement("div");
  22.  
  23.     for (var key in args) {
  24.       var element = args[key];
  25.  
  26.       if (key == "className") {
  27.         key = "class";
  28.         el.setAttribute(key, element);
  29.       } else if (key[0] == "_") {
  30.         el.addEventListener(key.slice(1), element);
  31.       }
  32.     }
  33.  
  34.     if (typeof children == "string") {
  35.       el.innerHTML = children;
  36.     } else if (_typeof(children) == "object" && children.tagName) {
  37.       el.appendChild(children);
  38.     } else if (children) {
  39.       var _iterator = _createForOfIteratorHelper(children),
  40.           _step;
  41.  
  42.       try {
  43.         for (_iterator.s(); !(_step = _iterator.n()).done;) {
  44.           var child = _step.value;
  45.           el.appendChild(child);
  46.         }
  47.       } catch (err) {
  48.         _iterator.e(err);
  49.       } finally {
  50.         _iterator.f();
  51.       }
  52.     }
  53.  
  54.     return el;
  55.   }
  56.  
  57.   function addAnimationEnd(el, fn) {
  58.     ["a", "webkitA"].forEach(function (prefix) {
  59.       var name = prefix + "nimationEnd";
  60.       el.addEventListener(name, function () {
  61.         fn();
  62.       });
  63.     });
  64.   }
  65.  
  66.   function css(el, css) {
  67.     for (var key in css) {
  68.       el.style[key] = css[key];
  69.     }
  70.  
  71.     if (el.getAttribute("style") === "") {
  72.       el.removeAttribute("style");
  73.     }
  74.   }
  75.  
  76.   function addClass(el, s) {
  77.     var c = el.className || "";
  78.  
  79.     if (!hasClass(c, s)) {
  80.       var arr = c.split(/\s+/);
  81.       arr.push(s);
  82.       el.className = arr.join(" ");
  83.     }
  84.   }
  85.  
  86.   function hasClass(c, s) {
  87.     return c.indexOf(s) > -1 ? !0 : !1;
  88.   }
  89.  
  90.   function removeClass(el, s) {
  91.     var c = el.className || "";
  92.  
  93.     if (hasClass(c, s)) {
  94.       var arr = c.split(/\s+/);
  95.       var i = arr.indexOf(s);
  96.       arr.splice(i, 1);
  97.       el.className = arr.join(" ");
  98.     }
  99.  
  100.     if (el.className === "") {
  101.       el.removeAttribute("class");
  102.     }
  103.   }
  104.  
  105.   var initArgs = {
  106.     msg: "",
  107.     duration: 2000,
  108.     showClose: false
  109.   };
  110.   var cocoMessage = {
  111.     info: function info() {
  112.       initConfig(arguments, "info");
  113.     },
  114.     success: function success() {
  115.       initConfig(arguments, "success");
  116.     },
  117.     warning: function warning() {
  118.       initConfig(arguments, "warning");
  119.     },
  120.     error: function error() {
  121.       initConfig(arguments, "error");
  122.     },
  123.     loading: function loading() {
  124.       return initConfig(arguments, "loading");
  125.     },
  126.     destroyAll: function destroyAll() {
  127.       _destroyAll();
  128.     },
  129.     config: function config(obj) {
  130.       for (var key in obj) {
  131.         if (Object.hasOwnProperty.call(obj, key)) {
  132.           if (obj[key] !== undefined) {
  133.             initArgs[key] = obj[key];
  134.           }
  135.         }
  136.       }
  137.     }
  138.   };
  139.  
  140.   function initConfig(obj, type) {
  141.     var args = Object.assign({}, initArgs);
  142.  
  143.     var _iterator2 = _createForOfIteratorHelper(obj),
  144.         _step2;
  145.  
  146.     try {
  147.       for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
  148.         var it = _step2.value;
  149.  
  150.         if (it !== undefined) {
  151.           if (typeof it == "string" || _typeof(it) == "object") {
  152.             args.msg = it;
  153.           } else if (typeof it == "boolean") {
  154.             args.showClose = it;
  155.           } else if (typeof it == "function") {
  156.             args.onClose = it;
  157.           } else if (typeof it == "number") {
  158.             args.duration = it;
  159.           }
  160.         }
  161.       }
  162.     } catch (err) {
  163.       _iterator2.e(err);
  164.     } finally {
  165.       _iterator2.f();
  166.     }
  167.  
  168.     args.type = type;
  169.     return createMsgEl(args);
  170.   }
  171.  
  172.   function createMsgEl(args) {
  173.     var type = args.type,
  174.         duration = args.duration,
  175.         msg = args.msg,
  176.         showClose = args.showClose,
  177.         onClose = args.onClose;
  178.     var closable = duration === 0;
  179.     var iconObj = getIconObj();
  180.  
  181.     if (type == "loading") {
  182.       msg = msg === "" ? "正在加载" : msg;
  183.       closable = showClose;
  184.       duration = 0;
  185.     }
  186.  
  187.     var el = c({
  188.       className: "coco-msg-wrapper"
  189.     }, [c({
  190.       className: "coco-msg coco-msg-fade-in ".concat(type)
  191.     }, [c({
  192.       className: "coco-msg-icon"
  193.     }, iconObj[type]), c({
  194.       className: "coco-msg-content"
  195.     }, msg), c({
  196.       className: "coco-msg-wait ".concat(closable ? "coco-msg-pointer" : ""),
  197.       _click: function _click() {
  198.         if (closable) {
  199.           closeMsg(el, onClose);
  200.         }
  201.       }
  202.     }, getMsgRight(closable))])]);
  203.     var anm = el.querySelector(".coco-msg__circle");
  204.  
  205.     if (anm) {
  206.       css(anm, {
  207.         animation: "coco-msg_".concat(type, " ").concat(duration, "ms linear")
  208.       });
  209.  
  210.       if ("onanimationend" in window) {
  211.         addAnimationEnd(anm, function () {
  212.           closeMsg(el, onClose);
  213.         });
  214.       } else {
  215.         setTimeout(function () {
  216.           closeMsg(el, onClose);
  217.         }, duration);
  218.       }
  219.     }
  220.  
  221.     if (type == "loading" && duration !== 0) {
  222.       setTimeout(function () {
  223.         closeMsg(el, onClose);
  224.       }, duration);
  225.     }
  226.  
  227.     if (!msgWrapper.children.length) {
  228.       document.body.appendChild(msgWrapper);
  229.     }
  230.  
  231.     msgWrapper.appendChild(el);
  232.     css(el, {
  233.       height: el.offsetHeight + "px"
  234.     });
  235.     setTimeout(function () {
  236.       removeClass(el.children[0], "coco-msg-fade-in");
  237.     }, 300);
  238.  
  239.     if (type == "loading") {
  240.       return function () {
  241.         closeMsg(el, onClose);
  242.       };
  243.     }
  244.   }
  245.  
  246.   function getMsgRight(showClose) {
  247.     if (showClose) {
  248.       return "\n    <svg class=\"coco-msg-close\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"5514\"><path d=\"M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z\" p-id=\"5515\"></path></svg>\n    ";
  249.     } else {
  250.       return "<svg class=\"coco-msg-progress\" viewBox=\"0 0 33.83098862 33.83098862\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle class=\"coco-msg__background\" cx=\"16.9\" cy=\"16.9\" r=\"15.9\"></circle>\n    <circle class=\"coco-msg__circle\" stroke-dasharray=\"100,100\" cx=\"16.9\" cy=\"16.9\" r=\"15.9\"></circle>\n    </svg>\n    ";
  251.     }
  252.   }
  253.  
  254.   function closeMsg(el, cb) {
  255.     if (!el) return;
  256.     css(el, {
  257.       padding: 0,
  258.       height: 0
  259.     });
  260.     addClass(el.children[0], "coco-msg-fade-out");
  261.     cb && cb();
  262.     setTimeout(function () {
  263.       if (!el) return;
  264.       var has = false;
  265.  
  266.       var _iterator3 = _createForOfIteratorHelper(msgWrapper.children),
  267.           _step3;
  268.  
  269.       try {
  270.         for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
  271.           var it = _step3.value;
  272.  
  273.           if (it === el) {
  274.             has = true;
  275.           }
  276.         }
  277.       } catch (err) {
  278.         _iterator3.e(err);
  279.       } finally {
  280.         _iterator3.f();
  281.       }
  282.  
  283.       has && removeChild(el);
  284.       el = null;
  285.  
  286.       if (!msgWrapper.children.length) {
  287.         has && removeChild(msgWrapper);
  288.       }
  289.     }, 300);
  290.   }
  291.  
  292.   function getIconObj() {
  293.     return {
  294.       info: "\n    <svg t=\"1609810636603\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"3250\"><path d=\"M469.333333 341.333333h85.333334v469.333334H469.333333z\" fill=\"#ffffff\" p-id=\"3251\"></path><path d=\"M469.333333 213.333333h85.333334v85.333334H469.333333z\" fill=\"#ffffff\" p-id=\"3252\"></path><path d=\"M384 341.333333h170.666667v85.333334H384z\" fill=\"#ffffff\" p-id=\"3253\"></path><path d=\"M384 725.333333h256v85.333334H384z\" fill=\"#ffffff\" p-id=\"3254\"></path></svg>\n    ",
  295.       success: "\n    <svg t=\"1609781242911\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1807\"><path d=\"M455.42 731.04c-8.85 0-17.75-3.05-24.99-9.27L235.14 553.91c-16.06-13.81-17.89-38.03-4.09-54.09 13.81-16.06 38.03-17.89 54.09-4.09l195.29 167.86c16.06 13.81 17.89 38.03 4.09 54.09-7.58 8.83-18.31 13.36-29.1 13.36z\" p-id=\"1808\" fill=\"#ffffff\"></path><path d=\"M469.89 731.04c-8.51 0-17.07-2.82-24.18-8.6-16.43-13.37-18.92-37.53-5.55-53.96L734.1 307.11c13.37-16.44 37.53-18.92 53.96-5.55 16.43 13.37 18.92 37.53 5.55 53.96L499.67 716.89c-7.58 9.31-18.64 14.15-29.78 14.15z\" p-id=\"1809\" fill=\"#ffffff\"></path></svg>\n    ",
  296.       warning: "\n    <svg t=\"1609776406944\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"18912\"><path d=\"M468.114286 621.714286c7.314286 21.942857 21.942857 36.571429 43.885714 36.571428s36.571429-14.628571 43.885714-36.571428L585.142857 219.428571c0-43.885714-36.571429-73.142857-73.142857-73.142857-43.885714 0-73.142857 36.571429-73.142857 80.457143l29.257143 394.971429zM512 731.428571c-43.885714 0-73.142857 29.257143-73.142857 73.142858s29.257143 73.142857 73.142857 73.142857 73.142857-29.257143 73.142857-73.142857-29.257143-73.142857-73.142857-73.142858z\" p-id=\"18913\" fill=\"#ffffff\"></path></svg>\n    ",
  297.       error: "\n    <svg t=\"1609810716933\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"5514\"><path d=\"M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z\" p-id=\"5515\" fill=\"#ffffff\"></path></svg>\n    ",
  298.       loading: "\n    <div class=\"coco-msg_loading\">\n    <svg class=\"coco-msg-circular\" viewBox=\"25 25 50 50\">\n      <circle class=\"coco-msg-path\" cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke-width=\"4\" stroke-miterlimit=\"10\"/>\n    </svg>\n    </div>\n    "
  299.     };
  300.   }
  301.  
  302.   function removeChild(el) {
  303.     el && el.parentNode.removeChild(el);
  304.   }
  305.  
  306.   function _destroyAll() {
  307.     var _iterator4 = _createForOfIteratorHelper(msgWrapper.children),
  308.         _step4;
  309.  
  310.     try {
  311.       for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
  312.         var it = _step4.value;
  313.         closeMsg(it);
  314.       }
  315.     } catch (err) {
  316.       _iterator4.e(err);
  317.     } finally {
  318.       _iterator4.f();
  319.     }
  320.   }
  321.  
  322.   window.addEventListener('DOMContentLoaded', function () {
  323.     insertCssInHead();
  324.   });
  325.  
  326.   function insertCssInHead() {
  327.     var doc = document;
  328.  
  329.     if (doc && doc.head) {
  330.       var head = doc.head;
  331.  
  332.       var _css = doc.createElement('style');
  333.  
  334.       var cssStr = "\n[class|=coco],[class|=coco]::after,[class|=coco]::before{box-sizing:border-box;outline:0}.coco-msg-progress{width:13px;height:13px}.coco-msg__circle{stroke-width:2;stroke-linecap:square;fill:none;transform:rotate(-90deg);transform-origin:center}.coco-msg-stage:hover .coco-msg__circle{-webkit-animation-play-state:paused!important;animation-play-state:paused!important}.coco-msg__background{stroke-width:2;fill:none}.coco-msg-stage{position:fixed;top:20px;left:50%;width:auto;transform:translate(-50%,0);z-index:3000}.coco-msg-wrapper{position:relative;left:50%;transform:translate(-50%,0);transform:translate3d(-50%,0,0);transition:height .3s ease,padding .3s ease;padding:6px 0;will-change:transform,opacity}.coco-msg{padding:13px 14px 13px 18px;border-radius:2px;position:relative;left:50%;transform:translate(-50%,0);transform:translate3d(-50%,0,0);display:flex;align-items:center;color:#5b6161;background-color:#fff;box-shadow:1px 4px 16px rgba(5,32,44,.08)}.coco-msg-content,.coco-msg-icon,.coco-msg-wait{display:inline-block}.coco-msg-icon{position:relative;width:13px;height:13px;border-radius:100%;display:flex;justify-content:center;align-items:center}.coco-msg-icon svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:11px;height:11px}.coco-msg-wait{width:20px;height:20px;position:relative;fill:#4eb127}.coco-msg-wait svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.coco-msg-close{width:14px;height:14px}.coco-msg-content{margin:0 10px;min-width:150px;text-align:left;font-size:14px;font-weight:500;font-family:-apple-system,Microsoft Yahei,sans-serif}.coco-msg.info .coco-msg-icon{background-color:#428ae9}.coco-msg.success .coco-msg-icon{background-color:#4ebb23}.coco-msg.warning .coco-msg-icon{background-color:#f1b306}.coco-msg.error .coco-msg-icon{background-color:#f34b51}.coco-msg_loading{flex-shrink:0;width:20px;height:20px;position:relative}.coco-msg-circular{-webkit-animation:coco-msg-rotate 2s linear infinite both;animation:coco-msg-rotate 2s linear infinite both;transform-origin:center center;height:18px!important;width:18px!important}.coco-msg-path{stroke-dasharray:1,200;stroke-dashoffset:0;stroke:#428ae9;-webkit-animation:coco-msg-dash 1.5s ease-in-out infinite;animation:coco-msg-dash 1.5s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes coco-msg-rotate{100%{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes coco-msg-rotate{100%{transform:translate(-50%,-50%) rotate(360deg)}}@-webkit-keyframes coco-msg-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}@keyframes coco-msg-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.coco-msg .coco-msg-wait{fill:#969696}.coco-msg-pointer{cursor:pointer}@-webkit-keyframes coco-msg_info{0%{stroke:#428ae9}to{stroke:#428ae9;stroke-dasharray:0 100}}@keyframes coco-msg_info{0%{stroke:#428ae9}to{stroke:#428ae9;stroke-dasharray:0 100}}@-webkit-keyframes coco-msg_success{0%{stroke:#4eb127}to{stroke:#4eb127;stroke-dasharray:0 100}}@keyframes coco-msg_success{0%{stroke:#4eb127}to{stroke:#4eb127;stroke-dasharray:0 100}}@-webkit-keyframes coco-msg_warning{0%{stroke:#fcbc0b}to{stroke:#fcbc0b;stroke-dasharray:0 100}}@keyframes coco-msg_warning{0%{stroke:#fcbc0b}to{stroke:#fcbc0b;stroke-dasharray:0 100}}@-webkit-keyframes coco-msg_error{0%{stroke:#eb262d}to{stroke:#eb262d;stroke-dasharray:0 100}}@keyframes coco-msg_error{0%{stroke:#eb262d}to{stroke:#eb262d;stroke-dasharray:0 100}}.coco-msg-fade-in{-webkit-animation:coco-msg-fade .2s ease-out both;animation:coco-msg-fade .2s ease-out both}.coco-msg-fade-out{animation:coco-msg-fade .3s linear reverse both}@-webkit-keyframes coco-msg-fade{0%{opacity:0;transform:translate(-50%,0);transform:translate3d(-50%,-80%,0)}to{opacity:1;transform:translate(-50%,0);transform:translate3d(-50%,0,0)}}@keyframes coco-msg-fade{0%{opacity:0;transform:translate(-50%,0);transform:translate3d(-50%,-80%,0)}to{opacity:1;transform:translate(-50%,0);transform:translate3d(-50%,0,0)}}\n        ";
  335.       _css.innerHTML = cssStr;
  336.  
  337.       if (head.children.length) {
  338.         head.insertBefore(_css, head.children[0]);
  339.       } else {
  340.         head.appendChild(_css);
  341.       }
  342.     }
  343.   }
  344.  
  345.   return cocoMessage;
  346. });