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