test(InfiniteGrid): test LayoutManger and Infinite

karma.conf.js

@@ -4,6 +4,7 @@ module.exports = function(config) {
 
     // list of files / patterns to load in the browser
     files: [
+			"./node_modules/babel-polyfill/dist/polyfill.js",
       "./node_modules/lite-fixture/index.js",
       "./test/unit/**/*.spec.js",
       'test/unit/image/*.jpg',

package.json

@@ -65,6 +65,7 @@
 		"babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
 		"babel-plugin-transform-es3-property-literals": "^6.22.0",
 		"babel-plugin-transform-object-assign": "^6.22.0",
+		"babel-polyfill": "^6.26.0",
 		"babel-preset-es2015": "^6.24.1",
 		"chai": "^4.1.2",
 		"chalk": "^2.3.0",

src/InfiniteGrid.js

@@ -942,7 +942,6 @@ ig.on("imageError", e => {
 	 * @ko 그리드 레이아웃에 사용한 엘리먼트와 속성, 이벤트를 해제한다
 	 */
 	destroy() {
-		this.off();
 		this._infinite.clear();
 		this._watcher.destroy();
 		this._layout.destroy();

src/LayoutManager.js

@@ -1,12 +1,12 @@
 import AutoSizer from "./AutoSizer";
 import ImageLoaded, {CHECK_ALL, CHECK_ONLY_ERROR} from "./ImageLoaded";
 import ItemManager from "./ItemManager";
-import {matchHTML} from "./utils";
+import {matchHTML, $} from "./utils";
 import {DUMMY_POSITION} from "./consts";
 import DOMRenderer from "./DOMRenderer";
 
-function hasTarget(...targets) {
-	return targets.every(target => ~target[0].indexOf(target[1]));
+function hasTarget(target, value) {
+	return ~target.indexOf(value);
 }
 
 export default class LayoutMananger {
@@ -70,7 +70,7 @@ export default class LayoutMananger {
 
 		// remove item
 		const removeItem = () => {
-			if (hasTarget([removeTarget, element])) {
+			if (hasTarget(removeTarget, element)) {
 				return;
 			}
 			removeTarget.push(element);
@@ -84,19 +84,19 @@ export default class LayoutMananger {
 				removeItem();
 				return;
 			}
-			if (hasTarget([removeTarget, element])) {
+			if (hasTarget(removeTarget, element)) {
 				return;
 			}
 			target.parentNode.removeChild(target);
 			item.content = element.outerHTML;
-			if (hasTarget([replaceTarget, errorIndex])) {
+			if (hasTarget(replaceTarget, errorIndex)) {
 				return;
 			}
 			replaceTarget.push(errorIndex);
 		};
 		// replace image
 		const replace = src => {
-			if (hasTarget([removeTarget, element])) {
+			if (hasTarget(removeTarget, element)) {
 				return;
 			}
 			if (src) {
@@ -116,18 +116,21 @@ export default class LayoutMananger {
 				}
 			}
 			item.content = element.outerHTML;
-			if (hasTarget([replaceTarget, errorIndex])) {
+			if (hasTarget(replaceTarget, errorIndex)) {
 				return;
 			}
 			replaceTarget.push(errorIndex);
 		};
 		// replace item
 		const replaceItem = content => {
-			if (hasTarget([removeTarget, element], [replaceTarget, errorIndex])) {
+			if (hasTarget(removeTarget, element)) {
 				return;
 			}
 			element.innerHTML = content;
 			item.content = element.outerHTML;
+			if (hasTarget(replaceTarget, errorIndex)) {
+				return;
+			}
 			replaceTarget.push(errorIndex);
 		};
 

src/index.js

@@ -14,6 +14,7 @@ import DOMRenderer from "./DOMRenderer";
 import Watcher from "./Watcher";
 import ItemManager from "./ItemManager";
 import Infinite from "./Infinite";
+import LayoutManger from "./LayoutManager";
 
 export {
 	GridLayout,
@@ -27,5 +28,6 @@ export {
 	DOMRenderer,
 	Watcher,
 	ItemManager,
+	LayoutManger,
 };
 export default InfiniteGrid;

test/manual/basic.html

@@ -31,10 +31,10 @@
 	<button class="layout_false">layout(false)</button>
 	<button class="getStatus">getStatus</button>
 	<button class="setStatus">setStatus</button>
-	<button class="enableParallax">enable Parallax</button>
-	<button class="disableParallax">disable Parallax</button>
-	<button class="vertical">vertical</button>
-	<button class="horizontal">horizontal</button>
+	<button class="toggleParallax">enable Parallax</button>
+	<button class="toggleDirection">horizontal</button>
+	<button class="toggleFit">disable useFit</button>
+	<button class="toggleOverflow">disable overflow</button>
 </div>
 <style>
 

test/manual/js/basic.js

@@ -12,6 +12,7 @@ var isParallax = false;
 var _overflow = true;
 var _layout;
 var _horizontal;
+var _useFit = true;
 
 var grid = document.querySelector("#grid");
 $(grid).click(function (e) {
@@ -33,6 +34,7 @@ function createGrid() {
 		horizontal: _horizontal,
 		threshold: 50,
 		isOverflowScroll: _overflow,
+		useFit: _useFit,
 		// useRecycle: false,
 	});
 	ig.setLoadingBar("<div class=\"loading_bar\">LOADING</div>");
@@ -172,40 +174,32 @@ function setStatus() {
 	groups = _groups;
 	ig.setStatus(_status);
 }
-function enableParallax() {
-	isParallax = true;
-	parallax.refresh(ig.getItems(), document.body.scrollTop);
-}
-function disableParallax() {
-	isParallax = false;
-}
 function getStatus() {
 	_status = ig.getStatus();
 	_groups = groups;
 }
-function vertical() {
-	_horizontal = false;
-	createGrid();
-	$("#grid").attr("data-direction", "vertical");
-	window[_layout]();
+function toggleParallax(target) {
+	isParallax = !isParallax;
+	isParallax && parallax.refresh(ig.getItems(), document.body.scrollTop);
+	target.innerHTML = isParallax ? "disable Parallax" : "enable Parallax";
 }
-function horizontal() {
-	_horizontal = true;
+function toggleDirection(target) {
+	_horizontal = !_horizontal;
 	createGrid();
-	$("#grid").attr("data-direction", "horizontal");
+	$("#grid").attr("data-direction", _horizontal ? "horizontal" : "vertical");
+	target.innerHTML = _horizontal ? "vertical" : "horizontal";
 	window[_layout]();
 }
-function overflow() {
-	_overflow = true;
+function toggleOverflow(target) {
+	_overflow = !_overflow;
 	createGrid();
 	$("#grid").attr("data-overflow", "true");
+	target.innerHTML = _overflow ? "disable overflow" : "enable overflow";
 	window[_layout]();
 }
-function overflow_false() {
-	_overflow = false;
+function toggleFit(target) {
+	_useFit = !_useFit;
 	createGrid();
-	$("#grid").attr("data-overflow", "false");
+	target.innerHTML = _useFit ? "disable useFit" : "enable useFit";
 	window[_layout]();
-}
-
-
+}

test/manual/js/controller.js

@@ -8,7 +8,7 @@ $("#controller").click(function(e) {
 	}
 	var className = $(target).attr("class");
 
-	window[className]();
+	window[className](target);
 
 });