http://s1.nabble.com/util/nabbledropdown-2.4.1.js

1var dropdownItems = [];
2var $visibleSubmenu = null;
3var INTERVAL = null;
4
5var itemColor;
6function getItemColor() {
7	if (!itemColor)
8		itemColor = $('span.dropdown-item').css('color');
9	return itemColor;
10};
11
12function 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
22function dropdownUpdateLink(columnId) {
23	var row = $('#'+columnId).parent().get();
24	_update(row);
25};
26
27function _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
48function dropdownCleanup(id) {
49	$('#'+id).unbind().removeAttr('init');
50};
51
52function 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
85function dropdownInit(id) {
86	var $drop = $('#'+id);
87	$drop.unbind().click(dropdownClick);
88};
89
90function 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
187function 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
197NabbleDropdown.prototype.customButton = function(element) {
198	this.element = element;
199};
200
201NabbleDropdown.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
214NabbleDropdown.prototype.addSeparator = function() {
215	this.options.push('separator');
216};

217
218NabbleDropdown.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
224NabbleDropdown.prototype.endGroup = function() {
225	this.currentGroup = null;
226};
227
228NabbleDropdown.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
233NabbleDropdown.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">&nbsp;</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
272NabbleDropdown.prototype.build = function(elemId) {
273	$('#'+elemId).html(this.getHtml());
274	dropdownInit(this.id);
275};
276
277NabbleDropdown.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
290NabbleDropdown.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
306NabbleDropdown.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
319NabbleDropdown.hide = function(id) {
320	var e = document.getElementById(id);
321	e.style.display = 'none';
322	NabbleDropdown.showSeparators(e);
323};
324
325NabbleDropdown.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
348NabbleDropdown.addContents = function(id,contents) {
349	var $row = $('#'+id);
350	$row.html('<td>'+contents+'</td>').show();
351	_update($row.get(),false);
352};
353
354NabbleDropdown.replaceContents = function(id,contents) {
355	$('#'+id).html('<td class="dropdown-simple-row">'+contents+'</td>');
356};