Merge branch 'entityListReorderColumns' of github.com:dback2/hifi into entityListReorderColumns

This commit is contained in:
David Back 2018-12-06 13:06:49 -08:00
commit a247e14f3d
2 changed files with 45 additions and 29 deletions

View file

@ -110,8 +110,8 @@ const COLUMNS = {
};
const COMPARE_ASCENDING = function(a, b) {
let va = a[currentSortColumn];
let vb = b[currentSortColumn];
let va = a[currentSortColumnID];
let vb = b[currentSortColumnID];
if (va < vb) {
return -1;
@ -174,7 +174,7 @@ let entityList = null; // The ListView
*/
let entityListContextMenu = null;
let currentSortColumn = 'type';
let currentSortColumnID = 'type';
let currentSortOrder = ASCENDING_SORT;
let elSortOrders = {};
let typeFilters = [];
@ -185,6 +185,7 @@ let columnsByID = {};
let lastResizeEvent = null;
let resizeColumnIndex = 0;
let elTargetTh = null;
let elTargetSpan = null;
let targetColumnIndex = 0;
let lastColumnSwapPosition = -1;
let initialThEvent = null;
@ -234,10 +235,6 @@ const PROFILE = !ENABLE_PROFILING ? PROFILE_NOOP : function(name, fn, args) {
console.log("PROFILE-Web " + profileIndent + "(" + name + ") End " + delta + "ms");
};
debugPrint = function (message) {
console.log(message);
};
function loaded() {
openEventBridge(function() {
elEntityTable = document.getElementById("entity-table");
@ -328,10 +325,11 @@ function loaded() {
for (let columnID in COLUMNS) {
let columnData = COLUMNS[columnID];
let thID = "entity-" + columnID;
let elTh = document.createElement("th");
let thID = "entity-" + columnID;
elTh.setAttribute("id", thID);
elTh.setAttribute("columnIndex", columnIndex);
elTh.setAttribute("columnID", columnID);
if (columnData.glyph) {
let elGlyph = document.createElement("span");
elGlyph.className = "glyph";
@ -341,15 +339,19 @@ function loaded() {
elTh.innerText = columnData.columnHeader;
}
elTh.onmousedown = function(event) {
elTargetTh = event.target;
if (event.target.nodeName === 'TH') {
elTargetTh = event.target;
targetColumnIndex = parseInt(elTargetTh.getAttribute("columnIndex"));
lastColumnSwapPosition = event.clientX;
} else if (event.target.nodeName === 'SPAN') {
elTargetSpan = event.target;
}
initialThEvent = event;
targetColumnIndex = parseInt(elTargetTh.getAttribute("columnIndex"));
};
let elResizer = document.createElement("span");
elResizer.className = "resizer";
elResizer.innerHTML = "&nbsp;";
elResizer.setAttribute("columnIndex", columnIndex);
elResizer.onmousedown = onStartResize;
elTh.appendChild(elResizer);
@ -762,13 +764,13 @@ function loaded() {
refreshNoEntitiesMessage();
}
function setSortColumn(column) {
function setSortColumn(columnID) {
PROFILE("set-sort-column", function() {
if (currentSortColumn === column) {
if (currentSortColumnID === columnID) {
currentSortOrder *= -1;
} else {
elSortOrders[currentSortColumn].innerHTML = "";
currentSortColumn = column;
elSortOrders[currentSortColumnID].innerHTML = "";
currentSortColumnID = columnID;
currentSortOrder = ASCENDING_SORT;
}
refreshSortOrder();
@ -777,7 +779,7 @@ function loaded() {
}
function refreshSortOrder() {
elSortOrders[currentSortColumn].innerHTML = currentSortOrder === ASCENDING_SORT ? ASCENDING_STRING : DESCENDING_STRING;
elSortOrders[currentSortColumnID].innerHTML = currentSortOrder === ASCENDING_SORT ? ASCENDING_STRING : DESCENDING_STRING;
}
function refreshEntities() {
@ -1094,7 +1096,7 @@ function loaded() {
function onStartResize(event) {
lastResizeEvent = event;
resizeColumnIndex = parseInt(this.getAttribute("columnIndex"));
resizeColumnIndex = parseInt(this.parentNode.getAttribute("columnIndex"));
event.stopPropagation();
}
@ -1152,14 +1154,18 @@ function loaded() {
for (let i = 0; i < visibleEntities.length; ++i) {
let elRow = visibleEntities[i].elRow;
let columnACell = elRow.childNodes[columnAIndex];
let columnBCell = elRow.childNodes[columnBIndex];
elRow.removeChild(columnBCell);
elRow.insertBefore(columnBCell, columnACell);
if (elRow) {
let columnACell = elRow.childNodes[columnAIndex];
let columnBCell = elRow.childNodes[columnBIndex];
elRow.removeChild(columnBCell);
elRow.insertBefore(columnBCell, columnACell);
}
}
columns[columnAIndex] = columnB;
columns[columnBIndex] = columnA;
updateColumnWidths();
}
document.onmousemove = function(event) {
@ -1206,26 +1212,40 @@ function loaded() {
let prevColumnIndex = targetColumnIndex - 1;
let prevColumnTh = columns[prevColumnIndex].elTh;
let prevColumnEndX = prevColumnTh.getBoundingClientRect().right;
if (event.clientX <= prevColumnEndX && event.clientX - lastColumnSwapPosition >= DELTA_X_COLUMN_SWAP_POSITION) {
if (event.clientX <= prevColumnEndX && lastColumnSwapPosition - event.clientX >= DELTA_X_COLUMN_SWAP_POSITION) {
swapColumns(prevColumnIndex, targetColumnIndex);
targetColumnIndex = prevColumnIndex;
targetColumnIndex = prevColumnIndex;
lastColumnSwapPosition = event.clientX;
}
}
} else if (elTargetSpan) {
let dxFromInitial = event.clientX - initialThEvent.clientX;
if (Math.abs(dxFromInitial) >= DELTA_X_MOVE_COLUMNS_THRESHOLD) {
elTargetTh = elTargetSpan.parentNode;
elTargetTh.className = "dragging";
targetColumnIndex = parseInt(elTargetTh.getAttribute("columnIndex"));
lastColumnSwapPosition = event.clientX;
elTargetSpan = null;
}
}
};
document.onmouseup = function(event) {
if (elTargetTh) {
if (elTargetTh.className !== "dragging" && elTargetTh === event.target) {
let columnID = columns[targetColumnIndex].columnID;
let columnID = elTargetTh.getAttribute("columnID");
setSortColumn(columnID);
}
elTargetTh.className = "";
} else if (elTargetSpan) {
let columnID = elTargetSpan.parentNode.getAttribute("columnID");
setSortColumn(columnID);
}
lastResizeEvent = null;
elTargetTh = null;
elTargetSpan = null;
initialThEvent = null;
}
};
function setSpaceMode(spaceMode) {
if (spaceMode === "local") {

View file

@ -9,10 +9,6 @@
const SCROLL_ROWS = 2; // number of rows used as scrolling buffer, each time we pass this number of rows we scroll
const FIRST_ROW_INDEX = 2; // the first elRow element's index in the child nodes of the table body
debugPrint = function (message) {
console.log(message);
};
function ListView(elTableBody, elTableScroll, elTableHeaderRow, createRowFunction, updateRowFunction, clearRowFunction,
preRefreshFunction, postRefreshFunction, preResizeFunction, WINDOW_NONVARIABLE_HEIGHT) {
this.elTableBody = elTableBody;