Skip to content

Adjust position of context menu in corner cases #6

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
tgelu wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Adjust position of context menu in corner cases #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
53787c9
Adjust context menu position
Jul 6, 2015
7e67a7e
Reverted one unintended change
Jul 6, 2015
11acec8
Incremented version in required files
Jul 6, 2015
94580bd
Use of mousedown instead of click
Jul 29, 2015
62198a8
Incremented necessary versions
Jul 29, 2015
a122c17
Fixed two Ie8 issues
Aug 5, 2015
c759bd9
Avoid binding mouseevents on the window object
Aug 5, 2015
8591601
Incremented necessary version for the IE8 working release
Aug 5, 2015
8d82dcb
Bugfixed the contextMenu adjust position function
Aug 6, 2015
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
5 changes: 3 additions & 2 deletions bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angular-context-menu",
"version": "0.1.2",
"version": "0.1.6",
"description": "An AngularJS directive to set up and open a context menu when a right-click or click event is triggered",
"keywords": [
"angular-context-menu",
Expand All @@ -12,7 +12,8 @@
"authors": [
"Ian Kennington Walter (http://ianvonwalter.com)",
"Briant Ford",
"Till Breuer (https://github.com/tilt)"
"Till Breuer (https://github.com/tilt)",
"Gelu Timoficiuc (https://github.com/tgelu)"
],
"license": "MIT",
"main": [
Expand Down
51 changes: 35 additions & 16 deletions dist/angular-context-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
/**
* @license
* angular-context-menu - v0.1.2 - An AngularJS directive to display a context menu
* angular-context-menu - v0.1.6 - An AngularJS directive to display a context menu
* (c) 2014
* License: MIT
*
* @authors Brian Ford (http://briantford.com), Ian Kennington Walter (http://ianvonwalter.com), Till Breuer (https://github.com/tilt)
* @authors Brian Ford (http://briantford.com), Ian Kennington Walter (http://ianvonwalter.com), Till Breuer (https://github.com/tilt), Gelu Timoficiuc (https://github.com/tgelu)
*/

angular.module('ng-context-menu', [])

.factory('ngContextMenu', [
'$q',
'$http',
'$timeout',
'$compile',
'$templateCache',
'$animate',
'$rootScope',
'$controller',
function($q, $http, $compile, $templateCache, $animate, $rootScope, $controller) {
function($q, $http, $timeout, $compile, $templateCache, $animate, $rootScope, $controller) {

return function contextMenuFactory(config) {
if (!(!config.template ^ !config.templateUrl)) {
Expand Down Expand Up @@ -57,12 +58,11 @@ angular.module('ng-context-menu', [])
if (css) {
element.css(css);
}

adjustPosition(element);
return element;
});
}


function attach (html, locals) {
container = angular.element(config.container || document.body);
element = angular.element(html);
Expand Down Expand Up @@ -104,6 +104,19 @@ angular.module('ng-context-menu', [])
return deferred.promise;
}

function adjustPosition(element) {
var windowHeight = 'innerHeight' in window ? window.innerHeight : document.documentElement.offsetHeight;
var windowWidth = 'innerWidth' in window ? window.innerWidth : document.documentElement.offsetWidth;
$timeout(function() {
if (windowHeight < element[0].offsetTop + element[0].offsetHeight) {
element.css('top', element[0].offsetTop - element[0].offsetHeight + 'px');
}
if (windowWidth < element[0].offsetLeft + element[0].offsetWidth) {
element.css('left', element[0].offsetLeft - element[0].offsetWidth + 'px');
}
}, 0);
}

function active () {
return !!element;
}
Expand All @@ -119,16 +132,16 @@ angular.module('ng-context-menu', [])

.directive('hasContextMenu', [
'$injector',
'$window',
'$document',
'$parse',
function($injector, $window, $parse) {
function($injector, $document, $parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var openTarget,
contextMenu = $injector.get(attrs.target),
locals = {},
win = angular.element($window),
doc = angular.element($document),
menuElement,
triggerOnEvent = attrs.triggerOnEvent || 'contextmenu';

Expand All @@ -138,10 +151,9 @@ angular.module('ng-context-menu', [])

// prepare locals, these define properties to be passed on to the context menu scope
if (attrs.locals) {
var localKeys = attrs.locals.split(',').map(function(local) {
return local.trim();
});
var localKeys = attrs.locals.split(',');
angular.forEach(localKeys, function(key) {
key = key.trim();
locals[key] = scope[key];
});
}
Expand All @@ -157,9 +169,16 @@ angular.module('ng-context-menu', [])
}

function getCssPositionProperties(event) {
if (event.pageX || event.pageY) {
clickX = event.pageX;
clickY = event.pageY;
} else {
clickX = event.clientX + document.documentElement.scrollLeft;
clickY = event.clientY + document.documentElement.scrollTop;
}
return {
top: Math.max(event.pageY, 0) + 'px',
left: Math.max(event.pageX, 0) + 'px'
left: Math.max(clickX, 0) + 'px',
top: Math.max(clickY, 0) + 'px'
};
}

Expand All @@ -173,7 +192,7 @@ angular.module('ng-context-menu', [])
});
});

win.bind('keyup', function(event) {
doc.bind('keyup', function(event) {
if (contextMenu.active() && event.keyCode === 27) {
scope.$apply(function() {
close();
Expand All @@ -192,8 +211,8 @@ angular.module('ng-context-menu', [])

// Firefox treats a right-click as a click and a contextmenu event while other browsers
// just treat it as a contextmenu event
win.bind('click', handleWindowClickEvent);
win.bind(triggerOnEvent, handleWindowClickEvent);
doc.bind('click', handleWindowClickEvent);
doc.bind(triggerOnEvent, handleWindowClickEvent);
}
};
}]);
2 changes: 1 addition & 1 deletion dist/angular-context-menu.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angular-context-menu",
"version": "0.1.1",
"version": "0.1.6",
"description": "An AngularJS directive to display a context menu when a right-click event is triggered",
"main": "dist/angular-context-menu.min.js",
"devDependencies": {
Expand All @@ -20,6 +20,6 @@
"angularjs",
"angular"
],
"authors": "Ian Kennington Walter (http://ianvonwalter.com), Briant Ford, Till Breuer (https://github.com/tilt)",
"authors": "Ian Kennington Walter (http://ianvonwalter.com), Briant Ford, Till Breuer (https://github.com/tilt), Gelu Timoficiuc (https://github.com/tgelu)",
"license": "MIT"
}
51 changes: 35 additions & 16 deletions src/angular-context-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
/**
* @license
* angular-context-menu - v0.1.2 - An AngularJS directive to display a context menu
* angular-context-menu - v0.1.6 - An AngularJS directive to display a context menu
* (c) 2014
* License: MIT
*
* @authors Brian Ford (http://briantford.com), Ian Kennington Walter (http://ianvonwalter.com), Till Breuer (https://github.com/tilt)
* @authors Brian Ford (http://briantford.com), Ian Kennington Walter (http://ianvonwalter.com), Till Breuer (https://github.com/tilt), Gelu Timoficiuc (https://github.com/tgelu)
*/

angular.module('ng-context-menu', [])

.factory('ngContextMenu', [
'$q',
'$http',
'$timeout',
'$compile',
'$templateCache',
'$animate',
'$rootScope',
'$controller',
function($q, $http, $compile, $templateCache, $animate, $rootScope, $controller) {
function($q, $http, $timeout, $compile, $templateCache, $animate, $rootScope, $controller) {

return function contextMenuFactory(config) {
if (!(!config.template ^ !config.templateUrl)) {
Expand Down Expand Up @@ -57,12 +58,11 @@ angular.module('ng-context-menu', [])
if (css) {
element.css(css);
}

adjustPosition(element);
return element;
});
}


function attach (html, locals) {
container = angular.element(config.container || document.body);
element = angular.element(html);
Expand Down Expand Up @@ -104,6 +104,19 @@ angular.module('ng-context-menu', [])
return deferred.promise;
}

function adjustPosition(element) {
var windowHeight = 'innerHeight' in window ? window.innerHeight : document.documentElement.offsetHeight;
var windowWidth = 'innerWidth' in window ? window.innerWidth : document.documentElement.offsetWidth;
$timeout(function() {
if (windowHeight < element[0].offsetTop + element[0].offsetHeight) {
element.css('top', element[0].offsetTop - element[0].offsetHeight + 'px');
}
if (windowWidth < element[0].offsetLeft + element[0].offsetWidth) {
element.css('left', element[0].offsetLeft - element[0].offsetWidth + 'px');
}
}, 0);
}

function active () {
return !!element;
}
Expand All @@ -119,16 +132,16 @@ angular.module('ng-context-menu', [])

.directive('hasContextMenu', [
'$injector',
'$window',
'$document',
'$parse',
function($injector, $window, $parse) {
function($injector, $document, $parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var openTarget,
contextMenu = $injector.get(attrs.target),
locals = {},
win = angular.element($window),
doc = angular.element($document),
menuElement,
triggerOnEvent = attrs.triggerOnEvent || 'contextmenu';

Expand All @@ -138,10 +151,9 @@ angular.module('ng-context-menu', [])

// prepare locals, these define properties to be passed on to the context menu scope
if (attrs.locals) {
var localKeys = attrs.locals.split(',').map(function(local) {
return local.trim();
});
var localKeys = attrs.locals.split(',');
angular.forEach(localKeys, function(key) {
key = key.trim();
locals[key] = scope[key];
});
}
Expand All @@ -157,9 +169,16 @@ angular.module('ng-context-menu', [])
}

function getCssPositionProperties(event) {
if (event.pageX || event.pageY) {
clickX = event.pageX;
clickY = event.pageY;
} else {
clickX = event.clientX + document.documentElement.scrollLeft;
clickY = event.clientY + document.documentElement.scrollTop;
}
return {
top: Math.max(event.pageY, 0) + 'px',
left: Math.max(event.pageX, 0) + 'px'
left: Math.max(clickX, 0) + 'px',
top: Math.max(clickY, 0) + 'px'
};
}

Expand All @@ -173,7 +192,7 @@ angular.module('ng-context-menu', [])
});
});

win.bind('keyup', function(event) {
doc.bind('keyup', function(event) {
if (contextMenu.active() && event.keyCode === 27) {
scope.$apply(function() {
close();
Expand All @@ -192,8 +211,8 @@ angular.module('ng-context-menu', [])

// Firefox treats a right-click as a click and a contextmenu event while other browsers
// just treat it as a contextmenu event
win.bind('click', handleWindowClickEvent);
win.bind(triggerOnEvent, handleWindowClickEvent);
doc.bind('click', handleWindowClickEvent);
doc.bind(triggerOnEvent, handleWindowClickEvent);
}
};
}]);