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 }