Snackbar… split to another .js file.
スナックバーが…を独立した .js ファイルに分けてみる。
See: https://material-ui.com/demos/snackbars/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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: <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); |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<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> |