|
|
| Line 11: |
Line 11: |
| | {{Team:UofC_Calgary/assets/base/js/app.js}} | | {{Team:UofC_Calgary/assets/base/js/app.js}} |
| | {{Team:UofC_Calgary/Test1}} | | {{Team:UofC_Calgary/Test1}} |
| − | {{Team:UofC_Calgary/Isotope.css}}
| |
| − | {{Team:UofC_Calgary/Isotope.js}}
| |
| | </p> | | </p> |
| | | | |
| Line 562: |
Line 560: |
| | <!-- END: CORE PLUGINS --> | | <!-- END: CORE PLUGINS --> |
| | <!-- BEGIN: LAYOUT PLUGINS --> | | <!-- BEGIN: LAYOUT PLUGINS --> |
| − | <script>
| |
| − | // external js: isotope.pkgd.js
| |
| | | | |
| − | // init Isotope
| |
| − | var $grid = $('.grid').isotope({
| |
| − | itemSelector: '.element-item',
| |
| − | layoutMode: 'fitRows',
| |
| − | getSortData: {
| |
| − | name: '.name',
| |
| − | symbol: '.symbol',
| |
| − | number: '.number parseInt',
| |
| − | category: '[data-category]',
| |
| − | weight: function( itemElem ) {
| |
| − | var weight = $( itemElem ).find('.weight').text();
| |
| − | return parseFloat( weight.replace( /[\(\)]/g, '') );
| |
| − | }
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | // filter functions
| |
| − | var filterFns = {
| |
| − | // show if number is greater than 50
| |
| − | numberGreaterThan50: function() {
| |
| − | var number = $(this).find('.number').text();
| |
| − | return parseInt( number, 10 ) > 50;
| |
| − | },
| |
| − | // show if name ends with -ium
| |
| − | ium: function() {
| |
| − | var name = $(this).find('.name').text();
| |
| − | return name.match( /ium$/ );
| |
| − | }
| |
| − | };
| |
| − |
| |
| − | // bind filter button click
| |
| − | $('#filters').on( 'click', 'button', function() {
| |
| − | var filterValue = $( this ).attr('data-filter');
| |
| − | // use filterFn if matches value
| |
| − | filterValue = filterFns[ filterValue ] || filterValue;
| |
| − | $grid.isotope({ filter: filterValue });
| |
| − | });
| |
| − |
| |
| − | // change is-checked class on buttons
| |
| − | $('.button-group').each( function( i, buttonGroup ) {
| |
| − | var $buttonGroup = $( buttonGroup );
| |
| − | $buttonGroup.on( 'click', 'button', function() {
| |
| − | $buttonGroup.find('.is-checked').removeClass('is-checked');
| |
| − | $( this ).addClass('is-checked');
| |
| − | });
| |
| − | });
| |
| − |
| |
| − | </script>
| |
| | <!--<script> | | <!--<script> |
| | $(document).ready(function() { | | $(document).ready(function() { |
Isotope - filtering & sorting
Filter
Mercury
Tellurium
Bismuth
Lead
Gold
Potassium
Sodium
Cadmium
