Filter & sort magical layouts http://isotope.metafizzy.co
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

191 lines
5.9 KiB

---
title: Hash history
layout: default
category: demos
---
<section id="copy">
<p><a href="http://benalman.com/projects/jquery-bbq-plugin/">jQuery BBQ</a> by Ben Alman allows you to use hash history to save Isotope options. Try clicking a couple options then hitting the back button, or copying the URL and pasting it into a new window.</p>
</section>
<section id="options" class="clearfix">
<h3>Filters</h3>
<ul class="option-set clearfix">
<li><a href="#filter=*" class="selected">show all</a></li>
<li><a href="#filter=.metal">metal</a></li>
<li><a href="#filter=.transition">transition</a></li>
<li><a href="#filter=.post-transition">post-transition</a></li>
<li><a href="#filter=.nonmetal">nonmetal</a></li>
<li><a href="#filter=.inner-transition">inner-transition</a></li>
<li><a href="#filter=.alkali%2C+.alkaline-earth">alkali and alkaline-earth</a></li>
<li><a href="#filter=%3Anot(.transition)">not transition</a></li>
<li><a href="#filter=.metal%3Anot(.transition)">metal but not transition</a></li>
</ul>
<h3>Sort</h3>
<ul class="option-set clearfix">
<li><a href="#sortBy=original-order" class="selected">original-order</a></li>
<li><a href="#sortBy=name">name</a></li>
<li><a href="#sortBy=symbol">symbol</a></li>
<li><a href="#sortBy=number">number</a></li>
<li><a href="#sortBy=weight">weight</a></li>
<li><a href="#sortBy=category">category</a></li>
</ul>
<h3>Sort direction</h3>
<ul class="option-set clearfix">
<li><a href="#sortAscending=true" class="selected">sort ascending</a></li>
<li><a href="#sortAscending=false">sort descending</a></li>
</ul>
<h3>Layout modes</h3>
<ul class="option-set clearfix">
<li><a href="#layoutMode=masonry" class="selected">masonry</a></li>
<li><a href="#layoutMode=fitRows">fitRows</a></li>
<li><a href="#layoutMode=cellsByRow">cellsByRow</a></li>
<li><a href="#layoutMode=straightDown">straightDown</a></li>
</ul>
</section> <!-- #options -->
<div id="container" class="variable-sizes clearfix">
{% for elem_number in site.random_order | limit:60 %}
{% assign element = site.elements[elem_number] %}
{% include element-partial.html %}
{% endfor %}
</div> <!-- #container -->
<script src="../{{ site.jquery_js }}"></script>
<script src="../{{ site.isotope_js }}"></script>
<script src="../js/jquery.ba-bbq.min.js"></script>
<script>
$(function(){
var $container = $('#container'),
// object that will keep track of options
isotopeOptions = {},
// defaults, used if not explicitly set in hash
defaultOptions = {
filter: '*',
sortBy: 'original-order',
sortAscending: true,
layoutMode: 'masonry'
};
// hacky way of adding random size classes
$container.find('.element').each(function(){
if ( Math.random() > 0.6 ) {
$(this).addClass('width2');
}
if ( Math.random() > 0.6 ) {
$(this).addClass('height2');
}
});
var setupOptions = $.extend( defaultOptions, {
itemSelector : '.element',
masonry : {
columnWidth : 120
},
cellsByRow : {
columnWidth : 240,
rowHeight : 240
},
getSortData : {
symbol : function( $elem ) {
return $elem.attr('data-symbol');
},
category : function( $elem ) {
return $elem.attr('data-category');
},
number : function( $elem ) {
return parseInt( $elem.find('.number').text(), 10 );
},
weight : function( $elem ) {
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
},
name : function ( $elem ) {
return $elem.find('.name').text();
}
}
});
// set up Isotope
$container.isotope( setupOptions );
var $optionSets = $('#options').find('.option-set'),
isOptionLinkClicked = false;
// switches selected class on buttons
function changeSelectedLink( $elem ) {
// remove selected class on previous item
$elem.parents('.option-set').find('.selected').removeClass('selected');
// set selected class on new item
$elem.addClass('selected');
}
$optionSets.find('a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return;
}
changeSelectedLink( $this );
// get href attr, remove leading #
var href = $this.attr('href').replace( /^#/, '' ),
// convert href into object
// i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
option = $.deparam( href, true );
// apply new option to previous
$.extend( isotopeOptions, option );
// set hash, triggers hashchange on window
$.bbq.pushState( isotopeOptions );
isOptionLinkClicked = true;
return false;
});
$(window).bind( 'hashchange', function( event ){
// get options object from hash
var hashOptions = window.location.hash ? $.deparam.fragment( window.location.hash, true ) : {},
// apply defaults where no option was specified
options = $.extend( {}, defaultOptions, hashOptions );
// apply options from hash
$container.isotope( options );
// save options
isotopeOptions = hashOptions;
// if option link was not clicked
// then we'll need to update selected links
if ( !isOptionLinkClicked ) {
// iterate over options
var hrefObj, hrefValue, $selectedLink;
for ( var key in options ) {
hrefObj = {};
hrefObj[ key ] = options[ key ];
// convert object into parameter string
// i.e. { filter: '.inner-transition' } -> 'filter=.inner-transition'
hrefValue = $.param( hrefObj );
// get matching link
$selectedLink = $optionSets.find('a[href="#' + hrefValue + '"]');
changeSelectedLink( $selectedLink );
}
}
isOptionLinkClicked = false;
})
// trigger hashchange to capture any hash data on init
.trigger('hashchange');
});
</script>