mirror of
https://github.com/fusionpbx/fusionpbx.git
synced 2026-01-28 11:39:17 +00:00
Add javascript select_group_option
This commit is contained in:
@@ -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";
|
||||
|
||||
75
resources/javascript/select_group_option.js
Normal file
75
resources/javascript/select_group_option.js
Normal 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');
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user