Mercurial Hosting > nabble

comparison src/nabble/view/web/util/nabbledropdown-2.4.1.js @ 0:7ecd1a4ef557

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 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">&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
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 };