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