Skip to content

Fixed "sub menu out of position #533 " #567

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
+213 −54
Open

Fixed "sub menu out of position #533 " #567

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fc3cc41
fix submenu position issue
AliShahrivarian Sep 10, 2017
77a3c32
fix submenu position issue #533
AliShahrivarian Sep 10, 2017
2da615a
fix submenu position issue #533
AliShahrivarian Sep 10, 2017
d189cd2
sub menu out of position #533
AliShahrivarian Sep 11, 2017
8427585
sub menu out of position #533
AliShahrivarian Sep 11, 2017
b3a80b3
Fixed "sub menu out of position #533 "
AliShahrivarian Sep 11, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions dist/jquery.contextMenu.css
View file
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@
* Licensed under
* MIT License http://www.opensource.org/licenses/mit-license
*
* Date: 2017-08-30T12:16:04.938Z
* Date: 2017-11-24T17:56:22.439Z
*/
@-webkit-keyframes cm-spin {
0% {
@@ -54,8 +54,8 @@
font-style: normal;
font-weight: normal;

src: url("font/context-menu-icons.eot?1915n");
src: url("font/context-menu-icons.eot?1915n#iefix") format("embedded-opentype"), url("font/context-menu-icons.woff2?1915n") format("woff2"), url("font/context-menu-icons.woff?1915n") format("woff"), url("font/context-menu-icons.ttf?1915n") format("truetype");
src: url("font/context-menu-icons.eot?12di9");
src: url("font/context-menu-icons.eot?12di9#iefix") format("embedded-opentype"), url("font/context-menu-icons.woff2?12di9") format("woff2"), url("font/context-menu-icons.woff?12di9") format("woff"), url("font/context-menu-icons.ttf?12di9") format("truetype");
}

.context-menu-icon-add:before {
@@ -156,6 +156,10 @@
color: #bbb;
}

.context-menu-list.overBoundary, .context-menu-list.overBoundary ul.context-menu-list {
position: fixed !important;
}

.context-menu-list {
position: absolute;
display: inline-block;
118 changes: 104 additions & 14 deletions dist/jquery.contextMenu.js
View file
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@
* Licensed under
* MIT License http://www.opensource.org/licenses/mit-license
*
* Date: 2017-08-30T12:16:04.336Z
* Date: 2017-11-24T18:02:43.224Z
*/

// jscs:disable
@@ -116,10 +116,16 @@
// flag denoting if a second trigger should simply move (true) or rebuild (false) an open menu
// as long as the trigger happened on one of the trigger-element's child nodes
reposition: true,
// Flag denoting if a second trigger should close the menu, as long as
// the trigger happened on one of the trigger-element's child nodes.
// This overrides the reposition option.
hideOnSecondTrigger: false,

//ability to select submenu
selectableSubMenu: false,

hasOverboundaryScroll: false,

// Default classname configuration to be able avoid conflicts in frameworks
classNames: {
hover: 'context-menu-hover', // Item hover
@@ -200,7 +206,7 @@
opt.$menu.css(offset);
},
// position the sub-menu
positionSubmenu: function ($menu) {
positionSubmenu: function ($menu, $root) {
if (typeof $menu === 'undefined') {
// When user hovers over item (which has sub items) handle.focusItem will call this.
// but the submenu does not exist yet if opt.items is a promise. just return, will
@@ -217,12 +223,23 @@
collision: 'flipfit fit'
}).css('display', '');
} else {
// determine contextMenu position
var offset = {
top: -9,
left: this.outerWidth() - 5
};
var offset = {};
if($root && $root.hasOverboundaryScroll){
var parentOffset = this.offset();
// determine contextMenu position
offset = {
top: parentOffset.top,
left: parentOffset.left + this.outerWidth()
};
} else {
offset = {
top: -9,
left: this.outerWidth() - 5
};
}
$menu.css(offset);
if ($root && $root.hasOverboundaryScroll)
op.activated($root, $menu);
}
},
// offset to add to zIndex
@@ -236,7 +253,8 @@
// events
events: {
show: $.noop,
hide: $.noop
hide: $.noop,
activated: $.noop
},
// default callback
callback: null,
@@ -471,7 +489,12 @@
$(target).trigger(e);
root.$layer.show();
}


if (root.hideOnSecondTrigger && triggerAction && root.$menu !== null && typeof root.$menu !== 'undefined') {
root.$menu.trigger('contextmenu:hide');
return;
}

if (root.reposition && triggerAction) {
if (document.elementFromPoint) {
if (root.$trigger.is(target)) {
@@ -936,7 +959,7 @@

// position sub-menu - do after show so dumb $.ui.position can keep up
if (opt.$node) {
root.positionSubmenu.call(opt.$node, opt.$menu);
root.positionSubmenu.call(opt.$node, opt.$menu, root);
}
},
// blur <command>
@@ -997,6 +1020,9 @@
// position and show context menu
opt.$menu.css(css)[opt.animation.show](opt.animation.duration, function () {
$trigger.trigger('contextmenu:visible');

op.activated(opt,opt.$menu);
opt.events.activated();
});
// make options available and set state
$trigger
@@ -1104,7 +1130,7 @@
}

// create contextMenu
opt.$menu = $('<ul class="context-menu-list"></ul>').addClass(opt.className || '').data({
opt.$menu = $('<ul class="context-menu-list ' + (opt.hasOverboundaryScroll ? 'overBoundary' : '') + '"></ul>').addClass(opt.className || '').data({
'contextMenu': opt,
'contextMenuRoot': root
});
@@ -1521,12 +1547,62 @@
opt.items = items;
op.create(opt, root, true); // Create submenu
op.update(opt, root); // Correctly update position if user is already hovered over menu item
root.positionSubmenu.call(opt.$node, opt.$menu); // positionSubmenu, will only do anything if user already hovered over menu item that just got new subitems.
root.positionSubmenu.call(opt.$node, opt.$menu, root); // positionSubmenu, will only do anything if user already hovered over menu item that just got new subitems.
}

// Wait for promise completion. .then(success, error, notify) (we don't track notify). Bind the opt
// and root to avoid scope problems
promise.then(completedPromise.bind(this, opt, root), errorPromise.bind(this, opt, root));
},
// operation that will run after contextMenu showed on screen
activated: function(opt,menu){
if(!opt.hasOverboundaryScroll)
return;
var $menu = menu;
var win = $(window);
var $menuOffset = $menu.offset();
var winHeight = win.height();
var winWidth = win.width();
var winScrollTop = win.scrollTop();
var menuHeight = $menu.outerHeight();
var menuWidth = $menu.outerWidth();
if(menuHeight > winHeight){
$menu.css({
'height': winHeight -
((parseInt($menu.css('padding-top'))*2)+(parseInt($menu.css('margin-top'))*2))+'px',
'overflow-x':'hidden',
'overflow-y':'auto',
'top':winScrollTop+'px'
});
} else if($menuOffset.top < winScrollTop){
$menu.css({
'top':'0px'
});
} else if($menuOffset.top+menuHeight > winScrollTop + winHeight){
$menu.css({
'top':$menuOffset.top - Math.abs((winScrollTop+winHeight)-($menuOffset.top+menuHeight)) -((parseInt($menu.css('padding-top'))*2)+(parseInt($menu.css('margin-top'))*2))+'px'
});
}
if($menuOffset.left + menuWidth > winWidth){
var newLeftPosition = $menuOffset.left - Math.abs(($menuOffset.left+menuWidth) - winWidth);
var parent = $menu.parents('ul.context-menu-list').first();
if(parent.length){
if(newLeftPosition <= parent.offset().left + parent.outerWidth()
&& newLeftPosition >= parent.offset().left){
$menu.css({
'left':parent.offset().left - $menu.outerWidth() + 'px'
});
}else{
$menu.css({
'left':$menuOffset.left-Math.abs(($menuOffset.left+menuWidth) - winWidth) + 'px'
});
}
}else{
$menu.css({
'left':$menuOffset.left-Math.abs(($menuOffset.left+menuWidth) - winWidth) + 'px'
});
}
}
}
};

@@ -1616,6 +1692,20 @@
}

switch (operation) {

case 'update':
// Updates visibility and such
if(_hasContext){
op.update($context);
} else {
for(var menu in menus){
if(menus.hasOwnProperty(menu)){
op.update(menus[menu]);
}
}
}
break;

case 'create':
// no selector no joy
if (!o.selector) {
@@ -1905,7 +1995,7 @@
disabled: !!$node.attr('disabled'),
callback: (function () {
return function () {
$node.get(0).click()
$node.get(0).click();
};
})()
};
@@ -1924,7 +2014,7 @@
icon: $node.attr('icon'),
callback: (function () {
return function () {
$node.get(0).click()
$node.get(0).click();
};
})()
};
Loading