/**
* MessageBar
*
* reference to and based on Snackbar package @material-ui
*
* Version: 0.1.1
*/
/*
html:
<link href="message-bar.css" rel="stylesheet" />
<div id="MessageBar-flex"></div>
<script src="message-bar.js"></script>
ts:
// Ambient Declarations
declare class MessageBar {
static open(message: string, variant: string): void;
}
// Put message
MessageBar.open("Success!", "success");
*/
const MessageBar: any = {};
(function (MessageBar: any) {
const onLoaded = () => {
MessageBar.count = 0;
// document.body.innerHTML += `<div id="MessageBar-flex"></div>`;
};
const open = (message: string, variant = "info") => {
const wrap = document.getElementById("MessageBar-flex");
if (!wrap) {
return;
}
MessageBar.count++;
const id = `MessageBar-root-${MessageBar.count}`;
let icon = "";
if (variant === "error") {
icon = `<svg class="MessageBarSvgIcon-root" focusable="false" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
</svg>`;
} else if (variant === "warning") {
icon = `<svg class="MessageBarSvgIcon-root" focusable="false" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path>
</svg>`;
} else if (variant === "success") {
icon = `<svg class="MessageBarSvgIcon-root" focusable="false" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
</svg>`;
} else if (variant === "info") {
icon = `<svg class="MessageBarSvgIcon-root" focusable="false" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>
</svg>`;
}
wrap.innerHTML += `
<div class="MessageBar-root MessageBar-anchorOriginBottomLeft ${variant}" id="${id}">
<div class="MessageBarTypography-root MessageBar-body MessageBar-Paper-elevation MessageBarContent-root"
style="transform: translate(0px, 0px); transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;">
<div class="MessageBarContent-message">
<span style="display: flex; align-items: center;">
${icon}
<span style="margin-left: 10px;">${message}</span>
</span>
</div>
<div class="MessageBarContent-action">
<button class="MessageBarButtonBase-root MessageBarIconButton-root" type="button" onClick="MessageBar.close('${id}')">
<span class="MessageBarIconButton-label">
<svg class="MessageBarSvgIcon-root" focusable="false" viewBox="0 0 24 24">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
<path fill="none" d="M0 0h24v24H0z"></path>
</svg>
</span>
</button>
</div>
</div>
</div>`;
};
const close = (id: string) => {
if (!id) {
// clear all message-bar if id is not set.
// get elements and convert to array
const es = Array.prototype.slice.call(document.getElementsByClassName("MessageBar-root"));
for (let i = 0; i < es.length; i++) {
// console.log(es[i]);
es[i].outerHTML = "";
}
return;
}
const e = document.getElementById(id);
if (!e) {
return;
}
// e.remove(); // doesn't work in IE11
e.outerHTML = "";
};
// exports
MessageBar.open = open;
MessageBar.close = close;
// initialize
document.addEventListener("DOMContentLoaded", onLoaded, false);
})(MessageBar);
