From 30508cecf2fb77eb191d49cb479f961e667f477c Mon Sep 17 00:00:00 2001 From: Younkue Date: Mon, 12 Feb 2018 20:19:44 +0900 Subject: [PATCH 1/5] feat(InfiniteGrid): add interface to setLayout --- src/InfiniteGrid.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/InfiniteGrid.js b/src/InfiniteGrid.js index 50aaa86ff..353ef8ddd 100644 --- a/src/InfiniteGrid.js +++ b/src/InfiniteGrid.js @@ -191,9 +191,14 @@ class InfiniteGrid extends Component { * }); */ setLayout(LayoutKlass, options) { - this._layout = new LayoutKlass(Object.assign(options || {}, { - horizontal: !this._isVertical, - })); + if (typeof LayoutKlass === "function") { + this._layout = new LayoutKlass(Object.assign(options || {}, { + horizontal: !this._isVertical, + })); + } else { + this._layout = LayoutKlass; + this._layout.options.horizontal = !this._isVertical; + } this._layout.setSize(this._renderer.getViewportSize()); return this; } From 5ae2861b5361db6f0c2aa32f0ba611f4f9344bf5 Mon Sep 17 00:00:00 2001 From: Younkue Date: Mon, 12 Feb 2018 22:04:57 +0900 Subject: [PATCH 2/5] fix(InfiniteGrid): add comment for setLayout --- src/InfiniteGrid.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/InfiniteGrid.js b/src/InfiniteGrid.js index 353ef8ddd..7da2039c0 100644 --- a/src/InfiniteGrid.js +++ b/src/InfiniteGrid.js @@ -161,7 +161,7 @@ class InfiniteGrid extends Component { /** * Specifies the Layout class to use. * @ko 사용할 Layout 클래스를 지정한다. - * @param {Class} LayoutKlass The Layout class to use 사용할 Layout 클래스 + * @param {Class|eg.Layout} LayoutKlass The Layout class to use or an instance of a layout moudle사용할 Layout 클래스 또는 레이아웃 모듈의 인스턴스 * @param {Object} options Options to apply to the Layout.Layout에 적용할 옵션 * @return {eg.InfiniteGrid} An instance of a module itself모듈 자신의 인스턴스 * @example @@ -189,6 +189,11 @@ class InfiniteGrid extends Component { * margin: 10, * aspectRatio: 1.5 * }); + * var layout = new eg.InfiniteGrid.GridLayout({ + * margin: 10, + * align: "start" + * }); + * infinitegrid.setLayout(layout); */ setLayout(LayoutKlass, options) { if (typeof LayoutKlass === "function") { From 35c3fb7373146734ebf012785f769f09f6075763 Mon Sep 17 00:00:00 2001 From: Younkue Date: Mon, 12 Feb 2018 22:05:06 +0900 Subject: [PATCH 3/5] test(InfiniteGrid): test setLayout --- test/unit/InfiniteGrid.spec.js | 55 ++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/test/unit/InfiniteGrid.spec.js b/test/unit/InfiniteGrid.spec.js index e336ef864..0d06d8b8e 100644 --- a/test/unit/InfiniteGrid.spec.js +++ b/test/unit/InfiniteGrid.spec.js @@ -57,6 +57,7 @@ describe("InfiniteGrid Test", function() { this.el.innerHTML = "
"; this.inst = new InfiniteGrid("#infinite", { isOverflowScroll, + horizontal: true, }); this.inst.setLayout(GridLayout); }); @@ -66,6 +67,59 @@ describe("InfiniteGrid Test", function() { this.inst = null; } cleanup(); + }); + it(`should check a initialization (setLayout(instance))(isOverflowScroll: ${isOverflowScroll})`, done => { + const count = 10; + const items = getItems(count); + // When (layout) + + const el = sandbox(); + el.innerHTML = "
"; + + const inst = new InfiniteGrid("#infinite", { + isOverflowScroll, + horizontal: true, + }); + + const layout = new GridLayout(); + inst.setLayout(layout); + + const layoutCompleteHandler2 = sinon.spy(e => { + const item1 = inst._items.getStatus()._data[0].items; + const item2 = this.inst._items.getStatus()._data[0].items; + + expect(item1.map(e1 => e1.rect)) + .to.be.deep.equals(item2.map(e1 => e1.rect)); + done(); + }); + inst.on("layoutComplete", layoutCompleteHandler2); + // Given + + const layoutCompleteHandler = sinon.spy(function(e) { + // Then + expect(e.target).to.have.lengthOf(count); + expect(this.getItems(true)).to.have.lengthOf(count); + expect(this.getItems(false)).to.have.lengthOf(count); + expect(this._isProcessing()).to.be.false; + + inst._renderer.container.innerHTML = items.join(""); + inst.layout(); + }); + + + cleanup(); + // When + this.inst.on("layoutComplete", layoutCompleteHandler); + this.el = sandbox(); + this.el.innerHTML = "
"; + // Then + expect(this.inst.isProcessing()).to.be.false; + expect(layoutCompleteHandler.calledOnce).to.be.false; + + this.inst._renderer.container.innerHTML = items.join(""); + this.inst.layout(); + + }); it(`should check a initialization (isOverflowScroll: ${isOverflowScroll})`, done => { // Given @@ -90,6 +144,7 @@ describe("InfiniteGrid Test", function() { // When (layout) this.inst._renderer.container.innerHTML = items.join(""); this.inst.layout(); + }); }); }); From e5e6da21be1887ac1bc30ee59ebf6489d543a1ca Mon Sep 17 00:00:00 2001 From: Younkue Date: Tue, 13 Feb 2018 14:35:44 +0900 Subject: [PATCH 4/5] feat(JustifedLayout): add column option to JustifiedLayout --- src/layouts/JustifiedLayout.js | 18 +++++++++++++++++- test/manual/css/basic.css | 1 + test/manual/js/basic.js | 3 ++- 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/layouts/JustifiedLayout.js b/src/layouts/JustifiedLayout.js index e90af27c7..3d86df747 100644 --- a/src/layouts/JustifiedLayout.js +++ b/src/layouts/JustifiedLayout.js @@ -41,6 +41,8 @@ class JustifiedLayout { this.options = assignOptions({ minSize: 0, maxSize: 0, + maxColumn: 8, + column: 0, }, options); this._style = getStyleNames(this.options.horizontal); this._size = 0; @@ -51,15 +53,29 @@ class JustifiedLayout { const size2Name = style.size2; const startIndex = 0; const endIndex = items.length; + const {maxColumn, column} = this.options; const graph = _start => { const results = {}; const start = +_start.replace(/[^0-9]/g, ""); const length = endIndex + 1; + if (column) { + const end = Math.min(start + column, length - 1); + let cost = this._getCost(items, start, end, size1Name, size2Name); + + if (cost < 0) { + cost = 0; + } + if (cost !== null) { + results[`node${end}`] = Math.pow(cost, 2); + } + return results; + } for (let i = start + 1; i < length; ++i) { - if (i - start > 8) { + if (i - start > maxColumn) { break; } + let cost = this._getCost(items, start, i, size1Name, size2Name); if (cost < 0 && i === length - 1) { diff --git a/test/manual/css/basic.css b/test/manual/css/basic.css index 083e7c354..37f3ce314 100644 --- a/test/manual/css/basic.css +++ b/test/manual/css/basic.css @@ -88,6 +88,7 @@ body { height: 100%; } #grid[data-layout="JustifiedLayout"] .item { + width: 200px; } #grid[data-layout="JustifiedLayout"] .item img { width: 100%; diff --git a/test/manual/js/basic.js b/test/manual/js/basic.js index 7466ae402..788cb47ff 100755 --- a/test/manual/js/basic.js +++ b/test/manual/js/basic.js @@ -130,7 +130,8 @@ function GridLayout() { } function JustifiedLayout() { changeLayout("JustifiedLayout", { - margin: 5 + margin: 5, + column: 3 }); } function FrameLayout() { From ada9abec4ac36aa1371d2caea5d5ee0fa1bacdf2 Mon Sep 17 00:00:00 2001 From: Younkue Date: Tue, 13 Feb 2018 16:38:15 +0900 Subject: [PATCH 5/5] chore(JustifiedLayout): add comment for column option --- src/layouts/JustifiedLayout.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/layouts/JustifiedLayout.js b/src/layouts/JustifiedLayout.js index 3d86df747..e893e6266 100644 --- a/src/layouts/JustifiedLayout.js +++ b/src/layouts/JustifiedLayout.js @@ -11,6 +11,8 @@ import {getStyleNames, assignOptions} from "../utils"; * @param {Boolean} [options.horizontal=false] Direction of the scroll movement (false: vertical, true: horizontal) 스크롤 이동 방향 (false: 세로방향, true: 가로방향) * @param {Boolean} [options.minSize=0] Minimum size of item to be resized 아이템이 조정되는 최소 크기 * @param {Boolean} [options.maxSize=0] Maximum size of item to be resized 아이템이 조정되는 최대 크기 + * @param {Boolean} [options.column=0] The number of items in a line 한 줄에 들어갈 수 있는 아이템의 개수 + * @param {Boolean} [options.maxColumn=8] The Maximum number of items in a line 한 줄에 들어갈 수 있는 최대 아이템의 개수 * @example ```