diff --git a/html/main.html b/html/main.html index 0fdeb6f3..9fb8a182 100644 --- a/html/main.html +++ b/html/main.html @@ -12,18 +12,23 @@

Test audio input device

Test tags and multi-select

- + + Option 1 + Option 2 + Option 3 +
- + + Suggestion + CD + Selected + Another + Another Suggestion + Tag with spaces + Invalid#%&#&@$^@$%Characters +

Test media preview

diff --git a/ui/fields/tags.js b/ui/fields/tags.js index 9ebd5c2c..0b643230 100644 --- 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); \ No newline at end of file