Position dropdown after rendering complete

pull/5117/head
Oliver Günther 8 years ago
parent 74919789b6
commit 31071276e2
No known key found for this signature in database
GPG Key ID: 88872239EB414F99
  1. 19
      frontend/app/components/context-menus/context-menu.service.ts
  2. 56
      frontend/app/components/context-menus/has-dropdown-menu/has-dropdown-menu-directive.js
  3. 2
      frontend/app/components/wp-fast-table/handlers/row/context-menu-handler.ts
  4. 1
      frontend/app/global.js

@ -30,7 +30,9 @@ interface ContextMenu {
active();
close();
open();
reposition();
target?:JQuery;
menuElement?:JQuery;
}
export class ContextMenuService {
@ -59,7 +61,8 @@ export class ContextMenuService {
this.active && this.active.close();
}
public activate(contextMenuName, target:JQuery, locals) {
public activate(contextMenuName, event:JQueryEventObject, locals) {
let target = jQuery(event.target);
let contextMenu = this.$injector.get(contextMenuName);
// Close other context menu
@ -69,7 +72,7 @@ export class ContextMenuService {
contextMenu.open(target, locals).then((menuElement) => {
contextMenu.menuElement = menuElement;
this._active_menu = contextMenu;
this.reposition();
setTimeout(() => this.reposition(event), 50);
(menuElement as any).trap();
menuElement.on('click', function (e) {
// allow inputs to be clickable
@ -81,7 +84,7 @@ export class ContextMenuService {
});
}
public reposition() {
public reposition(event:JQueryEventObject) {
if (!this.active) {
return;
}
@ -89,7 +92,13 @@ export class ContextMenuService {
let menuElement = this.active.menuElement;
let target = this.active.target;
menuElement.position({ my: 'center', at: 'bottom right', of: target });
// Uses jquery-ui position
menuElement.position({
my: 'left top',
at: 'right bottom',
of: event,
collision: 'flipfit'
});
}
}

@ -27,7 +27,63 @@
// ++
function hasDropdownMenu($rootScope, $injector, $window, FocusHelper) {
function getCssPositionProperties(dropdown, trigger) {
var hOffset = 0,
vOffset = 0;
if (dropdown.hasClass('dropdown-anchor-top')) {
vOffset = -dropdown.outerHeight() - trigger.outerHeight() + parseInt(trigger.css('margin-top'), 10);
}
// Styling logic taken from jQuery-dropdown plugin: https://github.com/plapier/jquery-dropdown
// (dual MIT/GPL-Licensed)
// Position the dropdown relative-to-parent or relative-to-document
if (dropdown.hasClass('dropdown-relative')) {
return {
left: dropdown.hasClass('dropdown-anchor-right') ?
trigger.position().left -
(dropdown.outerWidth(true) - trigger.outerWidth(true)) -
parseInt(trigger.css('margin-right'), 10) + hOffset :
trigger.position().left + parseInt(trigger.css('margin-left'), 10) + hOffset,
top: trigger.position().top +
trigger.outerHeight(true) -
parseInt(trigger.css('margin-top'), 10) + vOffset
};
}
else {
return {
left: dropdown.hasClass('dropdown-anchor-right') ?
trigger.offset().left - (dropdown.outerWidth() - trigger.outerWidth()) + hOffset : trigger.offset().left + hOffset,
top: trigger.offset().top + trigger.outerHeight() + vOffset
};
}
}
function getPositionPropertiesOfEvent(event) {
var position = {};
if (event.pageX && event.pageY) {
position.top = Math.max(event.pageY, 0);
position.left = Math.max(event.pageX, 0);
}
else {
var bounding = angular.element(event.target)[0].getBoundingClientRect();
position.top = Math.max(bounding.bottom, 0);
position.left = Math.max(bounding.left, 0);
}
return position;
}
function getCssPositionPropertiesOfEvent(event) {
var position = getPositionPropertiesOfEvent(event);
position.top += 'px';
position.left += 'px';
return position;
}
return {
restrict: 'A',

@ -40,7 +40,7 @@ export class ContextMenuHandler implements TableEventHandler {
let element = target.closest(this.SELECTOR);
let row = table.rowObject(element.data('workPackageId'));
this.contextMenu.activate('WorkPackageContextMenu', target, { row: row });
this.contextMenu.activate('WorkPackageContextMenu', evt, { row: row });
return false;
}
}

@ -47,6 +47,7 @@ require('jquery-ujs');
require('angular-dragula');
require('jquery-ui/ui/core.js');
require('jquery-ui/ui/position.js');
require('jquery-ui/ui/widgets/datepicker.js');
require('jquery-ui/ui/widgets/dialog.js');
require('jquery-ui/ui/widgets/autocomplete.js');

Loading…
Cancel
Save