forked from extern/egroupware
move the ie dropdown menu hack to jsapi, make it an preference, so you can switch it off, if it does not work for you
This commit is contained in:
Klaus Leithoff
@@ -144,3 +144,236 @@ function egw_getWindowOuterHeight()
|
||||
return egw_getWindowInnerHeight();
|
||||
}
|
||||
}
|
||||
|
||||
// ie selectbox dropdown menu hack. as ie is not able to resize dropdown menus from selectboxes, we
|
||||
// read the content of the dropdown menu and present it as popup resized for the user. if the user
|
||||
// clicks/seleckts a value, the selection is posted back to the origial selectbox
|
||||
function dropdown_menu_hack(el)
|
||||
{
|
||||
if(el.runtimeStyle)
|
||||
{
|
||||
if(enable_ie_dropdownmenuhack) {
|
||||
if (enable_ie_dropdownmenuhack==1){} else return;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
if(el.runtimeStyle.behavior.toLowerCase()=="none"){return;}
|
||||
el.runtimeStyle.behavior="none";
|
||||
|
||||
if (el.multiple ==1) {return;}
|
||||
if (el.size > 1) {return;}
|
||||
|
||||
var ie5 = (document.namespaces==null);
|
||||
el.ondblclick = function(e)
|
||||
{
|
||||
window.event.returnValue=false;
|
||||
return false;
|
||||
}
|
||||
|
||||
if(window.createPopup==null)
|
||||
{
|
||||
var fid = "dropdown_menu_hack_" + Date.parse(new Date());
|
||||
|
||||
window.createPopup = function()
|
||||
{
|
||||
if(window.createPopup.frameWindow==null)
|
||||
{
|
||||
el.insertAdjacentHTML("MyFrame","<iframe id='"+fid+"' name='"+fid+"' src='about:blank' frameborder='1' scrolling='no'></></iframe>");
|
||||
var f = document.frames[fid];
|
||||
f.document.open();
|
||||
f.document.write("<html><body></body></html>");
|
||||
f.document.close();
|
||||
f.fid = fid;
|
||||
|
||||
|
||||
var fwin = document.getElementById(fid);
|
||||
fwin.style.cssText="position:absolute;top:0;left:0;display:none;z-index:99999;";
|
||||
|
||||
|
||||
f.show = function(px,py,pw,ph,baseElement)
|
||||
{
|
||||
py = py + baseElement.getBoundingClientRect().top + Math.max( document.body.scrollTop, document.documentElement.scrollTop) ;
|
||||
px = px + baseElement.getBoundingClientRect().left + Math.max( document.body.scrollLeft, document.documentElement.scrollLeft) ;
|
||||
fwin.style.width = pw + "px";
|
||||
fwin.style.height = ph + "px";
|
||||
fwin.style.posLeft =px ;
|
||||
fwin.style.posTop = py ;
|
||||
fwin.style.display="block";
|
||||
}
|
||||
|
||||
|
||||
f_hide = function(e)
|
||||
{
|
||||
if(window.event && window.event.srcElement && window.event.srcElement.tagName && window.event.srcElement.tagName.toLowerCase()=="select"){return true;}
|
||||
fwin.style.display="none";
|
||||
}
|
||||
f.hide = f_hide;
|
||||
document.attachEvent("onclick",f_hide);
|
||||
document.attachEvent("onkeydown",f_hide);
|
||||
|
||||
}
|
||||
return f;
|
||||
}
|
||||
}
|
||||
|
||||
function showMenu()
|
||||
{
|
||||
|
||||
function selectMenu(obj)
|
||||
{
|
||||
var o = document.createElement("option");
|
||||
o.value = obj.value;
|
||||
//alert("val"+o.value+', text:'+obj.innerHTML+'selected:'+obj.selectedIndex);
|
||||
o.text = obj.innerHTML;
|
||||
o.text = o.text.replace('<NOBR>','');
|
||||
o.text = o.text.replace('</NOBR>','');
|
||||
//if there is no value, you should not try to set the innerHTML, as it screws up the empty selection ...
|
||||
if (o.value != '') o.innerHTML = o.text;
|
||||
while(el.options.length>0){el.options[0].removeNode(true);}
|
||||
el.appendChild(o);
|
||||
el.title = o.innerHTML;
|
||||
el.contentIndex = obj.selectedIndex ;
|
||||
el.menu.hide();
|
||||
if(el.onchange)
|
||||
{
|
||||
el.onchange();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
el.menu.show(0 , el.offsetHeight , 10, 10, el);
|
||||
var mb = el.menu.document.body;
|
||||
|
||||
mb.style.cssText ="border:solid 1px black;margin:0;padding:0;overflow-y:auto;overflow-x:auto;background:white;font:12px Tahoma, sans-serif;";
|
||||
var t = el.contentHTML;
|
||||
//alert("1"+t);
|
||||
t = t.replace(/<select/gi,'<div');
|
||||
//alert("2"+t);
|
||||
t = t.replace(/<option/gi,'<span');
|
||||
//alert("3"+t);
|
||||
t = t.replace(/<\/option/gi,'</span');
|
||||
//alert("4"+t);
|
||||
t = t.replace(/<\/select/gi,'</div');
|
||||
t = t.replace(/<optgroup label=\"([\w\s\wäöüßÄÖÜ]*[^>])*">/gi,'<span value="i-opt-group-lable-i">$1</span>');
|
||||
t = t.replace(/<\/optgroup>/gi,'<span value="">---</span>');
|
||||
mb.innerHTML = t;
|
||||
//mb.innerHTML = "<div><span value='dd:ff'>gfgfg</span></div>";
|
||||
|
||||
el.select = mb.all.tags("div")[0];
|
||||
el.select.style.cssText="list-style:none;margin:0;padding:0;";
|
||||
mb.options = el.select.getElementsByTagName("span");
|
||||
|
||||
for(var i=0;i<mb.options.length;i++)
|
||||
{
|
||||
//alert('Value:'+mb.options[i].value + ', Text:'+ mb.options[i].innerHTML);
|
||||
mb.options[i].selectedIndex = i;
|
||||
mb.options[i].style.cssText = "list-style:none;margin:0;padding:1px 2px;width/**/:100%;white-space:nowrap;"
|
||||
if (mb.options[i].value != 'i-opt-group-lable-i') mb.options[i].style.cssText = mb.options[i].style.cssText + "cursor:hand;cursor:pointer;";
|
||||
mb.options[i].title =mb.options[i].innerHTML;
|
||||
mb.options[i].innerHTML ="<nobr>" + mb.options[i].innerHTML + "</nobr>";
|
||||
if (mb.options[i].value == 'i-opt-group-lable-i') mb.options[i].innerHTML = "<b><i>"+mb.options[i].innerHTML+"</b></i>";
|
||||
if (mb.options[i].value != 'i-opt-group-lable-i') mb.options[i].onmouseover = function()
|
||||
{
|
||||
if( mb.options.selected )
|
||||
{mb.options.selected.style.background="white";mb.options.selected.style.color="black";}
|
||||
mb.options.selected = this;
|
||||
this.style.background="#333366";this.style.color="white";
|
||||
}
|
||||
mb.options[i].onmouseout = function(){this.style.background="white";this.style.color="black";}
|
||||
if (mb.options[i].value != 'i-opt-group-lable-i')
|
||||
{
|
||||
mb.options[i].onmousedown = function(){selectMenu(this); }
|
||||
mb.options[i].onkeydown = function(){selectMenu(this); }
|
||||
}
|
||||
if(i == el.contentIndex)
|
||||
{
|
||||
mb.options[i].style.background="#333366";
|
||||
mb.options[i].style.color="white";
|
||||
mb.options.selected = mb.options[i];
|
||||
}
|
||||
}
|
||||
var mw = Math.max( ( el.select.offsetWidth + 22 ), el.offsetWidth + 22 );
|
||||
mw = Math.max( mw, ( mb.scrollWidth+22) );
|
||||
var mh = mb.options.length * 15 + 8 ;
|
||||
var mx = (ie5)?-3:0;
|
||||
var docW = document.documentElement.offsetWidth ;
|
||||
var sideW = docW - el.getBoundingClientRect().left ;
|
||||
if (sideW < mw)
|
||||
{
|
||||
//alert(el.getBoundingClientRect().left+' Avail: '+docW+' Mx:'+mx+' My:'+my);
|
||||
// if it does not fit into the window on the right side, move it to the left
|
||||
mx = mx -mw + sideW-5;
|
||||
}
|
||||
var my = el.offsetHeight -2;
|
||||
my=my+5;
|
||||
var docH = document.documentElement.offsetHeight ;
|
||||
var bottomH = docH - el.getBoundingClientRect().bottom ;
|
||||
mh = Math.min(mh, Math.max(( docH - el.getBoundingClientRect().top - 50),100) );
|
||||
if(( bottomH < mh) )
|
||||
{
|
||||
mh = Math.max( (bottomH - 12),10);
|
||||
if( mh <100 )
|
||||
{
|
||||
my = -100 ;
|
||||
}
|
||||
mh = Math.max(mh,100);
|
||||
}
|
||||
self.focus();
|
||||
el.menu.show( mx , my , mw, mh , el);
|
||||
sync=null;
|
||||
if(mb.options.selected)
|
||||
{
|
||||
mb.scrollTop = mb.options.selected.offsetTop;
|
||||
}
|
||||
window.onresize = function(){el.menu.hide()};
|
||||
}
|
||||
|
||||
function switchMenu()
|
||||
{
|
||||
if(event.keyCode)
|
||||
{
|
||||
if(event.keyCode==40){ el.contentIndex++ ;}
|
||||
else if(event.keyCode==38){ el.contentIndex--; }
|
||||
}
|
||||
else if(event.wheelDelta )
|
||||
{
|
||||
if (event.wheelDelta >= 120)
|
||||
el.contentIndex++ ;
|
||||
else if (event.wheelDelta <= -120)
|
||||
el.contentIndex-- ;
|
||||
}
|
||||
else{return true;}
|
||||
if( el.contentIndex > (el.contentOptions.length-1) ){ el.contentIndex =0;}
|
||||
else if (el.contentIndex<0){el.contentIndex = el.contentOptions.length-1 ;}
|
||||
var o = document.createElement("option");
|
||||
o.value = el.contentOptions[el.contentIndex].value;
|
||||
o.innerHTML = el.contentOptions[el.contentIndex].text;
|
||||
while(el.options.length>0){el.options[0].removeNode(true);}
|
||||
el.appendChild(o);
|
||||
el.title = o.innerHTML;
|
||||
}
|
||||
if(dropdown_menu_hack.menu ==null)
|
||||
{
|
||||
dropdown_menu_hack.menu = window.createPopup();
|
||||
document.attachEvent("onkeydown",dropdown_menu_hack.menu.hide);
|
||||
}
|
||||
el.menu = dropdown_menu_hack.menu ;
|
||||
el.contentOptions = new Array();
|
||||
el.contentIndex = el.selectedIndex;
|
||||
el.contentHTML = el.outerHTML;
|
||||
|
||||
for(var i=0;i<el.options.length;i++)
|
||||
{
|
||||
|
||||
el.contentOptions [el.contentOptions.length] =
|
||||
{
|
||||
"value": el.options[i].value,"text": el.options[i].innerHTML
|
||||
}
|
||||
if(!el.options[i].selected){el.options[i].removeNode(true);i--;};
|
||||
}
|
||||
el.onkeydown = switchMenu;
|
||||
el.onclick = showMenu;
|
||||
el.onmousewheel= switchMenu;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user