1 ---

     2 title: elements complete test

     3 layout: default

     4 category: tests

     5 body_class: demos

     6 ---

     7 

     8 <section id="copy">

     9   <p>Isotope&rsquo;s capabilities are designed to be used together cohesively. You can do it all &mdash; filter, sort, change layout modes, add items &mdash; and Isotope will handle it with ease.</p>

    10 </section>

    11 

    12 <section id="options" class="clearfix">

    13 

    14   {% include filter-buttons.html %}

    15 

    16   {% include sort-buttons.html %}

    17 

    18   {% include layout-options.html %}

    19 

    20   <h3>Etc</h3>

    21 

    22   <ul id="etc" class="clearfix">

    23     <li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>

    24     <li id="insert"><a href="#insert">Insert new elements</a></li>

    25     <li id="append"><a href='#append'>Append new elements</a></li>

    26     <li id="shuffle"><a href='#shuffle'>Shuffle</a></li>

    27   </ul>

    28 

    29 </section> <!-- #options -->

    30 

    31 

    32 <div id="container" class="clickable clearfix">

    33   {% for elem_number in site.random_order %}

    34     {% assign element = site.elements[elem_number] %}

    35     {% include element-partial.html %}

    36   {% endfor %}

    37 </div>

    38 

    39 

    40 <script src="../{{ site.jquery_js }}"></script>

    41 <script src="../{{ site.isotope_js }}"></script>

    42 <script src="../js/fake-element.js"></script>

    43 <script>

    44   $(function(){

    45     

    46     var $container = $('#container');

    47 

    48     {% include random-sizes.js %}

    49 

    50     console.time('init');

    51     $container.isotope({

    52       itemSelector : '.element',

    53       // layoutMode : 'fitRows',

    54       masonry : {

    55         columnWidth : 120

    56       },

    57       masonryHorizontal : {

    58         rowHeight: 120

    59       },

    60       cellsByRow : {

    61         columnWidth : 240,

    62         rowHeight : 240

    63       },

    64       cellsByColumn : {

    65         columnWidth : 240,

    66         rowHeight : 240

    67       },

    68       getSortData : {

    69         symbol : function( $elem ) {

    70           return $elem.attr('data-symbol');

    71         },

    72         category : function( $elem ) {

    73           return $elem.attr('data-category');

    74         },

    75         number : function( $elem ) {

    76           return parseInt( $elem.find('.number').text(), 10 );

    77         },

    78         weight : function( $elem ) {

    79           return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );

    80         },

    81         name : function ( $elem ) {

    82           return $elem.find('.name').text();

    83         }

    84       }

    85     });

    86     

    87     console.timeEnd('init');

    88 

    89     var $optionSets = $('#options .option-set'),

    90         $optionLinks = $optionSets.find('a');

    91 

    92     $optionLinks.click(function(){

    93       var $this = $(this);

    94       // don't proceed if already selected

    95       if ( $this.hasClass('selected') ) {

    96         return false;

    97       }

    98       var $optionSet = $this.parents('.option-set');

    99       $optionSet.find('.selected').removeClass('selected');

   100       $this.addClass('selected');

   101 

   102       // make option object dynamically, i.e. { filter: '.my-filter-class' }

   103       var options = {},

   104           key = $optionSet.attr('data-option-key'),

   105           value = $this.attr('data-option-value');

   106       // parse 'false' as false boolean

   107       value = value === 'false' ? false : value;

   108       options[ key ] = value;

   109 

   110       console.time( key );

   111       if ( key === 'layoutMode' && changeLayoutMode ) {

   112         // changes in layout modes need extra logic

   113         changeLayoutMode( $this, options )

   114       } else {

   115         // otherwise, apply new options

   116         $container.isotope( options );

   117       }

   118       console.timeEnd( key );

   119 

   120       return false;

   121     });

   122 

   123     {% include layout-change.js %}

   124     

   125     {% include change-sizes.js %}

   126 

   127     {% include add-buttons.js %}

   128 

   129     var $sortBy = $('#sort-by');

   130     $('#shuffle a').click(function(){

   131       console.time('shuffle');

   132       $container.isotope('shuffle');

   133       $sortBy.find('.selected').removeClass('selected');

   134       $sortBy.find('[data-option-value="random"]').addClass('selected');

   135       console.timeEnd('shuffle');

   136       return false;

   137     });

   138 

   139   });

   140 </script>