|
0
|
1 var dropdownItems = [];
|
|
|
2 var $visibleSubmenu = null;
|
|
|
3 var INTERVAL = null;
|
|
|
4
|
|
|
5 var itemColor;
|
|
|
6 function getItemColor() {
|
|
|
7 if (!itemColor)
|
|
|
8 itemColor = $('span.dropdown-item').css('color');
|
|
|
9 return itemColor;
|
|
|
10 };
|
|
|
11
|
|
|
12 function closeDropdowns() {
|
|
|
13 for (var i = 0; i < dropdownItems.length; i++) {
|
|
|
14 var span = $('#'+dropdownItems[i]);
|
|
|
15 $('table,ul', span).fadeOut("fast");
|
|
|
16 }
|
|
|
17 $('ul.dropdown-submenu').fadeOut("fast");
|
|
|
18 clearTimeout(INTERVAL);
|
|
|
19 $visibleSubmenu = null;
|
|
|
20 };
|
|
|
21
|
|
|
22 function dropdownUpdateLink(columnId) {
|
|
|
23 var row = $('#'+columnId).parent().get();
|
|
|
24 _update(row);
|
|
|
25 };
|
|
|
26
|
|
|
27 function _update(row, checkdone) {
|
|
|
28 var $row = $(row);
|
|
|
29 if ($row.attr('done') && checkdone)
|
|
|
30 return;
|
|
|
31 var submenu = $row.attr('submenu')? '<img class="submenu" src="/images/submenu.gif" width=8 height=13 style="float:right;margin-top:.3em"/>':null;
|
|
|
32
|
|
|
33 var $link = $('a', row);
|
|
|
34 $link.wrapInner('<span class="dropdown-item"></span>');
|
|
|
35 if ($link && !$link.attr('ignore')) {
|
|
|
36 if (submenu) {
|
|
|
37 $link.css({display:'block',marginRight:'1em'}).parent().prepend(submenu);
|
|
|
38 } else {
|
|
|
39 $link
|
|
|
40 .css('width', '100%')
|
|
|
41 .css('display','block')
|
|
|
42 .css('color', getItemColor());
|
|
|
43 }
|
|
|
44 }
|
|
|
45 $row.attr('done','y');
|
|
|
46 };
|
|
|
47
|
|
|
48 function dropdownCleanup(id) {
|
|
|
49 $('#'+id).unbind().removeAttr('init');
|
|
|
50 };
|
|
|
51
|
|
|
52 function dropdownClick(o) {
|
|
|
53 var $this = $(this);
|
|
|
54 var id = $this.attr('id');
|
|
|
55 if (!$this.attr('init')) {
|
|
|
56 firstTime(id);
|
|
|
57 $this.attr('init', '1');
|
|
|
58 }
|
|
|
59 var submenu = $(o.target).parents('tr').attr('submenu');
|
|
|
60 if (submenu) {
|
|
|
61 o.stopPropagation();
|
|
|
62 return;
|
|
|
63 }
|
|
|
64 var $t = $('table', this);
|
|
|
65 closeDropdowns();
|
|
|
66 if (!$t.is(':visible')) {
|
|
|
67 var $link = $t.siblings().first();
|
|
|
68 var off = $link.offset();
|
|
|
69 var w = $(window).width();
|
|
|
70 var left = off.left;
|
|
|
71 var top = off.top + $link.outerHeight();
|
|
|
72 if (left + $t.outerWidth() > w) {
|
|
|
73 left = w - $t.outerWidth() - 10;
|
|
|
74 }
|
|
|
75 $t.css({ left: left, top: top});
|
|
|
76 $t.show(function() {
|
|
|
77 if (left + $t.outerWidth() > w) {
|
|
|
78 left = w - $t.outerWidth() - 10;
|
|
|
79 $t.css('left', left);
|
|
|
80 }
|
|
|
81 });
|
|
|
82 }
|
|
|
83 };
|
|
|
84
|
|
|
85 function dropdownInit(id) {
|
|
|
86 var $drop = $('#'+id);
|
|
|
87 $drop.unbind().click(dropdownClick);
|
|
|
88 };
|
|
|
89
|
|
|
90 function firstTime(id) {
|
|
|
91 var $drop = $('#'+id);
|
|
|
92 dropdownItems.push(id);
|
|
|
93 var $t = $('table', $drop);
|
|
|
94 var colorNormal = null;
|
|
|
95 var colorSelected = null;
|
|
|
96
|
|
|
97 var $tr = $('tr', $drop);
|
|
|
98 $tr.each(function() {
|
|
|
99 if ($(this).hasClass('dropdown-separator'))
|
|
|
100 return;
|
|
|
101 _update(this);
|
|
|
102 var $row = $(this);
|
|
|
103
|
|
|
104 var submenuId = $(this).attr('submenu');
|
|
|
105 var $submenu = submenuId? $('#'+submenuId) : null;
|
|
|
106
|
|
|
107 if ($submenu) {
|
|
|
108 $('a', $submenu)
|
|
|
109 .css('display','block')
|
|
|
110 .css('width', '100%')
|
|
|
111 .css('color', getItemColor())
|
|
|
112 .wrapInner('<span class="dropdown-item"/>');
|
|
|
113
|
|
|
114 $('li',$submenu).hover(
|
|
|
115 function(e) {
|
|
|
116 if (colorSelected) $(this).css('background-color',colorSelected);
|
|
|
117 clearTimeout(INTERVAL);
|
|
|
118 e.stopPropagation();
|
|
|
119 },
|
|
|
120 function(e) {
|
|
|
121 if (colorNormal) $(this).css('background-color',colorNormal);
|
|
|
122 e.stopPropagation();
|
|
|
123 }
|
|
|
124 );
|
|
|
125 }
|
|
|
126
|
|
|
127 function handleSubmenu() {
|
|
|
128 clearTimeout(INTERVAL);
|
|
|
129 if ($submenu)
|
|
|
130 INTERVAL = setTimeout(openSubmenu, 400);
|
|
|
131 else
|
|
|
132 INTERVAL = setTimeout(closeSubmenu, 600);
|
|
|
133 };
|
|
|
134
|
|
|
135 function openSubmenu() {
|
|
|
136 if ($visibleSubmenu == $submenu)
|
|
|
137 return;
|
|
|
138 closeSubmenu();
|
|
|
139 $submenu.css('background-color',$t.css('background-color'));
|
|
|
140 var rh = $row.outerHeight();
|
|
|
141 rh = rh % 2 == 0? rh : rh-1;
|
|
|
142 var top = $row.offset().top - rh/2;
|
|
|
143 var left = $t.offset().left + $t.outerWidth();
|
|
|
144 if ($submenu.outerWidth() + left > $(window).width() - 20) {
|
|
|
145 left = $t.offset().left - $submenu.outerWidth();
|
|
|
146 left = left < 0? 0 : left;
|
|
|
147 }
|
|
|
148 $submenu.css({top:top,left:left});
|
|
|
149 $submenu.fadeIn('fast');
|
|
|
150 $visibleSubmenu = $submenu;
|
|
|
151 };
|
|
|
152
|
|
|
153 function closeSubmenu() {
|
|
|
154 if ($visibleSubmenu)
|
|
|
155 $visibleSubmenu.fadeOut();
|
|
|
156 $visibleSubmenu = null;
|
|
|
157 };
|
|
|
158
|
|
|
159 $(this).hover(
|
|
|
160 function(e) {
|
|
|
161 $(this).addClass('dark-bg-color');
|
|
|
162 if (!colorSelected) colorSelected = $(this).css('background-color');
|
|
|
163 handleSubmenu();
|
|
|
164 e.stopPropagation();
|
|
|
165 },
|
|
|
166 function(e) {
|
|
|
167 $(this).removeClass('dark-bg-color');
|
|
|
168 if (!colorNormal) colorNormal = $(this).css('background-color');
|
|
|
169 e.stopPropagation();
|
|
|
170 }
|
|
|
171 );
|
|
|
172 });
|
|
|
173 NabbleDropdown.showSeparators($tr.get(0));
|
|
|
174 };
|
|
|
175
|
|
|
176 $(document).ready(function() {
|
|
|
177 $(document).click(function(o){
|
|
|
178 var $tg = $(o.target);
|
|
|
179 var parents = $tg.parents('.dropdown');
|
|
|
180 if (parents.size() == 0 && !$tg.hasClass('dropdown'))
|
|
|
181 closeDropdowns();
|
|
|
182 });
|
|
|
183 });
|
|
|
184
|
|
|
185 /* Dropdown builder */
|
|
|
186
|
|
|
187 function NabbleDropdown(id,linkText,linkTitle) {
|
|
|
188 this.id = id;
|
|
|
189 this.text = linkText;
|
|
|
190 this.title = linkTitle;
|
|
|
191 this.options = [];
|
|
|
192 this.submenus= [];
|
|
|
193 this.groupCounter = 0;
|
|
|
194 this.built = false;
|
|
|
195 };
|
|
|
196
|
|
|
197 NabbleDropdown.prototype.customButton = function(element) {
|
|
|
198 this.element = element;
|
|
|
199 };
|
|
|
200
|
|
|
201 NabbleDropdown.prototype.add = function(id,contents,style) {
|
|
|
202 var o = {id:id,contents:contents,style:style};
|
|
|
203 if (this.currentGroup) {
|
|
|
204 var lastGroup = this.submenus.length == 0? null : this.submenus[this.submenus.length-1];
|
|
|
205 if (lastGroup == null || lastGroup.id != this.currentGroup) {
|
|
|
206 lastGroup = {id:this.currentGroup, options: []};
|
|
|
207 this.submenus.push(lastGroup);
|
|
|
208 }
|
|
|
209 lastGroup.options.push(o);
|
|
|
210 } else
|
|
|
211 this.options.push(o);
|
|
|
212 };
|
|
|
213
|
|
|
214 NabbleDropdown.prototype.addSeparator = function() {
|
|
|
215 this.options.push('separator');
|
|
|
216 };
|
|
|
217
|
|
|
218 NabbleDropdown.prototype.startGroup = function(text) {
|
|
|
219 this.currentGroup = 'sm'+this.groupCounter;
|
|
|
220 this.options.push({id:this.currentGroup+'-id',contents:"<a href=\"javascript:void(0)\">"+text+"</a>",style:"display:none",submenu:this.currentGroup});
|
|
|
221 this.groupCounter++;
|
|
|
222 };
|
|
|
223
|
|
|
224 NabbleDropdown.prototype.endGroup = function() {
|
|
|
225 this.currentGroup = null;
|
|
|
226 };
|
|
|
227
|
|
|
228 NabbleDropdown.prototype.addCustomSubmenu = function(text, boxId) {
|
|
|
229 this.options.push({id:boxId+'-id',contents:"<a href=\"javascript:void(0)\">"+text+"</a>",submenu:boxId});
|
|
|
230 this.currentGroup = null;
|
|
|
231 };
|
|
|
232
|
|
|
233 NabbleDropdown.prototype.getHtml = function() {
|
|
|
234 var html = '<span id="'+this.id+'" class="dropdown">';
|
|
|
235 if (this.element)
|
|
|
236 html += this.element;
|
|
|
237 else {
|
|
|
238 html += '<a href="javascript:void(0)"' + (this.title?' title="'+this.title+'"':'') + '>'+this.text+'</a> ';
|
|
|
239 html += '<img src="/images/more.png" width="10" height="10"/>';
|
|
|
240 }
|
|
|
241 html += '<table class="light-bg-color medium-border-color drop-shadow" style="margin-top:1px;">';
|
|
|
242 html += '<tr id="_loading' +this.id+'" style="display:none"><td class="dropdown-simple-row"><span id="_loadingSpan'+this.id+'">Loading...</span></td></tr>';
|
|
|
243 for (var i=0; i<this.options.length;i++) {
|
|
|
244 var x = this.options[i];
|
|
|
245 if (x == 'separator') {
|
|
|
246 html += '<tr class="dropdown-separator"><td class="action-separator medium-border-color"> </td></tr>';
|
|
|
247 } else {
|
|
|
248 html += '<tr';
|
|
|
249 if (x.id) html += ' id="'+x.id+'"';
|
|
|
250 if (x.style) html += ' style="'+x.style+'"';
|
|
|
251 if (x.submenu) html += ' submenu="'+x.submenu+'"';
|
|
|
252 html += '><td style="border:none">'+x.contents+'</td></tr>';
|
|
|
253 }
|
|
|
254 }
|
|
|
255 html += '</table>';
|
|
|
256 for (var i=0;i<this.submenus.length;i++) {
|
|
|
257 var x = this.submenus[i];
|
|
|
258 html += '<ul id="'+x.id+'" class="light-bg-color medium-border-color drop-shadow">';
|
|
|
259 for (var j=0;j<x.options.length;j++) {
|
|
|
260 var y = x.options[j];
|
|
|
261 html += '<li';
|
|
|
262 if (y.id) html += ' id="'+y.id+'"';
|
|
|
263 if (y.style) html += ' style="'+y.style+'"';
|
|
|
264 html += '>'+y.contents+'</li>';
|
|
|
265 }
|
|
|
266 html += '</ul>';
|
|
|
267 }
|
|
|
268 html += '</span>';
|
|
|
269 return html;
|
|
|
270 };
|
|
|
271
|
|
|
272 NabbleDropdown.prototype.build = function(elemId) {
|
|
|
273 $('#'+elemId).html(this.getHtml());
|
|
|
274 dropdownInit(this.id);
|
|
|
275 };
|
|
|
276
|
|
|
277 NabbleDropdown.prototype.loadingAnimation = function(id,action) {
|
|
|
278 var $span = $('#_loadingSpan'+id);
|
|
|
279 if (action == 'start') {
|
|
|
280 NabbleDropdown.show('_loading'+id);
|
|
|
281 function loading1() { $span.fadeTo(300,0.3,loading2); };
|
|
|
282 function loading2() { $span.fadeTo(300,1,loading1); };
|
|
|
283 loading1();
|
|
|
284 } else {
|
|
|
285 NabbleDropdown.hide('_loading'+id);
|
|
|
286 $span.stop();
|
|
|
287 }
|
|
|
288 };
|
|
|
289
|
|
|
290 NabbleDropdown.prototype.loadOnClick = function(scriptUrl) {
|
|
|
291 var _this = this;
|
|
|
292 var id = this.id;
|
|
|
293 var hasRequested = false;
|
|
|
294 var $drop = $('#'+this.id);
|
|
|
295 $drop.mouseover(function() {
|
|
|
296 if (!hasRequested) {
|
|
|
297 hasRequested = true;
|
|
|
298 _this.loadingAnimation(id, 'start');
|
|
|
299 $.getScript(scriptUrl, function() {
|
|
|
300 _this.loadingAnimation(id, 'stop');
|
|
|
301 });
|
|
|
302 }
|
|
|
303 });
|
|
|
304 };
|
|
|
305
|
|
|
306 NabbleDropdown.show = function(id) {
|
|
|
307 var e = document.getElementById(id);
|
|
|
308 if (e.nodeName == 'LI') {
|
|
|
309 e.style.display = 'list-item';
|
|
|
310 var p = document.getElementById(e.parentNode['id']+'-id');
|
|
|
311 p.style.display = $.browser.msie?'block':'table-row';
|
|
|
312 NabbleDropdown.showSeparators(p);
|
|
|
313 } else {
|
|
|
314 e.style.display = $.browser.msie?'block':'table-row';
|
|
|
315 NabbleDropdown.showSeparators(e);
|
|
|
316 }
|
|
|
317 };
|
|
|
318
|
|
|
319 NabbleDropdown.hide = function(id) {
|
|
|
320 var e = document.getElementById(id);
|
|
|
321 e.style.display = 'none';
|
|
|
322 NabbleDropdown.showSeparators(e);
|
|
|
323 };
|
|
|
324
|
|
|
325 NabbleDropdown.showSeparators = function(e) {
|
|
|
326 while (e.previousSibling)
|
|
|
327 e = e.previousSibling;
|
|
|
328 var separators = [];
|
|
|
329 while (e) {
|
|
|
330 if (e.nodeName != 'TR') return;
|
|
|
331 if (e.className == 'dropdown-separator')
|
|
|
332 separators.push(e);
|
|
|
333 else if (e.style.display != 'none')
|
|
|
334 separators.push('X');
|
|
|
335 e = e.nextSibling;
|
|
|
336 }
|
|
|
337 for (var i=0; i<separators.length;i++) {
|
|
|
338 if (typeof separators[i] != 'string') {
|
|
|
339 var prev = i > 0 && separators[i-1] == 'X';
|
|
|
340 var next = i < separators.length-1 && separators[i+1] == 'X';
|
|
|
341 if (next && prev) {
|
|
|
342 separators[i].style.display = $.browser.msie?'block':'table-row';
|
|
|
343 }
|
|
|
344 }
|
|
|
345 }
|
|
|
346 };
|
|
|
347
|
|
|
348 NabbleDropdown.addContents = function(id,contents) {
|
|
|
349 var $row = $('#'+id);
|
|
|
350 $row.html('<td>'+contents+'</td>').show();
|
|
|
351 _update($row.get(),false);
|
|
|
352 };
|
|
|
353
|
|
|
354 NabbleDropdown.replaceContents = function(id,contents) {
|
|
|
355 $('#'+id).html('<td class="dropdown-simple-row">'+contents+'</td>');
|
|
|
356 }; |
