add long text input component (#13)

* add long text input component * fixing formatting. --------- Co-authored-by: Lia Hiscock <liahiscock@outlook.com>
amandabaker · Sep 12, 2023 · b949bc2 · b949bc2
1 parent 4c5b1fb
commit b949bc2
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 0 deletions.
diff --git a/manifest-generator/components/long-text-input-example.html b/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>
diff --git a/manifest-generator/components/long-text-input.js b/manifest-generator/components/long-text-input.js
@@ -0,0 +1,60 @@
+// 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;
+    }`;
+
+    // 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);
+  }
+
+  getUserInput() {
+    return this.#inputElement.value;
+  }
+}
+
+// Define the new element
+customElements.define("long-text-input", LongTextInput);