inner elements for custom select options, update metadata addedit

openbroadcaster · May 23, 2024 · af70fed · af70fed
1 parent ac0d9b7
commit af70fed
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 13 deletions.
diff --git a/html/media/metadata_addedit.html b/html/media/metadata_addedit.html
@@ -18,14 +18,14 @@
 
     <div class="fieldrow">
       <label class="required" data-t>Type</label>
-      <ob-field-select data-edit id="metadata_type" data-value="&quot;text&quot;" 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 id="metadata_type" data-value="&quot;text&quot;">
+        <ob-option value="text">Text (single line)</ob-option>
+        <ob-option value="textarea">Text (multiple lines)</ob-option>
+        <ob-option value="integer">Number (integer)</ob-option>
+        <ob-option value="bool">Yes/No</ob-option>
+        <ob-option value="select">Drop-Down Selection</ob-option>
+        <ob-option value="tags">Tags</ob-option>
+      </ob-field-select>
     </div>
 
     <div class="fieldrow">
@@ -40,11 +40,11 @@
 
     <div class="fieldrow">
       <label data-t>Mode</label>
-      <ob-field-select data-edit id="metadata_mode" data-value="&quot;required&quot;" data-options="{
-        &quot;required&quot;: &quot;Required&quot;,
-        &quot;optional&quot;: &quot;Optional&quot;,
-        &quot;hidden&quot;: &quot;Hidden&quot;
-      }"></ob-field-select>
+      <ob-field-select data-edit id="metadata_mode" data-value="&quot;required&quot;">
+        <ob-option value="required">Required</ob-option>
+        <ob-option value="optional">Optional</ob-option>
+        <ob-option value="hidden">Hidden</ob-option>
+      </ob-field-select>
     </div>
 
     <div class="fieldrow">

diff --git a/ui/fields/select.js b/ui/fields/select.js
@@ -322,6 +322,8 @@ class OBFieldSelect extends OBField {
     renderEdit() {
         // get options from data-options and json decode
         if (!this.#options) this.#options = JSON.parse(this.getAttribute('data-options'));
+        if (!this.#options) this.#options = this.#loadInnerOptions();
+
         if (!this.popular) this.popular = JSON.parse(this.getAttribute('data-popular'));
         if (!this.selected) this.selected = JSON.parse(this.getAttribute('data-value'));
         this.multiple = this.hasAttribute('data-multiple');
@@ -363,6 +365,27 @@ class OBFieldSelect extends OBField {
         this.updateSelected();
     }
 
+    #loadInnerOptions() {
+        var options = {};
+
+        for (const child of this.children) {
+            if (child.tagName === 'OB-OPTION') {
+                let key = child.getAttribute('value');
+                if (key) {
+                    options[key] = child.innerHTML;
+                } else {
+                    // If you mix items that have a value attribute and items without them, and also 
+                    // some of the values are numbers lower than the length of the iterated options up
+                    // to this point, they'll get overwritten, so this causes problems. But also come 
+                    // on now.
+                    options[Object.keys(options).length] = child.innerHTML;
+                }
+            }
+        }
+
+        return options;
+    }
+
 }
 
 customElements.define('ob-field-select', OBFieldSelect);