custom tags for loading pre-set tags/suggestions

openbroadcaster · Jun 17, 2024 · 7c794ae · 7c794ae
1 parent 9445442
commit 7c794ae
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 9 deletions.
diff --git a/html/main.html b/html/main.html
@@ -12,18 +12,23 @@ <h2>Test audio input device</h2>
   <h2>Test tags and multi-select</h2>
   <div class="fieldrow">
     <label>Multi-select</label>
-    <ob-field-select data-edit data-multiple data-options="{
-      &quot;text&quot;: &quot;Text (single line)&quot;,
-      &quot;textarea&quot;: &quot;Text (multiple lines)&quot;,
-      &quot;integer&quot;: &quot;Number (Integer)&quot;,
-      &quot;bool&quot;: &quot;Yes/No&quot;,
-      &quot;select&quot;: &quot;Drop-Down Selection&quot;,
-      &quot;tags&quot;: &quot;Tags&quot;
-    }"></ob-field-select>
+    <ob-field-select data-edit data-multiple>
+      <ob-option selected>Option 1</ob-option>
+      <ob-option>Option 2</ob-option>
+      <ob-option selected>Option 3</ob-option>
+    </ob-field-select>
   </div>
   <div class="fieldrow">
     <label>Tags</label>
-    <ob-field-tags data-edit></ob-field-tags>
+    <ob-field-tags data-edit>
+      <ob-option>Suggestion</ob-option>
+      <ob-option>CD</ob-option>
+      <ob-tag>Selected</ob-tag>
+      <ob-tag>Another</ob-tag>
+      <ob-option>Another Suggestion</ob-option>
+      <ob-tag>Tag with spaces</ob-tag>
+      <ob-tag>Invalid#%&#&@$^@$%Characters</ob-tag>
+    </ob-field-tags>
   </div>
   <h2>Test media preview</h2>
   <ob-element-preview></ob-element-preview>

diff --git a/ui/fields/tags.js b/ui/fields/tags.js
@@ -4,6 +4,7 @@ import { OBField } from '../base/field.js';
 class OBFieldTags extends OBField {
     #init;
     #tags;
+    #suggestions;
     #currentTag;
 
     connectedCallback() {
@@ -13,8 +14,12 @@ class OBFieldTags extends OBField {
 
         this.#init = true;
         this.#tags = [];
+        this.#suggestions = [];
         this.#currentTag = "";
 
+        this.#tags = this.#loadInnerTags();
+        this.#suggestions = this.#loadInnerSuggestions();
+
         this.renderComponent();
     }
 
@@ -140,6 +145,32 @@ class OBFieldTags extends OBField {
             this.renderComponent();
         }
     }
+
+    #loadInnerTags() {
+        var tags = [];
+
+        Array.from(this.children).forEach((child) => {
+            if (child.tagName === 'OB-TAG') {
+                let tag = child.innerText.replace(/ /g, '-').replace(/[^a-zA-Z0-9-_]/g, '');
+                tags.push(tag);
+            }
+        });
+
+        return tags;
+    }
+
+    #loadInnerSuggestions() {
+        var suggestions = [];
+
+        Array.from(this.children).forEach((child) => {
+            if (child.tagName === 'OB-OPTION') {
+                let tag = child.innerText.replace(/ /g, '-').replace(/[^a-zA-Z0-9-_]/g, '');
+                suggestions.push(tag);
+            }
+        });
+
+        return suggestions;
+    }
 }
 
 customElements.define('ob-field-tags', OBFieldTags);