glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

right click menus position nicely

Browse source
This commit is contained in:
Connor Turland 2014-10-15 19:32:15 -04:00
parent 79daaf705b
commit 0449e28177
2 changed files with 70 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
app/assets/javascripts/src/Metamaps.JIT.js
View file

@ -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);

9
app/assets/stylesheets/application.css
View file

@ -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 */