annotate public/javascripts/context_menu.js @ 1452:d6b9fd02bb89 feature_36_js_refactoring

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