Refactor to use lit (#9)

#5
ukwa · May 3, 2022 · 5b307bc · 5b307bc
1 parent a017c15
commit 5b307bc
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 89 deletions.
diff --git a/src/app-bar.ts b/src/app-bar.ts
@@ -0,0 +1,122 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
+import { serialize } from '@shoelace-style/shoelace/dist/utilities/form.js';
+
+@customElement('app-bar')
+export class AppBar extends LitElement {
+  static styles = css`
+    :host {
+      height: 100vh;
+      width: 100vw;
+    }
+
+    header {
+      display: flex;
+      align-items: center;
+      background-color: #fefefe;
+      border-bottom: 1px solid #dfdfdf;
+    }
+
+    .icon-button-group {
+      padding: 0 5px;
+    }
+
+    .address-form {
+      flex: 1;
+      padding: 3px 5px;
+    }
+
+    sl-icon-button {
+      font-size: 1.2rem;
+    }
+  `;
+
+  @query('.address-form')
+  formElem?: HTMLFormElement;
+
+  render() {
+    return html`
+      <header>
+        <div class="icon-button-group">
+          <sl-icon-button
+            name="chevron-left"
+            @click=${this.goBack}
+          ></sl-icon-button>
+          <sl-icon-button
+            name="chevron-right"
+            @click=${this.goForward}
+          ></sl-icon-button>
+          <sl-icon-button name="house" @click=${this.goHome}></sl-icon-button>
+        </div>
+        <form @submit=${this.onSubmit} class="address-form">
+          <sl-input name="address" placeholder="https://" filled>
+            <!-- <sl-icon-button
+            name="arrow-clockwise"
+            slot="prefix"
+            style="--sl-input-spacing-medium: var(--sl-spacing-x-small)"
+          ></sl-icon-button> -->
+            <sl-icon-button
+              name="arrow-right"
+              slot="suffix"
+              style="--sl-input-spacing-medium: var(--sl-spacing-x-small)"
+              @click=${this.goToAddress}
+            ></sl-icon-button>
+            <!-- <sl-icon-button
+            name="x-lg"
+            slot="prefix"
+            style="--sl-input-spacing-medium: var(--sl-spacing-x-small)"
+          ></sl-icon-button> -->
+          </sl-input>
+        </form>
+        <div>
+          <sl-icon-button name="zoom-in" @click=${this.zoomIn}></sl-icon-button>
+          <sl-icon-button
+            name="zoom-out"
+            @click=${this.zoomOut}
+          ></sl-icon-button>
+          <sl-icon-button
+            name="printer"
+            @click=${this.printPage}
+          ></sl-icon-button>
+        </div>
+      </header>
+    `;
+  }
+
+  private onSubmit(e: Event) {
+    e.preventDefault();
+    this.goToAddress();
+  }
+
+  private goToAddress() {
+    console.log(
+      'TODO goToAddress:',
+      new FormData(this.formElem).get('address'),
+      serialize(this.formElem)
+    );
+  }
+
+  private goBack() {
+    console.log('TODO goBack');
+  }
+
+  private goForward() {
+    console.log('TODO goForward');
+  }
+
+  private goHome() {
+    console.log('TODO goHome');
+  }
+
+  private zoomIn() {
+    console.log('TODO zoomIn');
+  }
+
+  private zoomOut() {
+    console.log('TODO zoomOut');
+  }
+
+  private printPage() {
+    console.log('TODO printPage');
+  }
+}
diff --git a/src/index.css b/src/index.css
@@ -1,38 +1,14 @@
 * {
   box-sizing: border-box;
 }
+
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
     Arial, sans-serif;
   margin: 0;
 }
 
-#app {
-  height: 100vh;
-  width: 100vw;
-}
-
-#app-bar {
-  display: flex;
-  align-items: center;
-  background-color: #fefefe;
-  border-bottom: 1px solid #dfdfdf;
-}
-
-#app-main {
+#webview {
   background: #eee;
-  height: calc(100vh - 47px);
-}
-
-.address-input-wrapper {
-  flex: 1;
-  padding: 3px 5px;
-}
-
-.icon-button-group {
-  padding: 0 5px;
-}
-
-sl-icon-button {
-  font-size: 1.2rem;
+  height: calc(100vh - 47px); /* app height - app bar height */
 }
diff --git a/src/index.html b/src/index.html
@@ -14,54 +14,9 @@
     <title>NPLD Player</title>
   </head>
   <body>
-    <div id="app">
-      <header id="app-bar">
-        <div class="icon-button-group">
-          <sl-icon-button
-            class="back-button"
-            name="chevron-left"
-          ></sl-icon-button>
-          <sl-icon-button
-            class="forward-button"
-            name="chevron-right"
-          ></sl-icon-button>
-          <sl-icon-button class="home-button" name="house"></sl-icon-button>
-        </div>
-        <div class="address-input-wrapper">
-          <sl-input class="address-input" filled placeholder="https://">
-            <!-- <sl-icon-button
-              name="arrow-clockwise"
-              slot="prefix"
-              style="--sl-input-spacing-medium: var(--sl-spacing-x-small)"
-            ></sl-icon-button> -->
-            <sl-icon-button
-              class="go-button"
-              name="arrow-right"
-              slot="suffix"
-              style="--sl-input-spacing-medium: var(--sl-spacing-x-small)"
-            ></sl-icon-button>
-            <!-- <sl-icon-button
-              name="x-lg"
-              slot="prefix"
-              style="--sl-input-spacing-medium: var(--sl-spacing-x-small)"
-            ></sl-icon-button> -->
-          </sl-input>
-        </div>
-        <div class="icon-button-group">
-          <sl-icon-button
-            class="zoom-in-button"
-            name="zoom-in"
-          ></sl-icon-button>
-          <sl-icon-button
-            class="zoom-out-button"
-            name="zoom-out"
-          ></sl-icon-button>
-          <sl-icon-button class="print-button" name="printer"></sl-icon-button>
-        </div>
-      </header>
-      <main id="app-main">
-        <!-- TODO Webview goes here -->
-      </main>
-    </div>
+    <app-bar></app-bar>
+    <main id="webview">
+      <!-- TODO Webview goes here -->
+    </main>
   </body>
 </html>
diff --git a/src/renderer.ts b/src/renderer.ts
@@ -9,18 +9,7 @@ import '@shoelace-style/shoelace/dist/themes/light.css';
 import '@shoelace-style/shoelace/dist/shoelace.js';
 import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
 import './index.css';
+import './app-bar';
 
 // Set the base path to the folder you copied Shoelace's assets to
 setBasePath('public/shoelace');
-
-const backBtn = document.querySelector('.back-button') as HTMLButtonElement;
-const forwardBtn = document.querySelector(
-  '.forward-button'
-) as HTMLButtonElement;
-
-backBtn.addEventListener('click', (e: MouseEvent) => {
-  console.log('clicked back', e);
-});
-forwardBtn.addEventListener('click', (e: MouseEvent) => {
-  console.log('clicked forward', e);
-});
diff --git a/tsconfig.json b/tsconfig.json
@@ -2,6 +2,7 @@
   "compilerOptions": {
     "allowJs": true,
     "module": "commonjs",
+    "target": "ES2019",
     "skipLibCheck": true,
     "esModuleInterop": true,
     "noImplicitAny": true,
@@ -10,6 +11,7 @@
     "outDir": "dist",
     "moduleResolution": "node",
     "resolveJsonModule": true,
+    "experimentalDecorators": true,
     "paths": {
       "*": ["node_modules/*"]
     }

diff --git a/webpack.plugins.js b/webpack.plugins.js
@@ -6,7 +6,7 @@ module.exports = [
   new ForkTsCheckerWebpackPlugin(),
   new CopyPlugin({
     patterns: [
-      // Copy Shoelace assets to dist/shoelace
+      // Copy Shoelace assets to public/shoelace
       {
         from: path.resolve(
           __dirname,