Skip to content

Commit

Permalink
fix(infiniteGrid): support remove method
Browse files Browse the repository at this point in the history 
- add testcase

ref naver#461
  • Loading branch information
@sculove
sculove committed Mar 4, 2017
1 parent 2edd048 commit 7cc5ee7
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 39 deletions.
33 changes: 11 additions & 22 deletions src/infiniteGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

/**
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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();
Expand All @@ -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
}
}

Expand Down Expand Up @@ -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;
},
/**
Expand All @@ -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;
},
/**
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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;
},
Expand Down
21 changes: 12 additions & 9 deletions test/manual/infiniteGrid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,8 @@
<button class="append">append</button>
<button class="prepend">prepend</button>
<button class="fit">fit</button>
<button class="layout">layout</button><br>
<button class="layout">layout()</button><br>
<button class="layout_false">layout(false)</button><br>
<button class="clear">clear</button>
<button class="getStatus">getStatus</button>
<button class="setStatus">setStatus</button><br>
Expand All @@ -88,22 +89,22 @@
</div>
<ul id="grid">
<li class="item">
<div>테스트1</div>
<div>test1</div>
</li>
<li class="item">
<div>테스트2</div>
<div>test2</div>
</li>
<li class="item">
<div>테스트3</div>
<div>test3</div>
</li>
<li class="item">
<div>테스트4</div>
<div>test4</div>
</li>
<li class="item">
<div>테스트5</div>
<div>test5</div>
</li>
<li class="item">
<div>테스트6</div>
<div>test6</div>
</li>
</ul>
<script>
Expand All @@ -127,13 +128,13 @@

var oinst = $inst.infiniteGrid("instance");

var HTML = '<li class="item"><div>테스트1</div></li><li class="item"><div>테스트2</div></li><li class="item"><div>테스트3</div></li><li class="item"><div>테스트4</div></li><li class="item"><div>테스트5</div></li><li class="item"><div>테스트6</div></li><li class="item"><div>테스트7</div></li>';
var HTML = '<li class="item"><div>test1</div></li><li class="item"><div>test2</div></li><li class="item"><div>test3</div></li><li class="item"><div>test4</div></li><li class="item"><div>test5</div></li><li class="item"><div>test6</div></li><li class="item"><div>test7</div></li>';

var tmpStatus = {};

$("#grid").click(function(e) {
var $el = $(e.target);
console.log(oinst.remove(e.target.parentNode));
oinst.remove(e.target.parentNode);
});

$("#controler").click(function(e) {
Expand All @@ -157,6 +158,8 @@
oinst.fit();
} else if ($el.hasClass("layout")) {
oinst.layout();
} else if ($el.hasClass("layout_false")) {
oinst.layout(false);
} else if ($el.hasClass("clear")) {
oinst.clear();
} else if ($el.hasClass("getStatus")) {
Expand Down
12 changes: 6 additions & 6 deletions test/unit/infiniteGrid.test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,22 +54,22 @@ <h2 id="qunit-userAgent"></h2>
</ul>
<ul id="grid">
<li class="item">
<div>테스트1</div>
<div>test1</div>
</li>
<li class="item">
<div>테스트2</div>
<div>test2</div>
</li>
<li class="item">
<div>테스트3</div>
<div>test3</div>
</li>
<li class="item">
<div>테스트4</div>
<div>test4</div>
</li>
<li class="item">
<div>테스트5</div>
<div>test5</div>
</li>
<li class="item">
<div>테스트6</div>
<div>test6</div>
</li>
</ul>
<!-- UI content End -->
Expand Down
118 changes: 116 additions & 2 deletions test/unit/js/infiniteGrid.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -328,6 +328,36 @@ QUnit.test("check a count of remove contents", function(assert) {
QUnit.test("check item/element order and check removed parts", function(assert) {
var done = assert.async();

function getUniqueX(target) {
var temp = {};
var x = $(target).map(function(i, v) {
return v.position.x;
}).each(function(i, v) {
if (!(v in temp)) {
temp[v] = v;
}
});

var ret = [];
for(var p in temp) {
ret.push(p);
}
return ret;
}

function getGroups(target) {
var x = getUniqueX(target);
var group = {};
$.each(x, function(i, v) {
group[v] = $.grep(target, function(gv) {
return gv.position.x === ~~v;
}).sort(function(p, c) {
return p.position.y - c.position.y;
});
});
return group;
}

//When
this.inst.on("layoutComplete",function(e) {
this.off();
Expand All @@ -338,6 +368,15 @@ QUnit.test("check item/element order and check removed parts", function(assert)
this.$el.children().slice(0,e.target.length).each( function(i, v) {
assert.equal($(v).data("prepend-index"), i, "check element order " + i);
});
var groups = getGroups(e.target);
for(var p in groups) {
$.each(groups[p], function(i, v) {
if (i > 0) {
assert.ok(v.position.y >= groups[p][i-1].position.y, "it's greater than or equal to previous value");
assert.ok($(v.el).data("prepend-index") >= $(groups[p][i-1].el).data("prepend-index"), "it's greater than or equal to previous value (data)");
}
})
}
assert.equal(e.isAppend, false, "prepend type");
done();
});
Expand Down Expand Up @@ -825,7 +864,6 @@ QUnit.test("if width is not changed, layout should be not called on resize event
});



QUnit.module("infiniteGrid private method Test", {
beforeEach : function() {
this.fakeWnd = {
Expand Down Expand Up @@ -857,4 +895,80 @@ QUnit.test("check _refreshViewport method", function(assert) {

// Then
assert.equal(inst._clientHeight, 200, "height is changed");
});
});


QUnit.module("infiniteGrid layout(false) Test", {
beforeEach : function() {
this.inst = new eg.InfiniteGrid("#nochildren_grid", {
"count" : 30
});
},
afterEach : function() {
if(this.inst) {
this.inst.destroy();
this.inst = null;
}
}
});

QUnit.test("check a remove module", function(assert) {
var done = assert.async();
var beforePrependCols = null;
var beforePosition = null;
function getItem(items, position) {
return $.grep(items, function(v) {
return v.position.x === position.x && v.position.y === position.y;
});
}

// Given
// When
this.inst.on("layoutComplete",function(e) {
$.each(this._prependCols, function(i, v) {
assert.ok(v === 0, "prependCols values are zero");
});

this.off();
this.on("layoutComplete",function(e) {
// Given
beforePrependCols = this._prependCols.concat();
$.each(this._prependCols, function(i, v) {
assert.ok(v !== 0, "prependCols values aren't zero");
});

beforePosition = e.target[5].position;
var beforeItemLen = this.items.length;
var beforeElementLen = this.el.children.length;
var ret = getItem(this.items, beforePosition);
assert.equal(ret.length, 1, "only one");

// When
this.remove(e.target[5].el);

// Then
ret = getItem(this.items, beforePosition);
assert.equal(ret.length, 0, "nothing");
assert.equal(this.items.length, beforeItemLen-1, "remove items");
assert.equal(this.el.children.length, beforeElementLen-1, "remove DOM");

this.off();
this.on("layoutComplete",function(e) {
beforePrependCols = this._prependCols.concat();
$.each(this._prependCols, function(i, v) {
assert.equal(v, beforePrependCols[i], "equal before PrependCols");
});
// Then
var ret = getItem(this.items, beforePosition);
assert.equal(ret.length, 1, "relayout items");
done();
});
// Then
this.layout(false);
});
this.append(getContent("append", 25));
});

// Then
this.inst.append(getContent("append", 25));
});

0 comments on commit 7cc5ee7

Please sign in to comment.