Skip to content

Commit bc0e758

Browse files
busterbeansbusterbeans
committed
Fixing #7 and other small changes
1 parent 68349e2 commit bc0e758

7 files changed

Lines changed: 259 additions & 177 deletions

File tree

‎CHANGES.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
# Changes to ng-context-menu
22

3+
## v0.1.7
4+
5+
1. Added #26: Separately apply callback before opening menu. Thanks @hupfis!
6+
2. Added #7: Add "Step 4: Add your menu markup" to README instructions.
7+
3. Added #25: Allow context menu to be closed even in disabled mode. Thanks @NOtherDev!
8+
39
## v0.1.6
410

511
1. Fixed #18: Changed main file in bower.json configuration from ng-context-menu.min.js to ng-context-menu.js. Thanks @Hypercubed!
6-
2. Fixed #20: Prevented the context menu from displaying on the right side outside of the visible browser window. Thanks @alexk111!
12+
2. Fixed #20: Prevented the context menu from displaying on the right side outside of the visible browser window. Thanks @alexk111!

‎README.md‎

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,55 @@ var app = angular.module('menu-demo', ['ngRoute', 'ng-context-menu'])
2929
...
3030
</div>
3131
```
32+
#### Step 4: Add the markup of the menu you want to be displayed
3233

33-
#### Step 4: Make sure your menu is has the ```position: fixed``` CSS property
34+
Customize the menu to your needs. It may look something like:
35+
36+
```html
37+
<div class="dropdown position-fixed" id="myMenu{{ $index }}">
38+
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
39+
<li>
40+
<a class="pointer" role="menuitem" tabindex="1"
41+
ng-click="panel.highlight = true">
42+
Select Panel {{ $index + 1 }}
43+
</a>
44+
</li>
45+
<li>
46+
<a class="pointer" role="menuitem" tabindex="2"
47+
ng-click="panel.highlight = false">
48+
Deselect Panel {{ $index + 1 }}
49+
</a>
50+
</li>
51+
<li>
52+
<a class="pointer" role="menuitem" tabindex="3"
53+
ng-click="panel.expanded = true">
54+
Expand Panel {{ $index + 1 }}
55+
</a>
56+
</li>
57+
<li>
58+
<a class="pointer" role="menuitem" tabindex="4"
59+
ng-click="panel.expanded = false">
60+
Contract Panel {{ $index + 1 }}
61+
</a>
62+
</li>
63+
<li>
64+
<a class="pointer" role="menuitem" tabindex="5"
65+
ng-click="addPanel()">
66+
Add a panel
67+
</a>
68+
</li>
69+
<li>
70+
<a href="https://github.com/ianwalter/ng-context-menu"
71+
role="menuitem"
72+
tabindex="-1">
73+
ng-context-menu on GitHub
74+
</a>
75+
</li>
76+
</ul>
77+
</div>
78+
```
79+
80+
#### Step 5: Make sure your menu is has the ```position: fixed``` CSS property
3481

3582
As you can see in the demo, I just created a class called position-fixed and added the property:
3683

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ng-context-menu",
3-
"version": "0.1.6",
3+
"version": "0.1.7",
44
"description": "An AngularJS directive to display a context menu when a right-click event is triggered",
55
"keywords": [
66
"ng-context-menu",

‎dist/ng-context-menu.js‎

Lines changed: 91 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/**
2-
* ng-context-menu - v0.1.6 - An AngularJS directive to display a context menu when a right-click event is triggered
2+
* ng-context-menu - v0.1.7 - An AngularJS directive to display a context menu
3+
* when a right-click event is triggered
34
*
45
* @author Ian Kennington Walter (http://ianvonwalter.com)
56
*/
@@ -11,97 +12,107 @@ angular
1112
menuElement: null
1213
};
1314
})
14-
.directive('contextMenu', ['$document', 'ContextMenuService', function($document, ContextMenuService) {
15-
return {
16-
restrict: 'A',
17-
scope: {
18-
'callback': '&contextMenu',
19-
'disabled': '&contextMenuDisabled'
20-
},
21-
link: function($scope, $element, $attrs) {
22-
var opened = false;
15+
.directive('contextMenu', [
16+
'$document',
17+
'ContextMenuService',
18+
function($document, ContextMenuService) {
19+
return {
20+
restrict: 'A',
21+
scope: {
22+
'callback': '&contextMenu',
23+
'disabled': '&contextMenuDisabled'
24+
},
25+
link: function($scope, $element, $attrs) {
26+
var opened = false;
2327

24-
function open(event, menuElement) {
25-
menuElement.addClass('open');
28+
function open(event, menuElement) {
29+
menuElement.addClass('open');
2630

27-
var doc = $document[0].documentElement;
28-
var docLeft = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0),
29-
docTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0),
30-
elementWidth = menuElement[0].scrollWidth,
31-
elementHeight = menuElement[0].scrollHeight;
32-
var docWidth = doc.clientWidth + docLeft,
33-
docHeight = doc.clientHeight + docTop,
34-
totalWidth = elementWidth + event.pageX,
35-
totalHeight = elementHeight + event.pageY,
36-
left = Math.max(event.pageX - docLeft, 0),
37-
top = Math.max(event.pageY - docTop, 0);
31+
var doc = $document[0].documentElement;
32+
var docLeft = (window.pageXOffset || doc.scrollLeft) -
33+
(doc.clientLeft || 0),
34+
docTop = (window.pageYOffset || doc.scrollTop) -
35+
(doc.clientTop || 0),
36+
elementWidth = menuElement[0].scrollWidth,
37+
elementHeight = menuElement[0].scrollHeight;
38+
var docWidth = doc.clientWidth + docLeft,
39+
docHeight = doc.clientHeight + docTop,
40+
totalWidth = elementWidth + event.pageX,
41+
totalHeight = elementHeight + event.pageY,
42+
left = Math.max(event.pageX - docLeft, 0),
43+
top = Math.max(event.pageY - docTop, 0);
3844

39-
if (totalWidth > docWidth) {
40-
left = left - (totalWidth - docWidth);
41-
}
45+
if (totalWidth > docWidth) {
46+
left = left - (totalWidth - docWidth);
47+
}
48+
49+
if (totalHeight > docHeight) {
50+
top = top - (totalHeight - docHeight);
51+
}
4252

43-
if (totalHeight > docHeight) {
44-
top = top - (totalHeight - docHeight);
53+
menuElement.css('top', top + 'px');
54+
menuElement.css('left', left + 'px');
55+
opened = true;
4556
}
4657

47-
menuElement.css('top', top + 'px');
48-
menuElement.css('left', left + 'px');
49-
opened = true;
50-
}
58+
function close(menuElement) {
59+
menuElement.removeClass('open');
60+
opened = false;
61+
}
5162

52-
function close(menuElement) {
53-
menuElement.removeClass('open');
54-
opened = false;
55-
}
63+
$element.bind('contextmenu', function(event) {
64+
if (!$scope.disabled()) {
65+
if (ContextMenuService.menuElement !== null) {
66+
close(ContextMenuService.menuElement);
67+
}
68+
ContextMenuService.menuElement = angular.element(
69+
document.getElementById($attrs.target)
70+
);
71+
ContextMenuService.element = event.target;
72+
//console.log('set', ContextMenuService.element);
5673

57-
$element.bind('contextmenu', function(event) {
58-
if (!$scope.disabled()) {
59-
if (ContextMenuService.menuElement !== null) {
60-
close(ContextMenuService.menuElement);
74+
event.preventDefault();
75+
event.stopPropagation();
76+
$scope.$apply(function() {
77+
$scope.callback({ $event: event });
78+
open(event, ContextMenuService.menuElement);
79+
});
6180
}
62-
ContextMenuService.menuElement = angular.element(document.getElementById($attrs.target));
63-
ContextMenuService.element = event.target;
64-
//console.log('set', ContextMenuService.element);
81+
});
6582

66-
event.preventDefault();
67-
event.stopPropagation();
68-
$scope.$apply(function() {
69-
$scope.callback({ $event: event });
70-
open(event, ContextMenuService.menuElement);
71-
});
72-
}
73-
});
74-
75-
function handleKeyUpEvent(event) {
76-
//console.log('keyup');
77-
if (opened && event.keyCode === 27) {
78-
$scope.$apply(function() {
79-
close(ContextMenuService.menuElement);
80-
});
83+
function handleKeyUpEvent(event) {
84+
//console.log('keyup');
85+
if (!$scope.disabled() && opened && event.keyCode === 27) {
86+
$scope.$apply(function() {
87+
close(ContextMenuService.menuElement);
88+
});
89+
}
8190
}
82-
}
8391

84-
function handleClickEvent(event) {
85-
if (opened &&
86-
(event.button !== 2 || event.target !== ContextMenuService.element)) {
87-
$scope.$apply(function() {
88-
close(ContextMenuService.menuElement);
89-
});
92+
function handleClickEvent(event) {
93+
if (!$scope.disabled() &&
94+
opened &&
95+
(event.button !== 2 ||
96+
event.target !== ContextMenuService.element)) {
97+
$scope.$apply(function() {
98+
close(ContextMenuService.menuElement);
99+
});
100+
}
90101
}
91-
}
92102

93-
$document.bind('keyup', handleKeyUpEvent);
94-
// Firefox treats a right-click as a click and a contextmenu event while other browsers
95-
// just treat it as a contextmenu event
96-
$document.bind('click', handleClickEvent);
97-
$document.bind('contextmenu', handleClickEvent);
103+
$document.bind('keyup', handleKeyUpEvent);
104+
// Firefox treats a right-click as a click and a contextmenu event
105+
// while other browsers just treat it as a contextmenu event
106+
$document.bind('click', handleClickEvent);
107+
$document.bind('contextmenu', handleClickEvent);
98108

99-
$scope.$on('$destroy', function() {
100-
//console.log('destroy');
101-
$document.unbind('keyup', handleKeyUpEvent);
102-
$document.unbind('click', handleClickEvent);
103-
$document.unbind('contextmenu', handleClickEvent);
104-
});
105-
}
106-
};
107-
}]);
109+
$scope.$on('$destroy', function() {
110+
//console.log('destroy');
111+
$document.unbind('keyup', handleKeyUpEvent);
112+
$document.unbind('click', handleClickEvent);
113+
$document.unbind('contextmenu', handleClickEvent);
114+
});
115+
}
116+
};
117+
}
118+
]);

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ng-context-menu",
3-
"version": "0.1.6",
3+
"version": "0.1.7",
44
"description": "An AngularJS directive to display a context menu when a right-click event is triggered",
55
"main": "dist/ng-context-menu.js",
66
"devDependencies": {

‎public/template/home.html‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,44 @@
11
<h3>Demo:</h3>
22
<br>
33
<div ng-repeat="panel in panels">
4-
<div context-menu="onRightClick(message);" class="panel panel-default" data-target="myMenu{{ $index }}"
4+
<div context-menu="onRightClick(message);" class="panel panel-default"
5+
data-target="myMenu{{ $index }}"
56
ng-class="{ 'highlight': panel.highlight, 'expanded': panel.expanded }">
67
<div class="panel-body">
7-
<strong ng-bind="panel.name"></strong> (Right-click anywhere within this panel)
8+
<strong ng-bind="panel.name"></strong>
9+
(Right-click anywhere within this panel)
810
</div>
911
</div>
1012
<div class="dropdown position-fixed" id="myMenu{{ $index }}">
1113
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
1214
<li>
13-
<a class="pointer" role="menuitem" tabindex="1" ng-click="panel.highlight = true">Select Panel {{ $index + 1 }}</a>
15+
<a class="pointer" role="menuitem" tabindex="1"
16+
ng-click="panel.highlight = true">Select Panel {{ $index + 1 }}</a>
1417
</li>
1518
<li>
16-
<a class="pointer" role="menuitem" tabindex="2" ng-click="panel.highlight = false">Deselect Panel {{ $index + 1 }}</a>
19+
<a class="pointer" role="menuitem" tabindex="2"
20+
ng-click="panel.highlight = false">
21+
Deselect Panel {{ $index + 1 }}
22+
</a>
1723
</li>
1824
<li>
19-
<a class="pointer" role="menuitem" tabindex="3" ng-click="panel.expanded = true">Expand Panel {{ $index + 1 }}</a>
25+
<a class="pointer" role="menuitem" tabindex="3"
26+
ng-click="panel.expanded = true">Expand Panel {{ $index + 1 }}</a>
2027
</li>
2128
<li>
22-
<a class="pointer" role="menuitem" tabindex="4" ng-click="panel.expanded = false">Contract Panel {{ $index + 1 }}</a>
29+
<a class="pointer" role="menuitem" tabindex="4"
30+
ng-click="panel.expanded = false">
31+
Contract Panel {{ $index + 1 }}
32+
</a>
2333
</li>
2434
<li>
25-
<a class="pointer" role="menuitem" tabindex="5" ng-click="addPanel()">Add a panel</a>
35+
<a class="pointer" role="menuitem" tabindex="5"
36+
ng-click="addPanel()">Add a panel</a>
2637
</li>
2738
<li>
28-
<a href="https://github.com/ianwalter/ng-context-menu" role="menuitem" tabindex="-1">ng-context-menu on GitHub</a>
39+
<a href="https://github.com/ianwalter/ng-context-menu" role="menuitem"
40+
tabindex="-1">ng-context-menu on GitHub</a>
2941
</li>
3042
</ul>
3143
</div>
3244
</div>
33-
<br>
34-
<p>
35-
<button class="btn btn-default" ng-click="recreatePanels()">Recreate Panels</button>
36-
</p>

0 commit comments

Comments
 (0)