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);