--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/enmi12/glossaire/_posts/demos/2011-06-13-hash-history.html Wed Nov 06 03:21:17 2013 +0000
@@ -0,0 +1,185 @@
+---
+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>
+ <li><a href="#sortBy=random">random</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'
+ };
+
+ {% include random-sizes.js %}
+
+ 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;
+ });
+
+ var hashChanged = false;
+
+ $(window).bind( 'hashchange', function( event ){
+ // get options object from hash
+ var hashOptions = window.location.hash ? $.deparam.fragment( window.location.hash, true ) : {},
+ // do not animate first call
+ aniEngine = hashChanged ? 'best-available' : 'none',
+ // apply defaults where no option was specified
+ options = $.extend( {}, defaultOptions, hashOptions, { animationEngine: aniEngine } );
+ // 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;
+ hashChanged = true;
+ })
+ // trigger hashchange to capture any hash data on init
+ .trigger('hashchange');
+
+ });
+ </script>
+