Merge 86bbffe into 8a9fb90

.gitignore

@@ -210,4 +210,5 @@ doc/
 demo/_data/version.yml
 demo/release/
 CHANGELOG.md
-dist/
+dist/
+build/

package.json

@@ -41,6 +41,23 @@
 	"dependencies": {
 		"@egjs/component": "^2.1.0"
 	},
+	"keywords": [
+		"infinitegrid",
+		"infinite",
+		"scroll",
+		"layout",
+		"DOM",
+		"html",
+		"gallery",
+		"grid",
+		"pinterest",
+		"masonry",
+		"GridLayout",
+		"JustifiedLayout",
+		"PackingLayout",
+		"FrameLayout",
+		"SquareLayout"
+	],
 	"devDependencies": {
 		"@egjs/common-demo": "github:naver/egjs#common-demo",
 		"babel-core": "^6.26.0",

src/AutoSizer.js

@@ -37,16 +37,16 @@ export default class AutoSizer {
 		const elementPrefix = typeof element.__PREFIX__ === "string" ? element.__PREFIX__ : prefix;
 		const dataWidth = element.getAttribute(`${elementPrefix}width`);
 		const dataHeight = element.getAttribute(`${elementPrefix}height`);
-		const fixed = element.getAttribute(`${elementPrefix}fixed`) || "width";
+		const fixed = element.getAttribute(`${elementPrefix}fixed`);
 
-		if (fixed === "width") {
-			const size = innerWidth(element) || dataWidth;
-
-			element.style.height = `${dataHeight / dataWidth * size}px`;
-		} else if (fixed === "height") {
+		if (fixed === "height") {
 			const size = innerHeight(element) || dataHeight;
 
 			element.style.width = `${dataWidth / dataHeight * size}px`;
+		} else {
+			const size = innerWidth(element) || dataWidth;
+
+			element.style.height = `${dataHeight / dataWidth * size}px`;
 		}
 	}
 	static resizeAll() {

src/DOMRenderer.js

@@ -34,11 +34,13 @@ function _defense(element) {
 }
 export default class DOMRenderer {
 	static renderItem(item, styles) {
-		if (item.el) {
-			const elStyle = item.el.style;
+		const el = item.el;
+
+		if (el) {
+			const elStyle = el.style;
 
 			// for debugging
-			item.el.setAttribute(GROUPKEY_ATT, item.groupKey);
+			el.setAttribute(GROUPKEY_ATT, item.groupKey);
 			elStyle.position = "absolute";
 			["left", "top", "width", "height"].forEach(p => {
 				(p in styles) && (elStyle[p] = `${styles[p]}px`);
@@ -67,15 +69,11 @@ export default class DOMRenderer {
 		parentNode.removeChild(element);
 	}
 	static createElements(items) {
-		if (!items.length) {
-			return items;
-		} else if (items[0].el) {
+		if (!items.length || items[0].el) {
 			return items;
 		}
-		const elements = $(items.reduce((acc, v, i) => {
-			acc.push(v.content.replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, ""));
-			return acc;
-		}, []).join(""), MULTI);
+		const elements = $(items.map(({content}) =>
+			content.replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, "")).join(""), MULTI);
 
 		return items.map((item, index) => {
 			item.el = elements[index];
@@ -134,23 +132,24 @@ export default class DOMRenderer {
 	_init(el) {
 		const element = $(el);
 		const style = getStyles(element);
+		const {isOverflowScroll, horizontal} = this.options;
 
 		this._orgStyle = {};
 
 		if (style.position === "static") {
 			this._orgStyle.position = element.style.position;
 			element.style.position = "relative";
 		}
-		if (this.options.isOverflowScroll) {
-			const target = this.options.horizontal ? ["X", "Y"] : ["Y", "X"];
+		if (isOverflowScroll) {
+			const target = horizontal ? ["X", "Y"] : ["Y", "X"];
 
 			this._orgStyle.overflowX = element.style.overflowX;
 			this._orgStyle.overflowY = element.style.overflowY;
 			element.style[`overflow${target[0]}`] = "scroll";
 			element.style[`overflow${target[1]}`] = "hidden";
 			this.view = element;
 			// defense code for android < 4.4 or webkit < 537
-			this.container = this.options.horizontal && DEFENSE_BROWSER ? _defense(element) : element;
+			this.container = horizontal && DEFENSE_BROWSER ? _defense(element) : element;
 		} else {
 			this.view = window;
 			this.container = element;
@@ -187,15 +186,16 @@ export default class DOMRenderer {
 		this._insert(itemsWithElement, isAppend);
 	}
 	_insert(items, isAppend, styles) {
+		const container = this.container;
 		const df = document.createDocumentFragment();
 
 		items.forEach(item => {
 			styles && DOMRenderer.renderItem(item, styles);
 			isAppend ? df.appendChild(item.el) : df.insertBefore(item.el, df.firstChild);
 		});
 		isAppend ?
-			this.container.appendChild(df) :
-			this.container.insertBefore(df, this.container.firstChild);
+			container.appendChild(df) :
+			container.insertBefore(df, container.firstChild);
 	}
 	_calcSize() {
 		return this.options.horizontal ?
@@ -205,28 +205,28 @@ export default class DOMRenderer {
 		return this._size.view;
 	}
 	getViewportSize() {
-		this.resize();
 		return this._size.viewport;
 	}
 	setContainerSize(size) {
-		if (!this.options.isOverflowScroll || (this.options.horizontal && DEFENSE_BROWSER)) {
-			this.container.style[this.options.horizontal ? "width" : "height"] = `${size}px`;
+		const {isOverflowScroll, horizontal} = this.options;
+
+		if (!isOverflowScroll || (horizontal && DEFENSE_BROWSER)) {
+			this.container.style[horizontal ? "width" : "height"] = `${size}px`;
 		}
 	}
 	resize() {
 		const horizontal = this.options.horizontal;
+		const view = this.view;
+		const isResize = this.isNeededResize();
 
-		if (this.isNeededResize()) {
+		if (isResize) {
 			this._size = {
 				viewport: this._calcSize(),
-				view: horizontal ? innerWidth(this.view) : innerHeight(this.view),
 				item: null,
 			};
-			return true;
-		} else {
-			this._size.view = horizontal ? innerWidth(this.view) : innerHeight(this.view);
 		}
-		return false;
+		this._size.view = horizontal ? innerWidth(view) : innerHeight(view);
+		return isResize;
 	}
 	isNeededResize() {
 		return this._calcSize() !== this._size.viewport;

src/ImageLoaded.js

@@ -6,17 +6,14 @@ import AutoSizer from "./AutoSizer";
 export const CHECK_ALL = 1;
 export const CHECK_ONLY_ERROR = 2;
 
-
-const errorImages = [];
-
 function isDataAttribute(target, prefix) {
 	return !!target.getAttribute(`${prefix}width`);
 }
 
 class ImageLoaded {
 	static waitImageLoaded(needCheck, {prefix = "", length, type, complete, error, end}) {
 		let checkCount = 0;
-		let endCount = length || needCheck.reduce((sum, element) => sum + element.length, 0);
+		let endCount = length;
 
 		if (type !== CHECK_ONLY_ERROR) {
 			checkCount = endCount;
@@ -52,7 +49,6 @@ class ImageLoaded {
 				checkImage();
 			}
 			if (e.type === "error") {
-				errorImages.push(target.src);
 				onError(target);
 			}
 			delete target.__ITEM_INDEX__;
@@ -84,7 +80,7 @@ class ImageLoaded {
 	}
 	static checkImageLoaded(el) {
 		if (el.tagName === "IMG") {
-			return !el.complete ? [el] : [];
+			return el.complete ? [] : [el];
 		} else {
 			return toArray(el.querySelectorAll("img"));
 		}

src/Infinite.js

@@ -1,10 +1,10 @@
-import {APPEND, PREPEND} from "./consts";
 
-function isVisible(group, {threshold, scrollPos, endScrollPos}) {
-	const start = group.outlines.start;
-	const end = group.outlines.end;
+function isVisible(group, threshold, scrollPos, endScrollPos) {
+	const {items, outlines} = group;
+	const start = outlines.start;
+	const end = outlines.end;
 
-	if (start.legnth === 0 || end.length === 0 || !group.items.length || !group.items[0].el) {
+	if (start.legnth === 0 || end.length === 0 || !items.length || !items[0].el) {
 		return 2;
 	}
 	const min = Math.min(...start);
@@ -44,9 +44,8 @@ class Infinite {
 		}
 		const endScrollPos = scrollPos + size;
 		const {threshold, recycle} = this.options;
-		const visibleOptions = {threshold, scrollPos, endScrollPos};
 		const visibles = this._items.get(startCursor, endCursor)
-			.map(group => isVisible(group, visibleOptions));
+			.map(group => isVisible(group, threshold, scrollPos, endScrollPos));
 		const length = visibles.length;
 		let start = isForward ? 0 : visibles.lastIndexOf(0);
 		let end = isForward ? visibles.indexOf(0) - 1 : visibles.length - 1;
@@ -90,19 +89,19 @@ class Infinite {
 		}
 	}
 	setCursor(cursor, index) {
+		const status = this._status;
+
 		if (!this.options.useRecycle) {
-			this._status.startCursor = 0;
-			this._status.endCursor = this._items.size() - 1;
+			status.startCursor = 0;
+			status.endCursor = this._items.size() - 1;
 			return;
 		}
 		if (cursor === "start") {
-			this._status.startCursor = index;
+			status.startCursor = index;
 		} else {
-			const lastIndex = this._items.size() - 1;
-
-			this._status.endCursor = Math.min(lastIndex, index);
+			status.endCursor = Math.min(this._items.size() - 1, index);
 		}
-		this._status.startCursor = Math.max(0, this._status.startCursor);
+		status.startCursor = Math.max(0, status.startCursor);
 	}
 	updateCursor(cursor) {
 		const {startCursor, endCursor} = this._status;
@@ -122,15 +121,13 @@ class Infinite {
 		this._items.set(item, item.groupKey);
 		this.setCursor(isAppend ? "end" : "start", this._items.indexOf(item));
 	}
-	_insertData(item, isAppend) {
-		this._items[isAppend ? "append" : "prepend"](item);
-		this.updateCursor(isAppend ? "end" : "start");
-	}
 	append(item) {
-		this._insertData(item, APPEND);
+		this._items.append(item);
+		this.updateCursor("end");
 	}
 	prepend(item) {
-		this._insertData(item, PREPEND);
+		this._items.prepend(item);
+		this.updateCursor("start");
 	}
 	setStatus(status) {
 		this._status = Object.assign(this._status, status);