CPATRD/3cx_tapi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Clear results on empty search

Browse Source
This commit is contained in:
Daniel Triendl 2020-10-19 18:08:05 +02:00
parent afb086d2ed
commit 204d5837c5
1 changed files with 57 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
3CX_TAPI.user.js
View File

@ -10,103 +10,112 @@
console.log('TAPI init'); console.log('TAPI init');
function fireChangeEvents(element){ function fireChangeEvents(element) {
var changeEvent = null; var changeEvent = null;
changeEvent = document.createEvent ("HTMLEvents"); changeEvent = document.createEvent("HTMLEvents");
changeEvent.initEvent ("input", true, true); changeEvent.initEvent("input", true, true);
element.dispatchEvent (changeEvent); element.dispatchEvent(changeEvent);
console.debug('input event dispatched for element: '+element.id); console.debug('input event dispatched for element: ' + element.id);
changeEvent = document.createEvent ("HTMLEvents"); changeEvent = document.createEvent("HTMLEvents");
changeEvent.initEvent ("keyup", true, true); changeEvent.initEvent("keyup", true, true);
element.dispatchEvent (changeEvent); element.dispatchEvent(changeEvent);
console.debug('keyup event dispatched for element: '+element.id); console.debug('keyup event dispatched for element: ' + element.id);
changeEvent = document.createEvent ("HTMLEvents"); changeEvent = document.createEvent("HTMLEvents");
changeEvent.initEvent ("change", true, true); changeEvent.initEvent("change", true, true);
element.dispatchEvent (changeEvent); element.dispatchEvent(changeEvent);
console.debug('change event dispatched for element: '+element.id); console.debug('change event dispatched for element: ' + element.id);
} }
var doSearch = function() { function removeSearchResults() {
var resultList = document.getElementById('tapiResults');
if (resultList) {
resultList.parentNode.removeChild(resultList);
}
}
var doSearch = function () {
var search = document.getElementById('tapiSearchInput'); var search = document.getElementById('tapiSearchInput');
var searchText = search.value.trim(); var searchText = search.value.trim();
if (searchText == '') { if (searchText == '') {
removeSearchResults();
return; return;
} }
console.log('Searching TAPI'); console.log('Searching TAPI');
GM.xmlHttpRequest({ GM.xmlHttpRequest({
method: 'GET', method: 'GET',
url: 'http://cpatapi.cpsrvweb2016.cp-austria.at/search?query=' + encodeURIComponent(searchText), url: 'http://cpatapi.cpsrvweb2016.cp-austria.at/search?query=' + encodeURIComponent(searchText),
onload: function(response) { onload: function (response) {
console.log('TAPI Search response', response); console.log('TAPI Search response', response);
var contacts = JSON.parse(response.responseText); var contacts = JSON.parse(response.responseText);
console.log('TAPI Contacts', contacts); console.log('TAPI Contacts', contacts);
var resultList = document.getElementById('tapiResults'); removeSearchResults();
if (resultList) {
resultList.parentNode.removeChild(resultList);
}
resultList = document.createElement('ul'); resultList = document.createElement('ul');
resultList.id = 'tapiResults'; resultList.id = 'tapiResults';
resultList.classList.add('search-nav-absolute'); resultList.classList.add('search-nav-absolute');
resultList.classList.add('search-nav-ul'); resultList.classList.add('search-nav-ul');
document.getElementById('tapiSearchBox').appendChild(resultList); document.getElementById('tapiSearchBox').appendChild(resultList);
resultList.innerHTML = ''; resultList.innerHTML = '';
for(var i = 0; i < contacts.length; i++) { for (var i = 0; i < contacts.length; i++) {
var li = document.createElement('li'); var li = document.createElement('li');
li.classList.add('search-result'); li.classList.add('search-result');
li.classList.add('pointer'); li.classList.add('pointer');
li.onmouseover = function() { this.classList.add('bg-light'); }; li.onmouseover = function () {
li.onmouseout = function() { this.classList.remove('bg-light'); }; this.classList.add('bg-light');
};
li.onmouseout = function () {
this.classList.remove('bg-light');
};
li.contact = contacts[i]; li.contact = contacts[i];
li.onclick = function() { li.onclick = function () {
var contact = this.contact; var contact = this.contact;
var searchInput = document.getElementsByName('searchByNumberInput'); var searchInput = document.getElementsByName('searchByNumberInput');
if (searchInput.length > 0) { if (searchInput.length > 0) {
searchInput[0].value = contact.tD_NUMBER_TAPI; searchInput[0].value = contact.tD_NUMBER_TAPI;
searchInput[0].focus(); searchInput[0].focus();
fireChangeEvents(searchInput[0]); fireChangeEvents(searchInput[0]);
} }
}; };
li.style.listStyle = 'outside none none';// display: flex; align-items: center; li.style.listStyle = 'outside none none'; // display: flex; align-items: center;
var resultText = document.createElement('div'); var resultText = document.createElement('div');
resultText.classList.add('search-result-txt'); resultText.classList.add('search-result-txt');
li.appendChild(resultText); li.appendChild(resultText);
var line1 = document.createElement('div') var line1 = document.createElement('div')
line1.appendChild(document.createTextNode(contacts[i].tD_NAME)); line1.appendChild(document.createTextNode(contacts[i].tD_NAME));
resultText.appendChild(line1); resultText.appendChild(line1);
var line2 = document.createElement('div') var line2 = document.createElement('div')
line2.appendChild(document.createTextNode(contacts[i].tD_NUMBER_TAPI)); line2.appendChild(document.createTextNode(contacts[i].tD_NUMBER_TAPI));
resultText.appendChild(line2); resultText.appendChild(line2);
resultList.appendChild(li); resultList.appendChild(li);
} }
} }
}); });
}; };
waitForKeyElements('div.nav-search', (element) => { waitForKeyElements('div.nav-search', (element) => {
console.log('Create TAPI Search'); console.log('Create TAPI Search');
var form = document.createElement('form'); var form = document.createElement('form');
form.style.width = '200px'; form.style.width = '200px';
form.style.float = 'right'; form.style.float = 'right';
form.style.marginRight = '20px'; form.style.marginRight = '20px';
var searchBox = document.createElement('div'); var searchBox = document.createElement('div');
searchBox.classList.add('contact-search-box'); searchBox.classList.add('contact-search-box');
searchBox.id = 'tapiSearchBox'; searchBox.id = 'tapiSearchBox';
form.appendChild(searchBox); form.appendChild(searchBox);
var searchWrapper = document.createElement('div'); var searchWrapper = document.createElement('div');
searchWrapper.classList.add('search-input-wrapper'); searchWrapper.classList.add('search-input-wrapper');
searchWrapper.style.position = 'relative'; searchWrapper.style.position = 'relative';
searchBox.appendChild(searchWrapper); searchBox.appendChild(searchWrapper);
var search = document.createElement('input'); var search = document.createElement('input');
search.id = 'tapiSearchInput'; search.id = 'tapiSearchInput';
search.classList.add('padder'); search.classList.add('padder');
@ -117,26 +126,21 @@ waitForKeyElements('div.nav-search', (element) => {
search.placeholder = 'TAPI Suche'; search.placeholder = 'TAPI Suche';
search.onfocus = doSearch; search.onfocus = doSearch;
search.onkeyup = doSearch; search.onkeyup = doSearch;
search.onblur = function() { search.onblur = function () {
console.log('TAPI Search exit'); console.log('TAPI Search exit');
setTimeout(function() { setTimeout(function () {
console.log('TAPI clear search results'); console.log('TAPI clear search results');
var resultList = document.getElementById('tapiResults'); removeSearchResults();
console.log('TAPI tapiResults', resultList);
if (resultList) {
resultList.parentNode.removeChild(resultList);
};
}, 500); }, 500);
}; };
searchWrapper.appendChild(search); searchWrapper.appendChild(search);
var icon = document.createElement('span'); var icon = document.createElement('span');
icon.classList.add('fa'); icon.classList.add('fa');
icon.classList.add('fa-search'); icon.classList.add('fa-search');
icon.classList.add('form-control-feedback'); icon.classList.add('form-control-feedback');
icon.style.color = 'grey'; icon.style.color = 'grey';
searchWrapper.appendChild(icon); searchWrapper.appendChild(icon);
element.appendChild(form);
}, false);
element.appendChild(form);
}, false);