This commit is contained in:
Thijs Wenker 2018-10-12 21:15:25 +02:00
parent 4c3f5b3bbc
commit e5ef589a3c
3 changed files with 59 additions and 24 deletions

View file

@ -1812,7 +1812,7 @@ body#entity-list-body {
}
.context-menu li {
list-style-type: none;
padding: 0 5px 0 5px;
padding: 4px 18px 4px 18px;
margin: 0;
white-space: nowrap;
}
@ -1820,8 +1820,9 @@ body#entity-list-body {
background-color: #e3e3e3;
}
.context-menu li.separator {
border-top: 1px solid #000000;
border-top: 1px solid #333333;
margin: 5px 5px;
padding: 0 0;
}
.context-menu li.disabled {
color: #333333;

View file

@ -70,7 +70,10 @@ var selectedEntities = [];
var entityList = null; // The ListView
var entityListContextMenu = new EntityListContextMenu();
/**
* @type EntityListContextMenu
*/
var entityListContextMenu = null;
var currentSortColumn = 'type';
var currentSortOrder = ASCENDING_SORT;
@ -187,21 +190,24 @@ function loaded() {
entityList = new ListView(elEntityTableBody, elEntityTableScroll, elEntityTableHeaderRow,
createRow, updateRow, clearRow, WINDOW_NONVARIABLE_HEIGHT);
entityListContextMenu.initialize();
entityListContextMenu = new EntityListContextMenu();
function startRenamingEntity(entityID) {
if (!entitiesByID[entityID] || !entitiesByID[entityID].elRow) {
let entity = entitiesByID[entityID];
if (!entity || entity.locked || !entity.elRow) {
return;
}
let elCell = entitiesByID[entityID].elRow.childNodes[COLUMN_INDEX.NAME];
let elCell = entity.elRow.childNodes[COLUMN_INDEX.NAME];
let elRenameInput = document.createElement("input");
elRenameInput.setAttribute('class', 'rename-entity');
elRenameInput.value = entitiesByID[entityID].name;
elRenameInput.onclick = function(event) {
elRenameInput.value = entity.name;
let ignoreClicks = function(event) {
event.stopPropagation();
};
elRenameInput.onclick = ignoreClicks;
elRenameInput.ondblclick = ignoreClicks;
elRenameInput.onkeyup = function(keyEvent) {
if (keyEvent.key === "Enter") {
elRenameInput.blur();
@ -215,7 +221,7 @@ function loaded() {
entityID: entityID,
name: value
}));
entitiesByID[entityID].name = value;
entity.name = value;
elCell.innerText = value;
};
@ -260,13 +266,20 @@ function loaded() {
refreshFooter();
}
entityListContextMenu.open(clickEvent, entityID);
let enabledContextMenuItems = [];
if (entitiesByID[entityID] && !entitiesByID[entityID].locked) {
enabledContextMenuItems.push('Rename');
enabledContextMenuItems.push('Delete');
}
entityListContextMenu.open(clickEvent, entityID, enabledContextMenuItems);
}
function onRowClicked(clickEvent) {
let entityID = this.dataset.entityID;
let selection = [entityID];
if (clickEvent.ctrlKey) {
let selectedIndex = selectedEntities.indexOf(entityID);
if (selectedIndex >= 0) {
@ -759,7 +772,7 @@ function loaded() {
}, false);
// close context menu when switching focus to another window
$(window).blur(function(){
$(window).blur(function() {
entityListContextMenu.close.call(entityListContextMenu);
});
}

View file

@ -19,6 +19,8 @@ const CONTEXT_MENU_CLASS = "context-menu";
function EntityListContextMenu() {
this._elContextMenu = null;
this._callback = null;
this._listItems = [];
this._initialize();
}
EntityListContextMenu.prototype = {
@ -38,6 +40,11 @@ EntityListContextMenu.prototype = {
*/
_selectedEntityID: null,
/**
* @private
*/
_listItems: null,
/**
* Close the context menu
*/
@ -55,10 +62,17 @@ EntityListContextMenu.prototype = {
* Open the context menu
* @param clickEvent
* @param selectedEntityID
* @param enabledOptions
*/
open: function(clickEvent, selectedEntityID) {
open: function(clickEvent, selectedEntityID, enabledOptions) {
this._selectedEntityID = selectedEntityID;
// If the right-clicked item has a context menu open it.
this._listItems.forEach(function(listItem) {
let enabled = enabledOptions.includes(listItem.label);
listItem.enabled = enabled;
listItem.element.setAttribute('class', enabled ? '' : 'disabled');
});
this._elContextMenu.style.display = "block";
this._elContextMenu.style.left
= Math.min(clickEvent.pageX, document.body.offsetWidth - this._elContextMenu.offsetWidth).toString() + "px";
@ -85,15 +99,21 @@ EntityListContextMenu.prototype = {
let elListItem = document.createElement("li");
elListItem.innerText = itemLabel;
if (isEnabled === undefined || isEnabled) {
elListItem.addEventListener("click", function () {
if (this._callback) {
this._callback.call(this, itemLabel, this._selectedEntityID);
}
}.bind(this), false);
} else {
elListItem.setAttribute('class', 'disabled');
}
let listItem = {
label: itemLabel,
element: elListItem,
enabled: false
};
elListItem.addEventListener("click", function () {
if (listItem.enabled && this._callback) {
this._callback.call(this, itemLabel, this._selectedEntityID);
}
}.bind(this), false);
elListItem.setAttribute('class', 'disabled');
this._listItems.push(listItem);
this._elContextMenu.appendChild(elListItem);
},
@ -109,8 +129,9 @@ EntityListContextMenu.prototype = {
/**
* Initialize the context menu.
* @private
*/
initialize: function() {
_initialize: function() {
this._elContextMenu = document.createElement("ul");
this._elContextMenu.setAttribute("class", CONTEXT_MENU_CLASS);
document.body.appendChild(this._elContextMenu);