diff --git a/src/components/card.js b/src/components/card.js
index 9ca6710..7cadbe6 100644
--- a/src/components/card.js
+++ b/src/components/card.js
@@ -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() {
diff --git a/src/components/modal.js b/src/components/modal.js
new file mode 100644
index 0000000..d30d74d
--- /dev/null
+++ b/src/components/modal.js
@@ -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);
\ No newline at end of file
diff --git a/src/templates/app.html b/src/templates/app.html
index e0b495f..a55a03e 100644
--- a/src/templates/app.html
+++ b/src/templates/app.html
@@ -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>
\ No newline at end of file