Mercurial Hosting > nabble
comparison 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 |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:7ecd1a4ef557 |
---|---|
1 // based on http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/demo.php | |
2 | |
3 | |
4 function dropdown_menu_hack(el) | |
5 { | |
6 if( navigator.appName.indexOf("Microsoft") == -1 ) | |
7 return; | |
8 if(el.runtimeStyle.behavior.toLowerCase() != "none"){ | |
9 el.runtimeStyle.behavior="none"; | |
10 | |
11 el.ondblclick = function(e) | |
12 { | |
13 window.event.returnValue = false; | |
14 return false; | |
15 } | |
16 | |
17 | |
18 function showMenu() | |
19 { | |
20 | |
21 function selectMenu(obj) { | |
22 el.contentIndex = obj.selectedIndex; | |
23 el.selectedIndex = el.contentIndex; | |
24 el.menu.hide(); | |
25 el.onchange(); | |
26 } | |
27 | |
28 | |
29 el.menu.show(0 , el.offsetHeight, 10, 10, el); | |
30 var mb = el.menu.document.body; | |
31 | |
32 // 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;"; | |
33 // 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;"; | |
34 mb.style.border = "solid 1px black"; | |
35 mb.style.overflowY = "auto"; | |
36 mb.style.margin = "0"; | |
37 mb.style.padding = "0"; | |
38 mb.style.fontSize = "8pt"; | |
39 mb.style.fontFamily = "tahoma,geneva,helvetica,arial,sans-serif"; | |
40 var t = el.contentHTML; | |
41 t = t.replace(/<select/gi,'<ul'); | |
42 t = t.replace(/<option/gi,'<li'); | |
43 t = t.replace(/<\/option/gi,'</li'); | |
44 t = t.replace(/<\/select/gi,'</ul'); | |
45 t = t.replace(/> /gi,'> '); | |
46 mb.innerHTML = t; | |
47 | |
48 el.select = mb.all.tags("ul")[0]; | |
49 el.select.style.cssText="list-style:none;margin:0;padding:0;"; | |
50 mb.options = el.select.getElementsByTagName("li"); | |
51 | |
52 for(var i=0;i<mb.options.length;i++) | |
53 { | |
54 mb.options[i].selectedIndex = i; | |
55 mb.options[i].style.cssText = "list-style:none;margin:0;padding:1px 2px;width:100%;cursor:hand;cursor:pointer;white-space:nowrap;" | |
56 mb.options[i].title = mb.options[i].innerHTML; | |
57 mb.options[i].innerHTML = "<nobr>" + mb.options[i].innerHTML + "</nobr>"; | |
58 | |
59 mb.options[i].onmouseover = function() | |
60 { | |
61 if( mb.options.selected ){mb.options.selected.style.background="white";mb.options.selected.style.color="black";} | |
62 mb.options.selected = this; | |
63 this.style.background = "#316ac5"; | |
64 this.style.color = "white"; | |
65 } | |
66 | |
67 mb.options[i].onmouseout = function(){ | |
68 this.style.background="white";this.style.color="black"; | |
69 } | |
70 | |
71 mb.options[i].onmousedown = function(){selectMenu(this);} | |
72 mb.options[i].onkeydown = function(){selectMenu(this);} | |
73 | |
74 | |
75 if(i == el.contentIndex) | |
76 { | |
77 mb.options[i].style.background = "#316ac5"; | |
78 mb.options[i].style.color = "white"; | |
79 mb.options.selected = mb.options[i]; | |
80 } | |
81 } | |
82 | |
83 // var mwPadding = 22; | |
84 var mwPadding = 4; | |
85 var mw = Math.max( ( el.select.offsetWidth + mwPadding ), el.offsetWidth + mwPadding ); | |
86 mw = Math.max( mw, ( mb.scrollWidth+mwPadding) ); | |
87 // var mh = mb.options.length * 15 + 8 ; | |
88 var mh = mb.options.length * 15 + 2 ; | |
89 | |
90 var mx = 0; | |
91 var my = el.offsetHeight - 2; | |
92 var docH = document.documentElement.offsetHeight ; | |
93 var bottomH = docH - el.getBoundingClientRect().bottom ; | |
94 | |
95 mh = Math.min(mh, Math.max(( docH - el.getBoundingClientRect().top - 50),100) ); | |
96 | |
97 if( bottomH < mh ) | |
98 { | |
99 | |
100 mh = Math.max( (bottomH - 12),10); | |
101 if( mh <100 ) | |
102 { | |
103 my = -100 ; | |
104 | |
105 } | |
106 mh = Math.max(mh,100); | |
107 } | |
108 | |
109 | |
110 self.focus(); | |
111 | |
112 el.menu.show( mx, my+2, mw, mh , el); | |
113 // sync = null; | |
114 if(mb.options.selected) | |
115 { | |
116 mb.scrollTop = mb.options.selected.offsetTop; | |
117 } | |
118 | |
119 window.onresize = function(){el.menu.hide()}; | |
120 } | |
121 | |
122 if(dropdown_menu_hack.menu ==null) | |
123 { | |
124 dropdown_menu_hack.menu = window.createPopup(); | |
125 document.attachEvent("onkeydown",dropdown_menu_hack.menu.hide); | |
126 } | |
127 el.menu = dropdown_menu_hack.menu ; | |
128 el.onclick = showMenu; | |
129 } | |
130 el.contentOptions = new Array(); | |
131 el.contentIndex = el.selectedIndex; | |
132 el.contentHTML = el.outerHTML; | |
133 | |
134 for(var i=0;i<el.options.length;i++) | |
135 { | |
136 el.contentOptions [el.contentOptions.length] = | |
137 { | |
138 "value": el.options[i].value, | |
139 "text": el.options[i].innerHTML | |
140 } | |
141 | |
142 // if(!el.options[i].selected){el.options[i].removeNode(true);i--;}; | |
143 } | |
144 } |