1 ---

     2 title: onLayout

     3 layout: default

     4 category: tests

     5 ---

     6 

     7 <section id="copy">

     8   <p>Tests that <a href="../docs/options.html#onlayout">onLayout callback</a> is triggering properly, after animation/transition has completed.</p>

     9 

    10 </section>

    11 

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

    13 

    14   {% include filter-buttons.html %}

    15 

    16   {% include sort-buttons.html %}

    17 

    18   <h3>Etc</h3>

    19 

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

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

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

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

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

    25   </ul>

    26 

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

    28 

    29 <div id="container" class="clickable variable-sizes clearfix">

    30   {% for elem_number in site.best_of_order %}

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

    32     {% include element-partial.html %}

    33   {% endfor %}

    34 </div> <!-- #container -->

    35 

    36 

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

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

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

    40 <script>

    41 

    42   $(function(){

    43     

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

    45     

    46     {% include random-sizes.js %}

    47     

    48     var colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'white'],

    49         colorI = 0;

    50 

    51     function changeBGColor( $elems, instance ) {

    52       var color = colors[ colorI % colors.length ];

    53       $container.css({ background: color })

    54       colorI++;

    55       // console.log( $elems.length, instance.$filteredAtoms.length );

    56     }

    57 

    58     function lmk() {

    59       // console.log('callback still works');

    60     }

    61 

    62     $container.isotope({

    63       itemSelector : '.element',

    64       onLayout: changeBGColor,

    65       masonry : {

    66         columnWidth : 120

    67       },

    68       masonryHorizontal : {

    69         rowHeight: 120

    70       },

    71       cellsByRow : {

    72         columnWidth : 240,

    73         rowHeight : 240

    74       },

    75       cellsByColumn : {

    76         columnWidth : 240,

    77         rowHeight : 240

    78       },

    79       getSortData : {

    80         symbol : function( $elem ) {

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

    82         },

    83         category : function( $elem ) {

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

    85         },

    86         number : function( $elem ) {

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

    88         },

    89         weight : function( $elem ) {

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

    91         },

    92         name : function ( $elem ) {

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

    94         }

    95       }

    96     }, lmk );

    97       

    98 

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

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

   101     

   102     $optionLinks.click(function(){

   103       var $this = $(this);

   104       // don't proceed if already selected

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

   106         return false;

   107       }

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

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

   110       $this.addClass('selected');

   111 

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

   113       var options = {},

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

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

   116       // parse 'false' as false boolean

   117       value = value === 'false' ? false : value;

   118       options[ key ] = value;

   119       if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {

   120         // changes in layout modes need extra logic

   121         changeLayoutMode( $this, options )

   122       } else {

   123         // otherwise, apply new options

   124         $container.isotope( options, lmk );

   125       }

   126       

   127       return false;

   128     });

   129 

   130 

   131 

   132     $('#insert a').click(function(){

   133       var $newEls = $( fakeElement.getGroup() );

   134       $container.isotope( 'insert', $newEls, lmk );

   135 

   136       return false;

   137     });

   138 

   139     $('#append a').click(function(){

   140       var $newEls = $( fakeElement.getGroup() );

   141       $container.append( $newEls ).isotope( 'appended', $newEls, lmk );

   142 

   143       return false;

   144     });

   145 

   146 

   147     // change size of clicked element

   148     $container.delegate( '.element', 'click', function(){

   149       $(this).toggleClass('large');

   150       $container.isotope( 'reLayout', lmk );

   151     });

   152 

   153     // toggle variable sizes of all elements

   154     $('#toggle-sizes').find('a').click(function(){

   155       $container

   156         .toggleClass('variable-sizes')

   157         .isotope( 'reLayout', lmk );

   158       return false;

   159     });

   160 

   161 

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

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

   164       $container.isotope( 'shuffle', lmk );

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

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

   167       return false;

   168     });

   169     

   170   });

   171 </script>