Adding CustomElements and removing some of the default one

GoogleChromeLabs · Nov 25, 2023 · 1e8c365 · 1e8c365
1 parent 3e7f0b1
commit 1e8c365
Show file tree

Hide file tree

Showing 20 changed files with 130 additions and 1,749 deletions.
diff --git a/samples/TheCritic/index.html b/samples/TheCritic/index.html
@@ -3,15 +3,17 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <link rel="stylesheet" href="/styles/global.css" />
+  <script src="./src/index.ts" type="module"></script>
   <title>The Critic</title>
 </head>
 <body>
   <header>
     <a href="/"><h1 id="title">The Critic</h1></a>
   </header>
-  <bb-ui></bb-ui>
-  <script type="module">
-    import { Main } from "./src/index.ts";
-    new Main();
-  </script>
+  <main>
+	<div id="app">
+		<the-panel></the-panel>
+		<the-article></the-article>
+	</div>
+  </main>
 </body>
diff --git a/samples/TheCritic/package.json b/samples/TheCritic/package.json
@@ -7,7 +7,8 @@
     "doc": "docs"
   },
   "scripts": {
-    "dev": "npm run generate:graphs && tsx run.ts",
+	"dev": "FORCE_COLOR=1 vite",
+    "run": "tsx run.ts",
     "build:vite": "FORCE_COLOR=1 vite build",
     "generate:graphs": "tsx src/make-graphs.ts",
     "generate:docs": "typedoc --plugin typedoc-plugin-markdown"

diff --git a/samples/TheCritic/src/index.ts b/samples/TheCritic/src/index.ts
@@ -4,5 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import * as BreadboardUI from "./ui";
+import {register} from "./ui";
 
+import { ThePanel } from "./boards/the-panel";
+
+
+register();
diff --git a/samples/TheCritic/src/ui/a-critic.ts b/samples/TheCritic/src/ui/a-critic.ts
@@ -0,0 +1,56 @@
+export class ACritic extends HTMLElement {
+
+	#root: ShadowRoot;
+
+	static get observedAttributes() {
+		return ['name', 'persona'];
+	}
+
+	attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+		this.#root.querySelector(`#${name}`)?.setAttribute('value', newValue);
+	}
+
+	get name() {
+		return this.getAttribute('name');
+	}
+
+	set name(value) {
+		if (value) { 
+			this.setAttribute('name', value);
+		} 
+		else { 
+			this.removeAttribute('name'); 
+		}
+	}
+
+	get persona() {
+		return this.getAttribute('persona');
+	}
+
+	set persona(value) {
+		if (value) { 
+			this.setAttribute('persona', value);
+		} 
+		else { 
+			this.removeAttribute('persona'); 
+		}
+	}
+
+	constructor() {
+		super();
+		this.#root = this.attachShadow({ mode: "open" });
+		this.#root.innerHTML = `
+	  <style>
+		:host {
+		  display: block;
+		  padding: 10px;
+		}
+	  </style>
+		<div>
+			<input type=text id="name" value="${this.name}">
+			<input type=text id="persona" value="${this.persona}">
+		</div>
+	  <slot></slot>
+	`;
+	}
+}
diff --git a/samples/TheCritic/src/ui/done.ts b/samples/TheCritic/src/ui/done.ts
diff --git a/samples/TheCritic/src/ui/error.ts b/samples/TheCritic/src/ui/error.ts
diff --git a/samples/TheCritic/src/ui/events.ts b/samples/TheCritic/src/ui/events.ts
diff --git a/samples/TheCritic/src/ui/index.ts b/samples/TheCritic/src/ui/index.ts
@@ -4,48 +4,17 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ErrorMessage } from "./error.js";
-import { Input } from "./input.js";
-import { Load } from "./load.js";
-import { Output } from "./output.js";
-import { Progress } from "./progress.js";
-import { Result } from "./result.js";
-import { Start } from "./start.js";
-import { UIController } from "./ui-controller.js";
-import {
-  MultipartInput,
-  MultipartInputImage,
-  MultipartInputText,
-} from "./input-multipart.js";
-import { Toast } from "./toast.js";
-import { ResponseContainer } from "./response-container.js";
-import { Done } from "./done.js";
+import { ACritic } from "./a-critic";
+import { TheArticle } from "./the-article";
+import { ThePanel } from "./the-panel";
 
 export const register = () => {
-  customElements.define("bb-response-container", ResponseContainer);
-  customElements.define("bb-ui", UIController);
-  customElements.define("bb-start", Start);
-  customElements.define("bb-load", Load);
-  customElements.define("bb-error", ErrorMessage);
-  customElements.define("bb-input", Input);
-  customElements.define("bb-output", Output);
-  customElements.define("bb-progress", Progress);
-  customElements.define("bb-result", Result);
-  customElements.define("bb-done", Done);
-  customElements.define("bb-multipart-input", MultipartInput);
-  customElements.define("bb-multipart-input-image", MultipartInputImage);
-  customElements.define("bb-multipart-input-text", MultipartInputText);
-  customElements.define("bb-toast", Toast);
+  customElements.define("a-critic", ACritic);
+  customElements.define("the-article", TheArticle);
+  customElements.define("the-panel", ThePanel);
 };
 
 export const get = () => {
-  return document.querySelector("bb-ui") as UIController;
+  return document.querySelector("#app");
 };
 
-export type { LoadArgs } from "./load.js";
-export type { OutputArgs } from "./output.js";
-export type { InputArgs } from "./input.js";
-export type { ResultArgs } from "./result.js";
-export type { StartArgs } from "./start.js";
-
-export { StartEvent, ToastEvent } from "./events.js";