Skip to content

Commit

Permalink
added autoHide option (issue #3)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rodneyrehm
rodneyrehm committed Aug 8, 2011
1 parent 560c077 commit 9f3dcf7
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 29 deletions.
46 changes: 25 additions & 21 deletions demo.html
View file
Expand Up @@ -219,6 +219,7 @@ <h2 id="hover-trigger">Demo: Context Menu triggered by hover</h2>
$.contextMenu({
selector: '.context-menu-four',
trigger: 'hover',
autoHide: true,
items: {
edit: {name: "Edit", icon: "edit", callback: $.noop},
cut: {name: "Cut", icon: "cut", callback: $.noop},
Expand Down Expand Up @@ -348,27 +349,30 @@ <h2 id="commands">Demo: Context Menu with sub-menus</h2>
/**************************************************
* Context-Menu with Sub-Menu
**************************************************/
$.contextMenu({selector: '.context-menu-sub', items: {
edit: {name: "Edit", icon: "edit", callback: printKey},
cut: {name: "Cut", icon: "cut", callback: printKey},
copy: {name: "Copy", icon: "copy", callback: printKey},
paste: {name: "Paste", icon: "paste", callback: printKey},
"delete": {name: "Delete", icon: "delete", callback: printKey},
sep1: "---------",
quit: {name: "Quit", icon: "quit", callback: printKey},
sep2: "---------",
fold1: {name: "Sub group", items: {
"fold1-key1": {name: "Foo bar", callback: printKey},
"fold1-key2": {name: "Foo baz", callback: printKey},
"fold1-key3": {name: "Bar Baz", callback: printKey}
}},
sep3: "---------",
fold2: {name: "Sub group 2", items: {
"fold2-key1": {name: "Foo bar 2", callback: printKey},
"fold2-key2": {name: "Foo baz 2", callback: printKey},
"fold2-key3": {name: "Bar Baz 2", callback: printKey}
}}
}});
$.contextMenu({selector: '.context-menu-sub',
autoHide: true,
items: {
edit: {name: "Edit", icon: "edit", callback: printKey},
cut: {name: "Cut", icon: "cut", callback: printKey},
copy: {name: "Copy", icon: "copy", callback: printKey},
paste: {name: "Paste", icon: "paste", callback: printKey},
"delete": {name: "Delete", icon: "delete", callback: printKey},
sep1: "---------",
quit: {name: "Quit", icon: "quit", callback: printKey},
sep2: "---------",
fold1: {name: "Sub group", items: {
"fold1-key1": {name: "Foo bar", callback: printKey},
"fold1-key2": {name: "Foo baz", callback: printKey},
"fold1-key3": {name: "Bar Baz", callback: printKey}
}},
sep3: "---------",
fold2: {name: "Sub group 2", items: {
"fold2-key1": {name: "Foo bar 2", callback: printKey},
"fold2-key2": {name: "Foo baz 2", callback: printKey},
"fold2-key3": {name: "Bar Baz 2", callback: printKey}
}}
}
});

/**************************************************
* Context-Menu with Sub-Menu
Expand Down
6 changes: 6 additions & 0 deletions docs.html
View file
Expand Up @@ -86,6 +86,12 @@ <h3 id="options">options (at registration)</h3>
<p>Specifies the time in milliseconds to wait before showing the menu. Only applies to <code>trigger: "hover"</code></p>
</dd>

<dt id="options-autohide"><em>(boolean)</em> autoHide</dt>
<dd>
<p>default: <em>false</em></p>
<p>Specifies if the menu must be hidden when the mouse pointer is moved out of the trigger and menu elements</p>
</dd>

<dt id="options-zIndex"><em>(int)</em> zIndex</dt>
<dd>
<p>default: <em>1</em></p>
Expand Down
49 changes: 41 additions & 8 deletions jquery.contextMenu.js
View file
Expand Up @@ -40,6 +40,8 @@ var // currently active contextMenu trigger
appendTo: null,
// method to trigger context menu ["right", "left", "hover"]
trigger: "right",
// hide menu when mouse leaves trigger / menu elements
autoHide: false,
// ms to wait before showing a hover-triggered context menu
delay: 200,
// determine position to show menu at
Expand Down Expand Up @@ -216,7 +218,8 @@ var // currently active contextMenu trigger
// contextMenu hover trigger
mouseenter: function(e) {
var $this = $(this),
$related = $(e.relatedTarget);
$related = $(e.relatedTarget),
$document = $(document);

// abort if we're coming from a menu
if ($related.is('.context-menu-list') || $related.closest('.context-menu-list').length) {
Expand All @@ -231,10 +234,10 @@ var // currently active contextMenu trigger
hoveract.pageX = e.pageX;
hoveract.pageY = e.pageY;
hoveract.data = e.data;
$(document).bind('mousemove.contextMenu', handle.mousemove);
$document.bind('mousemove.contextMenuShow', handle.mousemove);
hoveract.timer = setTimeout(function() {
hoveract.timer = null;
$(document).unbind('mousemove.contextMenu');
$document.unbind('mousemove.contextMenuShow');
$currentTrigger = $this;
//op.show.call($this, hoveract.data, hoveract.pageX, hoveract.pageY);
$this.trigger(jQuery.Event("contextmenu", { data: hoveract.data, pageX: hoveract.pageX, pageY: hoveract.pageY }));
Expand All @@ -259,7 +262,7 @@ var // currently active contextMenu trigger

hoveract.timer = null;
},

// click on layer to hide contextMenu
layerClick: function(e) {
var $this = $(this),
Expand Down Expand Up @@ -467,15 +470,30 @@ var // currently active contextMenu trigger
root.isInput = opt.isInput = false;
},

// :hover on menu
menuMouseenter: function(e) {
var root = $(this).data().contextMenuRoot;
root.hovering = true;
},
// :hover on menu
menuMouseleave: function(e) {
var root = $(this).data().contextMenuRoot;
if (root.$layer && root.$layer.is(e.relatedTarget)) {
root.hovering = false;
}
},

// :hover done manually so key handling is possible
itemMouseenter: function(e) {
var $this = $(this),
data = $this.data(),
opt = data.contextMenu,
root = data.contextMenuRoot;

root.hovering = true;

// abort if we're re-entering
if (root.$layer.is(e.relatedTarget)) {
if (root.$layer && root.$layer.is(e.relatedTarget)) {
e.preventDefault();
e.stopImmediatePropagation();
}
Expand Down Expand Up @@ -588,9 +606,22 @@ var // currently active contextMenu trigger
opt.$menu.css( css )[opt.animation.show](opt.animation.duration);
// make options available
$this.data('contextMenu', opt);
//TODO: remove this: opt.$menu.data('contextMenu', opt);
// register key handler
$(document).unbind('keydown.contextMenu').bind('keydown.contextMenu', handle.key);
// register autoHide handler
if (opt.autoHide) {
// trigger element coordinates
var pos = $this.position();
pos.right = pos.left + $this.outerWidth();
pos.bottom = pos.top + this.outerHeight();
// mouse position handler
$(document).bind('mousemove.contextMenuAutoHide', function(e) {
if (opt.$layer && !opt.hovering && (!(e.pageX >= pos.left && e.pageX <= pos.right) || !(e.pageY >= pos.top && e.pageY <= pos.bottom))) {
// if mouse in menu…
opt.$layer.trigger('mousedown');
}
});
}
},
hide: function(opt) {
var $this = $(this);
Expand All @@ -617,8 +648,8 @@ var // currently active contextMenu trigger
// remove selected
opt.$menu.find('.hover').removeClass('hover');
opt.$selected = null;
// unregister key handler
$(document).unbind('keydown.contextMenu');
// unregister key and mouse handlers
$(document).unbind('keydown.contextMenu').unbind('.contextMenuAutoHide');
// hide menu
opt.$menu && opt.$menu[opt.animation.hide](opt.animation.duration);
},
Expand Down Expand Up @@ -873,6 +904,8 @@ $.contextMenu = function(operation, options) {
.delegate('.context-menu-list', 'prevcommand.contextMenu', handle.prevItem)
.delegate('.context-menu-list', 'nextcommand.contextMenu', handle.nextItem)
.delegate('.context-menu-list', 'contextmenu.contextMenu', handle.abortevent)
.delegate('.context-menu-list', 'mouseenter.contextMenu', handle.menuMouseenter)
.delegate('.context-menu-list', 'mouseleave.contextMenu', handle.menuMouseleave)
.delegate('.context-menu-input', 'mouseup.contextMenu', handle.inputClick)
.delegate('.context-menu-item', 'mouseup.contextMenu', handle.itemClick)
.delegate('.context-menu-item', 'contextmenu.contextMenu', handle.abortevent)
Expand Down

0 comments on commit 9f3dcf7

Please sign in to comment.