/* -----------------------------------------------
Message
----------------------------------------------- */
export const message = {
type: 'info',
duration: 2,
container: document.createElement('div'),
init: function () {
if (!this.container.classList.contains('is-mounted')) {
document.body.append(this.container);
this.container.classList.add('is-mounted');
this.container.classList.add('b-message-container');
}
},
getIcon: function (type: string) {
const iconInfo = (hexColor = '#016597') =>
``;
const iconWarning = (hexColor = '#fc751a') =>
``;
const iconCheck = (hexColor = '#56be43') =>
``;
switch (type) {
case 'info':
return iconInfo();
break;
case 'success':
return iconCheck();
break;
case 'error':
return iconWarning();
break;
case 'warning':
return iconWarning();
break;
default:
return iconInfo();
}
},
render: function (msg: HTMLElement, text: string) {
msg.classList.add('b-message');
msg.classList.add('is-visible');
msg.innerHTML = `${this.getIcon(this.type)} ${text}`;
this.container.appendChild(msg);
},
hideOnTimeout: function (msgElement: HTMLElement, duration?: number) {
setTimeout(() => {
msgElement.classList.remove('is-visible');
msgElement.classList.add('is-hidden');
setTimeout(() => msgElement.remove(), 400);
}, duration * 1000);
},
hideOnClick: function (msgElement: HTMLElement) {
msgElement.addEventListener('click', (e) => {
msgElement.classList.add('is-hidden');
setTimeout(() => {
msgElement.remove();
}, 400);
});
},
execute: function (text: string, duration: number = this.duration) {
this.init();
const msg = document.createElement('div');
this.render(msg, text);
this.hideOnTimeout(msg, duration);
this.hideOnClick(msg);
},
info: function (text: string, duration: number = this.duration) {
this.type = 'info';
this.execute(text, duration);
},
success: function (text: string, duration: number = this.duration) {
this.type = 'success';
this.execute(text, duration);
},
error: function (text: string, duration: number = this.duration) {
this.type = 'error';
this.execute(text, duration);
},
warning: function (text: string, duration: number = this.duration) {
this.type = 'warning';
this.execute(text, duration);
},
};