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({