mirror of https://github.com/metafizzy/isotope
14 changed files with 244 additions and 280 deletions
@ -1,78 +0,0 @@ |
|||||||
( function() { |
|
||||||
|
|
||||||
'use strict'; |
|
||||||
|
|
||||||
var $ = window.jQuery; |
|
||||||
|
|
||||||
// return a string of item ids
|
|
||||||
function getFilteredItemIDs( iso ) { |
|
||||||
var texts = []; |
|
||||||
for ( var i=0, len = iso.filteredItems.length; i < len; i++ ) { |
|
||||||
var item = iso.filteredItems[i]; |
|
||||||
var id = item.element.getAttribute('data-item-id'); |
|
||||||
texts.push( id ); |
|
||||||
} |
|
||||||
return texts.join(','); |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
<div data-item-id="1" class="item orange">5</div> |
|
||||||
<div data-item-id="2" class="item">3</div> |
|
||||||
<div data-item-id="3" class="item orange tall">2</div> |
|
||||||
<div data-item-id="4" class="item tall">9</div> |
|
||||||
<div data-item-id="5" class="item">7</div> |
|
||||||
<div data-item-id="6" class="item orange">1</div> |
|
||||||
<div data-item-id="7" class="item orange tall">8</div> |
|
||||||
*/ |
|
||||||
|
|
||||||
test( 'filtering', function() { |
|
||||||
|
|
||||||
var iso = new Isotope( '#filtering', { |
|
||||||
isJQueryFiltering: false, |
|
||||||
transitionDuration: 0 |
|
||||||
}); |
|
||||||
|
|
||||||
var ids = getFilteredItemIDs( iso ); |
|
||||||
equal( ids, '1,2,3,4,5,6,7', 'all items there by default' ); |
|
||||||
|
|
||||||
function checkFilter( filter, expectedIDs, message ) { |
|
||||||
iso.arrange({ filter: filter }); |
|
||||||
ids = getFilteredItemIDs( iso ); |
|
||||||
equal( ids, expectedIDs, message || filter ); |
|
||||||
} |
|
||||||
|
|
||||||
checkFilter( '.orange', '1,3,6,7' ); |
|
||||||
checkFilter( '.tall', '3,4,7' ); |
|
||||||
checkFilter( '.tall.orange', '3,7' ); |
|
||||||
|
|
||||||
iso.arrange({ |
|
||||||
filter: function( elem ) { |
|
||||||
var num = parseInt( elem.textContent, 10 ); |
|
||||||
return num > 5; |
|
||||||
} |
|
||||||
}); |
|
||||||
ids = getFilteredItemIDs( iso ); |
|
||||||
equal( ids, '4,5,7', 'function, text is greater than 5' ); |
|
||||||
|
|
||||||
// filter with jQuery
|
|
||||||
iso.options.isJQueryFiltering = true; |
|
||||||
|
|
||||||
checkFilter( '.orange', '1,3,6,7', '.orange with jQuery' ); |
|
||||||
checkFilter( '.tall', '3,4,7', '.orange with jQuery' ); |
|
||||||
checkFilter( '.tall.orange', '3,7', '.tall.orange with jQuery' ); |
|
||||||
|
|
||||||
checkFilter( ':not(.orange)', '2,4,5' ); |
|
||||||
checkFilter( '.orange:not(.tall)', '1,6' ); |
|
||||||
|
|
||||||
iso.arrange({ |
|
||||||
filter: function() { |
|
||||||
var num = parseInt( $(this).text(), 10 ); |
|
||||||
return num > 5; |
|
||||||
} |
|
||||||
}); |
|
||||||
ids = getFilteredItemIDs( iso ); |
|
||||||
equal( ids, '4,5,7', 'function, text is greater than 5, with jQuery' ); |
|
||||||
|
|
||||||
}); |
|
||||||
|
|
||||||
})(); |
|
@ -1,39 +0,0 @@ |
|||||||
( function() { |
|
||||||
|
|
||||||
'use strict'; |
|
||||||
|
|
||||||
test( 'Masonry.measureColumns', function() { |
|
||||||
|
|
||||||
var iso = new Isotope( '#masonry-measure-columns', { |
|
||||||
itemSelector: '.item', |
|
||||||
layoutMode: 'masonry', |
|
||||||
transitionDuration: 0 |
|
||||||
}); |
|
||||||
|
|
||||||
var msnryMode = iso.modes.masonry; |
|
||||||
equal( msnryMode.columnWidth, 60, 'after layout, measured first element' ); |
|
||||||
|
|
||||||
iso.modes.masonry._getMeasurement( 'columnWidth', 'outerWidth' ); |
|
||||||
equal( msnryMode.columnWidth, 0, '_getMeasurement, no option' ); |
|
||||||
|
|
||||||
iso.modes.masonry.measureColumns(); |
|
||||||
equal( msnryMode.columnWidth, 60, 'measureColumns, no option' ); |
|
||||||
|
|
||||||
iso.arrange({ filter: '.c' }); |
|
||||||
|
|
||||||
iso.modes.masonry.measureColumns(); |
|
||||||
equal( msnryMode.columnWidth, 60, 'measureColumns after filter first item, no option' ); |
|
||||||
|
|
||||||
iso.arrange({ |
|
||||||
masonry: { columnWidth: 80 } |
|
||||||
}); |
|
||||||
equal( msnryMode.columnWidth, 80, '.arrange() masonry.columnWidth option set number' ); |
|
||||||
|
|
||||||
iso.arrange({ |
|
||||||
masonry: { columnWidth: '.grid-sizer' } |
|
||||||
}); |
|
||||||
equal( msnryMode.columnWidth, 70, '.arrange() masonry.columnWidth option set selector string' ); |
|
||||||
|
|
||||||
}); |
|
||||||
|
|
||||||
})(); |
|
@ -1,101 +0,0 @@ |
|||||||
test( 'sort data', function() { |
|
||||||
|
|
||||||
'use strict'; |
|
||||||
|
|
||||||
var iso = new Isotope( '#get-sort-data', { |
|
||||||
layoutMode: 'fitRows', |
|
||||||
getSortData: { |
|
||||||
ninjaTurtle: '[data-ninja-turtle]', |
|
||||||
fruit: 'span.fruit', |
|
||||||
b: 'b parseFloat', |
|
||||||
i: 'i parseInt', |
|
||||||
bbroke: 'b foobar' |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
var item0 = iso.items[0]; |
|
||||||
var item1 = iso.items[1]; |
|
||||||
|
|
||||||
equal( item0.sortData.ninjaTurtle, 'leonardo', '[data-attr] shorthand' ); |
|
||||||
equal( item0.sortData.fruit, 'watermelon', 'query selector shorthand' ); |
|
||||||
equal( item0.sortData.b, 3.14, 'parseFloat parser' ); |
|
||||||
equal( item0.sortData.i, 42, 'parseInt parser' ); |
|
||||||
equal( item0.sortData.bbroke, '3.14', 'default nonparser' ); |
|
||||||
|
|
||||||
// ----- ----- //
|
|
||||||
|
|
||||||
var docElem = document.documentElement; |
|
||||||
var textSetter = docElem.textContent !== undefined ? 'textContent' : 'innerText'; |
|
||||||
|
|
||||||
function setText( elem, value ) { |
|
||||||
elem[ textSetter ] = value; |
|
||||||
} |
|
||||||
|
|
||||||
var elem0 = iso.items[0].element; |
|
||||||
var elem1 = iso.items[1].element; |
|
||||||
|
|
||||||
elem0.setAttribute( 'data-ninja-turtle', 'donatello' ); |
|
||||||
setText( elem0.querySelector('span.fruit'), 'mango' ); |
|
||||||
setText( elem0.querySelector('b'), '7.24' ); |
|
||||||
setText( elem0.querySelector('i'), 'foo' ); |
|
||||||
|
|
||||||
iso.updateSortData( elem0 ); |
|
||||||
|
|
||||||
var message = ', after updateSortData on single item' |
|
||||||
equal( item0.sortData.ninjaTurtle, 'donatello', '[data-attr] shorthand' + message ); |
|
||||||
equal( item0.sortData.fruit, 'mango', 'query selector shorthand' + message ); |
|
||||||
equal( item0.sortData.b, 7.24, 'parseFloat parser' + message ); |
|
||||||
ok( isNaN( item0.sortData.i ), 'parseInt parser' + message ); |
|
||||||
equal( item0.sortData.bbroke, '7.24', 'default nonparser' + message ); |
|
||||||
|
|
||||||
// ----- update all items ----- //
|
|
||||||
|
|
||||||
elem0.setAttribute( 'data-ninja-turtle', 'leonardo' ); |
|
||||||
setText( elem0.querySelector('span.fruit'), 'passion fruit' ); |
|
||||||
|
|
||||||
elem1.setAttribute( 'data-ninja-turtle', 'michelangelo' ); |
|
||||||
setText( elem1.querySelector('span.fruit'), 'starfruit' ); |
|
||||||
|
|
||||||
// update all
|
|
||||||
iso.updateSortData(); |
|
||||||
|
|
||||||
message = ', after updateSortData on all items' |
|
||||||
equal( item0.sortData.ninjaTurtle, 'leonardo', '[data-attr] shorthand' + message ); |
|
||||||
equal( item0.sortData.fruit, 'passion fruit', 'query selector shorthand' + message ); |
|
||||||
equal( item1.sortData.ninjaTurtle, 'michelangelo', '[data-attr] shorthand' + message ); |
|
||||||
equal( item1.sortData.fruit, 'starfruit', 'query selector shorthand' + message ); |
|
||||||
|
|
||||||
// ----- no items ----- //
|
|
||||||
|
|
||||||
iso.options.itemSelector = 'none'; |
|
||||||
iso.reloadItems(); |
|
||||||
|
|
||||||
iso.updateSortData(); |
|
||||||
ok( true, 'updateSortData on empty container is ok' ); |
|
||||||
|
|
||||||
iso.updateSortData( document.createElement('div') ); |
|
||||||
ok( true, 'updateSortData with non-item is ok, with no child items' ); |
|
||||||
|
|
||||||
iso.updateSortData( false ); |
|
||||||
ok( true, 'updateSortData with falsy is ok, with no child items' ); |
|
||||||
|
|
||||||
iso.updateSortData( [] ); |
|
||||||
ok( true, 'updateSortData with empty array is ok, with no child items' ); |
|
||||||
|
|
||||||
iso.updateSortData( jQuery() ); |
|
||||||
ok( true, 'updateSortData with empty jQuery object is ok, with no child items' ); |
|
||||||
|
|
||||||
// ----- bad getSortData ----- //
|
|
||||||
|
|
||||||
delete iso.options.itemSelector; |
|
||||||
iso.options.getSortData.badQuery = 'bad-query'; |
|
||||||
iso.options.getSortData.badAttr = '[bad-attr]'; |
|
||||||
iso._getSorters(); |
|
||||||
iso.reloadItems(); |
|
||||||
|
|
||||||
item0 = iso.items[0]; |
|
||||||
|
|
||||||
equal( item0.sortData.badQuery, null, 'bad query returns null' ); |
|
||||||
equal( item0.sortData.badAttr, null, 'bad attr returns null' ); |
|
||||||
|
|
||||||
}); |
|
@ -0,0 +1,71 @@ |
|||||||
|
/*globals jQuery */ |
||||||
|
|
||||||
|
QUnit.test( 'filtering', function( assert ) { |
||||||
|
'use strict'; |
||||||
|
|
||||||
|
var iso = new Isotope( '#filtering', { |
||||||
|
isJQueryFiltering: false, |
||||||
|
transitionDuration: 0 |
||||||
|
}); |
||||||
|
|
||||||
|
var ids = getFilteredItemIDs( iso ); |
||||||
|
assert.equal( ids, '1,2,3,4,5,6,7', 'all items there by default' ); |
||||||
|
|
||||||
|
function checkFilter( filter, expectedIDs, message ) { |
||||||
|
iso.arrange({ filter: filter }); |
||||||
|
ids = getFilteredItemIDs( iso ); |
||||||
|
assert.equal( ids, expectedIDs, message || filter ); |
||||||
|
} |
||||||
|
|
||||||
|
checkFilter( '.orange', '1,3,6,7' ); |
||||||
|
checkFilter( '.tall', '3,4,7' ); |
||||||
|
checkFilter( '.tall.orange', '3,7' ); |
||||||
|
|
||||||
|
iso.arrange({ |
||||||
|
filter: function( elem ) { |
||||||
|
var num = parseInt( elem.textContent, 10 ); |
||||||
|
return num > 5; |
||||||
|
} |
||||||
|
}); |
||||||
|
ids = getFilteredItemIDs( iso ); |
||||||
|
assert.equal( ids, '4,5,7', 'function, text is greater than 5' ); |
||||||
|
|
||||||
|
// filter with jQuery
|
||||||
|
iso.options.isJQueryFiltering = true; |
||||||
|
|
||||||
|
checkFilter( '.orange', '1,3,6,7', '.orange with jQuery' ); |
||||||
|
checkFilter( '.tall', '3,4,7', '.orange with jQuery' ); |
||||||
|
checkFilter( '.tall.orange', '3,7', '.tall.orange with jQuery' ); |
||||||
|
|
||||||
|
checkFilter( ':not(.orange)', '2,4,5' ); |
||||||
|
checkFilter( '.orange:not(.tall)', '1,6' ); |
||||||
|
|
||||||
|
iso.arrange({ |
||||||
|
filter: function() { |
||||||
|
var num = parseInt( jQuery(this).text(), 10 ); |
||||||
|
return num > 5; |
||||||
|
} |
||||||
|
}); |
||||||
|
ids = getFilteredItemIDs( iso ); |
||||||
|
assert.equal( ids, '4,5,7', 'function, text is greater than 5, with jQuery' ); |
||||||
|
|
||||||
|
// ----- helper ----- //
|
||||||
|
|
||||||
|
/* |
||||||
|
<div data-item-id="1" class="item orange">5</div> |
||||||
|
<div data-item-id="2" class="item">3</div> |
||||||
|
<div data-item-id="3" class="item orange tall">2</div> |
||||||
|
<div data-item-id="4" class="item tall">9</div> |
||||||
|
<div data-item-id="5" class="item">7</div> |
||||||
|
<div data-item-id="6" class="item orange">1</div> |
||||||
|
<div data-item-id="7" class="item orange tall">8</div> |
||||||
|
*/ |
||||||
|
|
||||||
|
// return a string of item ids
|
||||||
|
function getFilteredItemIDs( iso ) { |
||||||
|
return iso.filteredItems.map( function( item ) { |
||||||
|
return item.element.getAttribute('data-item-id'); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
}); |
@ -0,0 +1,34 @@ |
|||||||
|
QUnit.test( 'Masonry.measureColumns', function( assert ) { |
||||||
|
'use strict'; |
||||||
|
|
||||||
|
var iso = new Isotope( '#masonry-measure-columns', { |
||||||
|
itemSelector: '.item', |
||||||
|
layoutMode: 'masonry', |
||||||
|
transitionDuration: 0 |
||||||
|
}); |
||||||
|
|
||||||
|
var msnryMode = iso.modes.masonry; |
||||||
|
assert.equal( msnryMode.columnWidth, 60, 'after layout, measured first element' ); |
||||||
|
|
||||||
|
iso.modes.masonry._getMeasurement( 'columnWidth', 'outerWidth' ); |
||||||
|
assert.equal( msnryMode.columnWidth, 0, '_getMeasurement, no option' ); |
||||||
|
|
||||||
|
iso.modes.masonry.measureColumns(); |
||||||
|
assert.equal( msnryMode.columnWidth, 60, 'measureColumns, no option' ); |
||||||
|
|
||||||
|
iso.arrange({ filter: '.c' }); |
||||||
|
|
||||||
|
iso.modes.masonry.measureColumns(); |
||||||
|
assert.equal( msnryMode.columnWidth, 60, 'measureColumns after filter first item, no option' ); |
||||||
|
|
||||||
|
iso.arrange({ |
||||||
|
masonry: { columnWidth: 80 } |
||||||
|
}); |
||||||
|
assert.equal( msnryMode.columnWidth, 80, '.arrange() masonry.columnWidth option set number' ); |
||||||
|
|
||||||
|
iso.arrange({ |
||||||
|
masonry: { columnWidth: '.grid-sizer' } |
||||||
|
}); |
||||||
|
assert.equal( msnryMode.columnWidth, 70, '.arrange() masonry.columnWidth option set selector string' ); |
||||||
|
|
||||||
|
}); |
@ -0,0 +1,103 @@ |
|||||||
|
/*globals jQuery */ |
||||||
|
|
||||||
|
QUnit.test( 'sort data', function( assert ) { |
||||||
|
|
||||||
|
'use strict'; |
||||||
|
|
||||||
|
var iso = new Isotope( '#get-sort-data', { |
||||||
|
layoutMode: 'fitRows', |
||||||
|
getSortData: { |
||||||
|
ninjaTurtle: '[data-ninja-turtle]', |
||||||
|
fruit: 'span.fruit', |
||||||
|
b: 'b parseFloat', |
||||||
|
i: 'i parseInt', |
||||||
|
bbroke: 'b foobar' |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
var item0 = iso.items[0]; |
||||||
|
var item1 = iso.items[1]; |
||||||
|
|
||||||
|
assert.equal( item0.sortData.ninjaTurtle, 'leonardo', '[data-attr] shorthand' ); |
||||||
|
assert.equal( item0.sortData.fruit, 'watermelon', 'query selector shorthand' ); |
||||||
|
assert.equal( item0.sortData.b, 3.14, 'parseFloat parser' ); |
||||||
|
assert.equal( item0.sortData.i, 42, 'parseInt parser' ); |
||||||
|
assert.equal( item0.sortData.bbroke, '3.14', 'default nonparser' ); |
||||||
|
|
||||||
|
// ----- ----- //
|
||||||
|
|
||||||
|
var docElem = document.documentElement; |
||||||
|
var textSetter = docElem.textContent !== undefined ? 'textContent' : 'innerText'; |
||||||
|
|
||||||
|
function setText( elem, value ) { |
||||||
|
elem[ textSetter ] = value; |
||||||
|
} |
||||||
|
|
||||||
|
var elem0 = iso.items[0].element; |
||||||
|
var elem1 = iso.items[1].element; |
||||||
|
|
||||||
|
elem0.setAttribute( 'data-ninja-turtle', 'donatello' ); |
||||||
|
setText( elem0.querySelector('span.fruit'), 'mango' ); |
||||||
|
setText( elem0.querySelector('b'), '7.24' ); |
||||||
|
setText( elem0.querySelector('i'), 'foo' ); |
||||||
|
|
||||||
|
iso.updateSortData( elem0 ); |
||||||
|
|
||||||
|
var message = ', after updateSortData on single item'; |
||||||
|
assert.equal( item0.sortData.ninjaTurtle, 'donatello', '[data-attr] shorthand' + message ); |
||||||
|
assert.equal( item0.sortData.fruit, 'mango', 'query selector shorthand' + message ); |
||||||
|
assert.equal( item0.sortData.b, 7.24, 'parseFloat parser' + message ); |
||||||
|
assert.ok( isNaN( item0.sortData.i ), 'parseInt parser' + message ); |
||||||
|
assert.equal( item0.sortData.bbroke, '7.24', 'default nonparser' + message ); |
||||||
|
|
||||||
|
// ----- update all items ----- //
|
||||||
|
|
||||||
|
elem0.setAttribute( 'data-ninja-turtle', 'leonardo' ); |
||||||
|
setText( elem0.querySelector('span.fruit'), 'passion fruit' ); |
||||||
|
|
||||||
|
elem1.setAttribute( 'data-ninja-turtle', 'michelangelo' ); |
||||||
|
setText( elem1.querySelector('span.fruit'), 'starfruit' ); |
||||||
|
|
||||||
|
// update all
|
||||||
|
iso.updateSortData(); |
||||||
|
|
||||||
|
message = ', after updateSortData on all items'; |
||||||
|
assert.equal( item0.sortData.ninjaTurtle, 'leonardo', '[data-attr] shorthand' + message ); |
||||||
|
assert.equal( item0.sortData.fruit, 'passion fruit', 'query selector shorthand' + message ); |
||||||
|
assert.equal( item1.sortData.ninjaTurtle, 'michelangelo', '[data-attr] shorthand' + message ); |
||||||
|
assert.equal( item1.sortData.fruit, 'starfruit', 'query selector shorthand' + message ); |
||||||
|
|
||||||
|
// ----- no items ----- //
|
||||||
|
|
||||||
|
iso.options.itemSelector = 'none'; |
||||||
|
iso.reloadItems(); |
||||||
|
|
||||||
|
iso.updateSortData(); |
||||||
|
assert.ok( true, 'updateSortData on empty container is ok' ); |
||||||
|
|
||||||
|
iso.updateSortData( document.createElement('div') ); |
||||||
|
assert.ok( true, 'updateSortData with non-item is ok, with no child items' ); |
||||||
|
|
||||||
|
iso.updateSortData( false ); |
||||||
|
assert.ok( true, 'updateSortData with falsy is ok, with no child items' ); |
||||||
|
|
||||||
|
iso.updateSortData( [] ); |
||||||
|
assert.ok( true, 'updateSortData with empty array is ok, with no child items' ); |
||||||
|
|
||||||
|
iso.updateSortData( jQuery() ); |
||||||
|
assert.ok( true, 'updateSortData with empty jQuery object is ok, with no child items' ); |
||||||
|
|
||||||
|
// ----- bad getSortData ----- //
|
||||||
|
|
||||||
|
delete iso.options.itemSelector; |
||||||
|
iso.options.getSortData.badQuery = 'bad-query'; |
||||||
|
iso.options.getSortData.badAttr = '[bad-attr]'; |
||||||
|
iso._getSorters(); |
||||||
|
iso.reloadItems(); |
||||||
|
|
||||||
|
item0 = iso.items[0]; |
||||||
|
|
||||||
|
assert.equal( item0.sortData.badQuery, null, 'bad query returns null' ); |
||||||
|
assert.equal( item0.sortData.badAttr, null, 'bad attr returns null' ); |
||||||
|
|
||||||
|
}); |
Loading…
Reference in new issue