Add basic demo

tcannonfodder · tcannonfodder · commit 79fb0157dfb1 · 2025-04-19T14:30:05.000-04:00
diff --git a/demo/index.html b/demo/index.html
@@ -3,12 +3,74 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <script type="module" src="../error-handling-element.js"></script>
+  <link rel="stylesheet" type="text/css" href="../css/util.css">
+
+  <script type="module">
+    import {ErrorHandlingElement} from "../src/error-handling-element.js"
+    import {clearErrorListsInForm} from "../src/rendering.js"
+
+    class CustomErrorHandleElement extends ErrorHandlingElement {
+      connectedCallback() {
+        super.connectedCallback()
+
+        this.form.addEventListener(`submit`, (event) => {
+          if(!event.defaultPrevented){
+            event.preventDefault()
+            clearErrorListsInForm(this.form)
+            console.debug(event)
+            document.getElementById(`easy-console`).value += "Submit successful\n"
+          }
+        })
+      }
+    }
+
+    if (!window.customElements.get('custom-error-handling')) {
+      window.customElements.define('custom-error-handling', CustomErrorHandleElement);
+    }
+  </script>
+
+  <style>
+    form {
+      border: 1px solid blue;
+      padding: 1em;
+    }
+
+    [data-error-container] {
+      border: 1px solid red;
+    }
+  </style>
+
   <title></title>
 </head>
 <body>
   <h1>Hello</h1>
 
-  <pf-error-handling></pf-error-handling>
+  <custom-error-handling>
+    <form id="test-form" aria-describedby='test-form-error-container'>
+      <input type="email" id="email-field" aria-describedby="email-field-errors" minlength="4">
+      <section id="email-field-errors" data-error-container>
+        <ul>
+          <li data-visible data-error-type="error_1">ad-hoc error message 1</li>
+          <li data-preserve data-error-type="tooShort">Custom Preserved Error: Must be at least 4 characters</li>
+        </ul>
+      </section>
+
+      <section id="test-form-error-container" data-error-container>
+        <h2>Form Errors</h2>
+        <ul>
+          <li data-visible data-error-type="error_2">ad-hoc error message 2</li>
+          <li data-visible data-preserve data-error-type="error_3">Preserved Error</li>
+        </ul>
+      </section>
+
+      <button type="submit">Submit</button>
+    </form>
+  </custom-error-handling>
+
+  <textarea id="easy-console" readonly rows=20></textarea>
+
+  <template id="pf-error-list-item-template">
+    <li><span>‼️</span> <span data-error-message></span></li>
+  </template>
 </body>
 </html>
