Skip to content

Commit

Permalink
snackbar
Browse files Browse the repository at this point in the history
  • Loading branch information
serikshaikamalov committed Jul 18, 2024
1 parent a3369e6 commit 2e32b29
Show file tree
Hide file tree
Showing 3 changed files with 128 additions and 0 deletions.
79 changes: 79 additions & 0 deletions components/snack/snack-bar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import { html, css, LitElement } from "https://cdn.jsdelivr.net/npm/lit@2/+esm";

/**
* Features:
* - Closing the snack
* - Fixed long text issue
*/
export function snack(message, { duration = 3000 } = {}) {
let snack = document.createElement('snack-bar')
snack.message = message
snack.duration = duration
document.body.appendChild(snack)
snack.show()
}

class SnackBar extends LitElement {
static styles = css`
#snackbar {
min-width: 250px;
background-color: var(--md-sys-color-inverse-surface, #333);
color: var(--md-sys-color-inverse-on-surface, white);
text-align: center;
border-radius: 4px;
padding: 12px 20px;
position: fixed;
z-index: 1000;
left: 50%;
bottom: 30px;
transform: translate(-50%, -50%);
}
.close-button{
cursor: pointer;
position: absolute;
right: 10px;
font-size: 0.8rem;
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
`

static properties = {
message: { type: String },
showing: { type: Boolean },
duration: { type: Number },
}
constructor() {
super()
this.message = ""
this.showing = false
this.duration = 3000
}

render() {
if (!this.showing) return ''
let animStyle = `animation: fadein 0.5s, fadeout 0.5s ${this.duration}ms forwards;`
return html`
<div id="snackbar" class="show" style="${animStyle}">
<span class="close-button" @click=${this.close}>x</span>
${this.message}
</div>
`
}
show() {
this.showing = true
setTimeout(() => { this.close() }, this.duration + 500)
}
close() {
this.showing = false
}
}

customElements.define('snack-bar', SnackBar)
15 changes: 15 additions & 0 deletions examples/snack/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Index</title>
<script src="./snack-example.js" type="module"></script>
</head>

<body>
<snack-example></snack-example>
</body>

</html>
34 changes: 34 additions & 0 deletions examples/snack/snack-example.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import {
html,
LitElement,
css
} from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";
import { snack } from '../../components/snack/snack-bar.js';

export class SnackExample extends LitElement {
static styles = [
css`
:host {
display: block;
}
`
];

onClick() {
const randomTexts = [
`{"Message":"The request is invalid.","ModelState":{"request.AdditionalWarrantyInMonths":["Not valid for a 18 year care pack. If ordering One Zone controller is requested OneZoneControllerColour must be set, if boiler is System or Regular ThreePortValveKitSizeInMMs."]}}`,
`Hello world`
]

const randomIndex = Math.round(Math.random() * 10) > 5 ? 0 : 1;
snack(randomTexts[randomIndex], { duration: 100 * 1000 })
}

render() {
return html`<div>
<h1>Testing snack</h1>
<button @click=${this.onClick}>Alert</button>
</div>`;
}
}
customElements.define('snack-example', SnackExample);

0 comments on commit 2e32b29

Please sign in to comment.