Marcos/button component

manifest-generator/.prettierrc.json

@@ -0,0 +1,11 @@
+{
+ "trailingComma": "es5",
+ "tabWidth": 2,
+ "semi": true,
+ "printWidth": 80,
+ "singleQuote": false,
+ "bracketSpacing": true,
+ "bracketSameLine": false,
+ "arrowParens": "always",
+ "singleAttributePerLine": false
+}

manifest-generator/app.js

@@ -0,0 +1,17 @@
+import { readManifestFromLocalStorage } from "./state.js";
+
+const registerServiceWorker = async () => {
+ try {
+ await navigator.serviceWorker.register("sw.js");
+ } catch (e) {
+ console.log(`Registration failed: ${e}`);
+ }
+};
+
+if (navigator.serviceWorker) {
+ registerServiceWorker();
+}
+
+// Grab previous state from Local Storage so that progress is not lost
+// across sessions.
+readManifestFromLocalStorage();

manifest-generator/components/app-view.js

@@ -0,0 +1,87 @@
+// A split app-view to show the manifest viewer in the right pane and the editor in the left pane.
+
+import "./manifest-view/index.js";
+import "./navigation-view.js";
+import "./page-view.js";
+import "./styled-button.js";
+
+const template = document.createElement("template");
+template.innerHTML = `
+ <link rel="stylesheet" href="styles/defaults.css" />
+ <style>
+ :host {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ }
+
+ .app-view {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+
+ .app-view > * {
+ flex: 1;
+ overflow: auto;
+ }
+
+ .app-view > *:first-child {
+ border-right: 1px solid #eee;
+ }
+ </style>
+ <div class="app-view">
+ <navigation-view current-id="page-1" page-selector="page-view">
+ <page-view page-id="page-1" title="Page 1">
+ <p slot="text">Page 1</p>
+ </page-view> 
+ <page-view page-id="page-2" title="Page 2">
+ <p slot="text">Page 2</p>
+ </page-view>
+ </navigation-view>
+ <manifest-view></manifest-view>
+ </div>
+`;
+
+class AppView extends HTMLElement {
+ constructor() {
+ super();
+
+ this.attachShadow({ mode: "open" });
+ this.shadowRoot.appendChild(template.content.cloneNode(true));
+ this.navigationView = this.shadowRoot.querySelector("navigation-view");
+
+ this.pageIds = ["page-1", "page-2"];
+ this.currentPageIdIndex = 0;
+
+ this.navigationView.addEventListener("next", () => this.nextPage());
+ this.navigationView.addEventListener("prev", () => this.prevPage());
+ this.navigationView.addEventListener("skip", () => this.skipPage());
+ }
+
+ nextPage() {
+ this.jumpToPage(
+ Math.min(this.currentPageIdIndex + 1, this.pageIds.length - 1)
+ );
+ }
+
+ prevPage() {
+ this.jumpToPage(Math.max(this.currentPageIdIndex - 1, 0));
+ }
+
+ skipPage() {
+ this.jumpToPage(
+ Math.min(this.currentPageIdIndex + 1, this.pageIds.length - 1)
+ );
+ }
+
+ jumpToPage(pageIndex) {
+ this.currentPageIdIndex = pageIndex;
+ this.navigationView.setAttribute(
+ "current-id",
+ this.pageIds[this.currentPageIdIndex]
+ );
+ }
+}
+
+customElements.define("app-view", AppView);

manifest-generator/components/color-picker.js

@@ -0,0 +1,58 @@
+// Component for a color picker -- a text label and a color input box.
+/*
+ Usage:
+ <color-picker label="my label" placeholder-text="my placeholder text"/>
+*/
+class ColorPicker extends HTMLElement {
+ #inputElement;
+ constructor() {
+ super();
+ this.#inputElement = document.createElement("input");
+
+ // Create a shadow root
+ const shadow = this.attachShadow({ mode: "open" });
+
+ const tableWrapper = document.createElement("div");
+ tableWrapper.setAttribute("class", "table");
+
+ // Create the page label
+ const inputLabel = document.createElement("p");
+ inputLabel.setAttribute("class", "tableitem");
+ inputLabel.textContent = `${this.getAttribute("label")}`;
+
+ // Create the input element
+ this.#inputElement.setAttribute("type", "color");
+ this.#inputElement.setAttribute("class", "tableitem");
+
+ // Style the elements
+ const style = document.createElement("style");
+ style.textContent = `.tableitem {
+ align-self: center;
+ }
+
+ .table {
+ display: flex;
+ flex-direction: column;
+ }`;
+
+ const stylesheet = document.createElement("link");
+ stylesheet.setAttribute("rel", "stylesheet");
+ stylesheet.setAttribute("href", "styles/defaults.css");
+
+ // Append the text and input elements to the table
+ tableWrapper.append(inputLabel);
+ tableWrapper.append(this.#inputElement);
+
+ // Append the table and style to the shadow DOM
+ shadow.append(tableWrapper);
+ shadow.append(style);
+ shadow.append(stylesheet);
+ }
+
+ getUserInput() {
+ return this.#inputElement.value;
+ }
+}
+
+// Define the new element
+customElements.define("color-picker", ColorPicker);

manifest-generator/components/display-mode.js

@@ -0,0 +1,111 @@
+// Component for a images as radio buttons.
+/*
+ Usage:
+ <display-mode></display-mode>
+
+*/
+
+const template = document.createElement("template");
+template.innerHTML = `
+ <link rel="stylesheet" href="../styles/defaults.css" />
+ <style>
+ .table-item {
+ align-self: center;
+ }
+
+ .table {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .item-label {
+ align-self: left;
+ margin-left: 20px;
+ }
+
+ .radio-button {
+ margin: 10px;
+ cursor: pointer;
+ }
+
+ .radio-button img {
+ width: 100px; /* Adjust the image size as needed */
+ border: 2px solid transparent;
+ padding: 5px;
+ }
+
+ .radio-button input[type="radio"] {
+ display: none; /* Hide the default radio button input */
+ }
+
+ .radio-button input[type="radio"]:checked + img {
+ border-color: blue; /* Style the selected image */
+ border-radius: 5px;
+ }
+
+ .label-radio-container {
+ display:inline-block;
+ align-self:center;
+ }
+ </style>
+
+ <div class="table">
+ <div class="label-radio-container">
+ <label class="item-label">minimal-ui</label>
+ <div class="table-item">
+ <label class="radio-button">
+ <input type="radio" name="radio-group" value="minimal-ui">
+ <img src="../icons/48X48.png" alt="minimal-ui">
+ </label>
+ </div>
+ </div>
+ <div class="label-radio-container">
+ <label class="item-label">standalone</label>
+ <div class="table-item">
+ <label class="radio-button">
+ <input type="radio" name="radio-group" value="standalone">
+ <img src="../icons/48X48.png" alt="standalone">
+ </label>
+ </div>
+ </div>
+ <div class="label-radio-container">
+ <label class="item-label">fullscreen</label>
+ <div class="table-item">
+ <label class="radio-button">
+ <input type="radio" name="radio-group" value="fullscreen">
+ <img src="../icons/48X48.png" alt="fullscreen">
+ </label>
+ </div>
+ </div>
+ <div class="label-radio-container">
+ <label class="item-label">browser</label>
+ <div class="table-item">
+ <label class="radio-button">
+ <input type="radio" name="radio-group" value="browser">
+ <img src="../icons/48X48.png" alt="browser">
+ </label>
+ </div>
+ </div>
+ </div>
+`;
+
+class DisplayMode extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: "open" });
+ this.shadowRoot.appendChild(template.content.cloneNode(true));
+ }
+
+ getUserInput() {
+ const inputElement = this.shadowRoot.querySelector(
+ "input[type='radio']:checked"
+ );
+ if (inputElement) {
+ return inputElement.value;
+ }
+ return;
+ }
+}
+
+// Define the new element
+customElements.define("display-mode", DisplayMode);

manifest-generator/components/long-text-input-example.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <title>Simple word count web component</title>
+ </head>
+
+ <body>
+ <!-- test with a label and placeholder -->
+ <long-text-input
+ label="an optional label"
+ placeholder-text="Placeholder text"
+ ></long-text-input>
+ <long-text-input></long-text-input>
+ </body>
+
+ <script src="long-text-input.js"></script>
+</html>

manifest-generator/components/long-text-input.js

@@ -0,0 +1,70 @@
+// Component for a long text input box. Optional attributes for a label and placeholder text.
+// See long-text-input-example.html for usage examples.
+
+class LongTextInput extends HTMLElement {
+ #inputElement;
+ constructor() {
+ super();
+
+ // Create a shadow root
+ const shadow = this.attachShadow({ mode: "open" });
+
+ const tableWrapper = document.createElement("div");
+ tableWrapper.setAttribute("class", "table");
+
+ // Create the page label
+ const inputLabel = document.createElement("p");
+ inputLabel.setAttribute("class", "table-item");
+ if (this.getAttribute("label")) {
+ inputLabel.textContent = `${this.getAttribute("label")}`;
+ } else {
+ inputLabel.setAttribute("hidden", true);
+ }
+
+ // Create the input element
+ this.#inputElement = document.createElement("textarea");
+ this.#inputElement.setAttribute("class", "table-item");
+ if (this.getAttribute("placeholder-text")) {
+ this.#inputElement.setAttribute(
+ "placeholder",
+ `${this.getAttribute("placeholder-text")}`
+ );
+ }
+
+ // Style the elements
+ const style = document.createElement("style");
+ style.textContent = `.table-item {
+ align-self: center;
+ }
+
+ .table {
+ display: flex;
+ flex-direction: column;
+ }`;
+
+ const stylesheetDefault = document.createElement("link");
+ stylesheetDefault.setAttribute("rel", "stylesheet");
+ stylesheetDefault.setAttribute("href", "../styles/defaults.css");
+
+ const stylesheetInput = document.createElement("link");
+ stylesheetInput.setAttribute("rel", "stylesheet");
+ stylesheetInput.setAttribute("href", "../styles/input.css");
+
+ // Append the text and input elements to the table
+ tableWrapper.append(inputLabel);
+ tableWrapper.append(this.#inputElement);
+
+ // Append the table and style to the shadow DOM
+ shadow.append(tableWrapper);
+ shadow.append(style);
+ shadow.append(stylesheetDefault);
+ shadow.append(stylesheetInput);
+ }
+
+ getUserInput() {
+ return this.#inputElement.value;
+ }
+}
+
+// Define the new element
+customElements.define("long-text-input", LongTextInput);