From 98a50a47fa0fe4edd1b2fac9aaa6e429970799d1 Mon Sep 17 00:00:00 2001 From: sculove Date: Mon, 27 Feb 2017 12:00:54 +0900 Subject: [PATCH 1/8] docs(infiniteGrid): correct getStatus ref #454 --- src/infiniteGrid.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/infiniteGrid.js b/src/infiniteGrid.js index c36cfcc..772f839 100644 --- a/src/infiniteGrid.js +++ b/src/infiniteGrid.js @@ -183,7 +183,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob /** * Returns the current state of a module such as location information. You can use the setStatus() method to restore the information returned through a call to this method. * @ko 카드의 위치 정보 등 모듈의 현재 상태 정보를 반환한다. 이 메서드가 반환한 정보를 저장해 두었다가 setStatus() 메서드로 복원할 수 있다 - * @method eg.InfiniteGrid#getStatue + * @method eg.InfiniteGrid#getStatus * @return {Object} State object of the eg.InfiniteGrid moduleeg.InfiniteGrid 모듈의 상태 객체 */ getStatus: function() { From a574b36a79c694b0449e6d580dee02491daf6ee2 Mon Sep 17 00:00:00 2001 From: sculove Date: Tue, 28 Feb 2017 00:03:02 +0900 Subject: [PATCH 2/8] feat(infiniteGrid): skip WIP ref #461 --- src/infiniteGrid.js | 178 +++++++++++++++++++++------------- test/manual/infiniteGrid.html | 11 ++- 2 files changed, 117 insertions(+), 72 deletions(-) diff --git a/src/infiniteGrid.js b/src/infiniteGrid.js index 772f839..54f2abd 100644 --- a/src/infiniteGrid.js +++ b/src/infiniteGrid.js @@ -83,8 +83,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob this._reset(); this._refreshViewport(); if (this.el.children.length > 0) { - this.items = this._itemize($.makeArray(this.el.children), this.options.defaultGroupKey, true); - this.layout(this.items, true); + this.layout(true, this._itemize($.makeArray(this.el.children), this.options.defaultGroupKey, true)); } this._onScroll = $.proxy(this._onScroll, this); @@ -170,7 +169,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob var self = this; this._resizeTimeout = setTimeout(function() { self._refreshViewport(); - (self.$el.innerWidth() !== self._containerWidth) && self.layout(self.items, true); + (self.$el.innerWidth() !== self._containerWidth) && self.layout(true); self._resizeTimeout = null; }, 100); }, @@ -262,26 +261,44 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob * Rearranges a layout. * @ko 레이아웃을 다시 배치한다. * @method eg.InfiniteGrid#layout + * @param {Boolean} [isRelayout=true] * @return {eg.InfiniteGrid} An instance of a module itself모듈 자신의 인스턴스 */ - layout: function(items, isRefresh) { - items = items || this.items; - isRefresh = typeof isRefresh === "undefined" ? true : isRefresh; - this._isProcessing = true; - isRefresh && (items = $.map(items, function(v) { - v.isAppend = true; - return v; - })); - this._waitResource(items, isRefresh); + layout: function(isRelayout, addItems, isAppend) { + isRelayout = typeof isRelayout === "undefined" ? true : isRelayout; + isAppend = typeof isAppend === "undefined" ? true : isAppend; + if (this.items.length || addItems) { + this._waitResource(isRelayout, addItems, isAppend); + } return this; }, - _layoutItems: function(items) { + _layoutComplete: function(isRelayout, addItems, isAppend) { + if (isRelayout) { + var item = null; + if(!this.items.length) { + item = addItems && addItems[0]; + $.each(addItems, function(i, v) { + v.el.style.position = "absolute"; + }); + this.items = this.items.concat(addItems); + } + this._resetCols(this._measureColumns(item)); + } else { + if (!addItems) { + this._appendCols = this._prependCols.concat(); + } + + } + this._layoutItems(isRelayout, addItems, isAppend); + this._postLayout(isRelayout, addItems, isAppend); + }, + _layoutItems: function(isRelayout, addItems, isAppend) { var self = this; - + // for performance $.each( - $.map(items, function(v) { - v.position = self._getItemLayoutPosition(v); + $.map(addItems || this.items, function(v) { + v.position = self._getItemLayoutPosition(isRelayout, v, isAppend); return v; }), function(i, v) { @@ -354,18 +371,6 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob return this; }, - _getTopItem: function() { - var item = null; - var min = Infinity; - $.each(this._getColItems(false), function(i, v) { - if (v && v.position.y < min) { - min = v.position.y; - item = v; - } - }); - return item; - }, - /** * Returns a card element at the top of a layout. * @ko 레이아웃의 맨 위에 있는 카드 엘리먼트를 반환한다. @@ -378,12 +383,12 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob return item && item.el; }, - _getBottomItem: function() { + _getTopItem: function() { var item = null; - var max = -Infinity; - $.each(this._getColItems(true), function(i, v) { - if (v && v.position.y + v.size.height > max) { - max = v.position.y + v.size.height; + var min = Infinity; + $.each(this._getColItems(false), function(i, v) { + if (v && v.position.y < min) { + min = v.position.y; item = v; } }); @@ -398,29 +403,36 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob * @return {HTMLElement} Card element at the bottom of a layout 레이아웃의 맨 아래에 있는 카드 엘리먼트 */ getBottomElement: function() { - var item = this._getBottomItem(); + var item = null; + var max = -Infinity; + $.each(this._getColItems(true), function(i, v) { + if (v && v.position.y + v.size.height > max) { + max = v.position.y + v.size.height; + item = v; + } + }); return item && item.el; }, - _postLayout: function(items) { - if (!this._isProcessing || items.length <= 0) { + _postLayout: function(isRelayout, addItems, isAppend) { + if (!this._isProcessing) { return; } + addItems = addItems || []; - var size = this._getContainerSize(); - this.el.style.height = size.height + "px"; - + this.el.style.height = this._getContainerSize().height + "px"; + // refresh element this._topElement = this.getTopElement(); this._bottomElement = this.getBottomElement(); var distance = 0; - var isAppend = items[0].isAppend; + console.log("post", isRelayout, isAppend); if (!isAppend) { this._isFitted = false; this._fit(true); - distance = items.length >= this.items.length ? - 0 : this.items[items.length].position.y; + distance = addItems.length >= this.items.length ? + 0 : this.items[addItems.length].position.y; if (distance > 0) { this._prevScrollTop = this._getScrollTop() + distance; this.$view.scrollTop(this._prevScrollTop); @@ -443,7 +455,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob * @param {Number} param.croppedCount The number of deleted card elements to maintain the number of DOMs일정한 DOM 개수를 유지하기 위해, 삭제한 카드 엘리먼트들의 개수 */ this.trigger(this._prefix + EVENTS.layoutComplete, { - target: items.concat(), + target: addItems.concat(), isAppend: isAppend, distance: distance, croppedCount: this._removedContent @@ -470,24 +482,16 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob items = items.reverse(); } this.isRecycling() && this._adjustRange(isAppend, $cloneElements); - + this.$el[isAppend ? "append" : "prepend"]($cloneElements); - this.layout(items, false); + this.layout(false, items, isAppend); }, - _waitResource: function(items, isRefresh) { + _waitResource: function(isRelayout, addItems, isAppend) { + this._isProcessing = true; var needCheck = this._checkImageLoaded(); var self = this; var callback = function() { - if (self._isProcessing) { - if (isRefresh || !self._appendCols.length) { - $.each(items, function(i, v) { - v.el.style.position = "absolute"; - }); - self._measureColumns(); - } - self._layoutItems(items); - self._postLayout(items); - } + self._layoutComplete(isRelayout, addItems, isAppend); }; if (needCheck.length > 0) { this._waitImageLoaded(needCheck, callback); @@ -498,6 +502,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob }, 0); } }, + _adjustRange: function (isTop, $elements) { var diff = this.items.length - this.options.count; var targets; @@ -507,6 +512,10 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob } if (isTop) { targets = this.items.splice(0, idx); + for (var i = 0, x, len = targets.length; i Date: Fri, 3 Mar 2017 00:07:50 +0900 Subject: [PATCH 3/8] refactor(infiniteGrid): refactor layout - support remove method. ref #461 --- src/infiniteGrid.js | 236 ++++++++++++++++-------------- test/manual/infiniteGrid.html | 13 +- test/unit/js/infiniteGrid.test.js | 46 +++--- 3 files changed, 168 insertions(+), 127 deletions(-) diff --git a/src/infiniteGrid.js b/src/infiniteGrid.js index 54f2abd..f7931aa 100644 --- a/src/infiniteGrid.js +++ b/src/infiniteGrid.js @@ -5,6 +5,8 @@ // jscs:disable validateLineBreaks, maximumLineLength eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, global, doc) { + var APPEND = BOTTOM = true; + var PREPEND = TOP = false; "use strict"; /** @@ -150,6 +152,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob * @param {Number} param.scrollTop Current vertical position of the scroll bar현재 스크롤의 y 좌표 값 */ var croppedDistance = this.fit(); + console.log("prepend", croppedDistance); if (croppedDistance > 0) { scrollTop -= croppedDistance; this.$view.scrollTop(scrollTop); @@ -266,48 +269,77 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob */ layout: function(isRelayout, addItems, isAppend) { isRelayout = typeof isRelayout === "undefined" ? true : isRelayout; - isAppend = typeof isAppend === "undefined" ? true : isAppend; - if (this.items.length || addItems) { - this._waitResource(isRelayout, addItems, isAppend); + isAppend = typeof isAppend === "undefined" ? APPEND : isAppend; + + // for except case. + if (!addItems && !isAppend) { + isAppend = APPEND; } + this._waitResource(isRelayout, addItems, isAppend); return this; }, _layoutComplete: function(isRelayout, addItems, isAppend) { - if (isRelayout) { - var item = null; - if(!this.items.length) { - item = addItems && addItems[0]; - $.each(addItems, function(i, v) { - v.el.style.position = "absolute"; - }); - this.items = this.items.concat(addItems); - } - this._resetCols(this._measureColumns(item)); + var isInit = !this.items.length; + + // insert items + if (addItems && isAppend) { + // this.items = isAppend ? this.items.concat(addItems) : addItems.reverse().concat(this.items); + this.items = this.items.concat(addItems); + } + + if (isInit) { + $.each(addItems, function(i, v) { + v.el.style.position = "absolute"; + }); + } + + if (isInit || isRelayout) { + this._resetCols(this._measureColumns()); } else { if (!addItems) { this._appendCols = this._prependCols.concat(); } - } this._layoutItems(isRelayout, addItems, isAppend); this._postLayout(isRelayout, addItems, isAppend); + console.debug("*****:", this.el.children.length, this.items.length); }, _layoutItems: function(isRelayout, addItems, isAppend) { var self = this; - + var items = addItems || this.items; + + $.each(items, function(i, v) { + v.position = self._getItemLayoutPosition(isRelayout, v, isAppend); + }); + if (addItems && !isAppend) { + // addItems = addItems.sort(function(p, c) { + // return p.position.y > c.position.y; + // }); + this.items = addItems.sort(function(p, c) { + return p.position.y > c.position.y; + }).concat(this.items); + + var y = this._getTopPositonY(); + if (y !== 0) { + items = this.items; + $.each(items, function(i, v) { + var before= v.position.y; + v.position.y -= y; + console.log(i, "y:", before, "=>", v.position.y); + }); + this._syncCols(TOP); + this._syncCols(BOTTOM); + } + } + // for performance - $.each( - $.map(addItems || this.items, function(v) { - v.position = self._getItemLayoutPosition(isRelayout, v, isAppend); - return v; - }), - function(i, v) { - if (v.el) { - var style = v.el.style; - style.left = v.position.x + "px"; - style.top = v.position.y + "px"; - } - }); + $.each(items, function(i, v) { + if (v.el) { + var style = v.el.style; + style.left = v.position.x + "px"; + style.top = v.position.y + "px"; + } + }); }, /** * Adds a card element at the bottom of a grid layout. This method is available only if the isProcessing() method returns false. @@ -330,7 +362,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob this._isRecycling = (this.items.length + $elements.length) >= this.options.count; } - this._insert($elements, groupKey, true); + this._insert($elements, groupKey, APPEND); return $elements.length; }, /** @@ -351,11 +383,12 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob $elements = $($elements); this._isProcessing = true; - this._fit(); + console.error("prepend", $elements.length); + // this._fit(); if ($elements.length > this._removedContent) { $elements = $elements.slice(0, this._removedContent); } - this._insert($elements, groupKey, false); + this._insert($elements, groupKey, PREPEND); return $elements.length; }, /** @@ -386,15 +419,27 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob _getTopItem: function() { var item = null; var min = Infinity; - $.each(this._getColItems(false), function(i, v) { + // $.each(this._getColItems(TOP), function(i, v) { + // if (v && v.position.y < min) { + // min = v.position.y; + // item = v; + // } + // }); + $.each(this.items, function(i, v) { if (v && v.position.y < min) { min = v.position.y; item = v; } }); + return item; }, + _getTopPositonY: function() { + var item = this._getTopItem(); + return item ? item.position.y : 0; + }, + /** * Returns a card element at the bottom of a layout. * @ko 레이아웃의 맨 아래에 있는 카드 엘리먼트를 반환한다. @@ -405,7 +450,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob getBottomElement: function() { var item = null; var max = -Infinity; - $.each(this._getColItems(true), function(i, v) { + $.each(this._getColItems(BOTTOM), function(i, v) { if (v && v.position.y + v.size.height > max) { max = v.position.y + v.size.height; item = v; @@ -427,10 +472,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob this._bottomElement = this.getBottomElement(); var distance = 0; - console.log("post", isRelayout, isAppend); if (!isAppend) { - this._isFitted = false; - this._fit(true); distance = addItems.length >= this.items.length ? 0 : this.items[addItems.length].position.y; if (distance > 0) { @@ -474,17 +516,15 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob v.style.position = "absolute"; v.style.top = dummy; }); - var items = this._itemize(elements, groupKey, isAppend); - if (isAppend) { - this.items = this.items.concat(items); - } else { - this.items = items.concat(this.items); - items = items.reverse(); - } + console.info("insert before", isAppend, $cloneElements.length); this.isRecycling() && this._adjustRange(isAppend, $cloneElements); + console.info("insert", isAppend, $cloneElements.length); + console.info("insert before el", this.el.children.length); + // prepare HTML this.$el[isAppend ? "append" : "prepend"]($cloneElements); - this.layout(false, items, isAppend); + console.info("insert el", this.el.children.length); + this.layout(false, this._itemize($cloneElements, groupKey, isAppend), isAppend); }, _waitResource: function(isRelayout, addItems, isAppend) { this._isProcessing = true; @@ -504,7 +544,12 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob }, _adjustRange: function (isTop, $elements) { - var diff = this.items.length - this.options.count; + // trim $elements + if (this.options.count <= $elements.length) { + this._removedContent += isTop ? $elements.splice(0, $elements.length - this.options.count).length + : -$elements.splice(this.options.count).length + } + var diff = this.items.length + $elements.length - this.options.count; var targets; var idx; if (diff <= 0 || (idx = this._getDelimiterIndex(isTop, diff)) < 0) { @@ -512,13 +557,9 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob } if (isTop) { targets = this.items.splice(0, idx); - for (var i = 0, x, len = targets.length; i 0; i--) { @@ -567,25 +612,22 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob // for caching if (this.options.count <= 0) { this._fit = function() { - return false; + return 0; }; - this._isFitted = true; - return false; - } - - if (this._isFitted) { - return false; + return 0; + } + var y = this._getTopPositonY(); + if (y !== 0) { + // need to fit + $.each(this.items, function(i, v) { + v.position.y -= y; + applyDom && (v.el.style.top = v.position.y + "px"); + }); + applyDom && (this.el.style.height = this._getContainerSize().height + "px"); + this._syncCols(TOP); // for prepending + this._syncCols(BOTTOM); // for appending } - var y = this._updateCols(); // for prepend - $.each(this.items, function(i, v) { - v.position.y -= y; - applyDom && (v.el.style.top = v.position.y + "px"); - }); - this._updateCols(true); // for append - var height = this._getContainerSize().height; - applyDom && (this.el.style.height = height + "px"); - this._isFitted = true; - return true; + return y; }, /** @@ -596,16 +638,13 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob * @return {Number} Actual length of space removed (unit: px) 빈 공간이 제거된 실제 길이(단위: px) */ fit: function() { - var item = this._getTopItem(); - var distance = item ? item.position.y : 0; - this._fit(true); - return distance; + return this._fit(true); }, + _reset: function() { this._isProcessing = false; this._topElement = null; this._bottomElement = null; - this._isFitted = true; this._isRecycling = false; this._removedContent = 0; this._prevScrollTop = 0; @@ -642,16 +681,15 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob $el.on("load error", onCheck); }); }, - _measureColumns: function(item) { + _measureColumns: function() { this.el.style.width = null; this._containerWidth = this.$el.innerWidth(); - this._columnWidth = this._getColumnWidth(item) || this._containerWidth; + this._columnWidth = this._getColumnWidth() || this._containerWidth; var cols = this._containerWidth / this._columnWidth; var excess = this._columnWidth - this._containerWidth % this._columnWidth; // if overshoot is less than a pixel, round up, otherwise floor it cols = Math.max(Math[ excess && excess <= 1 ? "round" : "floor" ](cols), 1); - console.warn(cols); return cols || 0; }, _resetCols: function(count) { @@ -669,9 +707,8 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob width: this._containerWidth }; }, - _getColumnWidth: function(item) { - item = item || this.items[0]; - var el = item && item.el; + _getColumnWidth: function() { + var el = this.items[0] && this.items[0].el; var width = 0; if (el) { var $el = $(el); @@ -685,37 +722,26 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob } return width; }, - _updateCols: function(isAppend) { - var col = isAppend ? this._appendCols : this._prependCols; - var items = this._getColItems(isAppend); - var base = this._isFitted || isAppend ? 0 : this._getMinY(items); - var i = 0; - var len = col.length; - var item; - for (; i < len; i++) { - if (item = items[i]) { - col[i] = item.position.y + (isAppend ? item.size.height : -base); - } else { - col[i] = 0; - } + _syncCols: function(isBottom) { + if (!this.items.length) { + return; + } + var items = this._getColItems(isBottom); + var col = isBottom ? this._appendCols : this._prependCols; + for(var i=0, len = col.length; i Date: Fri, 3 Mar 2017 00:21:11 +0900 Subject: [PATCH 4/8] chore(infiniteGrid): remove log --- src/infiniteGrid.js | 15 +-------------- test/manual/infiniteGrid.html | 22 +++++++++++----------- test/unit/js/infiniteGrid.test.js | 6 ------ 3 files changed, 12 insertions(+), 31 deletions(-) diff --git a/src/infiniteGrid.js b/src/infiniteGrid.js index f7931aa..e3bfaa5 100644 --- a/src/infiniteGrid.js +++ b/src/infiniteGrid.js @@ -152,7 +152,6 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob * @param {Number} param.scrollTop Current vertical position of the scroll bar현재 스크롤의 y 좌표 값 */ var croppedDistance = this.fit(); - console.log("prepend", croppedDistance); if (croppedDistance > 0) { scrollTop -= croppedDistance; this.$view.scrollTop(scrollTop); @@ -275,7 +274,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob if (!addItems && !isAppend) { isAppend = APPEND; } - this._waitResource(isRelayout, addItems, isAppend); + this._waitResource(isRelayout, isAppend ? addItems : addItems.reverse(), isAppend); return this; }, _layoutComplete: function(isRelayout, addItems, isAppend) { @@ -283,7 +282,6 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob // insert items if (addItems && isAppend) { - // this.items = isAppend ? this.items.concat(addItems) : addItems.reverse().concat(this.items); this.items = this.items.concat(addItems); } @@ -302,7 +300,6 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob } this._layoutItems(isRelayout, addItems, isAppend); this._postLayout(isRelayout, addItems, isAppend); - console.debug("*****:", this.el.children.length, this.items.length); }, _layoutItems: function(isRelayout, addItems, isAppend) { var self = this; @@ -323,9 +320,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob if (y !== 0) { items = this.items; $.each(items, function(i, v) { - var before= v.position.y; v.position.y -= y; - console.log(i, "y:", before, "=>", v.position.y); }); this._syncCols(TOP); this._syncCols(BOTTOM); @@ -383,8 +378,6 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob $elements = $($elements); this._isProcessing = true; - console.error("prepend", $elements.length); - // this._fit(); if ($elements.length > this._removedContent) { $elements = $elements.slice(0, this._removedContent); } @@ -516,14 +509,10 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob v.style.position = "absolute"; v.style.top = dummy; }); - console.info("insert before", isAppend, $cloneElements.length); this.isRecycling() && this._adjustRange(isAppend, $cloneElements); - console.info("insert", isAppend, $cloneElements.length); - console.info("insert before el", this.el.children.length); // prepare HTML this.$el[isAppend ? "append" : "prepend"]($cloneElements); - console.info("insert el", this.el.children.length); this.layout(false, this._itemize($cloneElements, groupKey, isAppend), isAppend); }, _waitResource: function(isRelayout, addItems, isAppend) { @@ -568,7 +557,6 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob if (idx !== -1) { $elements.splice(idx, 1); } else { - console.info("******* 삭제ㅠㅠㅠ"); v.el.parentNode.removeChild(v.el); } }); @@ -584,7 +572,6 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob var baseIdx = isTop ? removeCount - 1 : len - removeCount; var targetIdx = baseIdx + (isTop ? 1 : -1); var groupKey = this.items[baseIdx].groupKey; - console.log(groupKey, targetIdx); if (groupKey != null && groupKey === this.items[targetIdx].groupKey) { if (isTop) { for (i = baseIdx; i > 0; i--) { diff --git a/test/manual/infiniteGrid.html b/test/manual/infiniteGrid.html index c96c065..6ed5b6e 100644 --- a/test/manual/infiniteGrid.html +++ b/test/manual/infiniteGrid.html @@ -113,17 +113,17 @@ // var $inst = $("#grid").infiniteGrid({ itemSelector : ".item" -}).on("infiniteGrid:layoutComplete", function(e) { - console.info(e); -}).on("infiniteGrid:prepend", function(e) { - // var $elements = $(HTML); - // $elements.addClass("prepend").find("div").height(function() { - // var val = parseInt(Math.random() * 100,10); - // return val < 40 ? 40 : val; - // }) - // this.prepend($elements); - console.log(e); -}) +// }).on("infiniteGrid:layoutComplete", function(e) { +// console.info(e); +// }).on("infiniteGrid:prepend", function(e) { +// // var $elements = $(HTML); +// // $elements.addClass("prepend").find("div").height(function() { +// // var val = parseInt(Math.random() * 100,10); +// // return val < 40 ? 40 : val; +// // }) +// // this.prepend($elements); +// console.log(e); +}); var oinst = $inst.infiniteGrid("instance"); diff --git a/test/unit/js/infiniteGrid.test.js b/test/unit/js/infiniteGrid.test.js index c6ec0e6..f3e8156 100644 --- a/test/unit/js/infiniteGrid.test.js +++ b/test/unit/js/infiniteGrid.test.js @@ -54,7 +54,6 @@ QUnit.test("check a append after a initialization (there aren't children)", func // Given var done = assert.async(); var $el = getContent("append"); - console.log($el); this.inst = new eg.InfiniteGrid("#nochildren_grid"); // When assert.equal(this.inst.isProcessing(), false, "idel"); @@ -205,11 +204,9 @@ QUnit.test("check a prepend module", function(assert) { // When this.inst.on("layoutComplete",function(e) { - console.log("layoutComplete"); // When this.off(); this.on("layoutComplete",function(e) { - console.log(e); beforeItem = this.items[e.target.length]; assert.equal(this.isProcessing(), false, "idel in layoutComplete " + addCount); assert.equal(e.isAppend, false, "prepend type"); @@ -340,9 +337,6 @@ QUnit.test("check item/element order and check removed parts", function(assert) var self = this; this.$el.children().slice(0,e.target.length).each( function(i, v) { assert.equal($(v).data("prepend-index"), i, "check element order " + i); - console.log(i, $(v).data("prepend-index"), $(v).css("left"), $(v).css("top")); - console.info(i, $(self.items[i].el).data("prepend-index"), $(self.items[i].el).css("left"), $(self.items[i].el).css("top")); - // assert.deepEqual(self.items[i].el, v, "check item order"); }); assert.equal(e.isAppend, false, "prepend type"); done(); From 7cc5ee7a35bf5e665d3d7858360e89ec488b7bee Mon Sep 17 00:00:00 2001 From: sculove Date: Sat, 4 Mar 2017 14:26:52 +0900 Subject: [PATCH 5/8] fix(infiniteGrid): support remove method - add testcase ref #461 --- src/infiniteGrid.js | 33 +++------ test/manual/infiniteGrid.html | 21 +++--- test/unit/infiniteGrid.test.html | 12 +-- test/unit/js/infiniteGrid.test.js | 118 +++++++++++++++++++++++++++++- 4 files changed, 145 insertions(+), 39 deletions(-) diff --git a/src/infiniteGrid.js b/src/infiniteGrid.js index e3bfaa5..ee8f19f 100644 --- a/src/infiniteGrid.js +++ b/src/infiniteGrid.js @@ -5,8 +5,6 @@ // jscs:disable validateLineBreaks, maximumLineLength eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, global, doc) { - var APPEND = BOTTOM = true; - var PREPEND = TOP = false; "use strict"; /** @@ -268,11 +266,11 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob */ layout: function(isRelayout, addItems, isAppend) { isRelayout = typeof isRelayout === "undefined" ? true : isRelayout; - isAppend = typeof isAppend === "undefined" ? APPEND : isAppend; + isAppend = typeof isAppend === "undefined" ? true : isAppend; // for except case. if (!addItems && !isAppend) { - isAppend = APPEND; + isAppend = true; } this._waitResource(isRelayout, isAppend ? addItems : addItems.reverse(), isAppend); return this; @@ -309,11 +307,8 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob v.position = self._getItemLayoutPosition(isRelayout, v, isAppend); }); if (addItems && !isAppend) { - // addItems = addItems.sort(function(p, c) { - // return p.position.y > c.position.y; - // }); this.items = addItems.sort(function(p, c) { - return p.position.y > c.position.y; + return p.position.y - c.position.y; }).concat(this.items); var y = this._getTopPositonY(); @@ -322,8 +317,8 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob $.each(items, function(i, v) { v.position.y -= y; }); - this._syncCols(TOP); - this._syncCols(BOTTOM); + this._syncCols(false); // for prepending + this._syncCols(true); // for appending } } @@ -357,7 +352,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob this._isRecycling = (this.items.length + $elements.length) >= this.options.count; } - this._insert($elements, groupKey, APPEND); + this._insert($elements, groupKey, true); return $elements.length; }, /** @@ -381,7 +376,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob if ($elements.length > this._removedContent) { $elements = $elements.slice(0, this._removedContent); } - this._insert($elements, groupKey, PREPEND); + this._insert($elements, groupKey, false); return $elements.length; }, /** @@ -412,12 +407,6 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob _getTopItem: function() { var item = null; var min = Infinity; - // $.each(this._getColItems(TOP), function(i, v) { - // if (v && v.position.y < min) { - // min = v.position.y; - // item = v; - // } - // }); $.each(this.items, function(i, v) { if (v && v.position.y < min) { min = v.position.y; @@ -443,7 +432,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob getBottomElement: function() { var item = null; var max = -Infinity; - $.each(this._getColItems(BOTTOM), function(i, v) { + $.each(this._getColItems(false), function(i, v) { if (v && v.position.y + v.size.height > max) { max = v.position.y + v.size.height; item = v; @@ -546,7 +535,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob } if (isTop) { targets = this.items.splice(0, idx); - this._syncCols(TOP); + this._syncCols(false); // for prepending } else { targets = idx === this.items.length ? this.items.splice(0) : this.items.splice(idx, this.items.length - idx); } @@ -611,8 +600,8 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob applyDom && (v.el.style.top = v.position.y + "px"); }); applyDom && (this.el.style.height = this._getContainerSize().height + "px"); - this._syncCols(TOP); // for prepending - this._syncCols(BOTTOM); // for appending + this._syncCols(false); // for prepending + this._syncCols(true); // for appending } return y; }, diff --git a/test/manual/infiniteGrid.html b/test/manual/infiniteGrid.html index 6ed5b6e..d697708 100644 --- a/test/manual/infiniteGrid.html +++ b/test/manual/infiniteGrid.html @@ -79,7 +79,8 @@ -
+
+

@@ -88,22 +89,22 @@
  • -
    테스트1
    +
    test1
  • -
    테스트2
    +
    test2
  • -
    테스트3
    +
    test3
  • -
    테스트4
    +
    test4
  • -
    테스트5
    +
    test5
  • -
    테스트6
    +
    test6