Add javascript select_group_option

This commit is contained in:
markjcrane
2026-01-26 18:27:25 -07:00
parent e31932d064
commit 9861c42ca0
3 changed files with 132 additions and 7 deletions

View File

@@ -39,6 +39,15 @@
$language = new text;
$text = $language->get();
//determine the typ of array
function array_type(array $array): string {
$result = count($array, COUNT_RECURSIVE) > count($array);
if ($result) {
return 'multi';
}
return 'single';
}
//set defaults
$recording_name = '';
$recording_message = '';
@@ -68,6 +77,14 @@
//$translate_enabled = $speech->get_translate_enabled();
//$language_enabled = $speech->get_language_enabled();
//$languages = $speech->get_languages();
// Determine the aray type single, or multi
$voices_array_type = array_type($voices);
// Sort the array by language code keys alphabetically
if ($voices_array_type == 'multi') {
ksort($voices);
}
}
//add the transcribe object and get the languages arrays
@@ -385,13 +402,43 @@
echo "</td>\n";
echo "<td class='vtable' align='left'>\n";
if (!empty($voices)) {
echo " <select class='formfld' name='recording_voice'>\n";
echo " <option value=''></option>\n";
foreach ($voices as $key => $voice) {
$recording_voice_selected = (!empty($recording_voice) && $key == $recording_voice) ? "selected='selected'" : null;
echo " <option value='".escape($key)."' $recording_voice_selected>".escape(ucwords($voice))."</option>\n";
if ($voices_array_type == 'single') {
echo " <select class='formfld' name='recording_voice' style='width: 200px;'>\n";
echo " <option value=''></option>\n";
foreach ($voices as $key => $voice) {
$recording_voice_selected = (!empty($recording_voice) && $key == $recording_voice) ? "selected='selected'" : null;
echo " <option value='".escape($key)."' $recording_voice_selected>".escape(ucwords($voice))."</option>\n";
}
echo " </select>\n";
}
if ($voices_array_type == 'multi') {
echo " <select class='formfld' id='recording_voice_source' name='recording_voice_source' style='display: none;'>\n";
echo " <option value=''></option>\n";
foreach ($voices as $category => $sub_array) {
$category = $text['label-'.$category] ?? $category;
echo "<optgroup label='".$category."' data-type='".$category."'>\n";
foreach ($sub_array as $key => $voice) {
$recording_voice_selected = (!empty($recording_voice) && $key == $recording_voice) ? "selected='selected'" : null;
echo " <option value='".escape($key)."' $recording_voice_selected>".escape(ucwords($voice))."</option>\n";
}
echo "</optgroup>\n";
}
echo " </select>\n";
// Select showing only optgroup labels
echo " <select class='formfld' id='recording_voice_group_select' style='width: 100px;' >\n";
echo " <option value='' disabled='disabled' selected='selected'></option>\n";
echo " </select>\n";
// Select showing only options from selected group\n";
echo " <select class='formfld' id='recording_voice_option_select' name='recording_voice' style='width: 195px;' disabled='disabled'>\n";
echo " <option value='' disabled='disabled' selected='selected'></option>\n";
echo " </select>\n";
echo "<script>\n";
echo " select_group_option('recording_voice_source', 'recording_voice_group_select', 'recording_voice_option_select');\n";
echo "</script>\n";
}
echo " </select>\n";
}
else {
echo " <input class='formfld' type='text' name='recording_voice' maxlength='255' value=\"".escape($recording_voice)."\">\n";

View File

@@ -0,0 +1,75 @@
function select_group_option(original_select_id, group_select_id, option_select_id) {
const original_select = document.getElementById(original_select_id);
const group_select = document.getElementById(group_select_id);
const option_select = document.getElementById(option_select_id);
if (!original_select || !group_select || !option_select) {
console.error('Function select_group_option select IDs one or more not found in the DOM.');
return;
}
// Populate group select with optgroup labels
const optgroups = original_select.querySelectorAll('optgroup');
optgroups.forEach(optgroup => {
const option = document.createElement('option');
option.value = optgroup.label;
option.textContent = optgroup.label;
group_select.appendChild(option);
});
// When a group is selected, populate option select
group_select.addEventListener('change', function() {
const selected_group = this.value;
option_select.innerHTML = '<option value=""></option>';
if (selected_group) {
option_select.disabled = false;
const optgroup = original_select.querySelector(`optgroup[label="${selected_group}"]`);
if (optgroup) {
const options = optgroup.querySelectorAll('option');
options.forEach(opt => {
const option_element = document.createElement('option');
option_element.value = opt.value;
option_element.textContent = opt.textContent;
option_select.appendChild(option_element);
});
}
} else {
option_select.disabled = true;
}
});
// Set the selected value
const original_value = original_select.value;
if (original_value) {
// Find which optgroup contains the selected option
const selected_optgroup = Array.from(original_select.querySelectorAll('optgroup')).find(optgroup =>
optgroup.querySelector(`option[value="${original_value}"]`)
);
if (selected_optgroup) {
// Set group select to the selected optgroup
group_select.value = selected_optgroup.label;
// Populate and select the corresponding option
const optgroup = original_select.querySelector(`optgroup[label="${selected_optgroup.label}"]`);
if (optgroup) {
const options = optgroup.querySelectorAll('option');
option_select.innerHTML = '<option value=""></option>';
options.forEach(opt => {
const option_element = document.createElement('option');
option_element.value = opt.value;
option_element.textContent = opt.textContent;
option_select.appendChild(option_element);
});
// Select the matching option
option_select.value = original_value;
option_select.disabled = false;
}
}
}
}
//select_group_option('original_select', 'group_select', 'option_select');

View File

@@ -50,6 +50,9 @@
<script language='JavaScript' type='text/javascript' src='{$project_path}/resources/fonts/web_font_loader.php?v={$settings.theme.font_loader_version}'></script>
{/if}
{*//javascript functions *}
<script language='JavaScript' type='text/javascript' src='{$project_path}/resources/javascript/select_group_option.js'></script>
{*//local javascript *}
<script language='JavaScript' type='text/javascript'>
@@ -1011,7 +1014,7 @@
document.querySelectorAll('input[type="checkbox"]:not([name*="enabled"])').forEach(checkbox => {
checkbox.checked = false;
});
//select the checkbox with the specified id
document.getElementById(checkbox_id).checked = true;
}