Document

├── LICENSE ├── README.md ├── coco-message.js ├── coco-message.min.js ├── example.html └── package.json /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 TheWindRises-- 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # coco-message 2 | 3 | 4 | coco-message 是一个简单实用的javascript信息提示插件，兼容主流浏览器，兼容至ie9 (ie没有svg动画) 5 | 6 | 7 | 8 | ## Usage 9 | 10 | install via cnpm: 11 | 12 | ``` 13 | cnpm install coco-message -S 14 | ``` 15 | 16 | ``` 17 | import cocoMessage from 'coco-message' 18 | 19 | cocoMessage('hello world') 20 | or 21 | cocoMessage.info('hello world') 22 | ``` 23 | 24 | ``` 25 | 26 | ``` 27 | ## 暗黑模式 28 | 29 | ``` 30 | 31 | 32 | 在html标签上添加dark样式名即可 33 | ``` 34 | 35 | ## Examples 36 | 37 | 38 | [在线示例](https://unpkg.com/coco-message/example.html) 39 | 40 | 41 | 42 | ## 基本用法 43 | 44 | 对参数没有顺序要求，cocoMessage会根据参数的数据类型进行解析 45 | 46 | ```javascript 47 | cocoMessage.config({ //全局配置 48 | duration: 10000, //消息显示时长 49 | }); 50 | 51 | const close = cocoMessage.info( 52 | "请先登录！", //消息文本 53 | 3000, //消息显示时长 54 | ()=> { //回调函数 55 | console.log("close"); 56 | } 57 | ); 58 | 59 | close(); //关闭消息方法 60 | 61 | 62 | var div = document.createElement("div"); 63 | div.innerText = "修改成功！"; 64 | cocoMessage.success( 65 | ()=>{ 66 | console.log("close"); 67 | }, 68 | div 69 | ); 70 | 71 | ``` 72 | -------------------------------------------------------------------------------- /coco-message.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | function _typeof(obj) { 4 | "@babel/helpers - typeof"; 5 | if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { 6 | _typeof = function _typeof(obj) { 7 | return typeof obj; 8 | }; 9 | } else { 10 | _typeof = function _typeof(obj) { 11 | return obj && 12 | typeof Symbol === "function" && 13 | obj.constructor === Symbol && 14 | obj !== Symbol.prototype 15 | ? "symbol" 16 | : typeof obj; 17 | }; 18 | } 19 | return _typeof(obj); 20 | } 21 | 22 | !(function (global, factory) { 23 | (typeof exports === "undefined" ? "undefined" : _typeof(exports)) === 24 | "object" && typeof module !== "undefined" 25 | ? (module.exports = factory()) 26 | : typeof define === "function" && define.amd 27 | ? define(factory) 28 | : ((global = global || self), (global.cocoMessage = factory())); 29 | })(void 0, function () { 30 | "use strict"; 31 | 32 | if (typeof window === "undefined") { 33 | return; 34 | } 35 | 36 | var msgWrapper = c({ 37 | className: "coco-msg-stage", 38 | }); 39 | 40 | function c(args, children) { 41 | var el = document.createElement("div"); 42 | 43 | for (var key in args) { 44 | var element = args[key]; 45 | 46 | if (key == "className") { 47 | key = "class"; 48 | el.setAttribute(key, element); 49 | } else if (key[0] == "_") { 50 | el.addEventListener(key.slice(1), element); 51 | } 52 | } 53 | 54 | if (typeof children == "string") { 55 | el.innerHTML = children; 56 | } else if (_typeof(children) == "object" && children.tagName) { 57 | el.appendChild(children); 58 | } else if (children) { 59 | for (var i = 0; i < children.length; i++) { 60 | var child = children[i]; 61 | el.appendChild(child); 62 | } 63 | } 64 | 65 | return el; 66 | } 67 | 68 | function css(el, css) { 69 | for (var key in css) { 70 | el.style[key] = css[key]; 71 | } 72 | 73 | if (el.getAttribute("style") === "") { 74 | el.removeAttribute("style"); 75 | } 76 | } 77 | 78 | function addClass(el, s) { 79 | var c = el.className || ""; 80 | 81 | if (!hasClass(c, s)) { 82 | var arr = c.split(/\s+/); 83 | arr.push(s); 84 | el.className = arr.join(" "); 85 | } 86 | } 87 | 88 | function hasClass(c, s) { 89 | return c.indexOf(s) > -1 ? !0 : !1; 90 | } 91 | 92 | function removeClass(el, s) { 93 | var c = el.className || ""; 94 | 95 | if (hasClass(c, s)) { 96 | var arr = c.split(/\s+/); 97 | var i = arr.indexOf(s); 98 | arr.splice(i, 1); 99 | el.className = arr.join(" "); 100 | } 101 | 102 | if (el.className === "") { 103 | el.removeAttribute("class"); 104 | } 105 | } 106 | 107 | var initArgs = { 108 | msg: "", 109 | duration: 2000, 110 | showClose: false, 111 | }; 112 | 113 | function cocoMessage() { 114 | return initConfig(arguments, "info"); 115 | } 116 | 117 | var methods = { 118 | info: function info() { 119 | return initConfig(arguments, "info"); 120 | }, 121 | success: function success() { 122 | return initConfig(arguments, "success"); 123 | }, 124 | warning: function warning() { 125 | return initConfig(arguments, "warning"); 126 | }, 127 | error: function error() { 128 | return initConfig(arguments, "error"); 129 | }, 130 | loading: function loading() { 131 | return initConfig(arguments, "loading"); 132 | }, 133 | destroyAll: function destroyAll() { 134 | _destroyAll(); 135 | }, 136 | config: function config(obj) { 137 | for (var key in obj) { 138 | if (Object.hasOwnProperty.call(obj, key)) { 139 | if (obj[key] !== undefined) { 140 | initArgs[key] = obj[key]; 141 | } 142 | } 143 | } 144 | }, 145 | }; 146 | 147 | for (var it in methods) { 148 | cocoMessage[it] = methods[it]; 149 | } 150 | 151 | function initConfig(obj, type) { 152 | var args = {}; 153 | 154 | for (var key in initArgs) { 155 | args[key] = initArgs[key]; 156 | } 157 | 158 | for (var i = 0; i < obj.length; i++) { 159 | var _it = obj[i]; 160 | 161 | if (_it !== undefined) { 162 | if (typeof _it == "string" || _typeof(_it) == "object") { 163 | args.msg = _it; 164 | } else if (typeof _it == "boolean") { 165 | args.showClose = _it; 166 | } else if (typeof _it == "function") { 167 | args.onClose = _it; 168 | } else if (typeof _it == "number") { 169 | args.duration = _it; 170 | } 171 | } 172 | } 173 | 174 | args.type = type; 175 | return createMsgEl(args); 176 | } 177 | 178 | function createMsgEl(args) { 179 | var type = args.type, 180 | duration = args.duration, 181 | msg = args.msg, 182 | showClose = args.showClose, 183 | onClose = args.onClose; 184 | var closable = duration === 0; 185 | var iconObj = getIconObj(); 186 | 187 | if (type == "loading") { 188 | msg = msg === "" ? "正在加载" : msg; 189 | closable = showClose; 190 | duration = 0; 191 | } 192 | 193 | var el = c( 194 | { 195 | className: "coco-msg-wrapper", 196 | }, 197 | [ 198 | c( 199 | { 200 | className: "coco-msg coco-msg-fade-in ".concat(type), 201 | }, 202 | [ 203 | c( 204 | { 205 | className: "coco-msg-icon", 206 | }, 207 | iconObj[type] 208 | ), 209 | c( 210 | { 211 | className: "coco-msg-content", 212 | }, 213 | msg 214 | ), 215 | c( 216 | { 217 | className: "coco-msg-wait ".concat( 218 | closable ? "coco-msg-pointer" : "coco-msg-wait-hidden" 219 | ), 220 | _click: function _click() { 221 | closeMsg(el, onClose); 222 | }, 223 | }, 224 | getMsgRight(closable) || "" 225 | ), 226 | ] 227 | ), 228 | ] 229 | ); 230 | 231 | if (duration !== 0) { 232 | setTimeout(function () { 233 | closeMsg(el, onClose); 234 | }, duration); 235 | } 236 | 237 | if (!msgWrapper.children.length) { 238 | document.body.appendChild(msgWrapper); 239 | } 240 | 241 | msgWrapper.appendChild(el); 242 | css(el, { 243 | height: el.offsetHeight + "px", 244 | }); 245 | setTimeout(function () { 246 | removeClass(el.children[0], "coco-msg-fade-in"); 247 | }, 300); 248 | return function () { 249 | closeMsg(el, onClose); 250 | }; 251 | } 252 | 253 | function getMsgRight(showClose) { 254 | return showClose 255 | ? '' 256 | : ""; 257 | } 258 | 259 | function closeMsg(el, cb) { 260 | if (!el) return; 261 | css(el, { 262 | padding: 0, 263 | height: 0, 264 | }); 265 | addClass(el.children[0], "coco-msg-fade-out"); 266 | cb && cb(); 267 | setTimeout(function () { 268 | if (!el) return; 269 | var has = false; 270 | 271 | for (var i = 0; i < msgWrapper.children.length; i++) { 272 | if (msgWrapper.children[i] === el) { 273 | has = true; 274 | } 275 | } 276 | 277 | has && removeChild(el); 278 | el = null; 279 | 280 | if (!msgWrapper.children.length) { 281 | has && removeChild(msgWrapper); 282 | } 283 | }, 300); 284 | } 285 | 286 | function getIconObj() { 287 | return { 288 | info: '\n \n ', 289 | success: 290 | '\n \n ', 291 | warning: 292 | '\n \n ', 293 | error: 294 | '\n \n ', 295 | loading: 296 | '\n

\n \n

\n ', 297 | }; 298 | } 299 | 300 | function removeChild(el) { 301 | el && el.parentNode.removeChild(el); 302 | } 303 | 304 | function _destroyAll() { 305 | for (var i = 0; i < msgWrapper.children.length; i++) { 306 | var element = msgWrapper.children[i]; 307 | closeMsg(element); 308 | } 309 | } 310 | 311 | insertCssInHead(); 312 | 313 | function insertCssInHead() { 314 | var doc = document; 315 | 316 | if (doc && doc.head) { 317 | var head = doc.head; 318 | 319 | var _css = doc.createElement("style"); 320 | 321 | var cssStr = 322 | ".coco-msg-stage *{box-sizing:border-box}.coco-msg-stage{position:fixed;top:20px;left:50%;width:auto;transform:translate(-50%,0);z-index:3000;padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top)}.coco-msg-wrapper{position:relative;left:50%;transform:translate(-50%,0);transition:height .35s ease-out,padding .35s ease-out;padding:8px 0}.coco-msg{padding:8px 16px;border-radius:7px;position:relative;left:50%;transform:translate(-50%,0);display:inline-flex;align-items:center;box-shadow:0 4px 16px rgba(15,15,15,.15);color:rgba(44,44,44,.9);background-color:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dark .coco-msg{color:rgba(255,255,255,.9);background-color:rgba(36,36,36,.95);box-shadow:0 0 1px 0 rgba(55,55,55,.3)}.coco-msg-icon{position:relative;width:16px;height:16px;border-radius:100px;display:flex;justify-content:center;align-items:center}.coco-msg-icon svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px}.coco-msg-wait{width:20px;height:20px;position:relative;display:inline-flex;justify-content:center;align-items:center;margin-left:10px}.coco-msg-wait:active svg{transform:scale(.7)}.coco-msg-wait svg{transition:.12s ease-out;fill:currentColor}.coco-msg-close{width:14px;height:14px}.coco-msg-content{margin-left:10px;text-align:left;font-size:14px;font-weight:400;word-break:keep-all;line-height:1.57143;display:inline-block}.coco-msg.info .coco-msg-icon{background-color:#3491fa}.coco-msg.success .coco-msg-icon{background-color:#00b42a}.coco-msg.warning .coco-msg-icon{background-color:#f7ba1e}.coco-msg.error .coco-msg-icon{background-color:#f53f3f}.dark .coco-msg.info .coco-msg-icon{background-color:#1d4dd2}.dark .coco-msg.success .coco-msg-icon{background-color:#129a37}.dark .coco-msg.warning .coco-msg-icon{background-color:#cc961f}.dark .coco-msg.error .coco-msg-icon{background-color:#cb2e34}.dark .coco-msg .coco-msg-icon path{fill:rgba(36,36,36,.95)}.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:20px!important;width:20px!important;color:#3491fa;margin-top:-1px}.dark .coco-msg-circular{color:#1d4dd2}.coco-msg-path{stroke-dasharray:1,200;stroke-dashoffset:0;stroke:currentColor;-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-pointer{cursor:pointer}.coco-msg-wait-hidden{display:none}.coco-msg-fade-in{-webkit-animation:coco-msg-fade .22s ease-out both;animation:coco-msg-fade .22s ease-out both}.coco-msg-fade-out{animation:coco-msg-fade .22s linear reverse both}@-webkit-keyframes coco-msg-fade{0%{opacity:0;transform:translate(-50%,-80%)}to{opacity:1;transform:translate(-50%,0)}}@keyframes coco-msg-fade{0%{opacity:0;transform:translate(-50%,-80%)}to{opacity:1;transform:translate(-50%,0)}}"; 323 | _css.innerHTML = cssStr; 324 | head.appendChild(_css); 325 | } 326 | } 327 | 328 | return cocoMessage; 329 | }); 330 | -------------------------------------------------------------------------------- /coco-message.min.js: -------------------------------------------------------------------------------- 1 | "use strict";function _typeof(o){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}!function(o,t){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(o=o||self,o.cocoMessage=t())}(void 0,function(){function o(o,t){var e=document.createElement("div");for(var n in o){var i=o[n];"className"==n?(n="class",e.setAttribute(n,i)):"_"==n[0]&&e.addEventListener(n.slice(1),i)}if("string"==typeof t)e.innerHTML=t;else if("object"==_typeof(t)&&t.tagName)e.appendChild(t);else if(t)for(var s=0;s-1}function i(o,t){var e=o.className||"";if(n(e,t)){var i=e.split(/\s+/),s=i.indexOf(t);i.splice(s,1),o.className=i.join(" ")}""===o.className&&o.removeAttribute("class")}function s(){return r(arguments,"info")}function r(o,t){var e={};for(var n in h)e[n]=h[n];for(var i=0;i':""}function f(o,n){o&&(t(o,{padding:0,height:0}),e(o.children[0],"coco-msg-fade-out"),n&&n(),setTimeout(function(){if(o){for(var t=!1,e=0;e\n ',success:'\n \n ',warning:'\n \n ',error:'\n \n ',loading:'\n

\n \n

\n '}}function d(o){o&&o.parentNode.removeChild(o)}function g(){for(var o=0;o 2 | 3 | 4 | 5 | 6 | Document 7 | 89 | 90 | 91 |

92 | github 98 |

99 |

100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 |

108 | 109 | 110 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "coco-message", 3 | "version": "1.0.5", 4 | "description": "轻量的js信息提示插件", 5 | "main": "coco-message.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC" 11 | } 12 | --------------------------------------------------------------------------------