😊 Added a dummy menu 🍜

2019-06-02 19:43:53 +00:00 · 2019-06-02 19:43:53 +00:00 · 9e4ad56295
parent 059eb60a9f
commit 9e4ad56295
5 changed files with 154 additions and 53 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -32,6 +32,39 @@
                "tslib": "^1.9.3"
            }
        },
+        "@material/button": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@material/button/-/button-2.3.0.tgz",
+            "integrity": "sha512-xFyZjm0pmisfSU6OHO3Wk2zZX51N9D0DohmaPoXnZt2unfD8bCwRmlmD7TTUQCLnuBoIaqrYShpcRTGp4K5dMw==",
+            "requires": {
+                "@material/elevation": "^1.1.0",
+                "@material/feature-targeting": "^0.44.1",
+                "@material/ripple": "^2.3.0",
+                "@material/rtl": "^0.42.0",
+                "@material/shape": "^1.1.1",
+                "@material/theme": "^1.1.0",
+                "@material/typography": "^2.3.0"
+            }
+        },
+        "@material/dialog": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@material/dialog/-/dialog-2.3.0.tgz",
+            "integrity": "sha512-T0xEKUW4uY5ZK7S92bdCVjFo9naasTRFNTXccIk+lBkbUlTsCOJMtix+dSJcj8ba8NOZjjq7phfAQqnNKUOhvg==",
+            "requires": {
+                "@material/animation": "^1.0.0",
+                "@material/base": "^1.0.0",
+                "@material/dom": "^1.1.0",
+                "@material/elevation": "^1.1.0",
+                "@material/feature-targeting": "^0.44.1",
+                "@material/ripple": "^2.3.0",
+                "@material/rtl": "^0.42.0",
+                "@material/shape": "^1.1.1",
+                "@material/theme": "^1.1.0",
+                "@material/typography": "^2.3.0",
+                "focus-trap": "^5.0.0",
+                "tslib": "^1.9.3"
+            }
+        },
        "@material/dom": {
            "version": "1.1.0",
            "resolved": "https://registry.npmjs.org/@material/dom/-/dom-1.1.0.tgz",
@ -89,6 +122,35 @@
                "tslib": "^1.9.3"
            }
        },
+        "@material/menu": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@material/menu/-/menu-2.3.0.tgz",
+            "integrity": "sha512-XPI6w4x5c9ACwKBdujcTskBlisWlEgrb09Sa+s0vjhqBJVZVAUJT1j0OpG8tArNUqQiFssXBa/JuJIe6sMAK1A==",
+            "requires": {
+                "@material/base": "^1.0.0",
+                "@material/feature-targeting": "^0.44.1",
+                "@material/list": "^2.3.0",
+                "@material/menu-surface": "^2.3.0",
+                "@material/ripple": "^2.3.0",
+                "@material/rtl": "^0.42.0",
+                "tslib": "^1.9.3"
+            }
+        },
+        "@material/menu-surface": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@material/menu-surface/-/menu-surface-2.3.0.tgz",
+            "integrity": "sha512-jJ1MyeJnEJUO0Z7kNxvqN0xruWbTT2XKHCiApQcJHHkeibWfbWJdhXcx5aO4FMf/TVcy3ADSxDTdvc6AYrBX0g==",
+            "requires": {
+                "@material/animation": "^1.0.0",
+                "@material/base": "^1.0.0",
+                "@material/elevation": "^1.1.0",
+                "@material/feature-targeting": "^0.44.1",
+                "@material/rtl": "^0.42.0",
+                "@material/shape": "^1.1.1",
+                "@material/theme": "^1.1.0",
+                "tslib": "^1.9.3"
+            }
+        },
        "@material/ripple": {
            "version": "2.3.0",
            "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-2.3.0.tgz",
--- a/package.json
+++ b/package.json
@ -48,8 +48,12 @@
    "dependencies": {
        "@eix/input": "git+https://github.com/eix-js/input.git",
        "@eix/utils": "git+https://github.com/eix-js/utils.git",
+        "@material/button": "^2.3.0",
+        "@material/dialog": "^2.3.0",
        "@material/drawer": "^2.3.0",
        "@material/list": "^2.3.0",
+        "@material/menu": "^2.3.0",
+        "@material/theme": "^1.1.0",
        "file-saver": "^2.0.2",
        "haunted": "^4.3.0",
        "lit-html": "^1.0.0",
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@ -1,7 +1,18 @@
@import "./toastr.scss";
@import "./modal.scss";
+
+$mdc-theme-primary: black;
+$mdc-theme-secondary: #feeae6;
+$mdc-theme-on-primary: white;
+$mdc-theme-surface: black;
+$mdc-theme-on-secondary: #442b2d;
+
@import "@material/drawer/mdc-drawer.scss";
-@import "@material/list/mdc-list.scss";
+@import "@material/list/mdc-list";
+@import "@material/dialog/mdc-dialog";
+@import "@material/button/mdc-button";
+@import "@material/menu-surface/mdc-menu-surface";
+@import "@material/menu/mdc-menu";

 html, body {
    padding: 0;
--- a/src/ts/common/modals/modal.ts
+++ b/src/ts/common/modals/modal.ts
@ -1,7 +1,7 @@
 import { render, html } from "lit-html"
 import { confirmModalOptions } from "./interfaces";
 import { fromEvent } from "rxjs";
-import MicroModal from "micromodal"
+import { MDCDialog } from '@material/dialog';

 let lastId = 0

@ -14,60 +14,65 @@ export const modal = (options: Partial<confirmModalOptions>) => new Promise((res
    }

    const parent = document.getElementsByClassName("ModalContainer")[0]
-    const finalOptions: confirmModalOptions = { ...defaultOptions, ...options }
+    const { title, content, yes, no }: confirmModalOptions = { ...defaultOptions, ...options }
    const id = lastId++

    if (!parent)
        rej(false)

    const template = html`
-    <div class="modal micromodal-slide" id="modal-${id}" aria-hidden="true">
-        <div class="modal__overlay" tabindex="-1" data-micromodal-close>
-            <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
-                <header class="modal__header">
-                    <h2 class="modal__title" id="modal-${id}-title">
-                        ${finalOptions.title}
-                    </h2>
-                    <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
-                </header>
-                <main class="modal__content" id="modal-${id}-content">
-                    ${finalOptions.content}
-                </main>
-                <footer class="modal__footer">
-                    <button class="modal__btn" id="yes-${id}">${finalOptions.yes}</button>
-                    <button class="modal__btn modal__btn-primary" id="no-${id}" aria-label="Close this dialog window">
-                        ${finalOptions.no}
+    <div class="mdc-dialog"
+     id="modal-${id}"
+     role="alertdialog"
+     aria-modal="true"
+     aria-labelledby="${title}"
+     aria-describedby="my-dialog-content">
+        <div class="mdc-dialog__container">
+            <div class="mdc-dialog__surface">
+                <h2 class="mdc-dialog__title" id="${title}">
+                    ${title}
+                </h2>
+                <div class="mdc-dialog__content" id="my-dialog-content">
+                    ${content}
+                </div>
+                <footer class="mdc-dialog__actions">
+                    <button type="button" class="mdc-button mdc-dialog__button" id="no-${id}">
+                        <span class="mdc-button__label">${no}</span>
+                    </button>
+                    <button type="button" class="mdc-button mdc-dialog__button" id="yes-${id}">
+                        <span class="mdc-button__label">${yes}</span>
                    </button>
                </footer>
            </div>
        </div>
-    </div>
-    </div>
+        <div class="mdc-dialog__scrim"></div>
+        </div>
    `

    render(template, parent)

-    const yes = document.getElementById(`yes-${id}`)
-    const no = document.getElementById(`no-${id}`)
+    const dialog = new MDCDialog(document.querySelector(`#modal-${id}`))
+    dialog.open()
+
+    const _yes = document.getElementById(`yes-${id}`)
+    const _no = document.getElementById(`no-${id}`)

    const clear = () => {
        // render(html``,parent)
-        MicroModal.close()
+        dialog.close()
        subscriptions.forEach(val => val.unsubscribe())
    }

    const subscriptions = [
-        fromEvent(yes, "click").subscribe(val => {
+        fromEvent(_yes, "click").subscribe(val => {
            clear()
            res(true)
        }),
-        fromEvent(no, "click").subscribe(val => {
+        fromEvent(_no, "click").subscribe(val => {
            clear()
            res(false)
        })
    ]
-
-    MicroModal.show(`modal-${id}`)
 })


--- a/src/ts/main.ts
+++ b/src/ts/main.ts
@ -5,17 +5,18 @@ import { Component } from "./common/component";
 import { FunctionStore } from "./common/activation/activationStore";
 import { ComponentManager } from "./common/componentManager";
 import { map } from "rxjs/operators";
+import { MDCMenu } from '@material/menu';

 const screen = new Screen()

 const manager = new ComponentManager()
-manager.components.push(new Component("and",[200,100],[100,100]))
-manager.components.push(new Component("not",[200,500],[100,100]))
-manager.components.push(new Component("true",[200,500],[100,100]))
-manager.components.push(new Component("false",[200,500],[100,100]))
+manager.components.push(new Component("and", [200, 100], [100, 100]))
+manager.components.push(new Component("not", [200, 500], [100, 100]))
+manager.components.push(new Component("true", [200, 500], [100, 100]))
+manager.components.push(new Component("false", [200, 500], [100, 100]))
 manager.update()

-const handleEvent = <T>(e:T,func:(e:T) => any) => {
+const handleEvent = <T>(e: T, func: (e: T) => any) => {
    if (manager.barAlpha.value == "0")
        func(e)
    else if (manager.barAlpha.value == "1"
@ -25,23 +26,23 @@ const handleEvent = <T>(e:T,func:(e:T) => any) => {
 }

 render(html`
-    <div @mousemove=${(e:MouseEvent) => handleEvent(e,(e:MouseEvent) => {
-            manager.handleMouseMove(e)
-            screen.updateMouse(e)
-        })}
-        @mousedown=${(e:MouseEvent) => handleEvent(e,(e:MouseEvent) =>
-            manager.handleMouseDown(e)
-        )}
-        @mouseup=${(e:MouseEvent) => handleEvent(e,(e:MouseEvent) =>
-            manager.handleMouseUp(e)
-        )}
-        @wheel=${(e:MouseEvent) => handleEvent(e,(e:WheelEvent) =>
-            screen.handleScroll(e)
-        )}>
+    <div @mousemove=${(e: MouseEvent) => handleEvent(e, (e: MouseEvent) => {
+    manager.handleMouseMove(e)
+    screen.updateMouse(e)
+})}
+        @mousedown=${(e: MouseEvent) => handleEvent(e, (e: MouseEvent) =>
+    manager.handleMouseDown(e)
+)}
+        @mouseup=${(e: MouseEvent) => handleEvent(e, (e: MouseEvent) =>
+    manager.handleMouseUp(e)
+)}
+        @wheel=${(e: MouseEvent) => handleEvent(e, (e: WheelEvent) =>
+    screen.handleScroll(e)
+)}>

        <div id=${subscribe(manager.barAlpha.pipe(map(val =>
-            (val == "1") ? "shown" : ""
-        )))}
+    (val == "1") ? "shown" : ""
+)))}
        class=createBar>
            <div class="topContainer">
                <div>
@ -51,10 +52,10 @@ render(html`
                </div>
            </div>
        </div>
-        <svg height=${ subscribe(screen.height) }
-            width=${ subscribe(screen.width) }
+        <svg height=${ subscribe(screen.height)}
+            width=${ subscribe(screen.width)}
            viewBox=${subscribe(screen.viewBox)}>
-            ${ subscribe(manager.svgs) }
+            ${ subscribe(manager.svgs)}
        </svg>
    </div>
    <div class="ModalContainer"></div>
@ -65,9 +66,12 @@ render(html`
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
            <span class="mdc-list-item__text">Something</span>
        </a>
-        <a class="mdc-list-item" href="#">
+        <a class="mdc-list-item" href="#" id="openSimulation" @click=${() => {
+        menu.open = true
+        // menu.setAbsolutePosition(screen.mousePosition[0], screen.mousePosition[1])
+    }}>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
-            <span class="mdc-list-item__text">something else</span>
+            <span class="mdc-list-item__text">Open simulation</span>
        </a>
        <a class="mdc-list-item" href="#">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
@ -76,6 +80,21 @@ render(html`
        </nav>
    </div>
    </aside>
+
+    <div class="mdc-menu mdc-menu-surface mdc-theme--primary-bg mdc-theme--on-primary">
+        <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
+            <li class="mdc-list-item" role="menuitem">
+            <span class="mdc-list-item__text">A Menu Item</span>
+            </li>
+            <li class="mdc-list-item" role="menuitem">
+            <span class="mdc-list-item__text">Another Menu Item</span>
+            </li>
+        </ul>
+    </div>
 `, document.body)

+const menu = new MDCMenu(document.querySelector('.mdc-menu'));
+menu.hoistMenuToBody()
+menu.setAnchorElement(document.querySelector(`#openSimulation`))
+
 manager.update()