Clear results on empty search
This commit is contained in:
		
							
								
								
									
										110
									
								
								3CX_TAPI.user.js
									
									
									
									
									
								
							
							
						
						
									
										110
									
								
								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);
 | 
			
		||||
		Reference in New Issue
	
	Block a user