306 lines
11 KiB
JavaScript
306 lines
11 KiB
JavaScript
/************************************************************************************************************
|
|
Ajax dynamic list
|
|
Copyright (C) 2006 DTHMLGoodies.com, Alf Magne Kalleland
|
|
|
|
This library is free software; you can redistribute it and/or
|
|
modify it under the terms of the GNU Lesser General Public
|
|
License as published by the Free Software Foundation; either
|
|
version 2.1 of the License, or (at your option) any later version.
|
|
|
|
This library is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
|
Lesser General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Lesser General Public
|
|
License along with this library; if not, write to the Free Software
|
|
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
|
|
|
|
Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
|
|
written by Alf Magne Kalleland.
|
|
|
|
Alf Magne Kalleland, April 2006
|
|
Owner of DHTMLgoodies.com
|
|
|
|
|
|
************************************************************************************************************/
|
|
//RowDelim="~R0W~";
|
|
//ColDelim="~C0L~";
|
|
var ajaxBox_offsetX = 0;
|
|
var ajaxBox_offsetY = 0;
|
|
var ajax_list_externalFile = 'getlocality'; // Path to external file
|
|
var minimumLettersBeforeLookup = 1; // Number of letters entered before a lookup is performed.
|
|
|
|
var ajax_list_cachedLists = new Array();
|
|
var ajax_list_activeInput = false;
|
|
var ajax_list_activeItem;
|
|
var ajax_list_optionDivFirstItem = false;
|
|
var ajax_list_currentLetters = new Array();
|
|
var ajax_optionDiv = false;
|
|
var ajax_optionDiv_iframe = false;
|
|
|
|
var ajax_list_MSIE = false;
|
|
|
|
var currentListIndex = 0;
|
|
|
|
function ajax_getTopPos(inputObj)
|
|
{
|
|
|
|
var returnValue = inputObj.offsetTop;
|
|
while((inputObj = inputObj.offsetParent) != null){
|
|
returnValue += inputObj.offsetTop;
|
|
}
|
|
return returnValue;
|
|
}
|
|
function ajax_list_cancelEvent()
|
|
{
|
|
return false;
|
|
}
|
|
|
|
function ajax_getLeftPos(inputObj)
|
|
{
|
|
var returnValue = inputObj.offsetLeft;
|
|
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
|
|
|
|
return returnValue;
|
|
}
|
|
|
|
function ajax_option_setValue(e,inputObj)
|
|
{
|
|
if(!inputObj)inputObj=this;
|
|
var tmpValue = inputObj.innerHTML;
|
|
if(ajax_list_MSIE)tmpValue = inputObj.innerText;else tmpValue = inputObj.textContent;
|
|
if(!tmpValue)tmpValue = inputObj.innerHTML;
|
|
ajax_list_activeInput.value = tmpValue;
|
|
if(document.getElementsByName(ajax_list_activeInput.name + '_hidden')[0])
|
|
{
|
|
document.getElementsByName(ajax_list_activeInput.name + '_hidden')[0].value = inputObj.dataset.localityId;
|
|
if(ajax_list_externalFile == 'getlocality')
|
|
{
|
|
document.getElementsByName(ajax_list_activeInput.name + '_pincode')[0].value = inputObj.dataset.pincode;
|
|
document.getElementsByName(ajax_list_activeInput.name + '_citylist')[0].value = inputObj.dataset.city;
|
|
}
|
|
}
|
|
ajax_options_hide();
|
|
}
|
|
|
|
function ajax_options_hide()
|
|
{
|
|
if(ajax_optionDiv)ajax_optionDiv.style.display='none';
|
|
if(ajax_optionDiv_iframe)ajax_optionDiv_iframe.style.display='none';
|
|
}
|
|
|
|
function ajax_options_rollOverActiveItem(item,fromKeyBoard)
|
|
{
|
|
if(ajax_list_activeItem)ajax_list_activeItem.className='optionDiv';
|
|
item.className='optionDivSelected';
|
|
ajax_list_activeItem = item;
|
|
|
|
if(fromKeyBoard){
|
|
if(ajax_list_activeItem.offsetTop>ajax_optionDiv.offsetHeight){
|
|
ajax_optionDiv.scrollTop = ajax_list_activeItem.offsetTop - ajax_optionDiv.offsetHeight + ajax_list_activeItem.offsetHeight + 2 ;
|
|
}
|
|
if(ajax_list_activeItem.offsetTop<ajax_optionDiv.scrollTop)
|
|
{
|
|
ajax_optionDiv.scrollTop = 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
function ajax_option_list_buildList(letters,paramToExternalFile)
|
|
{
|
|
|
|
ajax_optionDiv.innerHTML = '';
|
|
ajax_list_activeItem = false;
|
|
if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length===0){
|
|
ajax_options_hide();
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
ajax_list_optionDivFirstItem = false;
|
|
var optionsAdded = false;
|
|
for(var no=0;no<ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length;no++){
|
|
var locality = ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()][no];
|
|
if(!locality || !locality.location)continue;
|
|
optionsAdded = true;
|
|
var div = document.createElement('DIV');
|
|
|
|
if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length==1 && ajax_list_activeInput.value == locality.location){
|
|
ajax_options_hide();
|
|
return;
|
|
}
|
|
|
|
div.textContent = locality.location;
|
|
div.dataset.localityId = locality.id;
|
|
div.dataset.pincode = locality.pincode || '';
|
|
div.dataset.city = locality.city || '';
|
|
div.className='optionDiv';
|
|
div.onmouseover = function(){ ajax_options_rollOverActiveItem(this,false); };
|
|
div.onclick = ajax_option_setValue;
|
|
if(!ajax_list_optionDivFirstItem)ajax_list_optionDivFirstItem = div;
|
|
ajax_optionDiv.appendChild(div);
|
|
}
|
|
if(optionsAdded){
|
|
ajax_optionDiv.style.display='block';
|
|
if(ajax_optionDiv_iframe)ajax_optionDiv_iframe.style.display='';
|
|
ajax_options_rollOverActiveItem(ajax_list_optionDivFirstItem,true);
|
|
}
|
|
|
|
}
|
|
|
|
function ajax_option_resize(inputObj)
|
|
{
|
|
ajax_optionDiv.style.top = (ajax_getTopPos(inputObj) + inputObj.offsetHeight + ajaxBox_offsetY) + 'px';
|
|
ajax_optionDiv.style.left = (ajax_getLeftPos(inputObj) + ajaxBox_offsetX) + 'px';
|
|
if(ajax_optionDiv_iframe){
|
|
ajax_optionDiv_iframe.style.left = ajax_optionDiv.style.left;
|
|
ajax_optionDiv_iframe.style.top = ajax_optionDiv.style.top;
|
|
}
|
|
|
|
}
|
|
|
|
function ajax_showOptions(inputObj,e)
|
|
{
|
|
var cityval=document.getElementsByName(inputObj.id+"_citylist")[0].value;
|
|
var paramToExternalFile=cityval;
|
|
if(e.keyCode==13 || e.keyCode==9)
|
|
{
|
|
return;
|
|
}
|
|
if(ajax_list_currentLetters[inputObj.name]==inputObj.value)return;
|
|
if(!ajax_list_cachedLists[paramToExternalFile])ajax_list_cachedLists[paramToExternalFile] = new Array();
|
|
ajax_list_currentLetters[inputObj.name] = inputObj.value;
|
|
if(!ajax_optionDiv){
|
|
ajax_optionDiv = document.createElement('DIV');
|
|
ajax_optionDiv.id = 'ajax_listOfOptions';
|
|
document.body.appendChild(ajax_optionDiv);
|
|
|
|
if(ajax_list_MSIE){
|
|
ajax_optionDiv_iframe = document.createElement('IFRAME');
|
|
ajax_optionDiv_iframe.border='0';
|
|
ajax_optionDiv_iframe.style.width = ajax_optionDiv.clientWidth + 'px';
|
|
ajax_optionDiv_iframe.style.height = ajax_optionDiv.clientHeight + 'px';
|
|
ajax_optionDiv_iframe.id = 'ajax_listOfOptions_iframe';
|
|
|
|
document.body.appendChild(ajax_optionDiv_iframe);
|
|
}
|
|
|
|
var allInputs = document.getElementsByTagName('INPUT');
|
|
for(var no=0;no<allInputs.length;no++){
|
|
if(!allInputs[no].onkeyup)allInputs[no].onfocus = ajax_options_hide;
|
|
}
|
|
var allSelects = document.getElementsByTagName('SELECT');
|
|
for(var no=0;no<allSelects.length;no++){
|
|
allSelects[no].onfocus = ajax_options_hide;
|
|
}
|
|
|
|
var oldonkeydown=document.body.onkeydown;
|
|
if(typeof oldonkeydown!='function'){
|
|
document.body.onkeydown=ajax_option_keyNavigation;
|
|
}else{
|
|
document.body.onkeydown=function(){
|
|
oldonkeydown();
|
|
ajax_option_keyNavigation();};
|
|
}
|
|
var oldonresize=document.body.onresize;
|
|
if(typeof oldonresize!='function'){
|
|
document.body.onresize=function() {ajax_option_resize(inputObj); };
|
|
}else{
|
|
document.body.onresize=function(){oldonresize();
|
|
ajax_option_resize(inputObj);};
|
|
}
|
|
|
|
}
|
|
|
|
if(inputObj.value.length<minimumLettersBeforeLookup){
|
|
ajax_options_hide();
|
|
return;
|
|
}
|
|
|
|
|
|
ajax_optionDiv.style.top = (ajax_getTopPos(inputObj) + inputObj.offsetHeight + ajaxBox_offsetY) + 'px';
|
|
ajax_optionDiv.style.left = (ajax_getLeftPos(inputObj) + ajaxBox_offsetX) + 'px';
|
|
if(ajax_optionDiv_iframe){
|
|
ajax_optionDiv_iframe.style.left = ajax_optionDiv.style.left;
|
|
ajax_optionDiv_iframe.style.top = ajax_optionDiv.style.top;
|
|
}
|
|
|
|
ajax_list_activeInput = inputObj;
|
|
ajax_optionDiv.onselectstart = ajax_list_cancelEvent;
|
|
currentListIndex++;
|
|
if(ajax_list_cachedLists[paramToExternalFile][inputObj.value.toLowerCase()]){
|
|
ajax_option_list_buildList(inputObj.value,paramToExternalFile,currentListIndex);
|
|
}else{
|
|
var tmpIndex=currentListIndex/1;
|
|
ajax_optionDiv.innerHTML = '';
|
|
if(cityval.toUpperCase() == "GURGAON") {
|
|
cityval = "Gurugram";
|
|
}
|
|
var letters=inputObj.value;
|
|
var url=ajax_list_externalFile+'?'+new URLSearchParams({city:cityval,letters:letters}).toString();
|
|
fetch(url,{method:'GET',credentials:'same-origin',headers:{Accept:'application/json'}})
|
|
.then(function(response){return response.json().then(function(body){return {response:response,body:body};});})
|
|
.then(function(result){
|
|
if(!result.response.ok || !result.body || !result.body.success) throw result.body && result.body.message ? result.body.message : {};
|
|
var localities=Array.isArray(result.body.data && result.body.data.localities) ? result.body.data.localities : [];
|
|
ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()]=localities;
|
|
if(tmpIndex==currentListIndex) ajax_option_list_buildList(letters,paramToExternalFile);
|
|
})
|
|
.catch(function(error){
|
|
if(tmpIndex!=currentListIndex)return;
|
|
ajax_options_hide();
|
|
CygnusNotifications.show({type:'danger',code:error.code || 'APP-5002',
|
|
message:error.message || 'Cygnus could not load localities.',referenceId:error.referenceId});
|
|
});
|
|
}
|
|
|
|
|
|
}
|
|
|
|
function ajax_option_keyNavigation(e)
|
|
{
|
|
if(!ajax_optionDiv)return;
|
|
if(ajax_optionDiv.style.display=='none')return;
|
|
|
|
if(e.keyCode==38){ // Up arrow
|
|
if(!ajax_list_activeItem)return;
|
|
if(ajax_list_activeItem && !ajax_list_activeItem.previousSibling)return;
|
|
ajax_options_rollOverActiveItem(ajax_list_activeItem.previousSibling,true);
|
|
}
|
|
|
|
if(e.keyCode==40){ // Down arrow
|
|
if(!ajax_list_activeItem){
|
|
ajax_options_rollOverActiveItem(ajax_list_optionDivFirstItem,true);
|
|
}else{
|
|
if(!ajax_list_activeItem.nextSibling)return;
|
|
ajax_options_rollOverActiveItem(ajax_list_activeItem.nextSibling,true);
|
|
}
|
|
}
|
|
|
|
if(e.keyCode==13 || e.keyCode==9){ // Enter key or tab key
|
|
if(ajax_list_activeItem && ajax_list_activeItem.className=='optionDivSelected')ajax_option_setValue(false,ajax_list_activeItem);
|
|
if(e.keyCode==13)return false; else return true;
|
|
}
|
|
if(e.keyCode==27){ // Escape key
|
|
document.getElementsByName(ajax_list_activeInput.name + '_hidden')[0].value = '';
|
|
ajax_options_hide();
|
|
}
|
|
}
|
|
|
|
|
|
document.documentElement.onclick = autoHideList;
|
|
|
|
function autoHideList(e)
|
|
{
|
|
var source = e.target;
|
|
if (source.nodeType == 3) // defeat Safari bug
|
|
source = source.parentNode;
|
|
if(source.tagName.toLowerCase()!='input' && source.tagName.toLowerCase()!='textarea')
|
|
{
|
|
document.getElementsByName(ajax_list_activeInput.name + '_hidden')[0].value = '';
|
|
ajax_options_hide();
|
|
}
|
|
}
|