dl-notificator
Version:
Componente contruido en js para mostrarle informacion al usuario mediante notificaciones temporales
1 lines • 8.29 kB
JavaScript
(()=>{"use strict";function t(n){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(n)}function n(t,n,o){return n in t?Object.defineProperty(t,n,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[n]=o,t}function o(t,n){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(t);n&&(e=e.filter((function(n){return Object.getOwnPropertyDescriptor(t,n).enumerable}))),o.push.apply(o,e)}return o}function e(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?o(Object(i),!0).forEach((function(o){n(t,o,i[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):o(Object(i)).forEach((function(n){Object.defineProperty(t,n,Object.getOwnPropertyDescriptor(i,n))}))}return t}var i=function(t,n){var o=t.split("."),i=e({},n);return o.forEach((function(t){i=(i||{})[t]})),i},r=function(t){var n=t.length;return function o(){for(var e=arguments.length,i=new Array(e),r=0;r<e;r++)i[r]=arguments[r];return i.length<n?o.bind.apply(o,[null].concat(i)):t.call.apply(t,[null].concat(i))}},s=r(i),c=function(n,o,e){var i="string"==typeof n?s(n):n,r=o||s;return"object"===t(e)&&"function"!=typeof r?i(e)===r:"object"===t(e)&&"function"==typeof r?i(e)===r(e):e===n},a=function(t,n){return n.every(t)},u=function(t,n){return n.findIndex(t)},d=(r(a),r(c),function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];return Object.assign.apply(Object,[{}].concat(n))}),l=function(t,n,o){var i=e({},o);return i[t]="function"==typeof n?n(o):n,i},f=r(i),m=r(l),h=function(t,n){return n.splice(t,1),n},g=(r((function(t,n,o){var e=f(n,o);return m(t,e)(o)})),r((function(t,n,o,e){return("function"==typeof t?t(e):t)?n(e):"function"==typeof o?o(e):o})),r(c),r(a),r((function(t,n){return n.filter(t)})),r((function(t,n){return n.find(t)})),r(u),r((function(t,n){return n.forEach(t)})),r(i),r((function(t){return t})),r((function(t,n){return n.map(t)})),r((function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],o=arguments.length>2?arguments[2]:void 0;return o.reduce(t,n)})),r(h),r((function(t,n,o){var e=u((function(o){return o[t]===n}),o);return h(e,o)})),r((function(t,n){return Number(n.toFixed(t))})),r(l));r((function(t,n){return n.some(t)}));const p=class{constructor(t={}){const{duration:n,errorOptions:o,infoOptions:e,left:i,successOptions:r,top:s,warningOptions:c,zIndex:a}=t,{backgroundColor:u,color:d,duration:l,closeBtn:f}=o||{},{backgroundColor:m,color:h,duration:g,closeBtn:p}=e||{},{backgroundColor:y,color:b,duration:v,closeBtn:O}=r||{},{backgroundColor:E,color:w,duration:k,closeBtn:C}=c||{};this.uuid=Math.random().toString(32).slice(2),this.top=s;const B=document.createElement("div");B.classList.add("notification-container-"+this.uuid);const[D]=document.getElementsByTagName("body");D.appendChild(B);const $=i?"left:0":"right:0";var j=document.createElement("style");j.innerHTML=`\n .notification-container-${this.uuid} {\n position: fixed;\n\t\t\t\t${$};\n\t\t\t\ttop: ${this.top||10}px;\n width: fit-content;\n z-index: ${a||999}\n }\n .notification-${this.uuid} {\n animation-name: entering-${this.uuid};\n border-radius: 5px;\n color: white;\n margin: 0.5rem 1rem;\n max-width: 15rem;\n min-width: 12rem;\n\t\t\t\tpadding: 1rem;\n\t\t\t\tposition: relative;\n\t\t\t}\n entering-${this.uuid} {\n 0% {\n transform: translateX(${i?-150:150}%);\n }\n 50% {\n transform: translateX(${i?15:-15}%);\n }\n 100% {\n transform: translateX(${i?1:-1}%);\n }\n\t\t\t}\n\t\t\t@keyframes active-${this.uuid} {\n\t\t\t\tfrom {\n\t\t\t\t\ttransform: translateX(${i?1:-1}%);\n\t\t\t\t}\n\t\t\t\tto {\n\t\t\t\t\ttransform: translateX(${i?1:-1}%);\n\t\t\t\t}\n\t\t\t}\n\t\t\t@keyframes outgoing-${this.uuid} {\n\t\t\t\t0% {\n\t\t\t\t\ttransform: translateX(${i?1:-1}%);\n\t\t\t\t}\n\t\t\t\t50% {\n\t\t\t\t\ttransform: translateX(${i?15:-15}%);\n\t\t\t\t}\n\t\t\t\t100% {\n\t\t\t\t\ttransform: translateX(${i?-150:150}%);\n\t\t\t\t}\n\t\t\t}\n\t\t\t.close-btn-${this.uuid} {\n\t\t\t\tbackground-color: transparent;\n\t\t\t\tborder: none;\n\t\t\t\tcursor: pointer;\n\t\t\t\tpadding: 0.25rem;\n\t\t\t\tposition: absolute;\n\t\t\t\tright: .1rem;\n\t\t\t\ttop: 0;\n\t\t\t\ttransition-duration: 150ms;\n\t\t\t}\n\t\t\t.close-btn-${this.uuid}:focus {\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t\t.close-btn-${this.uuid}:hover {\n\t\t\t\ttransform: scale(1.5);\n\t\t\t}\n `,document.head.appendChild(j),this.container=B,this.enteringDuration=250,this.outgoingDuration=350,this.duration=n||3400,this.errorOpts={backgroundColor:u||"#EC0B43",color:d||"white",closeBtn:!!f,duration:l||this.duration},this.infoOpts={backgroundColor:m||"#06f",color:h||"white",closeBtn:!!p,duration:g||this.duration},this.successOpts={backgroundColor:y||"#2EDC76",color:b||"white",closeBtn:!!O,duration:v||this.duration},this.warningOpts={backgroundColor:E||"#FFBC42",color:w||"white",closeBtn:!!C,duration:k||this.duration}}add(t,n){const{firstChild:o}=this.container,e=this.createNotificationElement(t,n);this.container.insertBefore(e,o)}createNotificationElement(t,n){const{backgroundColor:o,closeBtn:e,color:i,message:r,duration:s}=t,c=s-(this.enteringDuration+this.outgoingDuration),a=document.createElement("div");if(a.addEventListener("animationend",(t=>{const o=t.detail||t.animationName;o==="entering-"+this.uuid?(a.style.animationName="active-"+this.uuid,a.style.animationDuration=c+"ms"):o==="active-"+this.uuid?(a.style.animationName="outgoing-"+this.uuid,a.style.animationDuration=this.outgoingDuration+"ms"):o==="outgoing-"+this.uuid&&this.removeNotification.call(this,a,n)})),a.style.animationDuration=this.enteringDuration+"ms",a.style.backgroundColor=o,a.style.color=i,a.innerText=r,a.classList.add("notification-"+this.uuid),e){const t=this.createCloseButton.call(this,a,i);a.appendChild(t)}return a}createCloseButton(t,n){const o=document.createElement("button");return o.addEventListener("click",this.removeActiveAnimation.bind(this,t)),o.innerHTML="✕",o.style.color=n,o.classList.add("close-btn-"+this.uuid),o}error(t={},n){const o="string"==typeof t?g("message",t,this.errorOpts):d(this.errorOpts,t);this.add(o,n)}info(t={},n){const o="string"==typeof t?g("message",t,this.infoOpts):d(this.infoOpts,t);this.add(o,n)}removeActiveAnimation(t){const n=new CustomEvent("animationend",{detail:"active-"+this.uuid});t.dispatchEvent(n)}removeNotification(t,n){this.container.removeChild(t),n&&"function"==typeof n&&n()}success(t={},n){const o="string"==typeof t?g("message",t,this.successOpts):d(this.successOpts,t);this.add(o,n)}warning(t={},n){const o="string"==typeof t?g("message",t,this.warningOpts):d(this.warningOpts,t);this.add(o,n)}},y=new p,b=new p({left:!0}),v=new p({duration:1500,infoOptions:{backgroundColor:"#D7D9D7",closeBtn:!0,color:"#FF6542",duration:7500}});window.addEventListener("load",(()=>{const t=document.getElementById("success-right-default"),n=document.getElementById("success-right-time-color"),o=document.getElementById("info-right-color"),e=document.getElementById("error-left-time-color"),i=document.getElementById("warning-left-time-color"),r=document.getElementById("info-config");t.addEventListener("click",(()=>{y.success({message:"Notificación de éxito con tiempo y color por defecto (4 segundos)",closeBtn:!0},(()=>{console.log("fin de: successRightDefault")}))})),n.addEventListener("click",(()=>{y.success({message:"Notificación de éxito con tiempo de 2 segundos y color personalizado",duration:2e3,backgroundColor:"#5FAD56"})})),o.addEventListener("click",(()=>{y.info({message:"Notificación de información con tiempo por defecto y otro color",color:"#F5EE9E"})})),e.addEventListener("click",(()=>{b.error({backgroundColor:"#D00000",message:"Notificación de error con tiempo de 2.6 seg y otro color",duration:2600})})),i.addEventListener("click",(()=>{b.warning("Notificación de advertencia")})),r.addEventListener("click",(()=>{v.info("Notificación con colores personalizados")}))}))})();