Mercurial > hg > soundsoftware-site
comparison public/javascripts/context_menu.js @ 1115:433d4f72a19b redmine-2.2
Update to Redmine SVN revision 11137 on 2.2-stable branch
author | Chris Cannam |
---|---|
date | Mon, 07 Jan 2013 12:01:42 +0000 |
parents | cbb26bc654de |
children | 622f24f53b42 |
comparison
equal
deleted
inserted
replaced
929:5f33065ddc4b | 1115:433d4f72a19b |
---|---|
1 /* redMine - project management software | 1 var contextMenuObserving; |
2 Copyright (C) 2006-2008 Jean-Philippe Lang */ | 2 var contextMenuUrl; |
3 | 3 |
4 var observingContextMenuClick; | 4 function contextMenuRightClick(event) { |
5 | 5 var target = $(event.target); |
6 ContextMenu = Class.create(); | 6 if (target.is('a')) {return;} |
7 ContextMenu.prototype = { | 7 var tr = target.parents('tr').first(); |
8 initialize: function (url) { | 8 if (!tr.hasClass('hascontextmenu')) {return;} |
9 this.url = url; | 9 event.preventDefault(); |
10 this.createMenu(); | 10 if (!contextMenuIsSelected(tr)) { |
11 | 11 contextMenuUnselectAll(); |
12 if (!observingContextMenuClick) { | 12 contextMenuAddSelection(tr); |
13 Event.observe(document, 'click', this.Click.bindAsEventListener(this)); | 13 contextMenuSetLastSelected(tr); |
14 Event.observe(document, 'contextmenu', this.RightClick.bindAsEventListener(this)); | 14 } |
15 observingContextMenuClick = true; | 15 contextMenuShow(event); |
16 } | 16 } |
17 | 17 |
18 this.unselectAll(); | 18 function contextMenuClick(event) { |
19 this.lastSelected = null; | 19 var target = $(event.target); |
20 }, | 20 var lastSelected; |
21 | 21 |
22 RightClick: function(e) { | 22 if (target.is('a') && target.hasClass('submenu')) { |
23 this.hideMenu(); | 23 event.preventDefault(); |
24 // do not show the context menu on links | 24 return; |
25 if (Event.element(e).tagName == 'A') { return; } | 25 } |
26 var tr = Event.findElement(e, 'tr'); | 26 contextMenuHide(); |
27 if (tr == document || tr == undefined || !tr.hasClassName('hascontextmenu')) { return; } | 27 if (target.is('a') || target.is('img')) { return; } |
28 Event.stop(e); | 28 if (event.which == 1 || (navigator.appVersion.match(/\bMSIE\b/))) { |
29 if (!this.isSelected(tr)) { | 29 var tr = target.parents('tr').first(); |
30 this.unselectAll(); | 30 if (tr.length && tr.hasClass('hascontextmenu')) { |
31 this.addSelection(tr); | 31 // a row was clicked, check if the click was on checkbox |
32 this.lastSelected = tr; | 32 if (target.is('input')) { |
33 } | 33 // a checkbox may be clicked |
34 this.showMenu(e); | 34 if (target.attr('checked')) { |
35 }, | 35 tr.addClass('context-menu-selection'); |
36 | 36 } else { |
37 Click: function(e) { | 37 tr.removeClass('context-menu-selection'); |
38 this.hideMenu(); | 38 } |
39 if (Event.element(e).tagName == 'A' || Event.element(e).tagName == 'IMG') { return; } | 39 } else { |
40 if (Event.isLeftClick(e) || (navigator.appVersion.match(/\bMSIE\b/))) { | 40 if (event.ctrlKey || event.metaKey) { |
41 var tr = Event.findElement(e, 'tr'); | 41 contextMenuToggleSelection(tr); |
42 if (tr!=null && tr!=document && tr.hasClassName('hascontextmenu')) { | 42 } else if (event.shiftKey) { |
43 // a row was clicked, check if the click was on checkbox | 43 lastSelected = contextMenuLastSelected(); |
44 var box = Event.findElement(e, 'input'); | 44 if (lastSelected.length) { |
45 if (box!=document && box!=undefined) { | 45 var toggling = false; |
46 // a checkbox may be clicked | 46 $('.hascontextmenu').each(function(){ |
47 if (box.checked) { | 47 if (toggling || $(this).is(tr)) { |
48 tr.addClassName('context-menu-selection'); | 48 contextMenuAddSelection($(this)); |
49 } | |
50 if ($(this).is(tr) || $(this).is(lastSelected)) { | |
51 toggling = !toggling; | |
52 } | |
53 }); | |
49 } else { | 54 } else { |
50 tr.removeClassName('context-menu-selection'); | 55 contextMenuAddSelection(tr); |
51 } | 56 } |
52 } else { | 57 } else { |
53 if (e.ctrlKey || e.metaKey) { | 58 contextMenuUnselectAll(); |
54 this.toggleSelection(tr); | 59 contextMenuAddSelection(tr); |
55 } else if (e.shiftKey) { | |
56 if (this.lastSelected != null) { | |
57 var toggling = false; | |
58 var rows = $$('.hascontextmenu'); | |
59 for (i=0; i<rows.length; i++) { | |
60 if (toggling || rows[i]==tr) { | |
61 this.addSelection(rows[i]); | |
62 } | |
63 if (rows[i]==tr || rows[i]==this.lastSelected) { | |
64 toggling = !toggling; | |
65 } | |
66 } | |
67 } else { | |
68 this.addSelection(tr); | |
69 } | |
70 } else { | |
71 this.unselectAll(); | |
72 this.addSelection(tr); | |
73 } | |
74 this.lastSelected = tr; | |
75 } | 60 } |
76 } else { | 61 contextMenuSetLastSelected(tr); |
77 // click is outside the rows | 62 } |
78 var t = Event.findElement(e, 'a'); | 63 } else { |
79 if (t == document || t == undefined) { | 64 // click is outside the rows |
80 this.unselectAll(); | 65 if (target.is('a') && (target.hasClass('disabled') || target.hasClass('submenu'))) { |
81 } else { | 66 event.preventDefault(); |
82 if (Element.hasClassName(t, 'disabled') || Element.hasClassName(t, 'submenu')) { | 67 } else { |
83 Event.stop(e); | 68 contextMenuUnselectAll(); |
84 } | |
85 } | |
86 } | 69 } |
87 } | 70 } |
88 }, | 71 } |
72 } | |
73 | |
74 function contextMenuCreate() { | |
75 if ($('#context-menu').length < 1) { | |
76 var menu = document.createElement("div"); | |
77 menu.setAttribute("id", "context-menu"); | |
78 menu.setAttribute("style", "display:none;"); | |
79 document.getElementById("content").appendChild(menu); | |
80 } | |
81 } | |
82 | |
83 function contextMenuShow(event) { | |
84 var mouse_x = event.pageX; | |
85 var mouse_y = event.pageY; | |
86 var render_x = mouse_x; | |
87 var render_y = mouse_y; | |
88 var dims; | |
89 var menu_width; | |
90 var menu_height; | |
91 var window_width; | |
92 var window_height; | |
93 var max_width; | |
94 var max_height; | |
95 | |
96 $('#context-menu').css('left', (render_x + 'px')); | |
97 $('#context-menu').css('top', (render_y + 'px')); | |
98 $('#context-menu').html(''); | |
99 | |
100 $.ajax({ | |
101 url: contextMenuUrl, | |
102 data: $(event.target).parents('form').first().serialize(), | |
103 success: function(data, textStatus, jqXHR) { | |
104 $('#context-menu').html(data); | |
105 menu_width = $('#context-menu').width(); | |
106 menu_height = $('#context-menu').height(); | |
107 max_width = mouse_x + 2*menu_width; | |
108 max_height = mouse_y + menu_height; | |
109 | |
110 var ws = window_size(); | |
111 window_width = ws.width; | |
112 window_height = ws.height; | |
113 | |
114 /* display the menu above and/or to the left of the click if needed */ | |
115 if (max_width > window_width) { | |
116 render_x -= menu_width; | |
117 $('#context-menu').addClass('reverse-x'); | |
118 } else { | |
119 $('#context-menu').removeClass('reverse-x'); | |
120 } | |
121 if (max_height > window_height) { | |
122 render_y -= menu_height; | |
123 $('#context-menu').addClass('reverse-y'); | |
124 } else { | |
125 $('#context-menu').removeClass('reverse-y'); | |
126 } | |
127 if (render_x <= 0) render_x = 1; | |
128 if (render_y <= 0) render_y = 1; | |
129 $('#context-menu').css('left', (render_x + 'px')); | |
130 $('#context-menu').css('top', (render_y + 'px')); | |
131 $('#context-menu').show(); | |
132 | |
133 //if (window.parseStylesheets) { window.parseStylesheets(); } // IE | |
134 | |
135 } | |
136 }); | |
137 } | |
138 | |
139 function contextMenuSetLastSelected(tr) { | |
140 $('.cm-last').removeClass('cm-last'); | |
141 tr.addClass('cm-last'); | |
142 } | |
143 | |
144 function contextMenuLastSelected() { | |
145 return $('.cm-last').first(); | |
146 } | |
147 | |
148 function contextMenuUnselectAll() { | |
149 $('.hascontextmenu').each(function(){ | |
150 contextMenuRemoveSelection($(this)); | |
151 }); | |
152 $('.cm-last').removeClass('cm-last'); | |
153 } | |
154 | |
155 function contextMenuHide() { | |
156 $('#context-menu').hide(); | |
157 } | |
158 | |
159 function contextMenuToggleSelection(tr) { | |
160 if (contextMenuIsSelected(tr)) { | |
161 contextMenuRemoveSelection(tr); | |
162 } else { | |
163 contextMenuAddSelection(tr); | |
164 } | |
165 } | |
166 | |
167 function contextMenuAddSelection(tr) { | |
168 tr.addClass('context-menu-selection'); | |
169 contextMenuCheckSelectionBox(tr, true); | |
170 contextMenuClearDocumentSelection(); | |
171 } | |
172 | |
173 function contextMenuRemoveSelection(tr) { | |
174 tr.removeClass('context-menu-selection'); | |
175 contextMenuCheckSelectionBox(tr, false); | |
176 } | |
177 | |
178 function contextMenuIsSelected(tr) { | |
179 return tr.hasClass('context-menu-selection'); | |
180 } | |
181 | |
182 function contextMenuCheckSelectionBox(tr, checked) { | |
183 tr.find('input[type=checkbox]').attr('checked', checked); | |
184 } | |
185 | |
186 function contextMenuClearDocumentSelection() { | |
187 // TODO | |
188 if (document.selection) { | |
189 document.selection.clear(); // IE | |
190 } else { | |
191 window.getSelection().removeAllRanges(); | |
192 } | |
193 } | |
194 | |
195 function contextMenuInit(url) { | |
196 contextMenuUrl = url; | |
197 contextMenuCreate(); | |
198 contextMenuUnselectAll(); | |
89 | 199 |
90 createMenu: function() { | 200 if (!contextMenuObserving) { |
91 if (!$('context-menu')) { | 201 $(document).click(contextMenuClick); |
92 var menu = document.createElement("div"); | 202 $(document).contextmenu(contextMenuRightClick); |
93 menu.setAttribute("id", "context-menu"); | 203 contextMenuObserving = true; |
94 menu.setAttribute("style", "display:none;"); | 204 } |
95 document.getElementById("content").appendChild(menu); | 205 } |
206 | |
207 function toggleIssuesSelection(el) { | |
208 var boxes = $(el).parents('form').find('input[type=checkbox]'); | |
209 var all_checked = true; | |
210 boxes.each(function(){ if (!$(this).attr('checked')) { all_checked = false; } }); | |
211 boxes.each(function(){ | |
212 if (all_checked) { | |
213 $(this).removeAttr('checked'); | |
214 $(this).parents('tr').removeClass('context-menu-selection'); | |
215 } else if (!$(this).attr('checked')) { | |
216 $(this).attr('checked', true); | |
217 $(this).parents('tr').addClass('context-menu-selection'); | |
96 } | 218 } |
97 }, | 219 }); |
98 | |
99 showMenu: function(e) { | |
100 var mouse_x = Event.pointerX(e); | |
101 var mouse_y = Event.pointerY(e); | |
102 var render_x = mouse_x; | |
103 var render_y = mouse_y; | |
104 var dims; | |
105 var menu_width; | |
106 var menu_height; | |
107 var window_width; | |
108 var window_height; | |
109 var max_width; | |
110 var max_height; | |
111 | |
112 $('context-menu').style['left'] = (render_x + 'px'); | |
113 $('context-menu').style['top'] = (render_y + 'px'); | |
114 Element.update('context-menu', ''); | |
115 | |
116 new Ajax.Updater({success:'context-menu'}, this.url, | |
117 {asynchronous:true, | |
118 method: 'get', | |
119 evalScripts:true, | |
120 parameters:Form.serialize(Event.findElement(e, 'form')), | |
121 onComplete:function(request){ | |
122 dims = $('context-menu').getDimensions(); | |
123 menu_width = dims.width; | |
124 menu_height = dims.height; | |
125 max_width = mouse_x + 2*menu_width; | |
126 max_height = mouse_y + menu_height; | |
127 | |
128 var ws = window_size(); | |
129 window_width = ws.width; | |
130 window_height = ws.height; | |
131 | |
132 /* display the menu above and/or to the left of the click if needed */ | |
133 if (max_width > window_width) { | |
134 render_x -= menu_width; | |
135 $('context-menu').addClassName('reverse-x'); | |
136 } else { | |
137 $('context-menu').removeClassName('reverse-x'); | |
138 } | |
139 if (max_height > window_height) { | |
140 render_y -= menu_height; | |
141 $('context-menu').addClassName('reverse-y'); | |
142 } else { | |
143 $('context-menu').removeClassName('reverse-y'); | |
144 } | |
145 if (render_x <= 0) render_x = 1; | |
146 if (render_y <= 0) render_y = 1; | |
147 $('context-menu').style['left'] = (render_x + 'px'); | |
148 $('context-menu').style['top'] = (render_y + 'px'); | |
149 | |
150 Effect.Appear('context-menu', {duration: 0.20}); | |
151 if (window.parseStylesheets) { window.parseStylesheets(); } // IE | |
152 }}) | |
153 }, | |
154 | |
155 hideMenu: function() { | |
156 Element.hide('context-menu'); | |
157 }, | |
158 | |
159 addSelection: function(tr) { | |
160 tr.addClassName('context-menu-selection'); | |
161 this.checkSelectionBox(tr, true); | |
162 this.clearDocumentSelection(); | |
163 }, | |
164 | |
165 toggleSelection: function(tr) { | |
166 if (this.isSelected(tr)) { | |
167 this.removeSelection(tr); | |
168 } else { | |
169 this.addSelection(tr); | |
170 } | |
171 }, | |
172 | |
173 removeSelection: function(tr) { | |
174 tr.removeClassName('context-menu-selection'); | |
175 this.checkSelectionBox(tr, false); | |
176 }, | |
177 | |
178 unselectAll: function() { | |
179 var rows = $$('.hascontextmenu'); | |
180 for (i=0; i<rows.length; i++) { | |
181 this.removeSelection(rows[i]); | |
182 } | |
183 }, | |
184 | |
185 checkSelectionBox: function(tr, checked) { | |
186 var inputs = Element.getElementsBySelector(tr, 'input'); | |
187 if (inputs.length > 0) { inputs[0].checked = checked; } | |
188 }, | |
189 | |
190 isSelected: function(tr) { | |
191 return Element.hasClassName(tr, 'context-menu-selection'); | |
192 }, | |
193 | |
194 clearDocumentSelection: function() { | |
195 if (document.selection) { | |
196 document.selection.clear(); // IE | |
197 } else { | |
198 window.getSelection().removeAllRanges(); | |
199 } | |
200 } | |
201 } | |
202 | |
203 function toggleIssuesSelection(el) { | |
204 var boxes = el.getElementsBySelector('input[type=checkbox]'); | |
205 var all_checked = true; | |
206 for (i = 0; i < boxes.length; i++) { if (boxes[i].checked == false) { all_checked = false; } } | |
207 for (i = 0; i < boxes.length; i++) { | |
208 if (all_checked) { | |
209 boxes[i].checked = false; | |
210 boxes[i].up('tr').removeClassName('context-menu-selection'); | |
211 } else if (boxes[i].checked == false) { | |
212 boxes[i].checked = true; | |
213 boxes[i].up('tr').addClassName('context-menu-selection'); | |
214 } | |
215 } | |
216 } | 220 } |
217 | 221 |
218 function window_size() { | 222 function window_size() { |
219 var w; | 223 var w; |
220 var h; | 224 var h; |
221 if (window.innerWidth) { | 225 if (window.innerWidth) { |
222 w = window.innerWidth; | 226 w = window.innerWidth; |
223 h = window.innerHeight; | 227 h = window.innerHeight; |
224 } else if (document.documentElement) { | 228 } else if (document.documentElement) { |
225 w = document.documentElement.clientWidth; | 229 w = document.documentElement.clientWidth; |
226 h = document.documentElement.clientHeight; | 230 h = document.documentElement.clientHeight; |
227 } else { | 231 } else { |
228 w = document.body.clientWidth; | 232 w = document.body.clientWidth; |
229 h = document.body.clientHeight; | 233 h = document.body.clientHeight; |
230 } | 234 } |
231 return {width: w, height: h}; | 235 return {width: w, height: h}; |
232 } | 236 } |