Skip to content

Commit 416a3b1

Browse files
nikitaeverywherenikitaeverywhere
committed
resize fixes (up to 10x faster then in previous version)
1 parent 1cb5638 commit 416a3b1

1 file changed

Lines changed: 152 additions & 139 deletions

File tree

‎source/js/PivotView.js‎

Lines changed: 152 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -53,31 +53,33 @@ PivotView.prototype.init = function () {
5353
this.displayMessage("Loading...");
5454

5555
window.addEventListener("resize", function () {
56-
_._sizesChanged.call(_);
56+
_.updateSizes.call(_);
5757
});
5858

5959
};
6060

61-
PivotView.prototype._sizesChanged = function () {
62-
63-
for (var i in this.tablesStack) {
64-
var t = this.tablesStack[i]._headers;
65-
if (t.c.clone) {
66-
for (var u in t) {
67-
this.fixSizes(t[u].base, t[u].clone);
68-
}
69-
}
70-
if (t.v.clone) {
71-
t.v.clone.style.width = "";
72-
t.v.clone.style.zIndex = 1;
73-
}
74-
}
75-
76-
};
61+
//PivotView.prototype._sizesChanged = function () {
62+
//
63+
// for (var i in this.tablesStack) {
64+
// var t = this.tablesStack[i]._headers;
65+
// if (t.c.clone) {
66+
// for (var u in t) {
67+
// this.fixSizes(t[u].base, t[u].clone);
68+
// }
69+
// }
70+
// if (t.v.clone) {
71+
// t.v.clone.style.width = "";
72+
// t.v.clone.style.zIndex = 1;
73+
// }
74+
// }
75+
//
76+
//};
7777

7878
PivotView.prototype.updateSizes = function () {
7979

80-
this._sizesChanged();
80+
for (var i in this.tablesStack) {
81+
this.recalculateSizes(this.tablesStack[i].element);
82+
}
8183

8284
};
8385

@@ -209,121 +211,121 @@ PivotView.prototype._cellClickHandler = function (x, y, event) {
209211

210212
};
211213

212-
/**
213-
* @deprecated
214-
* @param baseElement
215-
* @param elementToFix
216-
* @returns {boolean}
217-
*/
218-
PivotView.prototype.fixSizes = function (baseElement, elementToFix) {
219-
220-
if (!elementToFix.style) return false;
221-
222-
for (var i in elementToFix.childNodes) {
223-
this.fixSizes(baseElement.childNodes[i], elementToFix.childNodes[i]);
224-
}
225-
226-
if (baseElement["triggerFunction"]) {
227-
elementToFix.addEventListener(
228-
baseElement["triggerFunction"].event,
229-
baseElement["triggerFunction"].trigger
230-
);
231-
}
232-
233-
var style = window.getComputedStyle(baseElement, null);
234-
elementToFix.style.width = style.getPropertyValue("width");
235-
elementToFix.style.height = style.getPropertyValue("height");
236-
237-
};
238-
239-
/**
240-
* Create clones of headers with fixed sizes.
241-
*
242-
* @param {HTMLElement} tableElement
243-
* @deprecated
244-
*/
245-
PivotView.prototype.fixHeaders = function (tableElement) {
246-
247-
var fhx, temp, hHead, fhy, c1, c2, d1, d2,
248-
cth = this.tablesStack[this.tablesStack.length - 1]._headers;
249-
250-
var getChildrenByTagName = function (element, tagName) {
251-
var cls = [];
252-
for (var c in element.childNodes) {
253-
if (element.childNodes[c].tagName === tagName.toUpperCase()) {
254-
cls.push(element.childNodes[c]);
255-
}
256-
}
257-
return cls;
258-
};
259-
260-
if (!tableElement.parentNode) console.warn("Missing fix headers: before function call to " +
261-
"fixHeaders() table element must be attached to DOM.");
262-
263-
// clone thead
264-
temp = fhx = getChildrenByTagName(tableElement, "thead")[0];
265-
if (!fhx) {
266-
console.error("Unable to fix headers: no \"thead\" in basic table."); return false;
267-
}
268-
fhx = fhx.cloneNode(true);
269-
fhx.className = "fixedHeader";
270-
fhx.style.zIndex = 2;
271-
cth.h.base = temp;
272-
cth.h.clone = fhx;
273-
this.fixSizes(temp, fhx);
274-
fhx.style.width = "";
275-
276-
// clone top left corner
277-
hHead = temp.childNodes[0].childNodes[0].cloneNode(true);
278-
cth.c.base = temp.childNodes[0].childNodes[0];
279-
cth.c.clone = hHead;
280-
this.fixSizes(temp.childNodes[0].childNodes[0], hHead);
281-
temp = document.createElement("thead");
282-
temp.appendChild(document.createElement("tr")).appendChild(hHead);
283-
temp.className = "fixedHeader";
284-
temp.style.zIndex = 3;
285-
hHead = temp;
286-
287-
// clone body headers
288-
temp = fhy = getChildrenByTagName(tableElement, "tbody")[0];
289-
if (!fhy) {
290-
console.error("Unable to fix headers: no \"tbody\" in basic table."); return false;
291-
}
292-
fhy = fhy.cloneNode(false);
293-
fhy.className = "fixedHeader";
294-
fhy.style.top = temp.offsetTop + "px";
295-
c1 = getChildrenByTagName(temp, "tr");
296-
for (var i in c1) {
297-
fhy.appendChild(d1 = c1[i].cloneNode(false));
298-
c2 = getChildrenByTagName(c1[i], "th");
299-
for (var u in c2) {
300-
d1.appendChild(d2 = c2[u].cloneNode(true));
301-
}
302-
}
303-
cth.v.base = temp;
304-
cth.v.clone = fhy;
305-
this.fixSizes(temp, fhy);
306-
fhy.style.width = "";
307-
fhy.style.zIndex = 1;
308-
309-
// add scroll listener
310-
tableElement.parentNode.addEventListener("scroll", this._scrollListener = function () {
311-
if (!tableElement.parentNode) return; // toFix
312-
hHead.style.top = fhx.style.top = tableElement.parentNode.scrollTop + "px";
313-
hHead.style.left = fhy.style.left = tableElement.parentNode.scrollLeft + "px";
314-
}, false);
315-
316-
// append new elements
317-
tableElement.appendChild(fhx);
318-
tableElement.appendChild(fhy);
319-
if ((this.controller.dataController.getData() || { dimensions: [0, 0] }).dimensions[1].length) {
320-
tableElement.appendChild(hHead);
321-
}
322-
323-
// call scroll handler because of render may be performed anytime
324-
this._scrollListener();
214+
///**
215+
// * @deprecated
216+
// * @param baseElement
217+
// * @param elementToFix
218+
// * @returns {boolean}
219+
// */
220+
//PivotView.prototype.fixSizes = function (baseElement, elementToFix) {
221+
//
222+
// if (!elementToFix.style) return false;
223+
//
224+
// for (var i in elementToFix.childNodes) {
225+
// //this.fixSizes(baseElement.childNodes[i], elementToFix.childNodes[i]);
226+
// }
227+
//
228+
// if (baseElement["triggerFunction"]) {
229+
// elementToFix.addEventListener(
230+
// baseElement["triggerFunction"].event,
231+
// baseElement["triggerFunction"].trigger
232+
// );
233+
// }
234+
//
235+
// var style = window.getComputedStyle(baseElement, null);
236+
// elementToFix.style.width = style.getPropertyValue("width");
237+
// elementToFix.style.height = style.getPropertyValue("height");
238+
//
239+
//};
325240

326-
};
241+
///**
242+
// * Create clones of headers with fixed sizes.
243+
// *
244+
// * @param {HTMLElement} tableElement
245+
// * @deprecated
246+
// */
247+
//PivotView.prototype.fixHeaders = function (tableElement) {
248+
//
249+
// var fhx, temp, hHead, fhy, c1, c2, d1, d2,
250+
// cth = this.tablesStack[this.tablesStack.length - 1]._headers;
251+
//
252+
// var getChildrenByTagName = function (element, tagName) {
253+
// var cls = [];
254+
// for (var c in element.childNodes) {
255+
// if (element.childNodes[c].tagName === tagName.toUpperCase()) {
256+
// cls.push(element.childNodes[c]);
257+
// }
258+
// }
259+
// return cls;
260+
// };
261+
//
262+
// if (!tableElement.parentNode) console.warn("Missing fix headers: before function call to " +
263+
// "fixHeaders() table element must be attached to DOM.");
264+
//
265+
// // clone thead
266+
// temp = fhx = getChildrenByTagName(tableElement, "thead")[0];
267+
// if (!fhx) {
268+
// console.error("Unable to fix headers: no \"thead\" in basic table."); return false;
269+
// }
270+
// fhx = fhx.cloneNode(true);
271+
// fhx.className = "fixedHeader";
272+
// fhx.style.zIndex = 2;
273+
// cth.h.base = temp;
274+
// cth.h.clone = fhx;
275+
// this.fixSizes(temp, fhx);
276+
// fhx.style.width = "";
277+
//
278+
// // clone top left corner
279+
// hHead = temp.childNodes[0].childNodes[0].cloneNode(true);
280+
// cth.c.base = temp.childNodes[0].childNodes[0];
281+
// cth.c.clone = hHead;
282+
// this.fixSizes(temp.childNodes[0].childNodes[0], hHead);
283+
// temp = document.createElement("thead");
284+
// temp.appendChild(document.createElement("tr")).appendChild(hHead);
285+
// temp.className = "fixedHeader";
286+
// temp.style.zIndex = 3;
287+
// hHead = temp;
288+
//
289+
// // clone body headers
290+
// temp = fhy = getChildrenByTagName(tableElement, "tbody")[0];
291+
// if (!fhy) {
292+
// console.error("Unable to fix headers: no \"tbody\" in basic table."); return false;
293+
// }
294+
// fhy = fhy.cloneNode(false);
295+
// fhy.className = "fixedHeader";
296+
// fhy.style.top = temp.offsetTop + "px";
297+
// c1 = getChildrenByTagName(temp, "tr");
298+
// for (var i in c1) {
299+
// fhy.appendChild(d1 = c1[i].cloneNode(false));
300+
// c2 = getChildrenByTagName(c1[i], "th");
301+
// for (var u in c2) {
302+
// d1.appendChild(d2 = c2[u].cloneNode(true));
303+
// }
304+
// }
305+
// cth.v.base = temp;
306+
// cth.v.clone = fhy;
307+
// this.fixSizes(temp, fhy);
308+
// fhy.style.width = "";
309+
// fhy.style.zIndex = 1;
310+
//
311+
// // add scroll listener
312+
// tableElement.parentNode.addEventListener("scroll", this._scrollListener = function () {
313+
// if (!tableElement.parentNode) return; // toFix
314+
// hHead.style.top = fhx.style.top = tableElement.parentNode.scrollTop + "px";
315+
// hHead.style.left = fhy.style.left = tableElement.parentNode.scrollLeft + "px";
316+
// }, false);
317+
//
318+
// // append new elements
319+
// tableElement.appendChild(fhx);
320+
// tableElement.appendChild(fhy);
321+
// if ((this.controller.dataController.getData() || { dimensions: [0, 0] }).dimensions[1].length) {
322+
// tableElement.appendChild(hHead);
323+
// }
324+
//
325+
// // call scroll handler because of render may be performed anytime
326+
// this._scrollListener();
327+
//
328+
//};
327329

328330
/**
329331
* Displays text which hovers table. Pass empty string to hide message.
@@ -426,25 +428,34 @@ PivotView.prototype.recalculateSizes = function (container) {
426428
leftHeader = container.getElementsByClassName("lpt-leftHeader")[0],
427429
lTableHead = leftHeader.getElementsByTagName("thead")[0],
428430
tableBlock = container.getElementsByClassName("lpt-tableBlock")[0],
429-
tableTr = tableBlock.getElementsByTagName("tr")[0],
430-
headerW = leftHeader.offsetWidth,
431+
tableTr = tableBlock.getElementsByTagName("tr")[0];
432+
433+
if (tTableHead.childNodes[0].lastChild["_extraCell"]) {
434+
tTableHead.childNodes[0].removeChild(tTableHead.childNodes[0].lastChild);
435+
}
436+
if (lTableHead.lastChild["_extraTr"]) {
437+
lTableHead.removeChild(lTableHead.lastChild);
438+
}
439+
440+
var headerW = leftHeader.offsetWidth,
431441
headerH = topHeader.offsetHeight,
432442
containerHeight = container.offsetHeight,
433443
mainHeaderWidth = headerContainer.offsetWidth,
434444
addExtraTopHeaderCell = tTableHead.offsetWidth > topHeader.offsetWidth,
435445
addExtraLeftHeaderCell = lTableHead.offsetHeight > containerHeight - headerH,
436-
cell, cellWidths = [], i;
446+
cell, tr, cellWidths = [], i;
437447

438448
headerContainer.style.width = headerW + "px";
439449
for (i in topTableTr.childNodes) {
440-
if (tableTr.childNodes[i].tagName !== "TD") continue;
450+
if (!tableTr.childNodes[i] || tableTr.childNodes[i].tagName !== "TD") continue;
441451
cellWidths.push(topTableTr.childNodes[i].offsetWidth);
442452
}
443453

444454
container.parentNode.removeChild(container); // detach
445455
topHeader.style.marginLeft = headerW + "px";
446456
tableBlock.style.marginLeft = headerW + "px";
447457
leftHeader.style.height = containerHeight - headerH + "px";
458+
leftHeader.style.width = headerW + "px";
448459
if (mainHeaderWidth > headerW) leftHeader.style.width = mainHeaderWidth + "px";
449460
tableBlock.style.height = containerHeight - headerH + "px";
450461
headerContainer.style.height = headerH + "px";
@@ -453,12 +464,14 @@ PivotView.prototype.recalculateSizes = function (container) {
453464
tTableHead.childNodes[0].appendChild(cell = document.createElement("th"));
454465
cell.rowSpan = tTableHead.childNodes.length;
455466
cell.style.paddingLeft = headerW + "px"; // lucky random
467+
cell["_extraCell"] = true;
456468
}
457469

458470
if (addExtraLeftHeaderCell) {
459-
lTableHead.appendChild(
460-
document.createElement("tr").appendChild(cell = document.createElement("th"))
461-
);
471+
tr = document.createElement("tr");
472+
tr.appendChild(cell = document.createElement("th"));
473+
lTableHead.appendChild(tr);
474+
tr["_extraTr"] = true;
462475
leftHeader.className = "lpt-leftHeader bordered";
463476
cell.colSpan = lTableHead.childNodes.length;
464477
cell.style.paddingTop = headerH + "px"; // lucky random

0 commit comments

Comments
 (0)