From 0449e2817724ce015b03f14bba5d2cea1a2012a1 Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Wed, 15 Oct 2014 19:32:15 -0400
Subject: [PATCH] right click menus position nicely

---
 app/assets/javascripts/src/Metamaps.JIT.js | 69 +++++++++++++++++++---
 app/assets/stylesheets/application.css     |  9 +++
 2 files changed, 70 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/src/Metamaps.JIT.js b/app/assets/javascripts/src/Metamaps.JIT.js
index 59b65196..95b80fde 100644
--- a/app/assets/javascripts/src/Metamaps.JIT.js
+++ b/app/assets/javascripts/src/Metamaps.JIT.js
@@ -1248,10 +1248,38 @@ Metamaps.JIT = {
         rightclickmenu.innerHTML = menustring;
 
         // position the menu where the click happened
-        $(rightclickmenu).css({
-            left: e.clientX,
-            top: e.clientY
-        });
+        var position = {};
+        var RIGHTCLICK_WIDTH = 300;
+        var RIGHTCLICK_HEIGHT = 144; // this does vary somewhat, but we can use static
+        var SUBMENUS_WIDTH = 256;
+        var MAX_SUBMENU_HEIGHT = 270;
+        var windowWidth = $(window).width();
+        var windowHeight = $(window).height();
+
+        if (windowWidth - e.clientX < SUBMENUS_WIDTH) {
+            position.right = windowWidth - e.clientX;  
+            $(rightclickmenu).addClass('moveMenusToLeft');
+        }
+        else if (windowWidth - e.clientX < RIGHTCLICK_WIDTH) {
+            position.right = windowWidth - e.clientX;
+        }
+        else if (windowWidth - e.clientX < RIGHTCLICK_WIDTH + SUBMENUS_WIDTH) {
+            position.left = e.clientX; 
+            $(rightclickmenu).addClass('moveMenusToLeft');
+        }
+        else position.left = e.clientX;
+
+        if (windowHeight - e.clientY < MAX_SUBMENU_HEIGHT) {
+            position.bottom = windowHeight - e.clientY;
+            $(rightclickmenu).addClass('moveMenusUp');
+        }
+        else if (windowHeight - e.clientY < RIGHTCLICK_HEIGHT + MAX_SUBMENU_HEIGHT) {
+            position.top = e.clientY;
+            $(rightclickmenu).addClass('moveMenusUp');
+        }
+        else position.top = e.clientY;
+
+        $(rightclickmenu).css(position);
         //add the menu to the page
         $('#wrapper').append(rightclickmenu);
 
@@ -1381,10 +1409,35 @@ Metamaps.JIT = {
         rightclickmenu.innerHTML = menustring;
 
         // position the menu where the click happened
-        $(rightclickmenu).css({
-            left: e.clientX,
-            top: e.clientY
-        });
+        var position = {};
+        var RIGHTCLICK_WIDTH = 300;
+        var RIGHTCLICK_HEIGHT = 144; // this does vary somewhat, but we can use static
+        var SUBMENUS_WIDTH = 256;
+        var MAX_SUBMENU_HEIGHT = 270;
+        var windowWidth = $(window).width();
+        var windowHeight = $(window).height();
+
+        if (windowWidth - e.clientX < SUBMENUS_WIDTH) {
+            position.right = windowWidth - e.clientX;  
+            $(rightclickmenu).addClass('moveMenusToLeft');
+        }
+        else if (windowWidth - e.clientX < RIGHTCLICK_WIDTH) {
+            position.right = windowWidth - e.clientX;
+        }
+        else position.left = e.clientX;
+
+        if (windowHeight - e.clientY < MAX_SUBMENU_HEIGHT) {
+            position.bottom = windowHeight - e.clientY;
+            $(rightclickmenu).addClass('moveMenusUp');
+        }
+        else if (windowHeight - e.clientY < RIGHTCLICK_HEIGHT + MAX_SUBMENU_HEIGHT) {
+            position.top = e.clientY;
+            $(rightclickmenu).addClass('moveMenusUp');
+        }
+        else position.top = e.clientY;
+
+        $(rightclickmenu).css(position);
+
         //add the menu to the page
         $('#wrapper').append(rightclickmenu);
 
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 504b83cb..9c7268df 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1234,6 +1234,15 @@ float: left;
     display: block;
 }
 
+.moveMenusUp .rc-metacode ul, .moveMenusUp .rc-permission ul {
+    top: auto;
+    bottom: 0;
+}
+.moveMenusToLeft .rc-metacode ul, .moveMenusToLeft .rc-permission ul {
+    left: auto;
+    right: 100%;
+}
+
 
 /* end right click menu */