Added side modal

Author: djthorpe

src/component/button/CloseButtonElement.js

@@ -60,7 +60,7 @@ export class CloseButtonElement extends LitElement {
     render() {
         return html`
             <button role="button" ?disabled="${this.disabled}" @click=${this.onClick}>
-                <wc-icon name="x-circle"></wc-icon>
+                <wc-icon name="x-lg"></wc-icon>
             </button>
         `;
     }

src/component/modal/SideModalElement.js

@@ -0,0 +1,92 @@
+
+import { LitElement, html, css } from 'lit';
+
+/**
+ * A modal pop-up element which is hidden by default
+ */
+export class SideModalElement extends LitElement {
+    constructor() {
+        super();
+        // Default properties
+        this.visible = false;
+    }
+    static get properties() {
+        return {
+            /**
+             * Whether the modal is visible
+             * @type {Boolean}
+             * @memberof ModalElement
+             */
+            visible: { type: Boolean },
+        };
+    }
+    static get styles() {
+        return css`
+        .canvas {
+            position: fixed; 
+            left: 0; 
+            top: 0;
+            bottom: 0;
+            right: 0;
+            overflow-x: hidden;
+            overflow-y: hidden;
+            background-color: var(--modal-canvas-color);   
+        }
+        .modal {
+            position: fixed; 
+            top: 0;
+            bottom: 0;
+            left: 0;
+            background-color: var(--modal-background-color);
+        }
+        .animation {
+            transition: 
+                opacity var(--modal-fade-delay) ease,
+                visibility var(--modal-fade-delay) ease,
+                display var(--modal-fade-delay) ease,
+                transform var(--modal-position-delay) ease;
+        }
+        .hidden-canvas {
+            opacity: 0;
+            visibility: hidden;
+        }
+        .hidden-modal {
+            visibility: hidden;
+            opacity: 0;
+            transform: translateX(-12rem);
+        }
+        .visible-modal {
+            visibility: visible;
+            opacity: 1;
+            transform: translateX(0);
+        }
+        .visible-canvas {
+            visibility: visible;
+            opacity: var(--modal-canvas-opacity);
+        }
+        .wrapper {
+            position: relative;
+            width: auto;
+            height: auto;             
+        }`;
+    }
+    render() {
+        return html`
+            <div class="canvas animation ${this.visible ? 'visible-canvas' : 'hidden-canvas'}"></div>
+            <div class="modal animation ${this.visible ? 'visible-modal' : 'hidden-modal'}">
+                <div class="wrapper"><slot></slot></div>
+            </div>
+        `;
+    }
+    toggle() {
+        this.visible = !this.visible;
+    }
+    show() {
+        this.visible = true;
+    }
+    hide() {
+        this.visible = false;
+    }
+}
+
+customElements.define('wc-sidemodal', SideModalElement);

src/core/event.js

@@ -1,9 +1,10 @@
 // Define events used by web components
 const EVENT_CLICK = 'js-click';
+const EVENT_HOVER = 'js-hover';
 const EVENT_START = 'js-start';
 const EVENT_DONE = 'js-done';
 const EVENT_ERROR = 'js-error';
 
 export default {
-  EVENT_CLICK, EVENT_START, EVENT_DONE, EVENT_ERROR,
+  EVENT_CLICK, EVENT_HOVER, EVENT_START, EVENT_DONE, EVENT_ERROR,
 };

src/css/core.css

@@ -112,6 +112,19 @@
     --icon-size-large: 2em;
     --icon-size-xlarge: 3em;
 
+    /* modal */
+    --modal-margin-x: 20%;
+    --modal-padding: calc(var(--spacer) * 1.5);
+    --modal-background-color: var(--body-background-color);
+    --modal-border: calc(var(--spacer) * 0.3);
+    --modal-border-radius: var(--border-radius);
+    --modal-fade-delay: 300ms;
+    --modal-position-delay: 300ms;
+    --modal-fadein-delay: var(-modal-fade-delay);
+    --modal-fadeout-delay: var(-modal-fade-delay);
+    --modal-canvas-color: var(--black-color);
+    --modal-canvas-opacity: 0.7;
+
     /* navbar */
     --navbar-color: var(--light-color);
     --navbar-background-color: var(--primary-color);
@@ -168,14 +181,4 @@
     --form-label-line-height: 1;
     --form-label-border: none;
 
-    /* modal */
-    --modal-margin-x: 20%;
-    --modal-padding: calc(var(--spacer) * 1.5);
-    --modal-canvas-color: var(--black-color);
-    --modal-background-color: var(--body-background-color);
-    --modal-border: calc(var(--spacer) * 0.2);
-    --modal-border-radius: var(--border-radius);
-    --modal-canvas-opacity: 0.7;
-    --modal-fadein-delay: 300ms;
-    --modal-fadeout-delay: 300ms;
 }

src/index.html

@@ -89,8 +89,14 @@ <h1>Modal</h1>
         <wc-button name="modal">Pop-up</wc-button>
         <wc-modal>
             <wc-close name="modal-close"></wc-close>
-            <p>Here is some content within a container</p>
+            <p>Here is some content within a modal</p>
         </wc-modal>
+        <wc-sidemodal>
+            <wc-close name="modal-close"></wc-close>
+            <div class=""container">
+                <p>Here is some content within a sidemodal</p>
+            </div>
+        </wc-sidemodal>
     </div>
 </body>
 

src/index.js

@@ -19,6 +19,7 @@ import './component/nav/NavItemElement';
 
 // Modals
 import './component/modal/ModalElement';
+import './component/modal/SideModalElement';
 
 // CSS
 import './css/core.css';

src/test.js

@@ -48,11 +48,25 @@ window.addEventListener('load', () => {
             document.querySelector('wc-modal').hide();
         }
     });
+    document.querySelector('wc-sidemodal').addEventListener(Event.EVENT_CLICK, (evt) => {
+        if (evt.detail == "modal-close") {
+            document.querySelector('wc-sidemodal').hide();
+        }
+    });
 
     // NavItem
     document.querySelectorAll('wc-nav-item').forEach((navitem) => {
         navitem.addEventListener(Event.EVENT_CLICK, (evt) => {
-            console.log("NavItem Click", evt.detail);
+            switch (evt.detail) {
+                case "menu":
+                    document.querySelector('wc-sidemodal').toggle();
+                    break;
+                case 'help':
+                    document.querySelector('wc-sidemodal').toggle();
+                    break;
+                default:
+                    console.log("NavItem Click", evt.detail);
+            }
         });
     });
 });