Merge ada9abe into 063714b

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 <ko>사용할 Layout 클래스</ko>
+	 * @param {Class|eg.Layout} LayoutKlass The Layout class to use or an instance of a layout moudle<ko>사용할 Layout 클래스 또는 레이아웃 모듈의 인스턴스</ko>
 	 * @param {Object} options Options to apply to the Layout.<ko>Layout에 적용할 옵션</ko>
 	 * @return {eg.InfiniteGrid} An instance of a module itself<ko>모듈 자신의 인스턴스</ko>
 	 * @example
@@ -189,11 +189,21 @@ 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) {
-		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;
 	}

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) <ko>스크롤 이동 방향 (false: 세로방향, true: 가로방향)</ko>
  * @param {Boolean} [options.minSize=0] Minimum size of item to be resized <ko> 아이템이 조정되는 최소 크기 </ko>
  * @param {Boolean} [options.maxSize=0] Maximum size of item to be resized <ko> 아이템이 조정되는 최대 크기 </ko>
+ * @param {Boolean} [options.column=0] The number of items in a line <ko> 한 줄에 들어갈 수 있는 아이템의 개수 </ko>
+ * @param {Boolean} [options.maxColumn=8] The Maximum number of items in a line <ko> 한 줄에 들어갈 수 있는 최대 아이템의 개수 </ko>
  * @example
 ```
 <script>
@@ -30,6 +32,7 @@ var layout = new eg.InfiniteGrid.JustifiedLayout({
 	margin: 10,
 	minSize: 100,
 	maxSize: 300,
+	column: 5,
 	horizontal: true,
 });
 
@@ -41,6 +44,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 +56,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) {

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%;

test/manual/js/basic.js

@@ -130,7 +130,8 @@ function GridLayout() {
 }
 function JustifiedLayout() {
 	changeLayout("JustifiedLayout", {
-		margin: 5
+		margin: 5,
+		column: 3
 	});
 }
 function FrameLayout() {

test/unit/InfiniteGrid.spec.js

@@ -57,6 +57,7 @@ describe("InfiniteGrid Test", function() {
         this.el.innerHTML = "<div id='infinite'></div>";
         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 = "<div id='infinite'></div>";
+
+        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 = "<div id='infinite'></div>";
+        // 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();
+
       });
     });
   });