remove tests and begin toast builder function

Supports:
- Title
- Multiple lines
- Custom bg color
- Selectable text toggling
- Custom onclick functions
toast
Kit Kasune 3 years ago
parent 02d8bd7b77
commit 383e67f10a
  1. 2
      index.html
  2. 28
      scripts/toast/createtoast.js
  3. 20
      styles/toast.css

@ -37,7 +37,7 @@
</div> </div>
<div id="ctx"></div> <div id="ctx"></div>
<div id="toast-container"><div class="toast"><h2>Test</h2><p>This is a test toast toast toast</p></div></div> <div id="toast-container"></div>
<script src="./scripts/renderer.js"></script> <script src="./scripts/renderer.js"></script>

@ -0,0 +1,28 @@
module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5, onclick = () => {}, selectable = false) => {
if (!name || !text) {return;}
if (!Array.isArray(text)) {text = [text];}
let toast = document.createElement('div');
toast.className = 'toast';
toast.style.backgroundColor = `${bg}c2`;
toast.style.borderColor = `${bg}c2`;
toast.onmouseenter = () => {toast.style.backgroundColor = bg;};
toast.onmouseleave = () => {toast.style.backgroundColor = `${bg}c2`;};
toast.onclick = () => {
if (!persistOnClick) {}
onclick();
};
document.getElementById('toast-container').appendChild(toast);
let h2 = document.createElement('h2');
h2.innerHTML = name;
if (!selectable) {h2.className = 'nosel';}
toast.appendChild(h2);
for (let i = 0; i < text.length; i++) {
if (text[i].length) {
let p = document.createElement('p');
p.innerHTML = text[i];
if (!selectable) {p.className = 'nosel';}
toast.appendChild(p);
}
else {toast.appendChild(document.createElement('br'));}
}
};

@ -11,11 +11,11 @@
#toast-container { #toast-container {
position: fixed; position: fixed;
top: 10px; top: 34px;
right: 10px; right: 10px;
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
align-items: stretch; align-items: flex-end;
align-content: stretch; align-content: stretch;
row-gap: 4px; row-gap: 4px;
justify-content: flex-end; justify-content: flex-end;
@ -24,11 +24,19 @@
.toast { .toast {
border-radius: 5px; border-radius: 5px;
background-color: #a172a6; background-color: #a172a6c2;
color: white; color: white;
animation: enter-toast .25s ease-out 1; animation: enter-toast .25s ease-out 1;
animation-fill-mode: both; animation-fill-mode: both;
animation-delay: 2s; padding: 4px 6px;
border-color: #a172a6c2;
border-style: solid;
border-width: 1px;
transition: border-color .15s ease-in, background-color .15s ease-in;
max-width: 350px;
}
.toast:hover {
border-color: white;
} }
.toast p { .toast p {
@ -37,7 +45,7 @@
} }
.toast h2 { .toast h2 {
font-size: 25px; font-size: 20px;
font-family: 'Nunito', sans-serif; font-family: 'Nunito', sans-serif;
margin: 6px 0 8px 8px; margin: 6px 0 2px 8px;
} }
Loading…
Cancel
Save