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