diff --git a/src/webui/www/public/scripts/contextmenu.js b/src/webui/www/public/scripts/contextmenu.js index cef6451e7..432483e00 100644 --- a/src/webui/www/public/scripts/contextmenu.js +++ b/src/webui/www/public/scripts/contextmenu.js @@ -53,6 +53,57 @@ var ContextMenu = new Class({ }); }, + adjustMenuPosition: function(e) { + this.updateMenuItems(); + + // draw the menu off-screen to know the menu dimentions + this.menu.setStyles({ + left: '-999em', + top: '-999em' + }); + + // position the menu + var xPos = e.page.x + this.options.offsets.x; + var yPos = e.page.y + this.options.offsets.y; + if (xPos + this.menu.offsetWidth > document.documentElement.clientWidth) + xPos -= this.menu.offsetWidth; + if (yPos + this.menu.offsetHeight > document.documentElement.clientHeight) + yPos -= this.menu.offsetHeight; + if (xPos < 0) + xPos = 0; + if (yPos < 0) + yPos = 0; + this.menu.setStyles({ + left: xPos, + top: yPos, + position: 'absolute', + 'z-index': '2000' + }); + + // position the sub-menu + var uls = this.menu.getElementsByTagName('ul'); + for (var i = 0; i < uls.length; i++) { + var ul = uls[i]; + var rectParent = ul.parentNode.getBoundingClientRect(); + var xPosOrigin = rectParent.left; + var yPosOrigin = rectParent.bottom; + var xPos = xPosOrigin + rectParent.width - 1; + var yPos = yPosOrigin - rectParent.height - 1; + if (xPos + ul.offsetWidth > document.documentElement.clientWidth) + xPos -= (ul.offsetWidth + rectParent.width - 2); + if (yPos + ul.offsetHeight > document.documentElement.clientHeight) + yPos -= (ul.offsetHeight - rectParent.height - 2); + if (xPos < 0) + xPos = 0; + if (yPos < 0) + yPos = 0; + ul.setStyles({ + 'margin-left': xPos - xPosOrigin, + 'margin-top': yPos - yPosOrigin + }); + } + }, + addTarget: function(t) { this.targets[this.targets.length] = t; t.addEvent(this.options.trigger, function(e) { @@ -64,13 +115,7 @@ var ContextMenu = new Class({ } //record this as the trigger this.options.element = $(t); - //position the menu - this.menu.setStyles({ - top: (e.page.y + this.options.offsets.y), - left: (e.page.x + this.options.offsets.x), - position: 'absolute', - 'z-index': '2000' - }); + this.adjustMenuPosition(e); //show the menu this.show(); } @@ -94,13 +139,7 @@ var ContextMenu = new Class({ } //record this as the trigger this.options.element = $(el); - //position the menu - this.menu.setStyles({ - top: (e.page.y + this.options.offsets.y), - left: (e.page.x + this.options.offsets.x), - position: 'absolute', - 'z-index': '2000' - }); + this.adjustMenuPosition(e); //show the menu this.show(); } @@ -131,7 +170,6 @@ var ContextMenu = new Class({ //show menu show: function (trigger) { - this.updateMenuItems(); this.fx.start(1); this.fireEvent('show'); this.shown = true;