/*
* Auto-completing page/username fields
*/
// The ultimate Javascript app: AJAX auto-completion, which responds to up/down arrow keys, the enter key, and the escape key
// The idea was pilfered mercilessly from vBulletin, but uses about 8
// bytes of vB code. All the rest was coded by me, Mr. Javascript Newbie...
// ...in about 8 hours.
// You folks better like this stuff.
function nameCompleteEventHandler(e)
{
if(!e) e = window.event;
switch(e.keyCode)
{
case 38: // up
unSelectMove('up');
break;
case 40: // down
unSelectMove('down');
break;
case 27: // escape
case 9: // tab
destroyUsernameDropdowns();
break;
case 13: // enter
unSelect();
break;
default: return false; break;
}
return true;
}
function unSelectMove(dir)
{
if(submitAuthorized) return false;
var thediv = document.getElementById(unObjDivCurrentId);
thetable = thediv.firstChild;
cel = thetable.firstChild.firstChild;
d = true;
index = false;
changed = false;
// Object of the game: extract the username, determine its index in the userlist array, and then color the menu items and set unObjCurrentSelection
while(d) // Set to false if an exception occurs or if we arrive at our destination
{
//*
if(!cel) d=false;
celbak = cel;
cel = cel.nextSibling;
if(!cel) d=false;
try {
if(cel.firstChild.nextSibling) html = cel.firstChild.nextSibling.innerHTML;
else html = cel.firstChild.innerHTML;
cel.firstChild.className = 'row1';
if(cel.firstChild.nextSibling) cel.firstChild.nextSibling.className = 'row1';
thename = html.substr(7, html.length-15);
// FINALLY! we have extracted the username
// Now get its position in the userlist array
if(thename == unObjCurrentSelection)
{
index = parseInt(in_array(thename, userlist));
}
if(typeof(index) == 'number')
{
if(dir=='down')
n = index+1;
else if(dir == 'up')
n = index - 1;
// Try to trap moving the selection up or down beyond the top of bottom
if(n > userlist.length-1 || n < 0)
{
cel.firstChild.className = 'row2';
if(cel.firstChild.nextSibling) cel.firstChild.nextSibling.className = 'row2';
return;
}
if(dir=='down') no=cel.nextSibling;
else if(dir=='up') no=cel.previousSibling;
no.firstChild.className = 'row2';
if(no.firstChild.nextSibling) no.firstChild.nextSibling.className = 'row2';
if(no.firstChild.id)
{
scroll = getScrollOffset() + getHeight();
elemht = getElementHeight(no.firstChild.id);
elemoff = fetch_offset(no.firstChild);
whereto = elemoff['top'] + elemht;
if(whereto > scroll)
{
window.location.hash = '#'+no.firstChild.id;
unObj.focus();
}
}
cel=cel.nextSibling;
unObjCurrentSelection = userlist[n];
index = false;
changed = true;
return;
}
} catch(e) { }
//*/ d = false;
}
}
function unSelect()
{
if(!unObj || submitAuthorized) return false;
if ( unObjCurrentSelection )
unObj.value = unObjCurrentSelection;
destroyUsernameDropdowns();
}
function in_array(needle, haystack)
{
for(var i in haystack)
{
if(haystack[i] == needle) return i;
}
return false;
}
function ajaxUserNameComplete(o)
{
if(!o) {destroyUsernameDropdowns(); return;}
if(!o.value) {destroyUsernameDropdowns(); return;}
if(o.value.length < 3) {destroyUsernameDropdowns(); return;}
//if(IE) return; // This control doesn't work in IE. Yes, it's true! document.createElement doesn't work.
if(!o.id)
{
o.id = 'usernametextboxobj_' + Math.floor(Math.random() * 10000000);
}
unObj = o;
o.setAttribute("autocomplete","off");
o.onkeyup = function(e, o) { o=unObj; if(!nameCompleteEventHandler(e)) ajaxUserNameComplete(o); }
val = escape(o.value).replace('+', '%2B');
ajaxGet(stdAjaxPrefix+'&_mode=fillusername&name='+val, function()
{
if(ajax.readyState==4)
{
// Determine the appropriate left/top positions, then create a div to use for the drop-down list
// The trick here is to be able to make the div dynamically destroy itself depending on how far the user's mouse is from it
destroyUsernameDropdowns();
off = fetch_offset(unObj);
dim = fetch_dimensions(unObj);
left = off['left'];
i1 = off['top'];
i2 = dim['h'];
var top = 0;
top = i1 + i2;
var thediv = document.createElement('div');
thediv.className = 'tblholder';
thediv.style.marginTop = '0px';
thediv.style.position = 'absolute';
thediv.style.top = top + 'px';
thediv.style.left = left + 'px';
thediv.style.zIndex = getHighestZ() + 2;
id = 'usernamehoverobj_' + Math.floor(Math.random() * 10000000);
unObjDivCurrentId = id;
thediv.id = id;
unObj.onblur = function() { destroyUsernameDropdowns(); }
eval(ajax.responseText);
if(errorstring)
{
html = '<span style="color: #555; padding: 4px;">'+errorstring+'</span>';
}
else
{
html = '<table border="0" cellspacing="1" cellpadding="3" style="width: auto;"><tr><th><small>Username matches</small></th></tr>';
cls = 'row2';
unObjCurrentSelection = userlist[0];
for(i=0;i<userlist.length;i++)
{
tmpnam = 'listobjnode_'+Math.floor(Math.random() * 10000000);
html = html + '<tr><td id="'+tmpnam+'" class="'+cls+'" style="cursor: pointer;" onclick="document.getElementById(\''+unObj.id+'\').value=\''+userlist[i]+'\';destroyUsernameDropdowns();"><small>'+userlist[i]+'</small></td></tr>';
if(cls=='row2') cls='row1';
}
html = html + '</table>';
}
thediv.innerHTML = html;
var body = document.getElementsByTagName('body');
body = body[0];
unSelectMenuOn = true;
submitAuthorized = false;
body.appendChild(thediv);
}
});
}
function ajaxPageNameComplete(o)
{
if(!o) {destroyUsernameDropdowns(); return;}
if(!o.value) {destroyUsernameDropdowns(); return;}
if(o.value.length < 3) {destroyUsernameDropdowns(); return;}
if(IE) return; // This control doesn't work in IE. Yes, it's true! document.createElement doesn't work.
if(!o.id)
{
o.id = 'usernametextboxobj_' + Math.floor(Math.random() * 10000000);
}
o.setAttribute("autocomplete","off");
unObj = o;
o.onkeyup = function(e, o) { o=unObj; if(!nameCompleteEventHandler(e)) ajaxPageNameComplete(o); }
val = escape(o.value).replace('+', '%2B');
ajaxGet(stdAjaxPrefix+'&_mode=fillpagename&name='+val, function()
{
if(!ajax) return;
if(ajax.readyState==4)
{
// Determine the appropriate left/top positions, then create a div to use for the drop-down list
// The trick here is to be able to make the div dynamically destroy itself depending on how far the user's mouse is from it
destroyUsernameDropdowns();
off = fetch_offset(unObj);
dim = fetch_dimensions(unObj);
left = off['left'];
top = off['top'] + dim['h'];
var thediv = document.createElement('div');
thediv.className = 'tblholder';
thediv.style.marginTop = '0px';
thediv.style.position = 'absolute';
thediv.style.top = top + 'px';
thediv.style.left = left + 'px';
thediv.style.zIndex = getHighestZ() + 2;
id = 'usernamehoverobj_' + Math.floor(Math.random() * 10000000);
unObjDivCurrentId = id;
thediv.id = id;
eval(ajax.responseText);
if(errorstring)
{
html = '<span style="color: #555; padding: 4px;">'+errorstring+'</span>';
}
else
{
html = '<table border="0" cellspacing="1" cellpadding="3" style="width: auto;"><tr><th colspan="2">Page name matches</th></tr><tr><th><small>Page title</small></th><th><small>Page ID</small></th></tr>';
cls = 'row2';
unObjCurrentSelection = userlist[0];
for(i=0;i<userlist.length;i++)
{
tmpnam = 'listobjnode_'+Math.floor(Math.random() * 10000000);
html = html + '<tr><td id="'+tmpnam+'" class="'+cls+'" style="cursor: pointer;" onclick="document.getElementById(\''+unObj.id+'\').value=\''+userlist[i]+'\';destroyUsernameDropdowns();"><small>'+namelist[i]+'</small></td><td class="'+cls+'" style="cursor: pointer;" onclick="document.getElementById(\''+unObj.id+'\').value=\''+userlist[i]+'\';destroyUsernameDropdowns();"><small>'+userlist[i]+'</small></td></tr>';
if(cls=='row2') cls='row1';
}
html = html + '</table>';
}
thediv.innerHTML = html;
var body = document.getElementsByTagName('body');
body = body[0];
unSelectMenuOn = true;
submitAuthorized = false;
body.appendChild(thediv);
}
});
}
function destroyUsernameDropdowns()
{
var divs = document.getElementsByTagName('div');
var prefix = 'usernamehoverobj_';
for(i=0;i<divs.length;i++)
{
if ( divs[i].id )
{
if(divs[i].id.substr(0, prefix.length)==prefix)
{
divs[i].innerHTML = '';
divs[i].style.display = 'none';
}
}
}
unSelectMenuOn = false;
unObjDivCurrentId = false;
unObjCurrentSelection = false;
submitAuthorized = true;
}
function get_parent_form(o)
{
if ( !o.parentNode )
return false;
if ( o.tagName == 'FORM' )
return o;
var p = o.parentNode;
while(true)
{
if ( p.tagName == 'FORM' )
return p;
else if ( !p )
return false;
else
p = p.parentNode;
}
}