playground
/
isotope
mirror of https://github.com/metafizzy/isotope
1
0
Fork 0
Code Issues Releases Activity
Browse Source

demos : hash-history whitespace fix

pull/96/head
David DeSandro 14 years ago
parent
942f100921
commit
7dd9f335d3
1 changed files with 148 additions and 158 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 306
      _posts/demos/2011-06-13-hash-history.html

306
_posts/demos/2011-06-13-hash-history.html
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save