diff --git a/tests/tiler.tests.js b/tests/tiler.tests.js
index ff846a4..972c4ed 100644
--- a/tests/tiler.tests.js
+++ b/tests/tiler.tests.js
@@ -3,36 +3,36 @@ function dummyTiles() {
[-1, -1, $('
0
')],
[ 0, -1, $('1
')],
[ 1, -1, $('2
')],
-
+
[-1, 0, $('3
')],
[ 0, 0, $('4
')],
[ 1, 0, $('5
')],
-
+
[-1, 1, $('6
')],
[ 0, 1, $('7
')],
[ 1, 1, $('8
')]
];
}
-
+
function createTiler(options) {
var syncs = 0;
var hNumber = 0;
var element = $('').appendTo(document.body);
-
+
element.css('width', 100);
element.css('height', 100);
-
+
var tiler = new Tiler(element, $.extend({}, {
x: 0, y: 0,
tileSize: 100,
capture: 1,
-
+
holder: function() {
var holder = $('');
holder.addClass('holder _' + hNumber);
holder.html(hNumber);
hNumber++
-
+
return holder;
},
sync: function(options, callback) {
@@ -41,7 +41,7 @@ function createTiler(options) {
}
}
}, options));
-
+
return tiler;
}
@@ -78,8 +78,8 @@ module('Options');
test('initial values', function() {
ok(Tiler.defaults.tileSize === null);
- ok(Tiler.defaults.holder === $.noop);
- ok(Tiler.defaults.sync === $.noop);
+ ok(Tiler.defaults.holder === null);
+ ok(Tiler.defaults.sync === null);
equals(Tiler.defaults.capture, 2);
equals(Tiler.defaults.x, 0);
equals(Tiler.defaults.y, 0);
@@ -107,46 +107,46 @@ test('"sync" callback is called with correct arguments', function() {
var expected = [[-1, -1], [0, -1], [1, -1],
[-1, 0], [0, 0], [1, 0],
[-1, 1], [0, 1], [1, 1]];
-
+
deepEqual(spy.args[0][0], {
coords: {x: 0, y: 0},
tosync: expected,
removed: []
});
-
+
ok($.isFunction(spy.args[0][1]));
-
+
tiler.element.remove();
});
test('"binder" is filled by holders, holders have correct position', function() {
var tiler = createTiler({sync: function() {}});
-
+
deepEqual(tiler.element.find('.holder._0').position(), {top: 0, left: 0});
deepEqual(tiler.element.find('.holder._1').position(), {top: 0, left: 100});
deepEqual(tiler.element.find('.holder._2').position(), {top: 0, left: 200});
-
+
deepEqual(tiler.element.find('.holder._3').position(), {top: 100, left: 0});
deepEqual(tiler.element.find('.holder._4').position(), {top: 100, left: 100});
deepEqual(tiler.element.find('.holder._5').position(), {top: 100, left: 200});
-
+
deepEqual(tiler.element.find('.holder._6').position(), {top: 200, left: 0});
deepEqual(tiler.element.find('.holder._7').position(), {top: 200, left: 100});
deepEqual(tiler.element.find('.holder._8').position(), {top: 200, left: 200});
-
+
tiler.element.remove();
});
test('"binder" is filled by holders after it was dragged on a distance more then it size', function() {
var tiler = createTiler();
-
+
tiler.binder.css('left', -1000);
tiler.binder.css('top', -1000);
tiler.binder.trigger('dragstop');
-
+
equal(tiler.binder.find('.tile').length, 0);
equal(tiler.binder.find('.holder').length, 9);
-
+
tiler.element.remove();
});
@@ -154,19 +154,19 @@ test('"binder" is filled by tiles #1', function() {
var tiler = createTiler();
equal(tiler.element.find('.holder').length, 0);
-
+
deepEqual(tiler.element.find('.tile._0').position(), {top: 0, left: 0});
deepEqual(tiler.element.find('.tile._1').position(), {top: 0, left: 100});
deepEqual(tiler.element.find('.tile._2').position(), {top: 0, left: 200});
-
+
deepEqual(tiler.element.find('.tile._3').position(), {top: 100, left: 0});
deepEqual(tiler.element.find('.tile._4').position(), {top: 100, left: 100});
deepEqual(tiler.element.find('.tile._5').position(), {top: 100, left: 200});
-
+
deepEqual(tiler.element.find('.tile._6').position(), {top: 200, left: 0});
deepEqual(tiler.element.find('.tile._7').position(), {top: 200, left: 100});
deepEqual(tiler.element.find('.tile._8').position(), {top: 200, left: 200});
-
+
tiler.element.remove();
});
@@ -181,11 +181,11 @@ test('"binder" is filled by tiles #2', 3, function() {
]);
}
});
-
+
deepEqual(tiler.element.find('.tile._0').position(), {top: 0, left: 0});
deepEqual(tiler.element.find('.tile._1').position(), {top: 100, left: 100});
deepEqual(tiler.element.find('.tile._2').position(), {top: 200, left: 200});
-
+
tiler.element.remove();
});
@@ -199,10 +199,10 @@ test('"binder" is filled by tiles #3', 2, function() {
]);
}
});
-
+
deepEqual(tiler.element.find('.tile._0').position(), {top: 0, left: 0});
deepEqual(tiler.element.find('.tile._2').position(), {top: 200, left: 200});
-
+
tiler.element.remove();
});
@@ -218,108 +218,108 @@ module('"Binder" dragging');
test('correct position changing #1', function() {
var tiler = createTiler({capture: 2});
-
+
tiler.binder.css('left', -100);
tiler.binder.css('top', -100);
tiler.binder.trigger('dragstop');
equal(tiler.binder.css('left'), '-200px');
equal(tiler.binder.css('top'), '-200px');
-
+
tiler.element.remove();
});
test('correct position changing #2', function() {
var tiler = createTiler({capture: 2});
-
+
tiler.binder.css('left', -150);
tiler.binder.css('top', -100);
tiler.binder.trigger('dragstop');
-
+
equal(tiler.binder.css('left'), '-150px');
equal(tiler.binder.css('top'), '-200px');
-
+
tiler.element.remove();
});
test('correct position changing #3', function() {
var tiler = createTiler({capture: 2});
-
+
tiler.binder.css('left', -100);
tiler.binder.css('top', -150);
tiler.binder.trigger('dragstop');
-
+
equal(tiler.binder.css('left'), '-200px');
equal(tiler.binder.css('top'), '-150px');
-
+
tiler.element.remove();
});
test('correct position changing #4', function() {
var tiler = createTiler({capture: 2});
-
+
tiler.binder.css('left', -300);
tiler.binder.css('top', -300);
tiler.binder.trigger('dragstop');
-
+
equal(tiler.binder.css('left'), '-200px');
equal(tiler.binder.css('top'), '-200px');
-
+
tiler.element.remove();
});
test('correct position changing #5', function() {
var tiler = createTiler({capture: 2});
-
+
tiler.binder.css('left', -250);
tiler.binder.css('top', -300);
tiler.binder.trigger('dragstop');
-
+
equal(tiler.binder.css('left'), '-250px');
equal(tiler.binder.css('top'), '-200px');
-
+
tiler.element.remove();
});
test('correct position changing #6', function() {
var tiler = createTiler({capture: 2});
-
+
tiler.binder.css('left', -300);
tiler.binder.css('top', -250);
tiler.binder.trigger('dragstop');
-
+
equal(tiler.binder.css('left'), '-200px');
equal(tiler.binder.css('top'), '-250px');
-
+
tiler.element.remove();
});
test('correct position changing #7', function() {
var tiler = createTiler({capture: 2});
-
+
tiler.binder.css('left', -230).css('top', -230).trigger('dragstop');
tiler.binder.css('left', -270).css('top', -270).trigger('dragstop');
tiler.binder.css('left', -300).css('top', -300).trigger('dragstop');
-
+
equal(tiler.binder.css('left'), '-200px');
equal(tiler.binder.css('top'), '-200px');
-
+
tiler.element.remove();
});
test('correct position changing #8', function() {
var tiler = createTiler({capture: 2});
-
+
tiler.binder.css('left', -320).css('top', -320).trigger('dragstop');
-
+
equal(tiler.binder.css('left'), '-220px');
equal(tiler.binder.css('top'), '-220px');
-
+
tiler.binder.css('left', -300).css('top', -300).trigger('dragstop');
-
+
equal(tiler.binder.css('left'), '-200px');
equal(tiler.binder.css('top'), '-200px');
-
+
tiler.element.remove();
});
@@ -333,18 +333,18 @@ test('correct position changing #9', function() {
// dragging from top to bottom and from left to right
test('tiles are removed #1', function() {
var tiler = createTiler();
-
+
tiler.binder.css('left', 0);
tiler.binder.css('top', 0);
tiler.binder.trigger('dragstop');
-
+
equal(tiler.binder.find('.tile').length, 4);
- equal(tiler.binder.find('.tile._2').length, 0);
+ equal(tiler.binder.find('.tile._2').length, 0);
equal(tiler.binder.find('.tile._5').length, 0);
equal(tiler.binder.find('.tile._8').length, 0);
equal(tiler.binder.find('.tile._6').length, 0);
equal(tiler.binder.find('.tile._7').length, 0);
-
+
tiler.element.remove();
});
@@ -355,26 +355,26 @@ test('tiles are removed #2', function() {
holder: null,
sync: function(options, callback) {
if (synced) { return };
-
+
callback([
[-1, -1, $('')],
[ 0, 0, $('')],
[ 1, 1, $('')]
]);
-
+
synced = true;
}
});
-
+
tiler.binder.css('left', 0);
tiler.binder.css('top', 0);
tiler.binder.trigger('dragstop');
-
+
equal(tiler.binder.find('.tile').length, 2);
- equal(tiler.binder.find('.tile._2').length, 0);
+ equal(tiler.binder.find('.tile._2').length, 0);
equal(tiler.binder.find('.tile._0').length, 1);
equal(tiler.binder.find('.tile._1').length, 1);
-
+
tiler.element.remove();
});
@@ -385,44 +385,44 @@ test('tiles are removed #2', function() {
holder: null,
sync: function(options, callback) {
if (synced) { return };
-
+
callback([
[-1, 0, $('')],
[ 0, 0, $('')],
[ 1, 0, $('')]
]);
-
+
synced = true;
}
});
-
+
tiler.binder.css('left', 0);
tiler.binder.css('top', 0);
tiler.binder.trigger('dragstop');
-
+
equal(tiler.binder.find('.tile').length, 2);
- equal(tiler.binder.find('.tile._2').length, 0);
+ equal(tiler.binder.find('.tile._2').length, 0);
equal(tiler.binder.find('.tile._0').length, 1);
equal(tiler.binder.find('.tile._1').length, 1);
-
+
tiler.element.remove();
});
// dragging from bottom to top and from right to left
test('tiles are removed #3', function() {
var tiler = createTiler();
-
+
tiler.binder.css('left', -200);
tiler.binder.css('top', -200);
tiler.binder.trigger('dragstop');
-
+
equal(tiler.binder.find('.tile').length, 4);
equal(tiler.binder.find('.tile._0').length, 0);
- equal(tiler.binder.find('.tile._1').length, 0);
+ equal(tiler.binder.find('.tile._1').length, 0);
equal(tiler.binder.find('.tile._2').length, 0);
equal(tiler.binder.find('.tile._3').length, 0);
equal(tiler.binder.find('.tile._6').length, 0);
-
+
tiler.element.remove();
});
@@ -433,26 +433,26 @@ test('tiles are removed #4', function() {
holder: null,
sync: function(options, callback) {
if (synced) { return };
-
+
callback([
[-1, -1, $('')],
[ 0, 0, $('')],
[ 1, 1, $('')]
]);
-
+
synced = true;
}
});
-
+
tiler.binder.css('left', -200);
tiler.binder.css('top', -200);
tiler.binder.trigger('dragstop');
-
+
equal(tiler.binder.find('.tile').length, 2);
equal(tiler.binder.find('.tile._0').length, 0);
- equal(tiler.binder.find('.tile._1').length, 1);
+ equal(tiler.binder.find('.tile._1').length, 1);
equal(tiler.binder.find('.tile._2').length, 1);
-
+
tiler.element.remove();
});
@@ -463,88 +463,88 @@ test('tiles are removed #5', function() {
holder: null,
sync: function(options, callback) {
if (synced) { return };
-
+
callback([
[-1, 0, $('')],
[ 0, 0, $('')],
[ 1, 0, $('')]
]);
-
+
synced = true;
}
});
-
+
tiler.binder.css('left', -200);
tiler.binder.css('top', -200);
tiler.binder.trigger('dragstop');
-
+
equal(tiler.binder.find('.tile').length, 2);
equal(tiler.binder.find('.tile._0').length, 0);
- equal(tiler.binder.find('.tile._1').length, 1);
+ equal(tiler.binder.find('.tile._1').length, 1);
equal(tiler.binder.find('.tile._2').length, 1);
-
+
tiler.element.remove();
});
test('tiles are moved (top and left)', function() {
var tiler = createTiler();
-
+
tiler.binder.css('left', 0);
tiler.binder.css('top', 0);
tiler.binder.trigger('dragstop');
-
+
deepEqual(tiler.binder.find('.tile._0').position(), {left: 100, top: 100});
deepEqual(tiler.binder.find('.tile._1').position(), {left: 200, top: 100});
deepEqual(tiler.binder.find('.tile._3').position(), {left: 100, top: 200});
deepEqual(tiler.binder.find('.tile._4').position(), {left: 200, top: 200});
-
+
tiler.element.remove();
});
test('tiles are moved (bottom and right)', function() {
var tiler = createTiler();
-
+
tiler.binder.css('left', -200);
tiler.binder.css('top', -200);
tiler.binder.trigger('dragstop');
-
+
deepEqual(tiler.binder.find('.tile._4').position(), {left: 0, top: 0});
deepEqual(tiler.binder.find('.tile._5').position(), {left: 100, top: 0});
deepEqual(tiler.binder.find('.tile._7').position(), {left: 0, top: 100});
deepEqual(tiler.binder.find('.tile._8').position(), {left: 100, top: 100});
-
+
tiler.element.remove();
});
test('holders are inserted on empty space (top and left)', function() {
var tiler = createTiler();
-
+
tiler.binder.css('left', 0);
tiler.binder.css('top', 0);
tiler.binder.trigger('dragstop');
-
+
deepEqual(tiler.binder.find('.holder._9').position(), {left: 0, top: 0});
deepEqual(tiler.binder.find('.holder._10').position(), {left: 100, top: 0});
deepEqual(tiler.binder.find('.holder._11').position(), {left: 200, top: 0});
deepEqual(tiler.binder.find('.holder._12').position(), {left: 0, top: 100});
deepEqual(tiler.binder.find('.holder._13').position(), {left: 0, top: 200});
-
+
tiler.element.remove();
});
test('holders are inserted on empty space (bottom and right)', function() {
var tiler = createTiler();
-
+
tiler.binder.css('left', -200);
tiler.binder.css('top', -200);
tiler.binder.trigger('dragstop');
-
+
deepEqual(tiler.binder.find('.holder._9').position(), {left: 200, top: 0});
deepEqual(tiler.binder.find('.holder._10').position(), {left: 200, top: 100});
deepEqual(tiler.binder.find('.holder._11').position(), {left: 0, top: 200});
deepEqual(tiler.binder.find('.holder._12').position(), {left: 100, top: 200});
deepEqual(tiler.binder.find('.holder._13').position(), {left: 200, top: 200});
-
+
tiler.element.remove();
});
@@ -562,11 +562,11 @@ test('coordinates of removed tiles are passed (top and left)', function() {
}
}
});
-
+
tiler.binder.css('left', -200);
tiler.binder.css('top', -200);
tiler.binder.trigger('dragstop');
-
+
tiler.element.remove();
});
@@ -582,11 +582,11 @@ test('coordinates of removed tiles are passed (bottom and right)', function() {
}
}
});
-
+
tiler.binder.css('left', 0);
tiler.binder.css('top', 0);
tiler.binder.trigger('dragstop');
-
+
tiler.element.remove();
});
@@ -601,14 +601,14 @@ test('binder is resized after viewport is resized', function() {
}
}
});
-
+
tiler.element.height(200);
tiler.element.width(200);
tiler.refresh();
-
+
equal(tiler.binder.height(), 400);
equal(tiler.binder.width(), 400);
-
+
tiler.element.remove();
});
@@ -621,11 +621,11 @@ test('holders are inserted after viewport size is increased', function() {
}
}
});
-
+
tiler.element.height(200);
tiler.element.width(200);
tiler.refresh();
-
+
deepEqual(tiler.binder.find('.holder._9').position(), {left: 300, top: 0});
deepEqual(tiler.binder.find('.holder._10').position(), {left: 300, top: 100});
deepEqual(tiler.binder.find('.holder._11').position(), {left: 300, top: 200});
@@ -633,7 +633,7 @@ test('holders are inserted after viewport size is increased', function() {
deepEqual(tiler.binder.find('.holder._13').position(), {left: 100, top: 300});
deepEqual(tiler.binder.find('.holder._14').position(), {left: 200, top: 300});
deepEqual(tiler.binder.find('.holder._15').position(), {left: 300, top: 300});
-
+
tiler.element.remove();
});
@@ -647,7 +647,7 @@ test('tiles are synced and inserted after viewport size is increased', function(
[ 1, 2, $('14
')],
[ 2, 2, $('15
')]
];
-
+
var calls = 0;
var tiler = createTiler({
capture: 1,
@@ -660,11 +660,11 @@ test('tiles are synced and inserted after viewport size is increased', function(
}
}
});
-
+
tiler.element.height(200);
- tiler.element.width(200);
+ tiler.element.width(200);
tiler.refresh();
-
+
deepEqual(tiler.binder.find('.tile._9').position(), {left: 300, top: 0});
deepEqual(tiler.binder.find('.tile._10').position(), {left: 300, top: 100});
deepEqual(tiler.binder.find('.tile._11').position(), {left: 300, top: 200});
@@ -672,7 +672,7 @@ test('tiles are synced and inserted after viewport size is increased', function(
deepEqual(tiler.binder.find('.tile._13').position(), {left: 100, top: 300});
deepEqual(tiler.binder.find('.tile._14').position(), {left: 200, top: 300});
deepEqual(tiler.binder.find('.tile._15').position(), {left: 300, top: 300});
-
+
tiler.element.remove();
});
@@ -694,7 +694,7 @@ test('tiles are removed after viewport size is decreased', function() {
[ 0, 2, $('14
')],
[ 1, 2, $('15
')],
[ 2, 2, $('16
')]];
-
+
var calls = 0;
var tiler = createTiler({
height: 200,
@@ -706,11 +706,11 @@ test('tiles are removed after viewport size is decreased', function() {
}
}
});
-
+
tiler.element.height(100);
tiler.element.width(100);
tiler.refresh();
-
+
ok(!tiler.element.find('.tile._3').length);
ok(!tiler.element.find('.tile._7').length);
ok(!tiler.element.find('.tile._11').length);
@@ -718,13 +718,13 @@ test('tiles are removed after viewport size is decreased', function() {
ok(!tiler.element.find('.tile._13').length);
ok(!tiler.element.find('.tile._14').length);
ok(!tiler.element.find('.tile._15').length);
-
+
tiler.element.remove();
});
test('"sync" method is called with correct "tosync" data after viewport size is increased', 1, function() {
var expected = [[2, -1], [2, 0], [2, 1], [-1, 2], [0, 2], [1, 2], [2, 2]];
-
+
var calls = 0;
var tiler = createTiler({
sync: function(options) {
@@ -733,10 +733,10 @@ test('"sync" method is called with correct "tosync" data after viewport size is
}
}
});
-
+
tiler.element.height(200);
tiler.element.width(200);
-
+
tiler.refresh();
tiler.element.remove();
});
@@ -745,11 +745,11 @@ module('"changePosition" method');
test('resets binder position', function() {
var tiler = createTiler();
-
+
tiler.binder.css('left', -150);
tiler.binder.css('top', -150);
tiler.changePosition(0, 0);
-
+
deepEqual(tiler.binder.position(), {top: -100, left: -100});
tiler.element.remove();
@@ -767,7 +767,7 @@ test('syncs missing tiles', 1, function() {
}
}
});
-
+
tiler.changePosition(1, 1);
tiler.element.remove();
});
@@ -784,7 +784,7 @@ test('removes unnecessary tiles', 1, function() {
}
}
});
-
+
tiler.changePosition(1, 1);
tiler.element.remove();
});
@@ -804,7 +804,7 @@ test('syncs all tiles #1', 1, function() {
}
}
});
-
+
tiler.reload();
tiler.element.remove();
});
@@ -823,7 +823,7 @@ test('syncs all tiles #2', 1, function() {
}
}
});
-
+
tiler.reload();
tiler.element.remove();
});
@@ -864,11 +864,11 @@ test('replaces old tiles with new if "silent" option is passed', function() {
}
}
});
-
+
tiler.reload();
-
+
equal(tiler.element.find('.tile').length, 0);
equal(tiler.element.find('.newTile').length, 9);
-
+
tiler.element.remove();
-});
\ No newline at end of file
+});
diff --git a/tiler.js b/tiler.js
index 79fc91c..5e1c714 100644
--- a/tiler.js
+++ b/tiler.js
@@ -92,8 +92,8 @@ function Tiler(element, options) {
* Default options
*/
Tiler.defaults = {
- sync: $.noop
-, holder: $.noop
+ sync: null
+, holder: null
, tileSize: null
, capture: 2
, x: 0, y: 0
@@ -108,8 +108,8 @@ var Proto = Tiler.prototype
*/
Proto.setBinderPosition = function() {
this.initialBinderPosition = {
- left: -(this.options.tileSize * this.options.capture),
- top: -(this.options.tileSize * this.options.capture)
+ left: -(this.options.tileSize * this.options.capture)
+ , top: -(this.options.tileSize * this.options.capture)
}
this.binder.css({