vitalif-js
/
treegrid
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge getBoundingClientRect changes

master
Vitaliy Filippov 2017-07-10 17:56:21 +03:00
parent 68ee12f7e7 9de8e34b9e
commit 8f565469ac
2 changed files with 53 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
treegrid.css
View File

@ -112,7 +112,7 @@ table.grid .collapser-expanded
/* cell editor */ /* cell editor */
table.grid .celleditor table.grid .celleditor
{ {
padding: 0; padding: 0 !important;
position: relative; position: relative;
} }

94
treegrid.js
View File

@ -488,14 +488,14 @@ function getNodeHeight(node)
{ {
for (var j = 0; j < node.tr.length; j++) for (var j = 0; j < node.tr.length; j++)
{ {
h1 = node.tr[j].offsetHeight||0; h1 = node.tr[j].getBoundingClientRect().height||0;
h2 = node.col_tr[j].offsetHeight||0; h2 = node.col_tr[j].getBoundingClientRect().height||0;
nh += h1 < h2 ? h2 : h1; nh += h1 < h2 ? h2 : h1;
} }
} }
else else
for (var j = 0; j < node.tr.length; j++) for (var j = 0; j < node.tr.length; j++)
nh += node.tr[j].offsetHeight||0; nh += node.tr[j].getBoundingClientRect().height||0;
return nh; return nh;
} }
@ -503,7 +503,7 @@ TreeGrid.prototype.syncView = function()
{ {
if (!this.table.offsetParent) if (!this.table.offsetParent)
return; return;
var offsetHeight = this.wrapper.offsetHeight - (this.stickyRow ? this.thead.offsetHeight : 0); var offsetHeight = this.wrapper.getBoundingClientRect().height - (this.stickyRow ? this.thead.getBoundingClientRect().height : 0);
var visibleItems = Math.ceil(offsetHeight/this.minItemHeight); var visibleItems = Math.ceil(offsetHeight/this.minItemHeight);
var endStart = this.nodeCount - visibleItems; var endStart = this.nodeCount - visibleItems;
if (endStart < 0) if (endStart < 0)
@ -522,8 +522,9 @@ TreeGrid.prototype.syncView = function()
if (this.stickyColumn) if (this.stickyColumn)
this.fixedColSizer.style.height = (this.nodeCount*avgItemHeight)+'px'; this.fixedColSizer.style.height = (this.nodeCount*avgItemHeight)+'px';
this.tableSizer.style.height = (this.nodeCount*avgItemHeight)+'px'; this.tableSizer.style.height = (this.nodeCount*avgItemHeight)+'px';
var scrollPos = this.nodeCount*avgItemHeight > this.tableWrapper.offsetHeight ? var tbwh = this.tableWrapper.getBoundingClientRect().height;
this.tableWrapper.scrollTop / (this.nodeCount*avgItemHeight - this.tableWrapper.offsetHeight) : 0; var scrollPos = this.nodeCount*avgItemHeight > tbwh ?
this.tableWrapper.scrollTop / (this.nodeCount*avgItemHeight - tbwh) : 0;
if (scrollPos > 1) if (scrollPos > 1)
scrollPos = 1; scrollPos = 1;
var firstVisible = scrollPos*lastFirst; var firstVisible = scrollPos*lastFirst;
@ -571,7 +572,7 @@ TreeGrid.prototype.syncView = function()
{ {
this.syncStickyRow(); this.syncStickyRow();
for (var i = 0; i < this.tbody.rows.length; i++) for (var i = 0; i < this.tbody.rows.length; i++)
total += (this.tbody.rows[i].offsetHeight||0); total += (this.tbody.rows[i].getBoundingClientRect().height||0);
} }
if (endStart > 0 && endStart > rangeStart+rangeCount) if (endStart > 0 && endStart > rangeStart+rangeCount)
{ {
@ -626,6 +627,7 @@ TreeGrid.prototype.setStickyColumnWidth = function(w)
return; return;
w = this.fixedColWrapper2.offsetWidth; w = this.fixedColWrapper2.offsetWidth;
this.fixedColWrapper.style.width = (w+this.fixedColWrapper.offsetWidth-this.fixedColWrapper.clientWidth)+'px'; this.fixedColWrapper.style.width = (w+this.fixedColWrapper.offsetWidth-this.fixedColWrapper.clientWidth)+'px';
this.fixedCol.style.width = this.fixedColWrapper.clientWidth+'px';
this.tableWrapper.style.paddingLeft = (w-this.stickyBorderWidth)+'px'; this.tableWrapper.style.paddingLeft = (w-this.stickyBorderWidth)+'px';
if (this.stickyRow) if (this.stickyRow)
{ {
@ -642,14 +644,14 @@ TreeGrid.prototype.syncStickyHeaders = function(sync_all)
if (this.stickyColumn) if (this.stickyColumn)
{ {
if (this.fixedCol.offsetWidth) if (this.fixedCol.offsetWidth)
this.setStickyColumnWidth(this.fixedCol.offsetWidth+'px'); this.setStickyColumnWidth(this.fixedCol.getBoundingClientRect().width+'px');
var h1, h2, h = []; var h1, h2, h = [];
if (sync_all) if (sync_all)
{ {
for (var i = 0; i < this.tbody.rows.length; i++) for (var i = 0; i < this.tbody.rows.length; i++)
{ {
h1 = this.tbody.rows[i].offsetHeight||0; h1 = this.tbody.rows[i].getBoundingClientRect().height||0;
h2 = this.fixedColBody.rows[i].offsetHeight||0; h2 = this.fixedColBody.rows[i].getBoundingClientRect().height||0;
h[i] = h1 < h2 ? h2 : h1; h[i] = h1 < h2 ? h2 : h1;
} }
for (var i = 0; i < this.tbody.rows.length; i++) for (var i = 0; i < this.tbody.rows.length; i++)
@ -668,8 +670,8 @@ TreeGrid.prototype.syncStickyHeaders = function(sync_all)
{ {
for (var k = 0; k < this.toSync[i].tr.length; k++) for (var k = 0; k < this.toSync[i].tr.length; k++)
{ {
h1 = this.toSync[i].tr[k].offsetHeight; h1 = this.toSync[i].tr[k].getBoundingClientRect().height;
h2 = this.toSync[i].col_tr[k].offsetHeight; h2 = this.toSync[i].col_tr[k].getBoundingClientRect().height;
h.push(h1 && h2 && (h1 < h2 ? h2 : h1)); h.push(h1 && h2 && (h1 < h2 ? h2 : h1));
} }
} }
@ -709,18 +711,19 @@ TreeGrid.prototype.syncStickyRow = function()
} }
var trh = this.fixedRow.rows[0], w = []; var trh = this.fixedRow.rows[0], w = [];
for (var i = 0; i < trh.cells.length; i++) for (var i = 0; i < trh.cells.length; i++)
w[i] = this.sizeRow.cells[i] && this.sizeRow.cells[i].offsetWidth || 0; w[i] = this.sizeRow.cells[i] && this.sizeRow.cells[i].getBoundingClientRect().width || 0;
this.fixedRow.style.width = this.table.offsetWidth+'px'; this.fixedRow.style.width = this.table.getBoundingClientRect().width+'px';
for (var i = 0; i < trh.cells.length; i++) for (var i = 0; i < trh.cells.length; i++)
trh.cells[i].style.width = w[i]+'px'; trh.cells[i].style.width = w[i]+'px';
this.tableWrapper.style.paddingTop = (this.fixedRow.offsetHeight-this.sizeRow.offsetHeight)+'px'; this.tableWrapper.style.paddingTop = (this.fixedRow.offsetHeight-this.sizeRow.offsetHeight)+'px';
this.fixedRowWrapper.style.right = (this.tableWrapper.offsetWidth-this.tableWrapper.clientWidth)+'px'; this.fixedRowWrapper.style.right = (this.tableWrapper.offsetWidth-this.tableWrapper.clientWidth)+'px';
if (this.stickyColumn) if (this.stickyColumn)
{ {
this.fixedColWrapper2.style.bottom = (this.tableWrapper.offsetHeight-this.tableWrapper.clientHeight)+'px'; this.fixedColWrapper2.style.bottom = (this.tableWrapper.getBoundingClientRect().height-this.tableWrapper.clientHeight)+'px';
this.fixedColWrapper.style.paddingTop = this.fixedRow.offsetHeight+'px'; var frh = this.fixedRow.getBoundingClientRect().height;
this.fixedColWrapper.style.paddingTop = frh+'px';
if (this.fixedCell.rows[0].cells[0]) if (this.fixedCell.rows[0].cells[0])
this.fixedCell.rows[0].cells[0].style.height = (this.fixedRow.offsetHeight)+'px'; this.fixedCell.rows[0].cells[0].style.height = frh+'px';
} }
} }
@ -835,28 +838,7 @@ TreeGrid.prototype.initCellEditing = function()
self.onStartCellEdit(td.parentNode._node, self._getSubrow(td), self._getCellIndex(td, true), td) || {}; self.onStartCellEdit(td.parentNode._node, self._getSubrow(td), self._getCellIndex(td, true), td) || {};
if (params.abort) if (params.abort)
return; return;
self.editedCells.push(td); self.startCellEditing(td, params);
if (params.value === undefined)
params.value = td.innerHTML;
td._origWidth = td.style.width;
td._origMinWidth = td.style.minWidth;
td.style.width = td.style.minWidth = td.offsetWidth+'px';
td.className += ' celleditor';
if ('ActiveXObject' in window)
{
td.innerHTML = '<div><input type="text" value="'+htmlspecialchars(params.value)+'" /></div>';
td.style.height = 'inherit';
td.parentNode.style.height = '1px';
}
else
td.innerHTML = '<input type="text" value="'+htmlspecialchars(params.value)+'" />';
var inp = td.getElementsByTagName('input')[0];
addListener(inp, 'keydown', function(evt)
{
if (evt.keyCode == 13 || evt.keyCode == 10)
self.stopCellEditing(td);
});
inp.focus();
} }
}); });
addListener(document.body, 'click', function(evt) addListener(document.body, 'click', function(evt)
@ -874,6 +856,34 @@ TreeGrid.prototype.initCellEditing = function()
}); });
} }
TreeGrid.prototype.startCellEditing = function(td, params)
{
var self = this;
self.editedCells.push(td);
if (params.value === undefined)
params.value = td.innerHTML;
td._origWidth = td.style.width;
td._origMinWidth = td.style.minWidth;
td.style.width = td.style.minWidth = td.getBoundingClientRect().width+'px';
td.className += ' celleditor';
if ('ActiveXObject' in window)
{
td.innerHTML = '<div><input type="text" value="'+htmlspecialchars(params.value)+'" /></div>';
td.style.minHeight = td.offsetHeight+'px';
td.style.height = 'inherit';
td.parentNode.style.height = '1px';
}
else
td.innerHTML = '<input type="text" value="'+htmlspecialchars(params.value)+'" />';
var inp = td.getElementsByTagName('input')[0];
addListener(inp, 'keydown', function(evt)
{
if (evt.keyCode == 13 || evt.keyCode == 10)
self.stopCellEditing(td);
});
inp.focus();
}
TreeGrid.prototype.stopCellEditing = function(td, _int) TreeGrid.prototype.stopCellEditing = function(td, _int)
{ {
var i = this._getCellIndex(td, true); var i = this._getCellIndex(td, true);
@ -917,7 +927,7 @@ TreeGrid.prototype.initCellSelection = function(useMultiple)
self.deselectAll = function(cell) self.deselectAll = function(cell)
{ {
var els = self.table.querySelectorAll('td.selected'); var els = (self.wrapper||self.table).querySelectorAll('td.selected');
var deselected = []; var deselected = [];
if (self.onDeselectAllCells) if (self.onDeselectAllCells)
self.onDeselectAllCells(); self.onDeselectAllCells();
@ -933,7 +943,7 @@ TreeGrid.prototype.initCellSelection = function(useMultiple)
function initSingleCellSelection(self) function initSingleCellSelection(self)
{ {
addListener(self.table, 'mousedown', function(evt) addListener(self.wrapper||self.table, 'mousedown', function(evt)
{ {
self.deselectAll(); self.deselectAll();
if (evt.which != 1) if (evt.which != 1)
@ -1135,7 +1145,7 @@ TreeGridNode.prototype._renderCell = function(rowIndex, colIndex, cell, force)
tr.appendChild(document.createElement('td')); tr.appendChild(document.createElement('td'));
// virtualDOM-like approach: compare old HTML properties // virtualDOM-like approach: compare old HTML properties
if (force || !this._oldCells[rowIndex] || !this._oldCells[rowIndex][colIndex] || if (force || !this._oldCells[rowIndex] || !this._oldCells[rowIndex][colIndex] ||
cell && !this._hashEqual(this._oldCells[rowIndex][colIndex], cell)) !this._hashEqual(this._oldCells[rowIndex][colIndex], cell||{}))
{ {
var old; var old;
if (colIndex == 0 && rowIndex == 0) if (colIndex == 0 && rowIndex == 0)