mirror of
https://github.com/JulianGro/overte.git
synced 2025-04-25 18:55:01 +02:00
CR changes
This commit is contained in:
parent
e701c79984
commit
e1758c7974
2 changed files with 235 additions and 224 deletions
|
@ -22,9 +22,25 @@ const EXPAND_EXTRA_INFO = "D";
|
|||
const FILTER_IN_VIEW_ATTRIBUTE = "pressed";
|
||||
const WINDOW_NONVARIABLE_HEIGHT = 206;
|
||||
const NUM_COLUMNS = 12;
|
||||
const EMPTY_ENTITY_ID = "0";
|
||||
const DELETE = 46; // Key code for the delete key.
|
||||
const KEY_P = 80; // Key code for letter p used for Parenting hotkey.
|
||||
|
||||
const COLUMN_INDEX = {
|
||||
TYPE: 0,
|
||||
NAME: 1,
|
||||
URL: 2,
|
||||
LOCKED: 3,
|
||||
VISIBLE: 4,
|
||||
VERTICLES_COUNT: 5,
|
||||
TEXTURES_COUNT: 6,
|
||||
TEXTURES_SIZE: 7,
|
||||
HAS_TRANSPARENT: 8,
|
||||
IS_BAKED: 9,
|
||||
DRAW_CALLS: 10,
|
||||
HAS_SCRIPT: 11
|
||||
};
|
||||
|
||||
const COMPARE_ASCENDING = function(a, b) {
|
||||
let va = a[currentSortColumn];
|
||||
let vb = b[currentSortColumn];
|
||||
|
@ -33,15 +49,18 @@ const COMPARE_ASCENDING = function(a, b) {
|
|||
return -1;
|
||||
} else if (va > vb) {
|
||||
return 1;
|
||||
} else if (a.id < b.id) {
|
||||
return -1;
|
||||
}
|
||||
return 0;
|
||||
|
||||
return 1;
|
||||
}
|
||||
const COMPARE_DESCENDING = function(a, b) {
|
||||
return COMPARE_ASCENDING(b, a);
|
||||
}
|
||||
|
||||
// List of all entities
|
||||
let entities = []
|
||||
var entities = []
|
||||
// List of all entities, indexed by Entity ID
|
||||
var entitiesByID = {};
|
||||
// The filtered and sorted list of entities
|
||||
|
@ -61,11 +80,11 @@ const PROFILE_NOOP = function(_name, fn, args) {
|
|||
} ;
|
||||
const PROFILE = !ENABLE_PROFILING ? PROFILE_NOOP : function(name, fn, args) {
|
||||
console.log("PROFILE-Web " + profileIndent + "(" + name + ") Begin");
|
||||
var previousIndent = profileIndent;
|
||||
let previousIndent = profileIndent;
|
||||
profileIndent += ' ';
|
||||
var before = Date.now();
|
||||
let before = Date.now();
|
||||
fn.apply(this, args);
|
||||
var delta = Date.now() - before;
|
||||
let delta = Date.now() - before;
|
||||
profileIndent = previousIndent;
|
||||
console.log("PROFILE-Web " + profileIndent + "(" + name + ") End " + delta + "ms");
|
||||
};
|
||||
|
@ -161,7 +180,7 @@ function loaded() {
|
|||
|
||||
elNoEntitiesInView.style.display = "none";
|
||||
|
||||
entityList = new ListView("entity-table", "entity-table-body", "entity-table-scroll", createRowFunction, updateRowFunction, clearRowFunction);
|
||||
entityList = new ListView("entity-table", "entity-table-body", "entity-table-scroll", createRow, updateRow, clearRow);
|
||||
|
||||
function onRowClicked(clickEvent) {
|
||||
let entityID = this.dataset.entityID;
|
||||
|
@ -293,7 +312,7 @@ function loaded() {
|
|||
});
|
||||
|
||||
PROFILE("update-dom", function() {
|
||||
entityList.setVisibleItemData(visibleEntities);
|
||||
entityList.setItemData(visibleEntities);
|
||||
entityList.refresh();
|
||||
});
|
||||
|
||||
|
@ -309,7 +328,7 @@ function loaded() {
|
|||
if (id === deletedIDs[i]) {
|
||||
entities.splice(j, 1);
|
||||
if (entitiesByID[id].elRow) {
|
||||
entitiesByID[id].elRow.dataset.entityID = 0;
|
||||
entitiesByID[id].elRow.dataset.entityID = EMPTY_ENTITY_ID;
|
||||
}
|
||||
delete entitiesByID[id];
|
||||
break;
|
||||
|
@ -317,7 +336,7 @@ function loaded() {
|
|||
}
|
||||
}
|
||||
|
||||
var rowOffset = entityList.getRowOffset();
|
||||
let rowOffset = entityList.rowOffset;
|
||||
for (let j = visibleEntities.length - 1; j >= 0; --j) {
|
||||
let id = visibleEntities[j].id;
|
||||
for (let i = 0, length = deletedIDs.length; i < length; ++i) {
|
||||
|
@ -331,23 +350,21 @@ function loaded() {
|
|||
}
|
||||
}
|
||||
|
||||
entityList.setVisibleItemData(visibleEntities);
|
||||
entityList.refresh();
|
||||
}
|
||||
|
||||
function clearEntities() {
|
||||
let firstVisibleRow = entityList.getRowOffset();
|
||||
let firstVisibleRow = entityList.rowOffset;
|
||||
let lastVisibleRow = firstVisibleRow + entityList.getNumRows() - 1;
|
||||
for (let i = firstVisibleRow; i <= lastVisibleRow && i < visibleEntities.length; i++) {
|
||||
let entity = visibleEntities[i];
|
||||
entity.elRow.dataset.entityID = 0;
|
||||
entity.elRow.dataset.entityID = EMPTY_ENTITY_ID;
|
||||
}
|
||||
|
||||
entities = [];
|
||||
entitiesByID = {};
|
||||
visibleEntities = [];
|
||||
|
||||
entityList.setVisibleItemData([]);
|
||||
entityList.resetRowOffset();
|
||||
entityList.refresh();
|
||||
|
||||
|
@ -402,24 +419,17 @@ function loaded() {
|
|||
function updateSelectedEntities(selectedIDs) {
|
||||
let notFound = false;
|
||||
|
||||
let firstVisibleRow = entityList.getRowOffset();
|
||||
let lastVisibleRow = firstVisibleRow + entityList.getNumRows() - 1;
|
||||
for (let i = firstVisibleRow; i <= lastVisibleRow && i < visibleEntities.length; i++) {
|
||||
let entity = visibleEntities[i];
|
||||
entity.elRow.className = '';
|
||||
}
|
||||
|
||||
for (let i = 0; i < selectedEntities.length; i++) {
|
||||
let id = selectedEntities[i];
|
||||
selectedEntities.forEach(function(id) {
|
||||
let entity = entitiesByID[id];
|
||||
if (entity) {
|
||||
entitiesByID[id].selected = false;
|
||||
if (entity !== undefined) {
|
||||
entity.selected = false;
|
||||
entity.elRow.className = '';
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
selectedEntities = [];
|
||||
for (let i = 0; i < selectedIDs.length; i++) {
|
||||
let id = selectedIDs[i];
|
||||
|
||||
selectedIDs.forEach(function(id) {
|
||||
selectedEntities.push(id);
|
||||
if (id in entitiesByID) {
|
||||
let entity = entitiesByID[id];
|
||||
|
@ -430,19 +440,19 @@ function loaded() {
|
|||
} else {
|
||||
notFound = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
refreshFooter();
|
||||
|
||||
return notFound;
|
||||
}
|
||||
|
||||
function createRowFunction() {
|
||||
var row = document.createElement("tr");
|
||||
for (var i = 0; i < NUM_COLUMNS; i++) {
|
||||
var column = document.createElement("td");
|
||||
// locked, visible, hasTransparent, isBaked glyph columns
|
||||
if (i === 3 || i === 4 || i === 8 || i === 9) {
|
||||
function createRow() {
|
||||
let row = document.createElement("tr");
|
||||
for (let i = 0; i < NUM_COLUMNS; i++) {
|
||||
let column = document.createElement("td");
|
||||
if (i === COLUMN_INDEX.LOCKED || i === COLUMN_INDEX.VISIBLE ||
|
||||
i === COLUMN_INDEX.HAS_TRANSPARENT || i === COLUMN_INDEX.IS_BAKED) {
|
||||
column.className = 'glyph';
|
||||
}
|
||||
row.appendChild(column);
|
||||
|
@ -452,30 +462,30 @@ function loaded() {
|
|||
return row;
|
||||
}
|
||||
|
||||
function updateRowFunction(elRow, itemData) {
|
||||
var typeCell = elRow.childNodes[0];
|
||||
function updateRow(elRow, itemData) {
|
||||
let typeCell = elRow.childNodes[COLUMN_INDEX.TYPE];
|
||||
typeCell.innerText = itemData.type;
|
||||
var nameCell = elRow.childNodes[1];
|
||||
let nameCell = elRow.childNodes[COLUMN_INDEX.NAME];
|
||||
nameCell.innerText = itemData.name;
|
||||
var urlCell = elRow.childNodes[2];
|
||||
let urlCell = elRow.childNodes[COLUMN_INDEX.URL];
|
||||
urlCell.innerText = itemData.url;
|
||||
var lockedCell = elRow.childNodes[3];
|
||||
let lockedCell = elRow.childNodes[COLUMN_INDEX.LOCKED];
|
||||
lockedCell.innerHTML = itemData.locked;
|
||||
var visibleCell = elRow.childNodes[4];
|
||||
let visibleCell = elRow.childNodes[COLUMN_INDEX.VISIBLE];
|
||||
visibleCell.innerHTML = itemData.visible;
|
||||
var verticesCountCell = elRow.childNodes[5];
|
||||
let verticesCountCell = elRow.childNodes[COLUMN_INDEX.VERTICLES_COUNT];
|
||||
verticesCountCell.innerText = itemData.verticesCount;
|
||||
var texturesCountCell = elRow.childNodes[6];
|
||||
let texturesCountCell = elRow.childNodes[COLUMN_INDEX.TEXTURES_COUNT];
|
||||
texturesCountCell.innerText = itemData.texturesCount;
|
||||
var texturesSizeCell = elRow.childNodes[7];
|
||||
let texturesSizeCell = elRow.childNodes[COLUMN_INDEX.TEXTURES_SIZE];
|
||||
texturesSizeCell.innerText = itemData.texturesSize;
|
||||
var hasTransparentCell = elRow.childNodes[8];
|
||||
let hasTransparentCell = elRow.childNodes[COLUMN_INDEX.HAS_TRANSPARENT];
|
||||
hasTransparentCell.innerHTML = itemData.hasTransparent;
|
||||
var isBakedCell = elRow.childNodes[9];
|
||||
let isBakedCell = elRow.childNodes[COLUMN_INDEX.IS_BAKED];
|
||||
isBakedCell.innerHTML = itemData.isBaked;
|
||||
var drawCallsCell = elRow.childNodes[10];
|
||||
let drawCallsCell = elRow.childNodes[COLUMN_INDEX.DRAW_CALLS];
|
||||
drawCallsCell.innerText = itemData.drawCalls;
|
||||
var hasScriptCell = elRow.childNodes[11];
|
||||
let hasScriptCell = elRow.childNodes[COLUMN_INDEX.HAS_SCRIPT];
|
||||
hasScriptCell.innerText = itemData.hasScript;
|
||||
|
||||
if (itemData.selected) {
|
||||
|
@ -484,51 +494,51 @@ function loaded() {
|
|||
elRow.className = '';
|
||||
}
|
||||
|
||||
var prevItemId = elRow.dataset.entityID;
|
||||
var newItemId = itemData.id;
|
||||
var validPrevItemID = prevItemId !== undefined && prevItemId > 0;
|
||||
if (validPrevItemID && prevItemId !== newItemId && entitiesByID[prevItemId].elRow === elRow) {
|
||||
elRow.dataset.entityID = 0;
|
||||
entitiesByID[prevItemId].elRow = null;
|
||||
let prevEntityID = elRow.dataset.entityID;
|
||||
let newEntityID = itemData.id;
|
||||
let validPrevItemID = prevEntityID !== undefined && prevEntityID !== EMPTY_ENTITY_ID;
|
||||
if (validPrevItemID && prevEntityID !== newEntityID && entitiesByID[prevEntityID].elRow === elRow) {
|
||||
elRow.dataset.entityID = EMPTY_ENTITY_ID;
|
||||
entitiesByID[prevEntityID].elRow = null;
|
||||
}
|
||||
if (!validPrevItemID || prevItemId !== newItemId) {
|
||||
elRow.dataset.entityID = newItemId;
|
||||
entitiesByID[newItemId].elRow = elRow;
|
||||
if (!validPrevItemID || prevEntityID !== newEntityID) {
|
||||
elRow.dataset.entityID = newEntityID;
|
||||
entitiesByID[newEntityID].elRow = elRow;
|
||||
}
|
||||
}
|
||||
|
||||
function clearRowFunction(elRow) {
|
||||
for (var i = 0; i < NUM_COLUMNS; i++) {
|
||||
var cell = elRow.childNodes[i];
|
||||
function clearRow(elRow) {
|
||||
for (let i = 0; i < NUM_COLUMNS; i++) {
|
||||
let cell = elRow.childNodes[i];
|
||||
cell.innerHTML = "";
|
||||
}
|
||||
|
||||
var entityID = elRow.dataset.entityID;
|
||||
let entityID = elRow.dataset.entityID;
|
||||
if (entityID && entitiesByID[entityID]) {
|
||||
entitiesByID[entityID].elRow = null;
|
||||
}
|
||||
|
||||
elRow.dataset.entityID = 0;
|
||||
elRow.dataset.entityID = EMPTY_ENTITY_ID;
|
||||
}
|
||||
|
||||
function resize() {
|
||||
// Store current scroll position
|
||||
var prevScrollTop = elEntityTableScroll.scrollTop;
|
||||
let prevScrollTop = elEntityTableScroll.scrollTop;
|
||||
|
||||
// Take up available window space
|
||||
elEntityTableScroll.style.height = window.innerHeight - 207;
|
||||
|
||||
var SCROLLABAR_WIDTH = 21;
|
||||
var tds = document.querySelectorAll("#entity-table-body tr:first-child td");
|
||||
var ths = document.querySelectorAll("#entity-table thead th");
|
||||
let SCROLLABAR_WIDTH = 21;
|
||||
let tds = document.querySelectorAll("#entity-table-body tr:first-child td");
|
||||
let ths = document.querySelectorAll("#entity-table thead th");
|
||||
if (tds.length >= ths.length) {
|
||||
// Update the widths of the header cells to match the body
|
||||
for (var i = 0; i < ths.length; i++) {
|
||||
for (let i = 0; i < ths.length; i++) {
|
||||
ths[i].width = tds[i].offsetWidth;
|
||||
}
|
||||
} else {
|
||||
// Reasonable widths if nothing is displayed
|
||||
var tableWidth = document.getElementById("entity-table").offsetWidth - SCROLLABAR_WIDTH;
|
||||
let tableWidth = document.getElementById("entity-table").offsetWidth - SCROLLABAR_WIDTH;
|
||||
if (showExtraInfo) {
|
||||
ths[0].width = 0.10 * tableWidth;
|
||||
ths[1].width = 0.20 * tableWidth;
|
||||
|
@ -600,7 +610,7 @@ function loaded() {
|
|||
if (keyDownEvent.target.nodeName === "INPUT") {
|
||||
return;
|
||||
}
|
||||
var keyCode = keyDownEvent.keyCode;
|
||||
let keyCode = keyDownEvent.keyCode;
|
||||
if (keyCode === DELETE) {
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' }));
|
||||
refreshEntities();
|
||||
|
@ -620,13 +630,13 @@ function loaded() {
|
|||
if (data.type === "clearEntityList") {
|
||||
clearEntities();
|
||||
} else if (data.type == "selectionUpdate") {
|
||||
var notFound = updateSelectedEntities(data.selectedIDs);
|
||||
let notFound = updateSelectedEntities(data.selectedIDs);
|
||||
if (notFound) {
|
||||
refreshEntities();
|
||||
}
|
||||
} else if (data.type === "update" && data.selectedIDs !== undefined) {
|
||||
PROFILE("update", function() {
|
||||
var newEntities = data.entities;
|
||||
let newEntities = data.entities;
|
||||
if (newEntities && newEntities.length === 0) {
|
||||
elNoEntitiesMessage.style.display = "block";
|
||||
elFooter.firstChild.nodeValue = "0 entities found";
|
||||
|
|
|
@ -6,246 +6,247 @@
|
|||
// Distributed under the Apache License, Version 2.0.
|
||||
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
||||
|
||||
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 = 3; // the first elRow element's index in the child nodes of the table body
|
||||
|
||||
debugPrint = function (message) {
|
||||
console.log(message);
|
||||
};
|
||||
|
||||
ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, updateRowFunction, clearRowFunction) {
|
||||
var that = {};
|
||||
function ListView(tableId, tableBodyId, tableScrollId, createRowFunction, updateRowFunction, clearRowFunction) {
|
||||
this.elTable = document.getElementById(tableId);
|
||||
this.elTableBody = document.getElementById(tableBodyId);
|
||||
this.elTableScroll = document.getElementById(tableScrollId);
|
||||
|
||||
var SCROLL_ROWS = 2;
|
||||
var FIRST_ROW_INDEX = 3;
|
||||
this.elTopBuffer = null;
|
||||
this.elBottomBuffer = null;
|
||||
|
||||
var elTable = document.getElementById(tableId);
|
||||
var elTableBody = document.getElementById(tableBodyId);
|
||||
var elTableScroll = document.getElementById(tableScrollId);
|
||||
this.elRows = [];
|
||||
this.itemData = [];
|
||||
|
||||
var elTopBuffer = null;
|
||||
var elBottomBuffer = null;
|
||||
this.createRowFunction = createRowFunction;
|
||||
this.updateRowFunction = updateRowFunction;
|
||||
this.clearRowFunction = clearRowFunction;
|
||||
|
||||
this.rowOffset = 0; // the current index within the itemData list used for the top most elRow element
|
||||
this.rowHeight = 0; // height of the elRow elements
|
||||
this.lastRowChangeScrollTop = 0; // the previous elTableScroll.scrollTop value when the rows were scrolled
|
||||
|
||||
var visibleItemData = [];
|
||||
var elRows = [];
|
||||
this.initialize();
|
||||
};
|
||||
|
||||
var rowOffset = 0;
|
||||
var rowHeight = 0;
|
||||
var lastRowChangeScrollTop = 0;
|
||||
ListView.prototype = {
|
||||
getNumRows: function() {
|
||||
return this.elRows.length;
|
||||
},
|
||||
|
||||
that.getNumRows = function() {
|
||||
return elRows.length;
|
||||
};
|
||||
getScrollHeight: function() {
|
||||
return this.rowHeight * SCROLL_ROWS;
|
||||
},
|
||||
|
||||
that.getScrollHeight = function() {
|
||||
return rowHeight * SCROLL_ROWS;
|
||||
};
|
||||
resetRowOffset: function() {
|
||||
this.rowOffset = 0;
|
||||
this.lastRowChangeScrollTop = 0;
|
||||
},
|
||||
|
||||
that.getRowOffset = function() {
|
||||
return rowOffset;
|
||||
};
|
||||
|
||||
that.resetRowOffset = function() {
|
||||
rowOffset = 0;
|
||||
lastRowChangeScrollTop = 0;
|
||||
};
|
||||
|
||||
that.decrementRowOffset = function() {
|
||||
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);
|
||||
let topHeight = parseInt(this.elTopBuffer.getAttribute("height"));
|
||||
let newTopHeight = topHeight + this.rowHeight;
|
||||
this.elTopBuffer.setAttribute("height", newTopHeight);
|
||||
|
||||
rowOffset--;
|
||||
that.refresh();
|
||||
lastRowChangeScrollTop = topHeight;
|
||||
this.rowOffset--;
|
||||
this.refresh();
|
||||
this.lastRowChangeScrollTop = topHeight;
|
||||
|
||||
return rowOffset;
|
||||
};
|
||||
return this.rowOffset;
|
||||
},
|
||||
|
||||
that.setVisibleItemData = function(itemData) {
|
||||
visibleItemData = itemData;
|
||||
};
|
||||
|
||||
that.clear = function() {
|
||||
for (var i = 0; i < that.getNumRows(); i++) {
|
||||
var elRow = elTableBody.childNodes[i + FIRST_ROW_INDEX];
|
||||
clearRowFunction(elRow);
|
||||
setItemData: function(data) {
|
||||
this.itemData = data;
|
||||
},
|
||||
|
||||
clear: function() {
|
||||
for (let i = 0; i < this.getNumRows(); i++) {
|
||||
let elRow = this.elTableBody.childNodes[i + FIRST_ROW_INDEX];
|
||||
this.clearRowFunction(elRow);
|
||||
elRow.style.display = "none";
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
that.scrollDown = function(numScrollRows) {
|
||||
var prevTopHeight = parseInt(elTopBuffer.getAttribute("height"));
|
||||
var prevBottomHeight = parseInt(elBottomBuffer.getAttribute("height"));
|
||||
scrollDown: function(numScrollRows) {
|
||||
let prevTopHeight = parseInt(this.elTopBuffer.getAttribute("height"));
|
||||
let prevBottomHeight = parseInt(this.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;
|
||||
elTableBody.removeChild(rowMovedTopToBottom);
|
||||
elTableBody.insertBefore(rowMovedTopToBottom, elBottomBuffer);
|
||||
updateRowFunction(rowMovedTopToBottom, visibleItemData[rowIndex]);
|
||||
rowOffset++;
|
||||
for (let i = 0; i < numScrollRows; i++) {
|
||||
let rowMovedTopToBottom = this.elTableBody.childNodes[FIRST_ROW_INDEX];
|
||||
let rowIndex = this.getNumRows() + this.rowOffset;
|
||||
this.elTableBody.removeChild(rowMovedTopToBottom);
|
||||
this.elTableBody.insertBefore(rowMovedTopToBottom, this.elBottomBuffer);
|
||||
this.updateRowFunction(rowMovedTopToBottom, this.itemData[rowIndex]);
|
||||
this.rowOffset++;
|
||||
}
|
||||
|
||||
// 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 += scrolledSpace;
|
||||
};
|
||||
let scrolledSpace = this.rowHeight * numScrollRows;
|
||||
let newTopHeight = prevTopHeight + scrolledSpace;
|
||||
let newBottomHeight = prevBottomHeight - scrolledSpace;
|
||||
this.elTopBuffer.setAttribute("height", newTopHeight);
|
||||
this.elBottomBuffer.setAttribute("height", newBottomHeight);
|
||||
this.lastRowChangeScrollTop += scrolledSpace;
|
||||
},
|
||||
|
||||
that.scrollUp = function(numScrollRows) {
|
||||
var prevTopHeight = parseInt(elTopBuffer.getAttribute("height"));
|
||||
var prevBottomHeight = parseInt(elBottomBuffer.getAttribute("height"));
|
||||
scrollUp: function(numScrollRows) {
|
||||
let prevTopHeight = parseInt(this.elTopBuffer.getAttribute("height"));
|
||||
let prevBottomHeight = parseInt(this.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];
|
||||
var rowIndex = rowOffset - 1;
|
||||
elTableBody.removeChild(rowMovedBottomToTop);
|
||||
elTableBody.insertBefore(rowMovedBottomToTop, topRow);
|
||||
updateRowFunction(rowMovedBottomToTop, visibleItemData[rowIndex]);
|
||||
rowOffset--;
|
||||
for (let i = 0; i < numScrollRows; i++) {
|
||||
let topRow = this.elTableBody.childNodes[FIRST_ROW_INDEX];
|
||||
let rowMovedBottomToTop = this.elTableBody.childNodes[FIRST_ROW_INDEX + this.getNumRows() - 1];
|
||||
let rowIndex = this.rowOffset - 1;
|
||||
this.elTableBody.removeChild(rowMovedBottomToTop);
|
||||
this.elTableBody.insertBefore(rowMovedBottomToTop, topRow);
|
||||
this.updateRowFunction(rowMovedBottomToTop, this.itemData[rowIndex]);
|
||||
this.rowOffset--;
|
||||
}
|
||||
|
||||
// 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 -= scrolledSpace;
|
||||
};
|
||||
let scrolledSpace = this.rowHeight * numScrollRows;
|
||||
let newTopHeight = prevTopHeight - scrolledSpace;
|
||||
let newBottomHeight = prevBottomHeight + scrolledSpace;
|
||||
this.elTopBuffer.setAttribute("height", newTopHeight);
|
||||
this.elBottomBuffer.setAttribute("height", newBottomHeight);
|
||||
this.lastRowChangeScrollTop -= scrolledSpace;
|
||||
},
|
||||
|
||||
that.onScroll = function() {
|
||||
var scrollTop = elTableScroll.scrollTop;
|
||||
var scrollHeight = that.getScrollHeight();
|
||||
var nextRowChangeScrollTop = lastRowChangeScrollTop + scrollHeight;
|
||||
var totalItems = visibleItemData.length;
|
||||
var numRows = that.getNumRows();
|
||||
onScroll: function() {
|
||||
var that = this.listView;
|
||||
|
||||
let scrollTop = that.elTableScroll.scrollTop;
|
||||
let scrollHeight = that.getScrollHeight();
|
||||
let nextRowChangeScrollTop = that.lastRowChangeScrollTop + scrollHeight;
|
||||
let totalItems = that.itemData.length;
|
||||
let 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;
|
||||
if (numScrollRows + rowOffset + numRows > totalItems) {
|
||||
numScrollRows = totalItems - rowOffset - numRows;
|
||||
if (scrollTop >= nextRowChangeScrollTop && numRows + that.rowOffset < totalItems) {
|
||||
let numScrolls = Math.ceil((scrollTop - nextRowChangeScrollTop) / scrollHeight);
|
||||
let numScrollRows = numScrolls * SCROLL_ROWS;
|
||||
if (numScrollRows + that.rowOffset + numRows > totalItems) {
|
||||
numScrollRows = totalItems - that.rowOffset - numRows;
|
||||
}
|
||||
that.scrollDown(numScrollRows);
|
||||
} else if (scrollTop < lastRowChangeScrollTop) {
|
||||
var numScrolls = Math.ceil((lastRowChangeScrollTop - scrollTop) / scrollHeight);
|
||||
var numScrollRows = numScrolls * SCROLL_ROWS;
|
||||
if (rowOffset - numScrollRows < 0) {
|
||||
numScrollRows = rowOffset;
|
||||
} else if (scrollTop < that.lastRowChangeScrollTop) {
|
||||
let numScrolls = Math.ceil((that.lastRowChangeScrollTop - scrollTop) / scrollHeight);
|
||||
let numScrollRows = numScrolls * SCROLL_ROWS;
|
||||
if (that.rowOffset - numScrollRows < 0) {
|
||||
numScrollRows = that.rowOffset;
|
||||
}
|
||||
that.scrollUp(numScrollRows);
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
that.refresh = function() {
|
||||
refresh: function() {
|
||||
// block refreshing before rows are initialized
|
||||
var numRows = that.getNumRows();
|
||||
let numRows = this.getNumRows();
|
||||
if (numRows === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// start with all row data cleared and initially set to invisible
|
||||
that.clear();
|
||||
this.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) {
|
||||
for (let i = 0; i < numRows; i++) {
|
||||
let rowIndex = i + this.rowOffset;
|
||||
if (rowIndex >= this.itemData.length) {
|
||||
break;
|
||||
}
|
||||
var rowElementIndex = i + FIRST_ROW_INDEX;
|
||||
var elRow = elTableBody.childNodes[rowElementIndex];
|
||||
var itemData = visibleItemData[rowIndex];
|
||||
updateRowFunction(elRow, itemData);
|
||||
let rowElementIndex = i + FIRST_ROW_INDEX;
|
||||
let elRow = this.elTableBody.childNodes[rowElementIndex];
|
||||
let itemData = this.itemData[rowIndex];
|
||||
this.updateRowFunction(elRow, itemData);
|
||||
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);
|
||||
let topHiddenRows = this.rowOffset;
|
||||
let topBufferHeight = this.rowHeight * topHiddenRows;
|
||||
this.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;
|
||||
let bottomHiddenRows = this.itemData.length - numRows - this.rowOffset;
|
||||
let bottomBufferHeight = this.rowHeight * bottomHiddenRows;
|
||||
if (bottomHiddenRows < 0) {
|
||||
bottomBufferHeight = 0;
|
||||
}
|
||||
elBottomBuffer.setAttribute("height", bottomBufferHeight);
|
||||
};
|
||||
this.elBottomBuffer.setAttribute("height", bottomBufferHeight);
|
||||
},
|
||||
|
||||
that.resetRows = function(viewableHeight) {
|
||||
if (!elTableBody) {
|
||||
resetRows: function(viewableHeight) {
|
||||
if (!this.elTableBody) {
|
||||
debugPrint("ListView.resetRows - no valid table body element");
|
||||
return;
|
||||
}
|
||||
|
||||
that.resetRowOffset();
|
||||
this.resetRowOffset();
|
||||
|
||||
elTopBuffer.setAttribute("height", 0);
|
||||
elBottomBuffer.setAttribute("height", 0);
|
||||
this.elTopBuffer.setAttribute("height", 0);
|
||||
this.elBottomBuffer.setAttribute("height", 0);
|
||||
|
||||
// clear out any existing rows
|
||||
for (var i = 0; i < that.getNumRows(); i++) {
|
||||
var elRow = elRows[i];
|
||||
elTableBody.removeChild(elRow);
|
||||
for (let i = 0; i < this.getNumRows(); i++) {
|
||||
let elRow = elRows[i];
|
||||
this.elTableBody.removeChild(elRow);
|
||||
}
|
||||
elRows = [];
|
||||
this.elRows = [];
|
||||
|
||||
// create new row elements inserted between the top and bottom buffers that can fit into viewable scroll area
|
||||
var usedHeight = 0;
|
||||
let usedHeight = 0;
|
||||
while(usedHeight < viewableHeight) {
|
||||
var newRow = createRowFunction();
|
||||
elTableBody.insertBefore(newRow, elBottomBuffer);
|
||||
rowHeight = elTableBody.offsetHeight - usedHeight;
|
||||
usedHeight = elTableBody.offsetHeight;
|
||||
elRows.push(newRow);
|
||||
let newRow = this.createRowFunction();
|
||||
this.elTableBody.insertBefore(newRow, this.elBottomBuffer);
|
||||
this.rowHeight = this.elTableBody.offsetHeight - usedHeight;
|
||||
usedHeight = this.elTableBody.offsetHeight;
|
||||
this.elRows.push(newRow);
|
||||
}
|
||||
|
||||
// add extras rows for scrolling buffer purposes
|
||||
for (var i = 0; i < SCROLL_ROWS; i++) {
|
||||
var scrollRow = createRowFunction();
|
||||
elTableBody.insertBefore(scrollRow, elBottomBuffer);
|
||||
elRows.push(scrollRow);
|
||||
for (let i = 0; i < SCROLL_ROWS; i++) {
|
||||
let scrollRow = this.createRowFunction();
|
||||
this.elTableBody.insertBefore(scrollRow, this.elBottomBuffer);
|
||||
this.elRows.push(scrollRow);
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
that.initialize = function() {
|
||||
if (!elTableBody || !elTableScroll) {
|
||||
initialize: function() {
|
||||
if (!this.elTableBody || !this.elTableScroll) {
|
||||
debugPrint("ListView.initialize - no valid table body or table scroll element");
|
||||
return;
|
||||
}
|
||||
|
||||
// delete initial blank row
|
||||
elTableBody.deleteRow(0);
|
||||
this.elTableBody.deleteRow(0);
|
||||
|
||||
elTopBuffer = document.createElement("tr");
|
||||
elTableBody.appendChild(elTopBuffer);
|
||||
elTopBuffer.setAttribute("height", 0);
|
||||
this.elTopBuffer = document.createElement("tr");
|
||||
this.elTableBody.appendChild(this.elTopBuffer);
|
||||
this.elTopBuffer.setAttribute("height", 0);
|
||||
|
||||
elBottomBuffer = document.createElement("tr");
|
||||
elTableBody.appendChild(elBottomBuffer);
|
||||
elBottomBuffer.setAttribute("height", 0);
|
||||
|
||||
elTableScroll.onscroll = that.onScroll;
|
||||
};
|
||||
|
||||
that.initialize();
|
||||
|
||||
return that;
|
||||
}
|
||||
this.elBottomBuffer = document.createElement("tr");
|
||||
this.elTableBody.appendChild(this.elBottomBuffer);
|
||||
this.elBottomBuffer.setAttribute("height", 0);
|
||||
|
||||
this.elTableScroll.listView = this;
|
||||
this.elTableScroll.onscroll = this.onScroll;
|
||||
}
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue