any-message
Version:
A beautiful global message prompt.
2 lines (1 loc) • 11.2 kB
JavaScript
var n=function(){return n=Object.assign||function(n){for(var e,t=1,a=arguments.length;t<a;t++)for(var o in e=arguments[t])Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},n.apply(this,arguments)},e=null,t=function(n){var e;null===(e=null==n?void 0:n.parentNode)||void 0===e||e.removeChild(n)},a=function(){return document.querySelector(".any_message")},o=function(){var n,e,t=a();return t||(t=document.createElement("div")).setAttribute("class","any_message"),(e=(n=t).querySelector("style")||document.createElement("style")).type="text/css",e.innerHTML="\n .any_message {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n color: rgba(0, 0, 0, 0.85);\n font-size: 14px;\n font-variant: tabular-nums;\n line-height: 1.5715;\n list-style: none;\n font-feature-settings: 'tnum';\n position: fixed;\n top: 8px;\n left: 0;\n z-index: 1010;\n width: 100%;\n pointer-events: none;\n }\n \n .any_message_box {\n text-align: center;\n padding: 8px 0;\n }\n \n .any_message_content {\n display: inline-flex;\n font-size: 14px;\n padding: 10px 16px;\n background-color: #fff;\n box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;\n border-radius: 3px;\n text-align: center;\n transition: all .2s ease;\n position: relative;\n top: -20px;\n opacity: 0;\n pointer-events:auto;\n }\n \n .any_message_content .any_message_icon {\n font-style:normal;\n display:flex;\n align-items: center;\n }\n \n .any_message_content .any_message_text{\n text-indent:10px;\n }\n \n .any_message_content .any_message_icon.success{\n color: #06a561;\n }\n \n .any_message_content .any_message_icon.warn{\n color: #f99600;\n }\n \n .any_message_content .any_message_icon.info{\n color: #1e5eff;\n }\n \n .any_message_content .any_message_icon.error{\n color: #f0142f;\n }\n \n .any_message_in {\n opacity: 1;\n top: 0;\n }\n \n .any_message_out {\n opacity: 0;\n top: -20px;\n }\n \n .any_message_loading {\n position: relative;\n display: inline-block;\n width: 16px;\n height: 16px;\n }\n \n .any_message_loading span{\n position: absolute;\n top: 0;\n left: 0;\n margin: 10%;\n border: 3px solid;\n border-color: #1e5eff transparent transparent;\n border-radius: 50%;\n -webkit-border-radius: 50%;\n -ms-border-radius: 50%;\n -o-border-radius: 50%;\n -moz-border-radius: 50%;\n width: 80%;\n height: 80%;\n box-sizing: border-box;\n animation: any_message_loader 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n -webkit-animation: any_message_loader 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n -ms-animation: any_message_loader 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n -o-animation: any_message_loader 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n -moz-animation: any_message_loader 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n }\n \n .any_message_loading span:nth-child(1) {\n animation-delay: -0.3s;\n -webkit-animation-delay: -0.3s;\n -ms-animation-delay: -0.3s;\n -o-animation-delay: -0.3s;\n -moz-animation-delay: -0.3s;\n }\n \n .any_message_loading span:nth-child(2) {\n animation-delay: -0.2s;\n -webkit-animation-delay: -0.2s;\n -ms-animation-delay: -0.2s;\n -o-animation-delay: -0.2s;\n -moz-animation-delay: -0.2s;\n }\n \n .any_message_loading span:nth-child(3) {\n animation-delay: -0.1s;\n -webkit-animation-delay: -0.1s;\n -ms-animation-delay: -0.1s;\n -o-animation-delay: -0.1s;\n -moz-animation-delay: -0.1s;\n }\n \n .any_message_loading span:nth-child(4) {\n animation-delay: 0s;\n -webkit-animation-delay: 0s;\n -ms-animation-delay: 0s;\n -o-animation-delay: 0s;\n -moz-animation-delay: 0s;\n }\n \n @keyframes any_message_loader {\n 0% {\n transform: rotate(0);\n -webkit-transform: rotate(0);\n -ms-transform: rotate(0);\n -moz-transform: rotate(0);\n -o-transform: rotate(0);\n }\n \n 100% {\n transform: rotate(360deg);\n -webkit-transform: rotate(360deg);\n -ms-transform: rotate(360deg);\n -moz-transform: rotate(360deg);\n -o-transform: rotate(360deg);\n }\n }\n ",n.appendChild(e),t},i=function(n,e){return'<i class="any_message_icon '.concat(n,'">\n ').concat(e||("success"===n?'<svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg>':"error"===n?'<svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg>':"warn"===n?'<svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg>':"loading"===n?"<span class='any_message_loading'><span></span><span></span><span></span><span></span></span>":'<svg viewBox="64 64 896 896" focusable="false" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg>'),"\n </i>")},s=function(n,e){var t=n.getAttribute("class");null==t||t.trim(),t&&r(t,e)||n.setAttribute("class",t?t+" "+e:e)},r=function(n,e){return-1!==n.indexOf(e)},c=function(e,t,r){return void 0===t&&(t=3),new Promise((function(c){var m,y=r||{},p=y.className,g=void 0===p?"":p,_=y.icon,v=y.onClick,b=y.onClose,h=y.key,x=void 0===h?"":h,w=y.maxCount,z=y.style,k=o(),C=d(x),S=void 0===C;C||((C=document.createElement("div")).setAttribute("class","any_message_box"),x&&C.setAttribute("data-key",x)),S?((m=document.createElement("div")).setAttribute("class","any_message_content ".concat(g)),l(m,z),C.appendChild(m)):m=C.querySelector(".any_message_content"),m.innerHTML=function(n,e){return"\n ".concat(e.show&&i(e.type,null==e?void 0:e.custom),'\n <span class="any_message_text">').concat(n,"</span>\n ")}(e,n({show:!0},_)),a()||document.body.appendChild(k),u(w),S?(k.appendChild(C),setTimeout((function(){s(m,"any_message_in"),C&&f(C,m,t,(function(){c(m),null==b||b(m)}),v)}),100)):C&&f(C,m,t,(function(){c(m),null==b||b(m)}),v)}))},l=function(n,e){if(e)for(var t in e)n.style[t]=e[t]},u=function(n){void 0===n&&(n=0);var e=m();n>0&&e.length>=n&&t(e[0])},d=function(n){var e;if(n)for(var t=m(),a=0;a<t.length;a++){var o=t[a];if(o.getAttribute("data-key")===n){e=o;break}}return e},m=function(){return document.querySelectorAll(".any_message .any_message_box")||[]},f=function(n,e,a,o,i){y(n);var r=void 0,c=function(){a>0&&(r=setTimeout((function(){s(e,"any_message_out"),r=setTimeout((function(){t(n),_(),null==o||o()}),200),n.setAttribute("data-timer",String(r))}),1e3*a),n.setAttribute("data-timer",String(r)))};p(e,"mousemove",(function(){r&&clearTimeout(r)})),p(e,"mouseout",(function(){r&&c()})),i&&p(e,"click",i),c()},y=function(n){var e=n.getAttribute("data-timer");e&&clearTimeout(Number(e))},p=function(n,e,t,a){"function"==typeof n.addEventListener?(n.removeEventListener(e,t,a||!1),n.addEventListener(e,t,a||!1)):"function"==typeof(null==n?void 0:n.attachEvent)&&(null==n||n.detachEvent("on"+e,t),null==n||n.attachEvent("on"+e,t))},g=function(t,a,o){return"object"==typeof t&&t instanceof HTMLElement||"string"==typeof t?{content:t||(null==e?void 0:e.content)||"",duration:"number"==typeof(null==e?void 0:e.duration)&&"number"!=typeof a?e.duration:a,params:n(n({},e),o)}:{content:(null==t?void 0:t.content)||(null==e?void 0:e.content)||"",duration:"number"==typeof(null==t?void 0:t.duration)&&"number"!=typeof a?t.duration:"number"==typeof(null==e?void 0:e.duration)&&"number"!=typeof a?e.duration:a,params:n(n(n({},e),t),o)}},_=function(){0===document.querySelectorAll(".any_message .any_message_box").length&&t(document.querySelector(".any_message style"))},v={success:function(e,t,a){var o=g(e,t,n(n({},a),{icon:n(n({},null==a?void 0:a.icon),{type:"success"})}));return c(o.content,o.duration,o.params)},destroy:function(n){if(n){var e=d(n);if(e){y(e);var a=e.querySelector(".any_message_content");a&&s(a,"any_message_out"),setTimeout((function(){e&&t(e)}),200)}}else{for(var o=m(),i=0;i<o.length;i++)y(o[i]);t(document.querySelector(".any_message"))}},warn:function(e,t,a){var o=g(e,t,n(n({},a),{icon:n(n({},null==a?void 0:a.icon),{type:"warn"})}));return c(o.content,o.duration,o.params)},error:function(e,t,a){var o=g(e,t,n(n({},a),{icon:n(n({},null==a?void 0:a.icon),{type:"error"})}));return c(o.content,o.duration,o.params)},info:function(e,t,a){var o=g(e,t,n(n({},a),{icon:n(n({},null==a?void 0:a.icon),{type:"info"})}));return c(o.content,o.duration,o.params)},loading:function(e,t,a){var o=g(e,t,n(n({},a),{icon:n(n({},null==a?void 0:a.icon),{type:"loading"})}));return c(o.content,o.duration,o.params)},config:function(n){e=n}};export{v as default};