1 ---

     2 title: Callbacks

     3 layout: default

     4 category: tests

     5 ---

     6 

     7 <section id="copy">

     8   <p>Tests that callbacks are 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() {

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

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

    54       colorI++;

    55     }

    56     

    57     $container.isotope({

    58       itemSelector : '.element',

    59       masonry : {

    60         columnWidth : 120

    61       },

    62       masonryHorizontal : {

    63         rowHeight: 120

    64       },

    65       cellsByRow : {

    66         columnWidth : 240,

    67         rowHeight : 240

    68       },

    69       cellsByColumn : {

    70         columnWidth : 240,

    71         rowHeight : 240

    72       },

    73       getSortData : {

    74         symbol : function( $elem ) {

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

    76         },

    77         category : function( $elem ) {

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

    79         },

    80         number : function( $elem ) {

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

    82         },

    83         weight : function( $elem ) {

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

    85         },

    86         name : function ( $elem ) {

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

    88         }

    89       }

    90     }, changeBGColor );

    91       

    92 

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

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

    95     

    96     $optionLinks.click(function(){

    97       var $this = $(this);

    98       // don't proceed if already selected

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

   100         return false;

   101       }

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

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

   104       $this.addClass('selected');

   105 

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

   107       var options = {},

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

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

   110       // parse 'false' as false boolean

   111       value = value === 'false' ? false : value;

   112       options[ key ] = value;

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

   114         // changes in layout modes need extra logic

   115         changeLayoutMode( $this, options )

   116       } else {

   117         // otherwise, apply new options

   118         $container.isotope( options, changeBGColor );

   119       }

   120       

   121       return false;

   122     });

   123 

   124 

   125 

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

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

   128       $container.isotope( 'insert', $newEls, changeBGColor );

   129 

   130       return false;

   131     });

   132 

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

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

   135       $container.append( $newEls ).isotope( 'appended', $newEls, changeBGColor );

   136 

   137       return false;

   138     });

   139 

   140 

   141     // change size of clicked element

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

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

   144       $container.isotope( 'reLayout', changeBGColor );

   145     });

   146 

   147     // toggle variable sizes of all elements

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

   149       $container

   150         .toggleClass('variable-sizes')

   151         .isotope( 'reLayout', changeBGColor );

   152       return false;

   153     });

   154 

   155 

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

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

   158       $container.isotope( 'shuffle', changeBGColor );

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

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

   161       return false;

   162     });

   163     

   164   });

   165 </script>