Skip to content

Commit

Permalink
fix(DOMRenderer): fix resize for display: none (#278)
Browse files Browse the repository at this point in the history 
* fix(DOMRenderer): fix resize for display: none
  • Loading branch information
@daybrush
daybrush authored Mar 29, 2019
1 parent 6891e17 commit 44df9e6
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 40 deletions.
9 changes: 7 additions & 2 deletions src/DOMRenderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,11 +219,16 @@ export default class DOMRenderer {
public resize() {
const horizontal = this.options.horizontal;
const view = this.view;
const isResize = this.isNeededResize();
const size = this._calcSize();

if (size === 0) {
return;
}
const isResize = size !== this._size.viewport;

if (isResize) {
this._size = {
viewport: this._calcSize(),
viewport: size,
item: null,
};
}
Expand Down
7 changes: 6 additions & 1 deletion src/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,12 @@ function _getSize(el: WindowMockType | Document | HTMLElement, name: "Width" | "
} else {
size = el[`client${name}` as ClientSizeType] || el[`offset${name}` as OffsetSizeType];
}
return parseFloat(size || getStyles(el)[name.toLowerCase()]) || 0;
if (size) {
return size;
}
const cssSize = getStyles(el)[name.toLowerCase()];

return (~cssSize.indexOf("px") && parseFloat(cssSize)) || 0;
}
}

Expand Down
103 changes: 66 additions & 37 deletions test/unit/InfiniteGrid.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import FrameLayout from "../../src/layouts/FrameLayout";
import SquareLayout from "../../src/layouts/SquareLayout";
import PackingLayout from "../../src/layouts/PackingLayout";
import JustifiedLayout from "../../src/layouts/JustifiedLayout";
import { getItems, insert, wait, waitInsert, waitEvent } from "./helper/TestHelper";
import { APPEND, PREPEND, LOADING_APPEND, LOADING_PREPEND, DEFENSE_BROWSER, IDLE, PROCESSING, DUMMY_POSITION } from "../../src/consts";
import { scroll, innerHeight, innerWidth } from "../../src/utils";
import { expectConnectGroupsOutline } from "./helper/common";
import {getItems, insert, wait, waitInsert, waitEvent} from "./helper/TestHelper";
import {APPEND, PREPEND, LOADING_APPEND, LOADING_PREPEND, DEFENSE_BROWSER, IDLE} from "../../src/consts";
import {scroll, innerHeight, innerWidth} from "../../src/utils";
import {expectConnectGroupsOutline} from "./helper/common";

/* eslint-disable */
describe("InfiniteGrid Test", function () {
Expand Down Expand Up @@ -156,7 +156,6 @@ describe("InfiniteGrid Test", function () {
const status = this.inst.getStatus();
this.inst.clear();
status._renderer._size.viewport = 300;

this.inst.setStatus(status);

// Then
Expand All @@ -170,7 +169,7 @@ describe("InfiniteGrid Test", function () {
expect(outline).to.be.equals(outlines[0]);
});
});
it(`should check no children and call 'append' event`, async() => {
it(`should check no children and call 'append' event`, async () => {
// Given
const waitAppend = waitEvent(this.inst, "append");

Expand All @@ -182,7 +181,7 @@ describe("InfiniteGrid Test", function () {
// Then
expect(rv.groupKey).to.be.equals("");
})
it(`should check children`, async() => {
it(`should check children`, async () => {
// Given
const container = this.inst._renderer.container;
container.innerHTML = `<div class="item">1</div><div class="item">2</div><div class="item">3</div>`;
Expand All @@ -192,7 +191,7 @@ describe("InfiniteGrid Test", function () {
// When
this.inst.layout();

const positions = children.map(el => ({position: el.style.position, left: el.style.left}));
const positions = children.map(el => ({ position: el.style.position, left: el.style.left }));
const rv = await waitLayoutComplete;

// Then
Expand Down Expand Up @@ -362,7 +361,7 @@ describe("InfiniteGrid Test", function () {
describe(`When scrolling append event isScroll Test (isOverflowScroll: ${isOverflowScroll})`, function () {
beforeEach(() => {
this.el = sandbox();
this.el.innerHTML = "<div id='infinite' style='height: 250px;position:absolute;top:0;left:0;'></div>";
this.el.innerHTML = "<div id='infinite' style='width:100%;height: 250px;position:absolute;top:0;left:0;'></div>";
this.inst = new InfiniteGrid("#infinite", {
useRecycle: true,
isOverflowScroll,
Expand Down Expand Up @@ -491,7 +490,7 @@ describe("InfiniteGrid Test", function () {
}
cleanup();
});
it (`should check scroll attached to the top`, async () => {
it(`should check scroll attached to the top`, async () => {
// Given
const scrollPos = this.inst._watcher.getScrollPos();

Expand All @@ -505,9 +504,9 @@ describe("InfiniteGrid Test", function () {
expect(scrollPos).to.be.below(-100);
expect(scroll(window)).to.be.equals(0);
expect(this.inst._watcher.getScrollPos()).to.be.equals(scrollPos);

});
it (`should check scroll attached to the bottom`, async () => {
it(`should check scroll attached to the bottom`, async () => {
// Given
const scrollPos = document.body.offsetHeight - window.innerHeight;

Expand All @@ -518,7 +517,7 @@ describe("InfiniteGrid Test", function () {

// Then
expect(Math.max(document.body.scrollTop, document.documentElement.scrollTop)).to.be.equals(scrollPos);

});
});
describe(`When appending, image test`, function () {
Expand Down Expand Up @@ -837,7 +836,7 @@ describe("InfiniteGrid Test", function () {
expect(this.inst._getLoadingStatus()).to.be.equal(0);
expect(this.inst._status.loadingSize).to.be.equal(0);
});
it (`should check startLoading / endLoading parameter method when ${isAppend ? "appending" : "prepending"} (isOverflowScroll: ${isOverflowScroll})`, async() => {
it(`should check startLoading / endLoading parameter method when ${isAppend ? "appending" : "prepending"} (isOverflowScroll: ${isOverflowScroll})`, async () => {
await waitInsert(this.inst, true, 5, 4);

const waitAppend = waitEvent(this.inst, isAppend ? "append" : "prepend");
Expand Down Expand Up @@ -1088,7 +1087,7 @@ describe("InfiniteGrid Test", function () {

// When
// no layout and no items
inst.layout(true);
inst.layout(true);
const layout1 = inst._layout;
// layout and no items
inst.setLayout(GridLayout);
Expand All @@ -1102,11 +1101,11 @@ describe("InfiniteGrid Test", function () {

inst.destroy();
});
it(`should check layout method`, async() => {
it(`should check layout method`, async () => {
// Given
this.inst.layout(true);
await waitInsert(this.inst, true, 5, 4);

const datas = this.inst._items._data;
const rects = datas.map(data => data.items.map(item => Object.assign(item.rect)));
const waitLayoutComplete = waitEvent(this.inst, "layoutComplete");
Expand All @@ -1120,7 +1119,7 @@ describe("InfiniteGrid Test", function () {
// Then
expect(rects).to.be.deep.equals(rects2);
});
it(`should check layout method in cursor`, async() => {
it(`should check layout method in cursor`, async () => {
// Given
this.inst.layout(true);

Expand All @@ -1136,19 +1135,19 @@ describe("InfiniteGrid Test", function () {
await waitLayoutComplete;

// Then
const rects2 = datas.map(data => data.items.map(item =>item.rect.top));
const rects2 = datas.map(data => data.items.map(item => item.rect.top));
expect(rects).to.be.deep.equals(rects2.map(data => data.map(top => top - rects2[0][0])));
});
it(`should check resize and layout method with transition`, async() => {
it(`should check resize and layout method with transition`, async () => {
// Given
this.inst.options.transitionDuration = 0.1;

await waitInsert(this.inst, true, 5,4);
await waitInsert(this.inst, true, 5, 4);

const datas = this.inst._items._data;
const rects = datas.map(data => data.items.map(item => Object.assign({}, item.rect)));
const prevRects = datas.map(data => data.items.map(item => Object.assign({}, item.prevRect)));

// When
const waitLayoutComplete = waitEvent(this.inst, "layoutComplete");
const container = this.el.querySelector("#infinite");
Expand All @@ -1162,9 +1161,9 @@ describe("InfiniteGrid Test", function () {
await waitLayoutComplete;

// Then
const layoutCompleteRects = this.inst._items._data.map(data => data.items.map(item => item.rect));
const layoutCompletePrevRects = this.inst._items._data.map(data => data.items.map(item => item.prevRect));
const layoutCompleteRects = this.inst._items._data.map(data => data.items.map(item => item.rect));
const layoutCompletePrevRects = this.inst._items._data.map(data => data.items.map(item => item.prevRect));

expect(rects).to.be.deep.equals(prevRects);
expect(layoutCompleteRects).to.be.not.deep.equals(layoutCompletePrevRects);
expect(rects).to.be.deep.equals(layoutCompletePrevRects);
Expand All @@ -1176,7 +1175,7 @@ describe("InfiniteGrid Test", function () {
expect(transitionEndPrevRects).to.be.deep.equals(layoutCompleteRects);
});
});

describe(`resize Test`, function () {
beforeEach(() => {
document.body.style.marginBottom = "0px";
Expand Down Expand Up @@ -1445,7 +1444,7 @@ describe("InfiniteGrid Test", function () {
}
cleanup();
});
it (`should check "getItem" method`, async () => {
it(`should check "getItem" method`, async () => {
// Given, When
// group 1 ~ 40
await waitInsert(this.inst, true, 30, 40);
Expand All @@ -1465,7 +1464,7 @@ describe("InfiniteGrid Test", function () {
expect(item3.el).to.be.not.ok;
expect(item4).to.be.not.ok;
});
it (`should check "updateItem(el)" method`, async () => {
it(`should check "updateItem(el)" method`, async () => {
// Given
// group 1 ~ 40
await waitInsert(this.inst, true, 30, 40);
Expand All @@ -1474,7 +1473,7 @@ describe("InfiniteGrid Test", function () {

const item1 = this.inst.getItem(0, 0);
// group2 is below group1
const {outlines: {start}} = this.inst._items.getData(1);
const { outlines: { start } } = this.inst._items.getData(1);

// When
// change content
Expand All @@ -1487,14 +1486,14 @@ describe("InfiniteGrid Test", function () {

this.inst.updateItem(item1.el);

const {outlines: {start: start2}} = this.inst._items.getData(1);
const { outlines: { start: start2 } } = this.inst._items.getData(1);
// Then
expect(item1.content).to.have.string("updateItem1");
expect(height1).to.be.not.equal(item1.size.height);
expect(start.length).to.be.equal(start2.length);
expect(start).to.be.not.deep.equal(start2);
});
it (`should check "updateItem(groupIndex, itemIndex)" method`, async () => {
it(`should check "updateItem(groupIndex, itemIndex)" method`, async () => {
// Given
// group 1 ~ 40
await waitInsert(this.inst, true, 30, 40);
Expand All @@ -1503,7 +1502,7 @@ describe("InfiniteGrid Test", function () {

const item1 = this.inst.getItem(0, 0);
// group2 is below group1
const {outlines: {start}} = this.inst._items.getData(1);
const { outlines: { start } } = this.inst._items.getData(1);

// When
// change content
Expand All @@ -1516,14 +1515,14 @@ describe("InfiniteGrid Test", function () {

this.inst.updateItem(0, 0);

const {outlines: {start: start2}} = this.inst._items.getData(1);
const { outlines: { start: start2 } } = this.inst._items.getData(1);
// Then
expect(item1.content).to.have.string("updateItem1");
expect(height1).to.be.not.equal(item1.size.height);
expect(start.length).to.be.equal(start2.length);
expect(start).to.be.not.deep.equal(start2);
});
it (`should check "updateItems" method`, async () => {
it(`should check "updateItems" method`, async () => {
// Given
// group 1 ~ 40
await waitInsert(this.inst, true, 30, 40);
Expand All @@ -1533,7 +1532,7 @@ describe("InfiniteGrid Test", function () {
const item1 = this.inst.getItem(0, 0);
const item2 = this.inst.getItem(0, 1);
// group2 is below group1
const {outlines: {start}} = this.inst._items.getData(1);
const { outlines: { start } } = this.inst._items.getData(1);

// When
// change content
Expand All @@ -1550,7 +1549,7 @@ describe("InfiniteGrid Test", function () {

this.inst.updateItems();

const {outlines: {start: start3}} = this.inst._items.getData(1);
const { outlines: { start: start3 } } = this.inst._items.getData(1);
// Then
expect(item1.content).to.have.string("updateItem1");
expect(item2.content).to.have.string("updateItem2");
Expand Down Expand Up @@ -1659,4 +1658,34 @@ describe("InfiniteGrid Test", function () {
});
});
});
});
describe("Test size if display is none", function () {
beforeEach(() => {
this.el = sandbox();
this.el.innerHTML = `<div id='infinite' style="width:100%"></div>`;
this.inst = new InfiniteGrid("#infinite");
this.inst.setLayout(GridLayout);
});
afterEach(() => {
if (this.inst) {
this.inst.destroy();
this.inst = null;
}
cleanup();
});
it("should check size if display is none", async () => {
// Given
await waitInsert(this.inst, true, 10, 1);
const container = this.el.querySelector("#infinite");
const html = container.innerHTML;
const height = container.style.height;
// When
container.style.display = "none";
this.inst.layout(true);

// Then
// no changes
expect(container.innerHTML).to.be.equals(html);
expect(container.style.height).to.be.equals(height);
});
});
});

0 comments on commit 44df9e6

Please sign in to comment.