playground
/
isotope
mirror of https://github.com/metafizzy/isotope
1
0
Fork 0
Code Issues Releases Activity
Browse Source

add insert method

pull/563/head
David DeSandro 11 years ago
parent
ead360f58a
commit
9ee8747fc9
3 changed files with 112 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 95
      examples/insert.html
  2. 21
      js/isotope.js
  3. 2
      notes.md

95
examples/insert.html
Unescape View File

@ -0,0 +1,95 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>insert</title>
<link rel="stylesheet" href="examples.css" />
</head>
<body>
<h1>insert</h1>
<p><button id="insert">Insert</button></p>
<div id="container">
<div class="item"><b>49</b></div>
<div class="item"><b>35</b></div>
<div class="item"><b>60</b></div>
<div class="item"><b>29</b></div>
<div class="item"><b>78</b></div>
<div class="item"><b>92</b></div>
<div class="item"><b>10</b></div>
<div class="item"><b>55</b></div>
</div>
<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
<script src="../bower_components/eventie/eventie.js"></script>
<script src="../bower_components/doc-ready/doc-ready.js"></script>
<script src="../bower_components/get-style-property/get-style-property.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
<script src="../bower_components/matches-selector/matches-selector.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../js/item.js"></script>
<script src="../js/layout-mode.js"></script>
<script src="../js/isotope.js"></script>
<script src="../js/layout-modes/fit-rows.js"></script>
<script>
docReady( function() {
var container = document.querySelector('#container');
var iso = new Isotope( container, {
layoutMode: 'fitRows',
getSortData: {
b: 'b parseInt'
},
sortBy: 'b',
// filter b greater than 40
filter: function( elem ) {
return parseInt( getText( elem.querySelector('b') ), 10 ) > 40
}
});
eventie.bind( document.querySelector('#insert'), 'click', function() {
// append 3 new items
var appendedItems = [];
appendedItems.push( appendItem() );
appendedItems.push( appendItem() );
appendedItems.push( appendItem() );
iso.insert( appendedItems );
});
function appendItem() {
var item = document.createElement('div');
item.className = 'item';
var num = Math.floor( Math.random() * 100 );
item.innerHTML = '<b>' + num + '</b>';
container.appendChild( item );
return item;
}
});
var docElem = document.documentElement;
var getText = docElem.textContent ?
function( elem ) {
return elem.textContent;
} :
function( elem ) {
return elem.innerText;
};
</script>
</body>
</html>

21
js/isotope.js
Unescape View File

@ -54,6 +54,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
Isotope.prototype._create = function() { Isotope.prototype._create = function() {
this.itemGUID = 0; this.itemGUID = 0;
// functions that sort items
this._sorters = {};
// call super // call super
Outlayer.prototype._create.call( this ); Outlayer.prototype._create.call( this );
@ -65,12 +67,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
} }
// start filteredItems with all items // start filteredItems with all items
this.filteredItems = this.items; this.filteredItems = this.items;
// functions that sort items
this._sorters = {};
// keep of track of sortBys // keep of track of sortBys
this.sortHistory = [ 'original-order' ]; this.sortHistory = [ 'original-order' ];
this.updateSortData();
}; };
Isotope.prototype.reloadItems = function() { Isotope.prototype.reloadItems = function() {
@ -87,9 +85,22 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
var item = items[i]; var item = items[i];
item.id = this.itemGUID++; item.id = this.itemGUID++;
} }
this.updateSortData( items );
return items; return items;
}; };
/**
* Filter, sort, and layout newly-appended item elements
* @param {Array or NodeList or Element} elems
*/
Isotope.prototype.insert = function( elems ) {
var items = this.addItems( elems );
if ( !items.length ) {
return;
}
this.arrange();
};
// -------------------------- layout -------------------------- // // -------------------------- layout -------------------------- //
Isotope.prototype._initLayoutMode = function( name ) { Isotope.prototype._initLayoutMode = function( name ) {
@ -399,6 +410,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
this._mode().resize(); this._mode().resize();
}; };
// ----- ----- //
return Isotope; return Isotope;
} }

2
notes.md
Unescape View File

@ -1,7 +1,5 @@
## to do ## to do
insert method
provide nice error if getText doesn't provide an element provide nice error if getText doesn't provide an element
move munge sorter to separate file? move munge sorter to separate file?

Write Preview
Loading…
Cancel
Save