Skip to content

Commit

Permalink
add a model component for handling selected product notification (#13)
Browse files Browse the repository at this point in the history
thescientist13 authored Mar 13, 2024
1 parent 9551355 commit d34d6b0
Showing 3 changed files with 88 additions and 2 deletions.
8 changes: 7 additions & 1 deletion src/components/card.js
Original file line number Diff line number Diff line change
@@ -57,7 +57,13 @@ export class Card extends LitElement {
}

selectItem() {
alert(`selected item is => ${this.title}!`);
const itemSelectedEvent = new CustomEvent("update-modal", {
detail: {
content: `You selected the "${this.title}"`,
},
});

window.dispatchEvent(itemSelectedEvent);
}

render() {
77 changes: 77 additions & 0 deletions src/components/modal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { LitElement, html, css } from 'lit';

export class Modal extends LitElement {
static properties = {
content: '',
};

static styles = css`
dialog {
border: 1px solid #818181;
text-align: center;
width: 40%;
border-radius: 10px;
padding: 2rem 1rem;
min-height: 200px;
background-color: #fff;
overflow-x: hidden;
}
h3 {
font-size: 1.85rem;
}
button {
background: var(--color-accent);
color: var(--color-white);
padding: 1rem 2rem;
border: 0;
font-size: 1rem;
border-radius: 5px;
cursor: pointer;
}
@media(max-width: 768px) {
dialog {
width: 80%;
}
}
`;

updateModal(content) {
console.log(`selected item is => ${content}`);
const dialog = this.shadowRoot.querySelector('dialog');

this.content = content;

dialog.showModal();
this.requestUpdate();
}

connectedCallback() {
super.connectedCallback();

window.addEventListener('update-modal', (event) => {
this.updateModal(event.detail.content);
})
}

firstUpdated() {
const button = this.shadowRoot.querySelector('button')
const dialog = this.shadowRoot.querySelector('dialog');

button.addEventListener("click", () => dialog.close());
}

render() {
const { content } = this;

return html`
<dialog>
<h3 id="content">${content}</h3>
<button autofocus>Close</button>
</dialog>
`;
}
}

customElements.define('app-modal', Modal);
5 changes: 4 additions & 1 deletion src/templates/app.html
Original file line number Diff line number Diff line change
@@ -11,6 +11,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
<link rel="stylesheet" href="../styles/main.css">
<script type="module" src="../components/card.js"></script>
<script type="module" src="../components/modal.js"></script>
</head>

<body>
@@ -37,6 +38,8 @@ <h1>Demos</h1>
<a href="https://www.greenwoodjs.io/">Greenwood</a>
</footer>

<app-modal></app-modal>

</body>

</html>
</html>

0 comments on commit d34d6b0

Please sign in to comment.