docs : add Adding items docs and demo

14 years ago · 4a72fbdb32
5 changed files with 132 additions and 28 deletions
--- a/_includes/add-buttons.js
+++ b/_includes/add-buttons.js
@ -0,0 +1,28 @@
+      $('#insert a').click(function(){
+        var i = Math.ceil( Math.random()*3 + 1 ),
+            newEls = '';
+        // window.console && console.log( i )
+        while ( i-- ) {
+          newEls += fakeElement.create();
+        }
+        var $newEls = $( newEls )
+        // $demo.append( $newEls ).isotope( 'appendToLayout', $newEls );
+        $demo.isotope( 'insert', $newEls );
+        // $demo.append( $newEls ).isotope( 'addAtoms', $newEls ).isotope();
+        // $demo.isotope()
+        // console.log( next )
+
+        return false;
+      });
+
+      $('#append a').click(function(){
+        var i = Math.ceil( Math.random()*3 + 1 ),
+            newEls = '';
+        while ( i-- ) {
+          newEls += fakeElement.create();
+        }
+        var $newEls = $( newEls )
+        $demo.append( $newEls ).isotope( 'appended', $newEls );
+
+        return false;
+      });
--- a/_layouts/demo.html
+++ b/_layouts/demo.html
@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>{{ page.title }}</title>
+  
+  <link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" />
+
+</head>
+<body>
+
+  <h1>{{ page.title }}</h1>
+  
+  {{ content }}
+  
+</body>
+</html>
--- a/_layouts/elements.html
+++ b/_layouts/elements.html
@ -151,34 +151,7 @@

      {% include layout-change.js %}

-      $('#insert').find('a').click(function(){
-        var i = Math.ceil( Math.random()*3 + 1 ),
-            newEls = '';
-        // window.console && console.log( i )
-        while ( i-- ) {
-          newEls += fakeElement.create();
-        }
-        var $newEls = $( newEls )
-        // $demo.append( $newEls ).isotope( 'appendToLayout', $newEls );
-        $demo.isotope( 'insert', $newEls );
-        // $demo.append( $newEls ).isotope( 'addAtoms', $newEls ).isotope();
-        // $demo.isotope()
-        // console.log( next )
-
-        return false;
-      });
-
-      $('#append').find('a').click(function(){
-        var i = Math.ceil( Math.random()*3 + 1 ),
-            newEls = '';
-        while ( i-- ) {
-          newEls += fakeElement.create();
-        }
-        var $newEls = $( newEls )
-        $demo.append( $newEls ).isotope( 'appended', $newEls );
-
-        return false;
-      });
+      {% include add-buttons.js %}

      $('#shuffle a').click(function(){
        $demo.isotope('shuffle');
--- a/_posts/demos/2011-01-03-adding-items.html
+++ b/_posts/demos/2011-01-03-adding-items.html
@ -0,0 +1,50 @@
+---
+title: Adding items
+layout: demo
+category: demos
+---
+
+<section id="copy">
+  <p>Use the <code>reLayout</code> method to easily arrange item elements after a change.</p>
+</section>
+
+<section id="options">
+  <ul class="floated clearfix">
+    <li id="insert"><a href="#insert">Insert new elements</a></li>
+    <li id="append"><a href='#append'>Append new elements</a></li>
+  </ul>
+</section>
+
+<div id="demo" class="iso-container">
+  {% for element in site.elements_best_of limit:10 %}
+    {% include element-partial.html %}
+  {% endfor %}
+</div> <!-- #demo -->
+
+<script src="../js/jquery-1.4.4.min.js"></script>
+<script src="../src/mini-modernizr.js"></script>
+<script src="../src/jquery.opto-transform.js"></script>
+<script src="../src/jquery.smartresize.js"></script>
+<script src="../src/jquery.isotope.js"></script>
+<script src="../src/jquery.ui.widget.js"></script>
+<script src="../js/fake-element.js"></script>
+<script>
+  $(function(){
+
+    var $demo = $('#demo');
+    
+    $demo.isotope({
+      itemSelector : '.element',
+      getSortData : {
+        symbol : function( $elem ) {
+          return $elem.attr('data-symbol');
+        }
+      },
+      sortBy : 'symbol'
+    });
+    
+    {% include add-buttons.js %}
+    
+    
+  });
+</script>
--- a/_posts/docs/2010-12-10-adding-items.mdown
+++ b/_posts/docs/2010-12-10-adding-items.mdown
@ -0,0 +1,36 @@
+---
+
+title: Adding items
+category: docs
+layout: doc
+
+---
+
+If your application dynamically adds new content, Isotope provides several methods to add items.
+
+## addItems
+
+The `addItems` method adds new content to an Isotope container. This applies the proper styles to the items so they can be positioned and any sorting data is retrieved. But that's it. The new content will _not_ be filtered, sorted, or positioned properly, nor will it be appended to the container element.
+
+{% highlight javascript %}
+
+var $newItems = $('<div class="item" /><div class="item" /><div class="item" />');
+$('#container').append( $newItems ).isotope({ 'addItems', $newItems });
+
+{% endhighlight %}
+
+## insert
+
+More likely, you want to use the `insert` method, which does everything that `addItems` misses. `insert` will append the content to the container, filter the new content, sort all the content, then trigger a `reLayout` so all item elements are properly laid out.
+
+{% highlight javascript %}
+
+var $newItems = $('<div class="item" /><div class="item" /><div class="item" />');
+$('#container').isotope({ 'insert', $newItems });
+
+{% endhighlight %}
+
+## appended
+
+The `appended` method is a convienence method triggers `addItems` on new content, then lays out _only the new content_ at the end of the layout. This method is useful if you know you only want to add new content to the end, and not have it processed with filtering or sorting.  `appended` is the best method to use with Infinite Scroll.
+