view src/nabble/view/web/util/dropdown_menu_hack.js @ 0:7ecd1a4ef557

add content
author Franklin Schmidt <fschmidt@gmail.com>
date Thu, 21 Mar 2019 19:15:52 -0600
parents
children
line wrap: on
line source

// based on http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/demo.php


function dropdown_menu_hack(el)
{
	if( navigator.appName.indexOf("Microsoft") == -1 )
		return;
	if(el.runtimeStyle.behavior.toLowerCase() != "none"){
		el.runtimeStyle.behavior="none";
	
		el.ondblclick = function(e)
		{
			window.event.returnValue = false;
			return false;
		}
		
	
		function showMenu()
		{
			
			function selectMenu(obj) {
				el.contentIndex = obj.selectedIndex;
				el.selectedIndex = el.contentIndex;
				el.menu.hide();
				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;text-aligbn:center;font-family:Verdana;font-size:12px;";
//			mb.style.cssText ="border:solid 1px black;margin:0;padding:0;overflow-y:auto;overflow-x:auto;background:white;font-family:tahoma,geneva,helvetica,arial,sans-serif;font-size:10pt;";
			mb.style.border = "solid 1px black";
			mb.style.overflowY = "auto";
			mb.style.margin = "0";
			mb.style.padding = "0";
			mb.style.fontSize = "8pt";
			mb.style.fontFamily = "tahoma,geneva,helvetica,arial,sans-serif";
			var t = el.contentHTML;
			t = t.replace(/<select/gi,'<ul');
			t = t.replace(/<option/gi,'<li');
			t = t.replace(/<\/option/gi,'</li');
			t = t.replace(/<\/select/gi,'</ul');
			t = t.replace(/>  /gi,'>&nbsp;&nbsp;');
			mb.innerHTML = t;
			
			el.select = mb.all.tags("ul")[0];
			el.select.style.cssText="list-style:none;margin:0;padding:0;";
			mb.options = el.select.getElementsByTagName("li");
			
			for(var i=0;i<mb.options.length;i++)
			{
				mb.options[i].selectedIndex = i;
				mb.options[i].style.cssText = "list-style:none;margin:0;padding:1px 2px;width:100%;cursor:hand;cursor:pointer;white-space:nowrap;"
				mb.options[i].title = mb.options[i].innerHTML;
				mb.options[i].innerHTML = "<nobr>" + mb.options[i].innerHTML + "</nobr>";

				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 = "#316ac5";
						this.style.color = "white";
					}

				mb.options[i].onmouseout = function(){
					this.style.background="white";this.style.color="black";
				}

				mb.options[i].onmousedown = function(){selectMenu(this);}
				mb.options[i].onkeydown = function(){selectMenu(this);}
					
	
				if(i == el.contentIndex)
				{
					mb.options[i].style.background = "#316ac5";
					mb.options[i].style.color = "white";	
					mb.options.selected = mb.options[i];
				}
			}
		
//			var mwPadding = 22;	
			var mwPadding = 4;
			var mw = Math.max(   ( el.select.offsetWidth + mwPadding ), el.offsetWidth + mwPadding  );
			mw = Math.max(  mw, ( mb.scrollWidth+mwPadding) );
//			var mh =  mb.options.length * 15  + 8 ;
			var mh =  mb.options.length * 15  + 2 ;
				 
			var mx = 0;
			var my = el.offsetHeight - 2;
			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+2,  mw, mh , el); 
//			sync = null;
			if(mb.options.selected)
			{
				mb.scrollTop = mb.options.selected.offsetTop;
			}
			
			window.onresize = function(){el.menu.hide()};		
		}

		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.onclick = showMenu;
	}
	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--;};
	}
}