Live on demand domain search.

This commit is contained in:
FusionPBX
2022-11-28 14:56:52 -07:00
committed by GitHub
parent bbde291760
commit 2885115ed8

View File

@@ -298,6 +298,8 @@
$('#domains_hide').on('click', function() { hide_domains(); });
function show_domains() {
search_domains('domains_list');
$('#domains_visible').val(1);
var scrollbar_width = (window.innerWidth - $(window).width()); //gold: only solution that worked with body { overflow:auto } (add -ms-overflow-style: scrollbar; to <body> style for ie 10+)
if (scrollbar_width > 0) {
@@ -308,7 +310,7 @@
$(document).scrollTop(0);
$('#domains_container').show();
$('#domains_block').animate({marginRight: '+=300'}, 400, function() {
$('#domains_filter').trigger('focus');
$('#domains_search').trigger('focus');
});
}
@@ -316,8 +318,7 @@
$('#domains_visible').val(0);
$(document).ready(function() {
$('#domains_block').animate({marginRight: '-=300'}, 400, function() {
$('#domains_filter').val('');
domain_search($('#domains_filter').val());
$('#domains_search').val('');
$('.navbar').css('margin-right','0'); //restore navbar margin
$('#domains_container').css('right','0'); //domain container right position
$('#domains_container').hide();
@@ -556,7 +557,6 @@
});
{/literal}
//link list rows
{literal}
$('.tr_hover tr,.list tr').each(function(i,e) {
@@ -1017,6 +1017,94 @@
{*//session timer *}
{$session_timer}
{*//domain selector *}
function search_domains(element_id) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
//if (this.readyState == 4 && this.status == 200) {
// document.getElementById(element_id).innerHTML = this.responseText;
//}
//remove current options
document.getElementById(element_id).innerHTML = '';
if (this.readyState == 4 && this.status == 200) {
//create the json object from the response
obj = JSON.parse(this.responseText);
//update the domain count
document.getElementById('domain_count').innerText = '('+ obj.length +')';
//add new options from the json results
for (var i=0; i < obj.length; i++) {
//get the variables
domain_uuid = obj[i].domain_uuid;
domain_name = obj[i].domain_name;
if (obj[i].domain_description != null) {
// domain_description = DOMPurify.sanitize(obj[i].domain_description);
}
//create a div element
var div = document.createElement('div');
//add a div title
div.title = obj[i].domain_name;
//add a css class
div.classList.add("domains_list_item");
//alternate the background color
if(i%2==0) {
div.style.background = '{$domain_selector_background_color_1}';
}
else {
div.style.background = '{$domain_selector_background_color_2}';
}
//set the active domain style
if ('{$domain_uuid}' == obj[i].domain_uuid) {
div.style.background = '{$domain_active_background_color}';
div.style.fontWeight = 'bold';
//div.classList.add("domains_list_item_active");
//var item_description_class = 'domain_active_list_item_description';
}
else {
//div.classList.add("domains_list_item_inactive");
//var item_description_class = 'domain_inactive_list_item_description';
}
link_label = obj[i].domain_name;
if (obj[i].domain_description != null) {
link_label += ' - ' + obj[i].domain_description;
}
var a_tag = document.createElement('a');
a_tag.setAttribute('href','{$domains_app_path}?domain_uuid='+obj[i].domain_uuid+'&domain_change=true');
a_tag.innerText = link_label;
div.appendChild(a_tag);
//div.innerHTML = '<a href="{$domains_app_path}?domain_uuid='+obj[i].domain_uuid+'&domain_change=true">'+obj[i].domain_name+'</a> ';
//if (obj[i].domain_description != null) {
// div.innerHTML += '<span class="domain_list_item_description" title="'+obj[i].domain_description+'"> - '+obj[i].domain_description+'</span>';
//}
document.getElementById(element_id).appendChild(div);
}
}
};
search = document.getElementById('domains_search');
if (search.value) {
//xhttp.open("GET", "/core/domains/domain_list.php?search="+search.value, true);
xhttp.open("GET", "/core/domains/domain_json.php?search="+search.value, true);
}
else {
//xhttp.open("GET", "/core/domains/domain_list.php", true);
xhttp.open("GET", "/core/domains/domain_json.php", true);
}
xhttp.send();
}
{*//domain selector *}
</script>
</head>
@@ -1033,70 +1121,11 @@
<div id='domains_block'>
<div id='domains_header'>
<input id='domains_hide' type='button' class='btn' style='float: right' value="{$text.theme_button_close}">
<a id='domains_title' href='{$domains_app_path}'>{$text.theme_title_domains} <span style='font-size: 80%;'>({$domain_count})</span></a>
<a id='domains_title' href='{$domains_app_path}'>{$text.theme_title_domains} <span id='domain_count' style='font-size: 80%;'></span></a>
<br><br>
<input type='text' id='domains_filter' class='formfld' style='margin-left: 0; min-width: 100%; width: 100%;' placeholder="{$text.theme_label_search}" onkeyup='domain_search(this.value)'>
<input type='text' id='domains_search' class='formfld' style='margin-left: 0; min-width: 100%; width: 100%;' placeholder="{$text.theme_label_search}" onkeyup="search_domains('domains_list');">
</div>
<div id='domains_list'>
{foreach $domains as $row}
{if $row.domain_enabled}
{*//alternate background colors of inactive domains *}
{if $background_color == $domain_selector_background_color_1}
{$background_color=$domain_selector_background_color_2}
{else}
{$background_color=$domain_selector_background_color_1}
{/if}
{*//set active domain color *}
{if $domain_active_background_color != ''}
{if $row.domain_uuid == $domain_uuid}{$background_color=$domain_active_background_color}{/if}
{/if}
{*//active domain text hover color *}
{if $settings.theme.domain_active_text_color_hover != '' && $row.domain_uuid == $domain_uuid}
<div id='{$row.domain_name}' class='domains_list_item_active' style='background-color: {$background_color}' onclick="document.location.href='{$domains_app_path}?domain_uuid={$row.domain_uuid}&domain_change=true';">
{elseif $settings.theme.domain_inactive_text_color_hover != '' && $row.domain_uuid != $domain_uuid}
<div id='{$row.domain_name}' class='domains_list_item_inactive' style='background-color: {$background_color}' onclick="document.location.href='{$domains_app_path}?domain_uuid={$row.domain_uuid}&domain_change=true';">
{else}
<div id='{$row.domain_name}' class='domains_list_item' style='background-color: {$background_color}' onclick="document.location.href='{$domains_app_path}?domain_uuid={$row.domain_uuid}&domain_change=true';">
{/if}
{*//domain link *}
<a href='{$domains_app_path}?domain_uuid={$row.domain_uuid}&domain_change=true' {if $row.domain_uuid == $domain_uuid}style='font-weight: bold;'{/if}>{$row.domain_name}</a>
{*//domain description *}
{if $row.domain_description != ''}
{*//active domain description text color *}
{if $settings.theme.domain_active_desc_text_color != '' && $row.domain_uuid == $domain_uuid}
<span class='domain_active_list_item_description' title="{$row.domain_description}"> - {$row.domain_description}</span>
{*//inactive domains description text color *}
{elseif $settings.theme.domain_inactive_desc_text_color != '' && $row.domain_uuid != $domain_uuid}
<span class='domain_inactive_list_item_description' title="{$row.domain_description}"> - {$row.domain_description}</span>
{*//default domain description text color *}
{else}
<span class='domain_list_item_description' title="{$row.domain_description}"> - {$row.domain_description}</span>
{/if}
{/if}
</div>
{$ary_domain_names[]=$row.domain_name}
{$ary_domain_descs[]=$row.domain_description|replace:'"':'\"'}
{/if}
{/foreach}
</div>
<script>
{literal}
var domain_names = new Array("{/literal}{'","'|implode:$ary_domain_names}{literal}");
var domain_descs = new Array("{/literal}{'","'|implode:$ary_domain_descs}{literal}");
function domain_search(criteria) {
for (var x = 0; x < domain_names.length; x++) {
if (domain_names[x].toLowerCase().match(criteria.toLowerCase()) || domain_descs[x].toLowerCase().match(criteria.toLowerCase())) {
document.getElementById(domain_names[x]).style.display = '';
}
else {
document.getElementById(domain_names[x]).style.display = 'none';
}
}
}
{/literal}
</script>
<div id='domains_list'></div>
</div>
</div>