##// END OF EJS Templates
jro_apps » redmine
RSS
Issue percentage selector extends screen border (#22059)....
Jean-Philippe Lang -
r14967:ab34455cdd56
parent child
Show More
Side by Side Unified
Context file:
r14967:ab34455cdd56 Loading diff...:
Show file before | Show file after | Hide comments
@@ -1,237 +1,247
1 1 /* Redmine - project management software
2 2 Copyright (C) 2006-2016 Jean-Philippe Lang */
3 3
4 4 var contextMenuObserving;
5 5 var contextMenuUrl;
6 6
7 7 function contextMenuRightClick(event) {
8 8 var target = $(event.target);
9 9 if (target.is('a')) {return;}
10 10 var tr = target.parents('tr').first();
11 11 if (!tr.hasClass('hascontextmenu')) {return;}
12 12 event.preventDefault();
13 13 if (!contextMenuIsSelected(tr)) {
14 14 contextMenuUnselectAll();
15 15 contextMenuAddSelection(tr);
16 16 contextMenuSetLastSelected(tr);
17 17 }
18 18 contextMenuShow(event);
19 19 }
20 20
21 21 function contextMenuClick(event) {
22 22 var target = $(event.target);
23 23 var lastSelected;
24 24
25 25 if (target.is('a') && target.hasClass('submenu')) {
26 26 event.preventDefault();
27 27 return;
28 28 }
29 29 contextMenuHide();
30 30 if (target.is('a') || target.is('img')) { return; }
31 31 if (event.which == 1 || (navigator.appVersion.match(/\bMSIE\b/))) {
32 32 var tr = target.parents('tr').first();
33 33 if (tr.length && tr.hasClass('hascontextmenu')) {
34 34 // a row was clicked, check if the click was on checkbox
35 35 if (target.is('input')) {
36 36 // a checkbox may be clicked
37 37 if (target.prop('checked')) {
38 38 tr.addClass('context-menu-selection');
39 39 } else {
40 40 tr.removeClass('context-menu-selection');
41 41 }
42 42 } else {
43 43 if (event.ctrlKey || event.metaKey) {
44 44 contextMenuToggleSelection(tr);
45 45 } else if (event.shiftKey) {
46 46 lastSelected = contextMenuLastSelected();
47 47 if (lastSelected.length) {
48 48 var toggling = false;
49 49 $('.hascontextmenu').each(function(){
50 50 if (toggling || $(this).is(tr)) {
51 51 contextMenuAddSelection($(this));
52 52 }
53 53 if ($(this).is(tr) || $(this).is(lastSelected)) {
54 54 toggling = !toggling;
55 55 }
56 56 });
57 57 } else {
58 58 contextMenuAddSelection(tr);
59 59 }
60 60 } else {
61 61 contextMenuUnselectAll();
62 62 contextMenuAddSelection(tr);
63 63 }
64 64 contextMenuSetLastSelected(tr);
65 65 }
66 66 } else {
67 67 // click is outside the rows
68 68 if (target.is('a') && (target.hasClass('disabled') || target.hasClass('submenu'))) {
69 69 event.preventDefault();
70 70 } else if (target.is('.toggle-selection') || target.is('.ui-dialog *') || $('#ajax-modal').is(':visible')) {
71 71 // nop
72 72 } else {
73 73 contextMenuUnselectAll();
74 74 }
75 75 }
76 76 }
77 77 }
78 78
79 79 function contextMenuCreate() {
80 80 if ($('#context-menu').length < 1) {
81 81 var menu = document.createElement("div");
82 82 menu.setAttribute("id", "context-menu");
83 83 menu.setAttribute("style", "display:none;");
84 84 document.getElementById("content").appendChild(menu);
85 85 }
86 86 }
87 87
88 88 function contextMenuShow(event) {
89 89 var mouse_x = event.pageX;
90 var mouse_y = event.pageY;
90 var mouse_y = event.pageY;
91 var mouse_y_c = event.clientY;
91 92 var render_x = mouse_x;
92 93 var render_y = mouse_y;
93 94 var dims;
94 95 var menu_width;
95 96 var menu_height;
96 97 var window_width;
97 98 var window_height;
98 99 var max_width;
99 100 var max_height;
100 101
101 102 $('#context-menu').css('left', (render_x + 'px'));
102 103 $('#context-menu').css('top', (render_y + 'px'));
103 104 $('#context-menu').html('');
104 105
105 106 $.ajax({
106 107 url: contextMenuUrl,
107 108 data: $(event.target).parents('form').first().serialize(),
108 109 success: function(data, textStatus, jqXHR) {
109 110 $('#context-menu').html(data);
110 111 menu_width = $('#context-menu').width();
111 112 menu_height = $('#context-menu').height();
112 113 max_width = mouse_x + 2*menu_width;
113 max_height = mouse_y + menu_height;
114 max_height = mouse_y_c + menu_height;
114 115
115 116 var ws = window_size();
116 117 window_width = ws.width;
117 118 window_height = ws.height;
118 119
119 120 /* display the menu above and/or to the left of the click if needed */
120 121 if (max_width > window_width) {
121 122 render_x -= menu_width;
122 123 $('#context-menu').addClass('reverse-x');
123 124 } else {
124 125 $('#context-menu').removeClass('reverse-x');
125 126 }
127
126 128 if (max_height > window_height) {
127 129 render_y -= menu_height;
128 130 $('#context-menu').addClass('reverse-y');
131 // adding class for submenu
132 if (mouse_y_c < 325) {
133 $('#context-menu .folder').addClass('down');
134 }
129 135 } else {
130 $('#context-menu').removeClass('reverse-y');
136 // adding class for submenu
137 if (window_height - mouse_y_c < 345) {
138 $('#context-menu .folder').addClass('up');
139 }
140 $('#context-menu').removeClass('reverse-y');
131 141 }
142
132 143 if (render_x <= 0) render_x = 1;
133 144 if (render_y <= 0) render_y = 1;
134 145 $('#context-menu').css('left', (render_x + 'px'));
135 146 $('#context-menu').css('top', (render_y + 'px'));
136 147 $('#context-menu').show();
137 148
138 149 //if (window.parseStylesheets) { window.parseStylesheets(); } // IE
139
140 150 }
141 151 });
142 152 }
143 153
144 154 function contextMenuSetLastSelected(tr) {
145 155 $('.cm-last').removeClass('cm-last');
146 156 tr.addClass('cm-last');
147 157 }
148 158
149 159 function contextMenuLastSelected() {
150 160 return $('.cm-last').first();
151 161 }
152 162
153 163 function contextMenuUnselectAll() {
154 164 $('input[type=checkbox].toggle-selection').prop('checked', false);
155 165 $('.hascontextmenu').each(function(){
156 166 contextMenuRemoveSelection($(this));
157 167 });
158 168 $('.cm-last').removeClass('cm-last');
159 169 }
160 170
161 171 function contextMenuHide() {
162 172 $('#context-menu').hide();
163 173 }
164 174
165 175 function contextMenuToggleSelection(tr) {
166 176 if (contextMenuIsSelected(tr)) {
167 177 contextMenuRemoveSelection(tr);
168 178 } else {
169 179 contextMenuAddSelection(tr);
170 180 }
171 181 }
172 182
173 183 function contextMenuAddSelection(tr) {
174 184 tr.addClass('context-menu-selection');
175 185 contextMenuCheckSelectionBox(tr, true);
176 186 contextMenuClearDocumentSelection();
177 187 }
178 188
179 189 function contextMenuRemoveSelection(tr) {
180 190 tr.removeClass('context-menu-selection');
181 191 contextMenuCheckSelectionBox(tr, false);
182 192 }
183 193
184 194 function contextMenuIsSelected(tr) {
185 195 return tr.hasClass('context-menu-selection');
186 196 }
187 197
188 198 function contextMenuCheckSelectionBox(tr, checked) {
189 199 tr.find('input[type=checkbox]').prop('checked', checked);
190 200 }
191 201
192 202 function contextMenuClearDocumentSelection() {
193 203 // TODO
194 204 if (document.selection) {
195 205 document.selection.empty(); // IE
196 206 } else {
197 207 window.getSelection().removeAllRanges();
198 208 }
199 209 }
200 210
201 211 function contextMenuInit(url) {
202 212 contextMenuUrl = url;
203 213 contextMenuCreate();
204 214 contextMenuUnselectAll();
205 215
206 216 if (!contextMenuObserving) {
207 217 $(document).click(contextMenuClick);
208 218 $(document).contextmenu(contextMenuRightClick);
209 219 contextMenuObserving = true;
210 220 }
211 221 }
212 222
213 223 function toggleIssuesSelection(el) {
214 224 var checked = $(this).prop('checked');
215 225 var boxes = $(this).parents('table').find('input[name=ids\\[\\]]');
216 226 boxes.prop('checked', checked).parents('tr').toggleClass('context-menu-selection', checked);
217 227 }
218 228
219 229 function window_size() {
220 230 var w;
221 231 var h;
222 232 if (window.innerWidth) {
223 233 w = window.innerWidth;
224 234 h = window.innerHeight;
225 235 } else if (document.documentElement) {
226 236 w = document.documentElement.clientWidth;
227 237 h = document.documentElement.clientHeight;
228 238 } else {
229 239 w = document.body.clientWidth;
230 240 h = document.body.clientHeight;
231 241 }
232 242 return {width: w, height: h};
233 243 }
234 244
235 245 $(document).ready(function(){
236 246 $('input[type=checkbox].toggle-selection').on('change', toggleIssuesSelection);
237 247 });
Show file before | Show file after | Hide comments
@@ -1,52 +1,56
1 1 #context-menu { position: absolute; z-index: 40; font-size: 0.9em;}
2 2
3 3 #context-menu ul, #context-menu li, #context-menu a {
4 4 display:block;
5 5 margin:0;
6 6 padding:0;
7 7 border:0;
8 8 }
9 9
10 10 #context-menu ul {
11 11 width:150px;
12 12 border: 1px solid #ccc;
13 13 background:white;
14 14 list-style:none;
15 15 padding:2px;
16 16 border-radius:2px;
17 17 }
18 18
19 19 #context-menu li {
20 20 position:relative;
21 21 padding:1px;
22 22 z-index:39;
23 23 border:1px solid white;
24 24 }
25 25 #context-menu li.folder ul { position:absolute; left:168px; /* IE6 */ top:-2px; max-height:300px; overflow:hidden; overflow-y: auto; }
26 26 #context-menu li.folder>ul { left:148px; }
27 27
28 #context-menu.reverse-y li.folder>ul { top:auto; bottom:0; }
28 #context-menu.reverse-y li.folder>ul, #context-menu li.folder.up>ul { top:auto; bottom:0; }
29 29 #context-menu.reverse-x li.folder ul { left:auto; right:168px; /* IE6 */ }
30 30 #context-menu.reverse-x li.folder>ul { right:148px; }
31 31
32 #context-menu.reverse-y li.folder.down>ul {
33 position:absolute; top:-2px; bottom: auto; max-height:300px; overflow:hidden; overflow-y: auto;
34 }
35
32 36 #context-menu a {
33 37 text-decoration:none !important;
34 38 background-repeat: no-repeat;
35 39 background-position: 1px 50%;
36 40 padding: 2px 0px 2px 20px;
37 41 width:100%; /* IE */
38 42 }
39 43 #context-menu li>a { width:auto; } /* others */
40 44 #context-menu a.disabled, #context-menu a.disabled:hover {color: #aaa;}
41 45 #context-menu li a.submenu { padding-right:16px; background:url("../images/bullet_arrow_right.png") right no-repeat; }
42 46 #context-menu li:hover { border:1px solid #628db6; background-color:#eef5fd; border-radius:3px; }
43 47 #context-menu a:hover {color:#2A5685;}
44 48 #context-menu li.folder:hover { z-index:40; }
45 49 #context-menu ul ul, #context-menu li:hover ul ul { display:none; }
46 50 #context-menu li:hover ul, #context-menu li:hover li:hover ul { display:block; }
47 51 #context-menu a.icon-checked {background: url(../images/toggle_check.png) no-repeat 3px 40%;}
48 52
49 53 /* selected element */
50 54 .context-menu-selection { background-color:#507AAA !important; color:#f8f8f8 !important; }
51 55 .context-menu-selection a, .context-menu-selection a:hover { color:#f8f8f8 !important; }
52 56 .context-menu-selection:hover { background-color:#507AAA !important; color:#f8f8f8 !important; }
General Comments 0
You need to be logged in to leave comments. Login now