add insert method

11 years ago · 9ee8747fc9
3 changed files with 112 additions and 6 deletions
--- a/examples/insert.html
+++ b/examples/insert.html
@ -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>
--- a/js/isotope.js
+++ b/js/isotope.js
@ -54,6 +54,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode

  Isotope.prototype._create = function() {
    this.itemGUID = 0;
+    // functions that sort items
+    this._sorters = {};
    // call super
    Outlayer.prototype._create.call( this );

@ -65,12 +67,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
    }
    // start filteredItems with all items
    this.filteredItems = this.items;
-
-    // functions that sort items
-    this._sorters = {};
    // keep of track of sortBys
    this.sortHistory = [ 'original-order' ];
-    this.updateSortData();
  };

  Isotope.prototype.reloadItems = function() {
@ -87,9 +85,22 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
      var item = items[i];
      item.id = this.itemGUID++;
    }
+    this.updateSortData( 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 -------------------------- //

  Isotope.prototype._initLayoutMode = function( name ) {
@ -399,6 +410,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
    this._mode().resize();
  };

+  // -----  ----- //
+
  return Isotope;
 }

--- a/notes.md
+++ b/notes.md
@ -1,7 +1,5 @@
 ## to do

-insert method
-
 provide nice error if getText doesn't provide an element

 move munge sorter to separate file?