MessageBar, reference to and based on Customized Snackbars package @material-ui

Snackbar… split to another .js file.

スナックバーが…を独立した .js ファイルに分けてみる。

See: https://material-ui.com/demos/snackbars/

/**
 * 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);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

/**

* MessageBar

* reference to and based on Snackbar package @material-ui

* Version: 0.1.1

html:

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">

</svg>`;

} else if (variant === "warning") {

icon = `<svg class="MessageBarSvgIcon-root" focusable="false" viewBox="0 0 24 24">

</svg>`;

} else if (variant === "success") {

icon = `<svg class="MessageBarSvgIcon-root" focusable="false" viewBox="0 0 24 24">

</svg>`;

} else if (variant === "info") {

icon = `<svg class="MessageBarSvgIcon-root" focusable="false" viewBox="0 0 24 24">

</svg>`;

}

wrap.innerHTML += `

<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;">

${icon}

<span style="margin-left: 10px;">${message}</span>

</span>

</div>

</svg>

</span>

</button>

</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);

CSS:

.MessageBar-Paper-elevation {
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px 0px rgba(0, 0, 0, 0.14),0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.MessageBarIconButton-root {
    flex: 0 0 auto;
    overflow: visible;
    text-align: center;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.MessageBarIconButton-label {
    width: 100%;
    display: flex;
    align-items: inherit;
    justify-content: inherit;
}

.MessageBarButtonBase-root {
    color: inherit;
    border: 0;
    margin: 0 0 0 8px;
    cursor: pointer;
    display: inline-flex;
    outline: none;
    position: relative;
    align-items: center;
    border-radius: 50%;
    vertical-align: middle;
    justify-content: center;
    text-decoration: none;
    background-color: transparent;
    -moz-user-select: none;
    -webkit-appearance: none;
    padding: 8px;
}

.MessageBarButtonBase-root:hover {
    background-color: rgb(185, 185, 185, 0.5);
    transition: 200ms;
}

.MessageBarSvgIcon-root {
    fill: currentColor;
    width: 1em;
    height: 1em;
    display: inline-block;
    font-size: 24px;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    flex-shrink: 0;
    -moz-user-select: none;
}

.MessageBar-root {
    margin: 10px;
    z-index: 1400;
    display: flex;
    align-items: center;

    pointer-events: all;
}

.MessageBar-anchorOriginBottomLeft {
    left: 24px;
    right: auto;
    bottom: 0;
    justify-content: flex-start;
}

.MessageBarContent-root {
    min-width: 288px;
    max-width: 90%;
    border-radius: 4px;
    color: #fff;
    padding: 6px 24px;
    flex-wrap: wrap;
    align-items: center;
    background-color: rgb(49, 49, 49);
}

.MessageBar-root.success .MessageBarContent-root {
    background-color: #43a047 !important;
}
.MessageBar-root.info .MessageBarContent-root {
    background-color: #1976d2 !important;
}
.MessageBar-root.warning .MessageBarContent-root {
    background-color: #ffa000 !important;
}
.MessageBar-root.error .MessageBarContent-root {
    background-color: #d32f2f !important;
}

.MessageBarContent-message {
    float: left;
    padding: 8px 0;
}

.MessageBarContent-action {
    float: right;
    align-items: center;
    margin-left: auto;
    margin-right: -8px;
}

.MessageBarTypography-root {
    margin: 0;
    display: block;
}

.MessageBar-body {
    font-weight: 400;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    line-height: 1.46429em;
}

#MessageBar-flex {
    display: flex;
    flex-flow: column-reverse nowrap;
    height: 100%;

    position: absolute;
    width: 100%;
    z-index: 100000;
    pointer-events: none;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

.MessageBar-Paper-elevation {

box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px 0px rgba(0, 0, 0, 0.14),0px 1px 18px 0px rgba(0, 0, 0, 0.12);

}

.MessageBarIconButton-root {

flex: 0 0 auto;

overflow: visible;

text-align: center;

transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

}

.MessageBarIconButton-label {

width: 100%;

display: flex;

align-items: inherit;

justify-content: inherit;

}

.MessageBarButtonBase-root {

color: inherit;

border: 0;

margin: 0 0 0 8px;

cursor: pointer;

display: inline-flex;

outline: none;

position: relative;

align-items: center;

border-radius: 50%;

vertical-align: middle;

justify-content: center;

text-decoration: none;

background-color: transparent;

-moz-user-select: none;

-webkit-appearance: none;

padding: 8px;

}

.MessageBarButtonBase-root:hover {

background-color: rgb(185, 185, 185, 0.5);

transition: 200ms;

}

.MessageBarSvgIcon-root {

fill: currentColor;

width: 1em;

height: 1em;

display: inline-block;

font-size: 24px;

transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

flex-shrink: 0;

-moz-user-select: none;

}

.MessageBar-root {

margin: 10px;

z-index: 1400;

display: flex;

align-items: center;

pointer-events: all;

}

.MessageBar-anchorOriginBottomLeft {

left: 24px;

right: auto;

bottom: 0;

justify-content: flex-start;

}

.MessageBarContent-root {

min-width: 288px;

max-width: 90%;

border-radius: 4px;

color: #fff;

padding: 6px 24px;

flex-wrap: wrap;

align-items: center;

background-color: rgb(49, 49, 49);

}

.MessageBar-root.success .MessageBarContent-root {

background-color: #43a047 !important;

}

.MessageBar-root.info .MessageBarContent-root {

background-color: #1976d2 !important;

}

.MessageBar-root.warning .MessageBarContent-root {

background-color: #ffa000 !important;

}

.MessageBar-root.error .MessageBarContent-root {

background-color: #d32f2f !important;

}

.MessageBarContent-message {

float: left;

padding: 8px 0;

}

.MessageBarContent-action {

float: right;

align-items: center;

margin-left: auto;

margin-right: -8px;

}

.MessageBarTypography-root {

margin: 0;

display: block;

}

.MessageBar-body {

font-weight: 400;

font-family: "Roboto", "Helvetica", "Arial", sans-serif;

line-height: 1.46429em;

}

#MessageBar-flex {

display: flex;

flex-flow: column-reverse nowrap;

height: 100%;

position: absolute;

width: 100%;

z-index: 100000;

pointer-events: none;

}

html:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="message-bar.css" media="all" rel="stylesheet" />
</head>
<body>
    <div id="MessageBar-flex"></div>
    <script src="message-bar.js"></script>

    <script>
    // test
    document.addEventListener("DOMContentLoaded", function () {
        // console.log(MessageBar);
        MessageBar.open("black", "black");
        MessageBar.open("error", "error");
        MessageBar.open("info", "info");
        MessageBar.open("warning", "warning");
        MessageBar.open("success", "success");
        MessageBar.open("black", "black");
        MessageBar.open("error", "error");
        MessageBar.open("info long long long long long long long long long long long long long long long", "info");
        MessageBar.open("warning", "warning");
        MessageBar.open("success", "success");
    }, false);
    </script>
</body>
</html>

<head>

<title>Document</title>

</head>

<body>

// test

document.addEventListener("DOMContentLoaded", function () {

// console.log(MessageBar);

MessageBar.open("black", "black");

MessageBar.open("error", "error");

MessageBar.open("info", "info");

MessageBar.open("warning", "warning");

MessageBar.open("success", "success");

MessageBar.open("black", "black");

MessageBar.open("error", "error");

MessageBar.open("info long long long long long long long long long long long long long long long", "info");

MessageBar.open("warning", "warning");

MessageBar.open("success", "success");

}, false);

</script>

</body>

</html>

コメントを残す