flashy-js/dist/flashy.min.js

Flashy is a lightweight, 0 dependency library that creates beatiful flash messages, using vanilla web components.

var Flashy=function(){'use strict';function a(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function b(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}function c(a,c,d){return c&&b(a.prototype,c),d&&b(a,d),a}function d(a,b){if("function"!=typeof b&&null!==b)throw new TypeError("Super expression must either be null or a function");a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,writable:!0,configurable:!0}}),b&&f(a,b)}function e(a){return e=Object.setPrototypeOf?Object.getPrototypeOf:function(a){return a.__proto__||Object.getPrototypeOf(a)},e(a)}function f(a,b){return f=Object.setPrototypeOf||function(a,b){return a.__proto__=b,a},f(a,b)}function g(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(a){return!1}}function h(){return h=g()?Reflect.construct:function(b,c,d){var e=[null];e.push.apply(e,c);var a=Function.bind.apply(b,e),g=new a;return d&&f(g,d.prototype),g},h.apply(null,arguments)}function i(a){return-1!==Function.toString.call(a).indexOf("[native code]")}function j(a){var b="function"==typeof Map?new Map:void 0;return j=function(a){function c(){return h(a,arguments,e(this).constructor)}if(null===a||!i(a))return a;if("function"!=typeof a)throw new TypeError("Super expression must either be null or a function");if("undefined"!=typeof b){if(b.has(a))return b.get(a);b.set(a,c)}return c.prototype=Object.create(a.prototype,{constructor:{value:c,enumerable:!1,writable:!0,configurable:!0}}),f(c,a)},j(a)}function k(a){if(void 0===a)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return a}function l(a,b){return b&&("object"==typeof b||"function"==typeof b)?b:k(a)}function m(a,b){return n(a)||o(a,b)||p()}function n(a){if(Array.isArray(a))return a}function o(a,b){var c=[],d=!0,e=!1,f=void 0;try{for(var g,h=a[Symbol.iterator]();!(d=(g=h.next()).done)&&(c.push(g.value),!(b&&c.length===b));d=!0);}catch(a){e=!0,f=a}finally{try{d||null==h["return"]||h["return"]()}finally{if(e)throw f}}return c}function p(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function q(a,b,c){c.classList.add(b),c.addEventListener("animationend",function(){c.classList.remove(b)})}window.onload=function(){console.log("flashy");var a=document.createElement("style");a.textContent="\n        flash-messages {\n            position: fixed;\n            display: flex;\n            flex-wrap: wrap;\n            left: 10px;\n            bottom: 0px;\n            width: 17%;\n            font-family: sans-serif;\n            min-width: 300px;\n            min-height: 100px;\n        }\n    ",document.querySelector("body").appendChild(a)};var r=/*#__PURE__*/function(b){function f(){var b;a(this,f),b=l(this,e(f).call(this)),setTimeout(function(){b.maxMessages=b.dataset.maxMessages||10},0);var c=document.createElement("style");return c.textContent="\n        .flash-message {\n            width: 100%;\n            height: max-content;\n            margin-bottom: 5%;\n            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n            border-radius: 10px;\n            background-color: #ecf0f1;\n            font-family: 'Roboto', sans-serif;\n            display: flex;\n            align-items: center;\n            position: relative;\n            -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */\n            -moz-box-sizing: border-box;    /* Firefox, other Gecko */\n            box-sizing: border-box;         /* Opera/IE 8+ */\n            padding-right: 10px;\n            \n        }\n       \n        .flash-message:hover {\n            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);\n        }\n       \n        .flash-message.error {\n            background-color: #ff6060;\n        }\n \n        .flash-message.error > .left-part {\n            background-color: #ff3535;\n        }\n       \n        .flash-message.info {\n            background-color: #59c9f9;\n        }\n \n        .flash-message.info > .left-part {\n            background-color: #32c0ff;\n        }\n       \n        .flash-message.success {\n            background-color: #39c16c;\n        }\n \n        .flash-message.success > .left-part {\n            background-color: #33ad61;\n        }\n       \n        .flash-message.warning {\n            background-color: #ffc744;\n        }\n \n        .flash-message.warning > .left-part {\n            background-color: #ffba1c;\n        }\n       \n        .left-part {\n            height: 100%;\n            width: 25%;\n            display: flex;\n            flex-shrink: 1;\n            align-items: center;\n            justify-content: center;\n            color: white;\n            font-size: 3em;\n            border-radius: 10px 0 0 10px;\n        }\n \n        .right-part {\n            display: inline-block;\n            flex-shrink: 100;\n            padding-left: 10px;\n            padding-top: 10px;\n            padding-bottom: 10px;\n        }\n       \n        .flash-title {\n            display: block;\n            font-size: 1.2em;\n            font-weight: 500;\n            font-family: 'Roboto', sans-serif;\n            color: white;\n        }\n       \n        .flash-msg {\n            margin-top: 3px;\n            display: block;\n            color: white;\n            font-family: 'Roboto', sans-serif;\n            font-weight: 300;\n            font-size: .8em;\n        }\n       \n        .close-flash {\n            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n            position: absolute;\n            right: -8px;\n            top: -8px;\n            width: 22px;\n            height: 22px;\n            background-color: #f1f1f1;\n            border-radius: 11px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: #7f8c8d;\n            font-size: .8em;\n        }\n       \n        .close-flash:hover {\n            cursor: pointer;\n            color: #e74c3c;\n        }\n\n        .flashy-button {\n            color: #1663fc;\n            font-size: .8em;\n            font-align: center;\n            padding-left: 5px;\n            padding-right: 5px;\n        }\n\n        .flashy-button:nth-child(0) {\n            padding-left: 0;\n        }\n\n        .flashy-button:hover {\n            cursor: pointer;\n            text-decoration: underline;\n        }\n\n        .flashy-seperator {\n\n        }\n       \n        .movein {\n            animation-name: movein;\n            animation-duration: .2s;\n        }\n       \n        .movedown {\n            animation-name: movedown;\n            animation-duration: .2s;\n        }\n       \n        .moveup {\n            animation-name: moveup;\n            animation-duration: .2s;\n        }\n       \n        .fade {\n            animation-name: fade;\n            animation-duration: .2s;\n            opacity: 0;\n        }\n       \n        @keyframes moveup {\n            from {\n                transform: translateY(100%);\n            }\n            to {\n                transform: translateY(0%);\n            }\n        }\n       \n        @keyframes movedown {\n            from {\n                transform: translateY(-100%);\n            }\n            to {\n                transform: translateY(0);\n            }\n        }\n       \n        @keyframes movein {\n            from {\n                transform: translateX(-100%);\n            }\n            to {\n                transform: translateX(0);\n            }\n        }\n       \n        @keyframes fade {\n            from {\n                opacity: 1;\n            }\n            to {\n                opacity: 0;\n            }\n        }\n        ",b.shadowRootObj=b.attachShadow({mode:"open"}),b.shadowRootObj.appendChild(c),b}return d(f,b),c(f,[{key:"remove_child",value:function(a){var b=this;a.classList.add("fade"),setTimeout(function(){a.nextElementSibling&&q(200,"moveup",a.nextElementSibling),a.nextElementSibling.nextElementSibling&&q(200,"moveup",a.nextElementSibling.nextElementSibling),a.remove(),b.set_bottom()},200)}},{key:"create_child",value:function(a){var b=this,c={error:"\uD83D\uDE28",warning:"\uD83D\uDE36",success:"\uD83D\uDE07",info:"\uD83D\uDE1C"}[a.type];a.styles&&a.styles.icon&&"unicode"===a.styles.icon.type&&(c=a.styles.icon.val);var d=document.createElement("div");d.classList.add("flash-message"),d.classList.add(a.type),a.styles&&a.styles.flashColor&&(d.style.backgroundColor=a.styles.flashColor);var e=document.createElement("div");e.classList.add("left-part"),e.innerHTML=c,a.styles&&a.styles.iconBackgroundColor&&(e.style.backgroundColor=a.styles.iconBackgroundColor),d.appendChild(e);var f=document.createElement("div");f.classList.add("right-part"),d.appendChild(f);var g=document.createElement("span");g.innerHTML=a.title,g.classList.add("flash-title"),a.styles&&(a.styles.titleTextColor&&(g.style.color=a.styles.titleTextColor),a.styles.titleTextFont&&(g.style.fontFamily=a.styles.titleTextFont)),f.appendChild(g);var h=document.createElement("span");if(h.innerHTML=a.message,h.classList.add("flash-msg"),a.styles&&(a.styles.msgTextColor&&(h.style.color=a.styles.msgTextColor),a.styles.msgTextFont&&(h.style.fontFamily=a.styles.msgTextFont)),f.appendChild(h),a.buttons){var i=!0,j=!1,k=void 0;try{for(var l,n=function(){var c=m(l.value,2),d=c[0],e=c[1],g=document.createElement("span");if(g.classList.add("flashy-button"),g.innerHTML=e.text,g.addEventListener("click",function(){e.action&&e.action(),e.closesFlash&&b.remove_child(g.parentElement.parentElement)}),a.styles&&(a.styles.linkTextColor&&(g.style.color=a.styles.linkTextColor),a.styles.linkTextFont&&(g.style.fontFamily=a.styles.linkTextFont)),f.appendChild(g),d!==a.buttons.length-1){var h=document.createElement("span");h.classList.add("flashy-seperator"),h.innerHTML="\xB7",f.appendChild(h)}},o=a.buttons.entries()[Symbol.iterator]();!(i=(l=o.next()).done);i=!0)n()}catch(a){j=!0,k=a}finally{try{i||null==o["return"]||o["return"]()}finally{if(j)throw k}}}if(a.globalClose){var p=document.createElement("div");p.innerHTML="X",p.classList.add("close-flash"),p.addEventListener("click",function(a){var c=a.srcElement.parentElement||a.target.parentElement;b.remove_child(c)}),d.appendChild(p)}return d}},{key:"set_bottom",value:function(){this.style.bottom="".concat(this.shadowRootObj.children[0].clientHeight-this.clientHeight+20,"px"),this.shadowRootObj.children[0].children[0].style.height="".concat(this.shadowRootObj.children[0].clientHeight,"px")}},{key:"add_child",value:function(a){var b=this,c=this.create_child(a),d=this.shadowRootObj.children.length;d-1>=this.maxMessages&&this.shadowRootObj.lastChild.previousSibling.remove(),this.shadowRootObj.insertBefore(c,this.shadowRootObj.firstChild),this.set_bottom(c),q(200,"movein",c),c.nextElementSibling&&q(200,"movedown",c.nextElementSibling),0<a.expiry&&setTimeout(function(){return b.remove_child(c)},a.expiry)}}]),f}(j(HTMLElement));return window.customElements.define("flash-messages",r),Flashy=function(a,b){document.querySelector(a).add_child(b)},Flashy}();