jro_apps/redmine Commit - r1308:f6ce427a0065

Display the context menu above and/or to the left of the click if needed (patch by Mike Duchene, closes #960)....

Jean-Philippe Lang -

r1308:f6ce427a0065

parent child

Context file:

r1308:f6ce427a0065

Collapse all files

public/javascripts/context_menu.js +61 -4

             /* redMine - project management software
                Copyright (C) 2006-2008  Jean-Philippe Lang */
             var observingContextMenuClick;
             ContextMenu = Class.create();
             ContextMenu.prototype = {
             	initialize: function (url) {
             	this.url = url;
             	// prevent selection when using Ctrl/Shit key
             	var tables = $$('table.issues');
             	for (i=0; i<tables.length; i++) {
             		tables[i].onselectstart = function () { return false; } // ie
             		tables[i].onmousedown = function () { return false; } // mozilla
             	}
             	if (!observingContextMenuClick) {
             		Event.observe(document, 'click', this.Click.bindAsEventListener(this));
             		Event.observe(document, (window.opera ? 'click' : 'contextmenu'), this.RightClick.bindAsEventListener(this));
             		observingContextMenuClick = true;
             	}
             	this.unselectAll();
             	this.lastSelected = null;
             	},
             	RightClick: function(e) {
             		this.hideMenu();
             		// do not show the context menu on links
             		if (Event.findElement(e, 'a') != document) { return; }
             		// right-click simulated by Alt+Click with Opera
             		if (window.opera && !e.altKey) { return; }
             		var tr = Event.findElement(e, 'tr');
             		if ((tr == document) || !tr.hasClassName('hascontextmenu')) { return; }
             		Event.stop(e);
             		if (!this.isSelected(tr)) {
             			this.unselectAll();
             			this.addSelection(tr);
             			this.lastSelected = tr;
             		}
             		this.showMenu(e);
             	},
               Click: function(e) {
               	this.hideMenu();
               	if (Event.findElement(e, 'a') != document) { return; }
                 if (window.opera && e.altKey) {	return; }
                 if (Event.isLeftClick(e) || (navigator.appVersion.match(/\bMSIE\b/))) {
                   var tr = Event.findElement(e, 'tr');
                   if (tr!=document && tr.hasClassName('hascontextmenu')) {
                     // a row was clicked, check if the click was on checkbox
                     var box = Event.findElement(e, 'input');
                     if (box!=document) {
                       // a checkbox may be clicked
                       if (box.checked) {
                         tr.addClassName('context-menu-selection');
                       } else {
                         tr.removeClassName('context-menu-selection');
                       }
                     } else {
                       if (e.ctrlKey) {
                         this.toggleSelection(tr);
                       } else if (e.shiftKey) {
                         if (this.lastSelected != null) {
                           var toggling = false;
                           var rows = $$('.hascontextmenu');
                           for (i=0; i<rows.length; i++) {
                             if (toggling || rows[i]==tr) {
                               this.addSelection(rows[i]);
                             }
                             if (rows[i]==tr || rows[i]==this.lastSelected) {
                               toggling = !toggling;
                             }
                           }
                         } else {
                           this.addSelection(tr);
                         }
                       } else {
                         this.unselectAll();
                         this.addSelection(tr);
                       }
                       this.lastSelected = tr;
                     }
                   } else {
                     // click is outside the rows
                     var t = Event.findElement(e, 'a');
                     if ((t != document) && (Element.hasClassName(t, 'disabled') || Element.hasClassName(t, 'submenu'))) {
                       Event.stop(e);
                     }
                   }
                 }
               },
               showMenu: function(e) {
-            		$('context-menu').style['left'] = (Event.pointerX(e) + 'px');
+                var mouse_x = Event.pointerX(e);
-            		$('context-menu').style['top'] = (Event.pointerY(e) + 'px');
+                var mouse_y = Event.pointerY(e);
-            		Element.update('context-menu', '');
+                var render_x = mouse_x;
-            		new Ajax.Updater({success:'context-menu'}, this.url,
+                var render_y = mouse_y;
+                var dims;
+                var menu_width;
+                var menu_height;
+                var window_width;
+                var window_height;
+                var max_width;
+                var max_height;
+                $('context-menu').style['left'] = (render_x + 'px');
+                $('context-menu').style['top'] = (render_y + 'px');
+                Element.update('context-menu', '');
+                new Ajax.Updater({success:'context-menu'}, this.url,
                   {asynchronous:true,
                    evalScripts:true,
                    parameters:Form.serialize(Event.findElement(e, 'form')),
                    onComplete:function(request){
+            				 dims = $('context-menu').getDimensions();
+            				 menu_width = dims.width;
+            				 menu_height = dims.height;
+            				 max_width = mouse_x + 2*menu_width;
+            				 max_height = mouse_y + menu_height;
+            				 var ws = window_size();
+            				 window_width = ws.width;
+            				 window_height = ws.height;
+            				 /* display the menu above and/or to the left of the click if needed */
+            				 if (max_width > window_width) {
+            				   render_x -= menu_width;
+            				   $('context-menu').addClassName('reverse-x');
+            				 } else {
+            					 $('context-menu').removeClassName('reverse-x');
+            				 }
+            				 if (max_height > window_height) {
+            				   render_y -= menu_height;
+            				   $('context-menu').addClassName('reverse-y');
+            				 } else {
+            					 $('context-menu').removeClassName('reverse-y');
+            				 }
+            				 if (render_x <= 0) render_x = 1;
+            				 if (render_y <= 0) render_y = 1;
+            				 $('context-menu').style['left'] = (render_x + 'px');
+            				 $('context-menu').style['top'] = (render_y + 'px');
                      Effect.Appear('context-menu', {duration: 0.20});
                      if (window.parseStylesheets) { window.parseStylesheets(); } // IE
                   }})
               },
               hideMenu: function() {
                 Element.hide('context-menu');
               },
               addSelection: function(tr) {
                 tr.addClassName('context-menu-selection');
                 this.checkSelectionBox(tr, true);
               },
               toggleSelection: function(tr) {
                 if (this.isSelected(tr)) {
                   this.removeSelection(tr);
                 } else {
                   this.addSelection(tr);
                 }
               },
               removeSelection: function(tr) {
                 tr.removeClassName('context-menu-selection');
                 this.checkSelectionBox(tr, false);
               },
               unselectAll: function() {
                 var rows = $$('.hascontextmenu');
                 for (i=0; i<rows.length; i++) {
                   this.removeSelection(rows[i]);
                 }
               },
               checkSelectionBox: function(tr, checked) {
               	var inputs = Element.getElementsBySelector(tr, 'input');
               	if (inputs.length > 0) { inputs[0].checked = checked; }
               },
               isSelected: function(tr) {
                 return Element.hasClassName(tr, 'context-menu-selection');
               }
             }
             function toggleIssuesSelection(el) {
             	var boxes = el.getElementsBySelector('input[type=checkbox]');
             	var all_checked = true;
             	for (i = 0; i < boxes.length; i++) { if (boxes[i].checked == false) { all_checked = false; } }
             	for (i = 0; i < boxes.length; i++) {
             		if (all_checked) {
             			boxes[i].checked = false;
             			boxes[i].up('tr').removeClassName('context-menu-selection');
             		} else if (boxes[i].checked == false) {
             			boxes[i].checked = true;
             			boxes[i].up('tr').addClassName('context-menu-selection');
             		}
             	}
             }
+            function window_size() {
+                var w;
+                var h;
+                if (window.innerWidth) {
+            	w = window.innerWidth;
+            	h = window.innerHeight;
+                } else if (document.documentElement) {
+            	w = document.documentElement.clientWidth;
+            	h = document.documentElement.clientHeight;
+                } else {
+            	w = document.body.clientWidth;
+            	h = document.body.clientHeight;
+                }
+                return {width: w, height: h};
+            }

public/stylesheets/context_menu.css +5 -5

             #context-menu { position: absolute; z-index: 10;}
             #context-menu ul, #context-menu li, #context-menu a {
             	display:block;
             	margin:0;
             	padding:0;
             	border:0;
             }
             #context-menu ul {
             	width:150px;
             	border-top:1px solid #ddd;
             	border-left:1px solid #ddd;
             	border-bottom:1px solid #777;
             	border-right:1px solid #777;
             	background:white;
             	list-style:none;
             }
             #context-menu li {
             	position:relative;
             	padding:1px;
             	z-index:9;
             }
-            #context-menu li.folder ul {
+            #context-menu li.folder ul { position:absolute; left:168px; /* IE6 */ top:-2px; }
-            	position:absolute;
-            	left:168px; /* IE6 */
-            	top:-2px;
             #context-menu li.folder>ul { left:148px; }
+            #context-menu.reverse-y li.folder>ul { top:auto; bottom:0; }
+            #context-menu.reverse-x li.folder ul { left:auto; right:168px; /* IE6 */ }
+            #context-menu.reverse-x li.folder>ul { right:148px; }
             #context-menu a {
             	border:1px solid white;
             	text-decoration:none;
             	background-repeat: no-repeat;
             	background-position: 1px 50%;
             	padding: 2px 0px 2px 20px;
             	width:100%; /* IE */
             }
             #context-menu li>a { width:auto; } /* others */
             #context-menu a.disabled, #context-menu a.disabled:hover {color: #ccc;}
             #context-menu li a.submenu { background:url("../images/sub.gif") right no-repeat; }
             #context-menu a:hover { border-color:gray; background-color:#eee; color:#2A5685; }
             #context-menu li.folder a:hover { background-color:#eee; }
             #context-menu li.folder:hover { z-index:10; }
             #context-menu ul ul, #context-menu  li:hover ul ul { display:none; }
             #context-menu li:hover ul, #context-menu li:hover li:hover ul {	display:block; }
             /* selected element */
             .context-menu-selection { background-color:#507AAA !important; color:#f8f8f8 !important; }
             .context-menu-selection a, .context-menu-selection a:hover { color:#f8f8f8 !important; }
             .context-menu-selection:hover { background-color:#507AAA !important; color:#f8f8f8  !important; }

General Comments 0

Write
Preview

You need to be logged in to leave comments. Login now

No TODOs yet

	Site-wide shortcuts
/	Use quick search box
g h	Goto home page
g g	Goto my private gists page
g G	Goto my public gists page
g 0-9	Goto bookmarked items from 0-9
n r	New repository page
n g	New gist page

	Repositories
g s	Goto summary page
g c	Goto changelog page
g f	Goto files page
g F	Goto files page with file search activated
g p	Goto pull requests page
g o	Goto repository settings
g O	Goto repository access permissions settings
t s	Toggle sidebar on some pages