mirror of
https://github.com/JulianGro/overte.git
synced 2025-04-19 04:17:45 +02:00
fix deleting scroll-away items, fix searching case sensitivity, comments
This commit is contained in:
parent
fc771e345c
commit
56ddafed26
2 changed files with 64 additions and 24 deletions
|
@ -79,7 +79,6 @@ function loaded() {
|
|||
elEntityTable = document.getElementById("entity-table");
|
||||
elEntityTableBody = document.getElementById("entity-table-body");
|
||||
elEntityTableScroll = document.getElementById("entity-table-scroll");
|
||||
elEntityTableHeader = document.getElementById("entity-table-header");
|
||||
elEntityTableFooter = document.getElementById("entity-table-footer");
|
||||
elRefresh = document.getElementById("refresh");
|
||||
elToggleLocked = document.getElementById("locked");
|
||||
|
@ -167,7 +166,7 @@ function loaded() {
|
|||
function onRowClicked(clickEvent) {
|
||||
let entityID = this.dataset.entityID;
|
||||
let selection = [entityID];
|
||||
|
||||
|
||||
if (clickEvent.ctrlKey) {
|
||||
let selectedIndex = selectedEntities.indexOf(entityID);
|
||||
if (selectedIndex >= 0) {
|
||||
|
@ -280,9 +279,9 @@ function loaded() {
|
|||
visibleEntities = entities.slice(0);
|
||||
} else {
|
||||
visibleEntities = entities.filter(function(e) {
|
||||
return e.name.indexOf(searchTerm) > -1
|
||||
|| e.type.indexOf(searchTerm) > -1
|
||||
|| e.fullUrl.indexOf(searchTerm) > -1;
|
||||
return e.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1
|
||||
|| e.type.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1
|
||||
|| e.fullUrl.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
@ -308,23 +307,29 @@ function loaded() {
|
|||
for (let i = 0, length = deletedIDs.length; i < length; ++i) {
|
||||
if (id === deletedIDs[i]) {
|
||||
entities.splice(j, 1);
|
||||
if (entitiesByID[id].elRow) {
|
||||
entitiesByID[id].elRow.dataset.entityID = 0;
|
||||
}
|
||||
delete entitiesByID[id];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var rowOffset = entityList.getRowOffset();
|
||||
for (let j = visibleEntities.length - 1; j >= 0; --j) {
|
||||
let id = visibleEntities[j].id;
|
||||
for (let i = 0, length = deletedIDs.length; i < length; ++i) {
|
||||
if (id === deletedIDs[i]) {
|
||||
if (visibleEntities[j].elRow) {
|
||||
visibleEntities[j].elRow.dataset.entityID = 0;
|
||||
if (j < rowOffset) {
|
||||
rowOffset = entityList.decrementRowOffset();
|
||||
}
|
||||
visibleEntities.splice(j, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
entityList.setVisibleItemData(visibleEntities);
|
||||
entityList.refresh();
|
||||
}
|
||||
|
@ -342,6 +347,7 @@ function loaded() {
|
|||
visibleEntities = [];
|
||||
|
||||
entityList.setVisibleItemData([]);
|
||||
entityList.resetRowOffset();
|
||||
entityList.refresh();
|
||||
|
||||
refreshFooter();
|
||||
|
@ -375,11 +381,8 @@ function loaded() {
|
|||
});
|
||||
}
|
||||
|
||||
function refreshEntities(resetRowOffset) {
|
||||
function refreshEntities() {
|
||||
clearEntities();
|
||||
if (resetRowOffset) {
|
||||
entityList.resetRowOffset();
|
||||
}
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'refresh' }));
|
||||
}
|
||||
|
||||
|
@ -575,7 +578,7 @@ function loaded() {
|
|||
function onRadiusChange() {
|
||||
elRadius.value = Math.max(elRadius.value, 0);
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'radius', radius: elRadius.value }));
|
||||
refreshEntities(true);
|
||||
refreshEntities();
|
||||
elNoEntitiesRadius.firstChild.nodeValue = elRadius.value;
|
||||
}
|
||||
|
||||
|
|
|
@ -30,6 +30,14 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
|
|||
var rowHeight = 0;
|
||||
var lastRowChangeScrollTop = 0;
|
||||
|
||||
that.getNumRows = function() {
|
||||
return elRows.length;
|
||||
};
|
||||
|
||||
that.getScrollHeight = function() {
|
||||
return rowHeight * SCROLL_ROWS;
|
||||
};
|
||||
|
||||
that.getRowOffset = function() {
|
||||
return rowOffset;
|
||||
};
|
||||
|
@ -39,8 +47,17 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
|
|||
lastRowChangeScrollTop = 0;
|
||||
};
|
||||
|
||||
that.getNumRows = function() {
|
||||
return elRows.length;
|
||||
that.decrementRowOffset = function() {
|
||||
// increase top buffer height to account for the lost row space
|
||||
var topHeight = parseInt(elTopBuffer.getAttribute("height"));
|
||||
var newTopHeight = topHeight + rowHeight;
|
||||
elTopBuffer.setAttribute("height", newTopHeight);
|
||||
|
||||
rowOffset--;
|
||||
that.refresh();
|
||||
lastRowChangeScrollTop = topHeight;
|
||||
|
||||
return rowOffset;
|
||||
};
|
||||
|
||||
that.setVisibleItemData = function(itemData) {
|
||||
|
@ -59,6 +76,8 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
|
|||
var prevTopHeight = parseInt(elTopBuffer.getAttribute("height"));
|
||||
var prevBottomHeight = parseInt(elBottomBuffer.getAttribute("height"));
|
||||
|
||||
// for each row to scroll down, move the top row element to the bottom of the
|
||||
// table before the bottom buffer and reset it's row data to the new item
|
||||
for (var i = 0; i < numScrollRows; i++) {
|
||||
var rowMovedTopToBottom = elTableBody.childNodes[FIRST_ROW_INDEX];
|
||||
var rowIndex = that.getNumRows() + rowOffset;
|
||||
|
@ -68,17 +87,22 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
|
|||
rowOffset++;
|
||||
}
|
||||
|
||||
var newTopHeight = prevTopHeight + (rowHeight * numScrollRows);
|
||||
var newBottomHeight = prevBottomHeight - (rowHeight * numScrollRows);
|
||||
// add the row space that was scrolled away to the top buffer height and last scroll point
|
||||
// remove the row space that was scrolled away from the bottom buffer height
|
||||
var scrolledSpace = rowHeight * numScrollRows;
|
||||
var newTopHeight = prevTopHeight + scrolledSpace;
|
||||
var newBottomHeight = prevBottomHeight - scrolledSpace;
|
||||
elTopBuffer.setAttribute("height", newTopHeight);
|
||||
elBottomBuffer.setAttribute("height", newBottomHeight);
|
||||
lastRowChangeScrollTop += rowHeight * numScrollRows;
|
||||
lastRowChangeScrollTop += scrolledSpace;
|
||||
};
|
||||
|
||||
that.scrollUp = function(numScrollRows) {
|
||||
var prevTopHeight = parseInt(elTopBuffer.getAttribute("height"));
|
||||
var prevBottomHeight = parseInt(elBottomBuffer.getAttribute("height"));
|
||||
|
||||
// for each row to scroll up, move the bottom row element to the top of
|
||||
// the table before the top row and reset it's row data to the new item
|
||||
for (var i = 0; i < numScrollRows; i++) {
|
||||
var topRow = elTableBody.childNodes[FIRST_ROW_INDEX];
|
||||
var rowMovedBottomToTop = elTableBody.childNodes[FIRST_ROW_INDEX + that.getNumRows() - 1];
|
||||
|
@ -89,20 +113,28 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
|
|||
rowOffset--;
|
||||
}
|
||||
|
||||
var newTopHeight = prevTopHeight - (rowHeight * numScrollRows);
|
||||
var newBottomHeight = prevBottomHeight + (rowHeight * numScrollRows);
|
||||
// remove the row space that was scrolled away from the top buffer height and last scroll point
|
||||
// add the row space that was scrolled away to the bottom buffer height
|
||||
var scrolledSpace = rowHeight * numScrollRows;
|
||||
var newTopHeight = prevTopHeight - scrolledSpace;
|
||||
var newBottomHeight = prevBottomHeight + scrolledSpace;
|
||||
elTopBuffer.setAttribute("height", newTopHeight);
|
||||
elBottomBuffer.setAttribute("height", newBottomHeight);
|
||||
lastRowChangeScrollTop -= rowHeight * numScrollRows;
|
||||
lastRowChangeScrollTop -= scrolledSpace;
|
||||
};
|
||||
|
||||
that.onScroll = function() {
|
||||
var scrollTop = elTableScroll.scrollTop;
|
||||
var nextRowChangeScrollTop = lastRowChangeScrollTop + (rowHeight * SCROLL_ROWS);
|
||||
var scrollHeight = rowHeight * SCROLL_ROWS;
|
||||
var scrollHeight = that.getScrollHeight();
|
||||
var nextRowChangeScrollTop = lastRowChangeScrollTop + scrollHeight;
|
||||
var totalItems = visibleItemData.length;
|
||||
var numRows = that.getNumRows();
|
||||
|
||||
// if the top of the scroll area has past the amount of scroll row space since the last point of scrolling and there
|
||||
// are still more rows to scroll to then trigger a scroll down by the min of the scroll row space or number of
|
||||
// remaining rows below
|
||||
// if the top of the scroll area has gone back above the last point of scrolling then trigger a scroll up by min of
|
||||
// the scroll row space or number of rows above
|
||||
if (scrollTop >= nextRowChangeScrollTop && numRows + rowOffset < totalItems) {
|
||||
var numScrolls = Math.ceil((scrollTop - nextRowChangeScrollTop) / scrollHeight);
|
||||
var numScrollRows = numScrolls * SCROLL_ROWS;
|
||||
|
@ -127,8 +159,10 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
|
|||
return;
|
||||
}
|
||||
|
||||
// start with all row data cleared and initially set to invisible
|
||||
that.clear();
|
||||
|
||||
// update all row data and set rows visible until max visible items reached
|
||||
for (var i = 0; i < numRows; i++) {
|
||||
var rowIndex = i + rowOffset;
|
||||
if (rowIndex >= visibleItemData.length) {
|
||||
|
@ -141,10 +175,12 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
|
|||
elRow.style.display = "";
|
||||
}
|
||||
|
||||
// top buffer height is the number of hidden rows above the top row
|
||||
var topHiddenRows = rowOffset;
|
||||
var topBufferHeight = rowHeight * topHiddenRows;
|
||||
elTopBuffer.setAttribute("height", topBufferHeight);
|
||||
|
||||
// bottom buffer height is the number of hidden rows below the bottom row (last scroll buffer row)
|
||||
var bottomHiddenRows = visibleItemData.length - numRows - rowOffset;
|
||||
var bottomBufferHeight = rowHeight * bottomHiddenRows;
|
||||
if (bottomHiddenRows < 0) {
|
||||
|
@ -171,6 +207,7 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
|
|||
}
|
||||
elRows = [];
|
||||
|
||||
// create new row elements inserted between the top and bottom buffers that can fit into viewable scroll area
|
||||
var usedHeight = 0;
|
||||
while(usedHeight < viewableHeight) {
|
||||
var newRow = createRowFunction();
|
||||
|
@ -180,7 +217,7 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
|
|||
elRows.push(newRow);
|
||||
}
|
||||
|
||||
// extra rows for scrolling purposes
|
||||
// add extras rows for scrolling buffer purposes
|
||||
for (var i = 0; i < SCROLL_ROWS; i++) {
|
||||
var scrollRow = createRowFunction();
|
||||
elTableBody.insertBefore(scrollRow, elBottomBuffer);
|
||||
|
|
Loading…
Reference in a new issue