2018-11-10 00:11:45 +08:00
|
|
|
const $contextMenuContainer = $("#context-menu-container");
|
|
|
|
|
2018-12-29 05:05:04 +08:00
|
|
|
function initContextMenu(event, itemContainer, selectContextMenuItem) {
|
|
|
|
event.stopPropagation();
|
|
|
|
|
2018-11-10 00:11:45 +08:00
|
|
|
$contextMenuContainer.empty();
|
|
|
|
|
2019-03-17 18:38:27 +08:00
|
|
|
function addItems($parent, items) {
|
|
|
|
for (const item of items) {
|
|
|
|
if (item.title === '----') {
|
|
|
|
$parent.append($("<div>").addClass("dropdown-divider"));
|
2018-11-10 00:11:45 +08:00
|
|
|
} else {
|
2019-03-17 18:38:27 +08:00
|
|
|
const $icon = $("<span>");
|
2018-11-10 00:11:45 +08:00
|
|
|
|
2019-03-17 18:38:27 +08:00
|
|
|
if (item.uiIcon) {
|
|
|
|
$icon.addClass("jam jam-" + item.uiIcon);
|
|
|
|
} else {
|
|
|
|
$icon.append(" ");
|
|
|
|
}
|
2018-11-10 00:11:45 +08:00
|
|
|
|
2019-03-17 18:38:27 +08:00
|
|
|
const $item = $("<li>")
|
|
|
|
.addClass("dropdown-item");
|
2018-11-10 00:11:45 +08:00
|
|
|
|
2019-03-17 18:38:27 +08:00
|
|
|
const $link = $("<a>")
|
|
|
|
.append($icon)
|
|
|
|
.append(" ") // some space between icon and text
|
|
|
|
.prop("data-cmd", item.cmd)
|
|
|
|
.append(item.title);
|
|
|
|
|
|
|
|
$item.append($link);
|
|
|
|
|
|
|
|
if (item.enabled !== undefined && !item.enabled) {
|
|
|
|
$link.addClass("disabled");
|
|
|
|
}
|
|
|
|
|
|
|
|
$link.click(async function (e) {
|
|
|
|
const cmd = $(e.target).prop("data-cmd");
|
2018-11-10 00:11:45 +08:00
|
|
|
|
2019-03-17 18:38:27 +08:00
|
|
|
e.originalTarget = event.target;
|
2018-11-10 00:11:45 +08:00
|
|
|
|
2019-03-17 18:38:27 +08:00
|
|
|
await selectContextMenuItem(e, cmd);
|
|
|
|
});
|
2018-11-10 05:18:51 +08:00
|
|
|
|
2019-03-17 18:38:27 +08:00
|
|
|
if (item.items) {
|
|
|
|
$item.addClass("dropdown-submenu");
|
|
|
|
$link.addClass("dropdown-toggle");
|
2018-11-10 00:11:45 +08:00
|
|
|
|
2019-03-17 18:38:27 +08:00
|
|
|
const $subMenu = $("<ul>").addClass("dropdown-menu");
|
|
|
|
|
|
|
|
addItems($subMenu, item.items);
|
|
|
|
|
|
|
|
$item.append($subMenu);
|
|
|
|
}
|
|
|
|
|
|
|
|
$parent.append($item);
|
|
|
|
}
|
2018-11-10 00:11:45 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-03-17 18:38:27 +08:00
|
|
|
addItems($contextMenuContainer, itemContainer.getItems());
|
|
|
|
|
2018-11-10 00:11:45 +08:00
|
|
|
// code below tries to detect when dropdown would overflow from page
|
|
|
|
// in such case we'll position it above click coordinates so it will fit into client
|
|
|
|
const clickPosition = event.pageY;
|
|
|
|
const clientHeight = document.documentElement.clientHeight;
|
|
|
|
const contextMenuHeight = $contextMenuContainer.height();
|
|
|
|
|
|
|
|
let top;
|
|
|
|
|
|
|
|
if (clickPosition + contextMenuHeight > clientHeight) {
|
|
|
|
top = clientHeight - contextMenuHeight - 10;
|
|
|
|
} else {
|
|
|
|
top = event.pageY - 10;
|
|
|
|
}
|
|
|
|
|
|
|
|
$contextMenuContainer.css({
|
|
|
|
display: "block",
|
|
|
|
top: top,
|
|
|
|
left: event.pageX - 20
|
|
|
|
}).addClass("show");
|
|
|
|
}
|
|
|
|
|
|
|
|
$(document).click(() => $contextMenuContainer.hide());
|
|
|
|
|
|
|
|
export default {
|
|
|
|
initContextMenu
|
|
|
|
}
|