mirror of
https://github.com/acaloiaro/frm
synced 2026-07-21 10:12:23 +00:00
25 lines
No EOL
3.2 KiB
Text
25 lines
No EOL
3.2 KiB
Text
<label for=\"
|
|
\" class=\"
|
|
\">
|
|
|
|
<span class=\"text-red-500 required-dot\">*</span>
|
|
</label>
|
|
<select id=\"
|
|
\" name=\"
|
|
\"
|
|
multiple
|
|
required=\"true\"
|
|
data-placeholder=\"
|
|
\"
|
|
_=\"
|
|
\"
|
|
></select><div id=\"
|
|
\" data-args=\"
|
|
\" _=\"
|
|
\"></div><!-- when OptionsContent\n are present, their components render inside of this element when chosen -->
|
|
<!-- content displayed when specific options are selected --> <div id=\"selected-content\">
|
|
<div id=\"
|
|
\" class=\"hidden\">
|
|
</div>
|
|
</div>
|
|
<script>\n\t\t/**\n\t\t * Function to wait for predicates.\n\t\t * @param {function() : Promise.<Boolean> | function() : Boolean} predicate\n\t\t * - A function that returns or resolves a bool\n\t\t * @param {Number} [timeout] - Optional maximum waiting time in ms after rejected\n\t\t */\n\t\tfunction waitFor(predicate, timeout) {\n\t\t return new Promise((resolve, reject) => {\n\t\t let running = true;\n\n\t\t const check = async () => {\n\t\t const res = await predicate();\n\t\t if (res) return resolve(res);\n\t\t if (running) setTimeout(check, 100);\n\t\t };\n\n\t\t check();\n\n\t\t if (!timeout) return;\n\t\t setTimeout(() => {\n\t\t running = false;\n\t\t reject();\n\t\t }, timeout);\n\t\t });\n\t\t}\n\n\t\tasync function initializeSelect(dataElementID) {\n\t\t\t// wait 10 seconds for choices.js to load \n\t\t\ttry {\n\t\t\t\tawait waitFor(() => typeof Choices !== 'undefined', 10000);\n\t\t\t} catch {\n\t\t\t\tconsole.log(\"unable to load choices!\")\n\t\t\t}\n\n\t\t\tconst argsElement = document.getElementById(dataElementID);\n\t\t\tconst args = JSON.parse(argsElement.getAttribute('data-args'));\n\t\t\tif (args.Options != null) {\n\t\t\t\targs.Options.map((option) => {\n\t\t\t\t\tif (option.value === \"\") {\n\t\t\t\t\t\tconsole.error(`option id: (${option.id}) label: (${option.label}) should have a value! ensure every option provided to SelectorArgs has a 'Value'`)\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t\tvar searchEnabled = true\n\t\t\tif (args.SearchDisabled) {\n\t\t\t\tsearchEnabled = false\n\t\t\t}\n\n\t\t\tvar element = document.getElementById(args.ID)\n\t\t\tvar choices = new Choices(element, {\n\t\t\t\tchoices: args.Options != null ? args.Options : [],\n\t\t\t\tduplicateItemsAllowed: false,\n\t\t\t\tplaceholder: true,\n\t\t\t\tplaceholderValue: args.Placeholder,\n\t\t\t\tsearchEnabled: searchEnabled,\n\t\t\t\teditItems: args.EditItems,\n\t\t\t\tremoveItemButton: true,\n\t\t\t\taddChoices: true,\n\t\t\t\taddItems: true,\n\t\t\t\titemSelectText: \"\",\n\t\t\t});\n\t\t\telement._choices = choices;\n\t\t\n\t\t\t/**\n\t\t\t* When the user's selection(s) have changed, notify a DOM element with an event\n\t\t\t*/\n\t\t\tfunction notifySelected(event) {\n\t\t\t\tif (args.SelectionChangeEvent == \"\") {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tvar element = document.getElementById(args.ID)\n\t\t\t\tif (element == null) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\telement.dispatchEvent(new CustomEvent(args.SelectionChangeEvent, {bubbles: true, detail: { id: args.ID, value: event.detail.value}}))\n\t\t\t}\n\t\t\t\n\t\t\telement.addEventListener('change', notifySelected, false);\n\t\t}\n\t</script> |