demos : add hash history with jQuery BBQ. Fixes #3

thx @cowboy !
14 years ago · 66e28a4839
2 changed files with 213 additions and 0 deletions
--- a/_posts/demos/2011-06-13-hash-history.html
+++ b/_posts/demos/2011-06-13-hash-history.html
@ -0,0 +1,195 @@
+---
+title: Hash history
+layout: demo
+category: demos
+related: z-etc
+---
+
+<section id="copy">
+  <p>Isotope&rsquo;s capabilities are designed to be used together cohesively. You can do it all &mdash; filter, sort, change layout modes, add items &mdash; and Isotope will handle it with ease.</p>
+</section>
+
+<section id="options" class="clearfix">
+
+  <h3>Filters</h3>
+
+  <ul id="filters" class="option-set floated clearfix">
+    <li><a href="#filter=*" class="selected">show all</a></li>
+    <li><a href="#filter=.metalloid">metalloid</a></li>
+    <li><a href="#filter=.metal">metal</a></li>
+    <li><a href="#filter=.alkali">alkali</a></li>
+    <li><a href="#filter=.alkaline-earth">alkaline-earth</a></li>
+    <li><a href="#filter=.inner-transition">inner-transition</a></li>
+    <li><a href="#filter=.lanthanoid">lanthanoid</a></li>
+    <li><a href="#filter=.actinoid">actinoid</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=.other">other</a></li>
+    <li><a href="#filter=.halogen">halogen</a></li>
+    <li><a href="#filter=.noble-gas">noble-gas</a></li>
+  </ul>
+
+
+  <h3>Sort</h3>
+
+  <ul id="sort" class="sort option-set floated 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 id="sort-direction" class="option-set floated 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 id="layouts" class="option-set floated 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 src="../js/fake-element.js"></script>
+<script>
+$(function(){
+  
+  var $container = $('#container'),
+      // object that will keep track of options
+      isotopeOptions = {};
+  
+  
+  // 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');
+    }
+  });
+
+  // set up Isotope
+  $container.isotope({
+    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();
+      }
+    }
+  });
+  
+  var $optionSets = $('#options').find('.option-set'),
+      $optionLinks = $optionSets.find('a');
+  
+  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');
+  }
+  
+  // switches selected class on buttons
+  var isOptionLinkClicked = false;
+  $optionLinks.click(function(){
+    var $this = $(this);
+    // don't proceed if already selected
+    if ( $this.hasClass('selected') ) {
+      return;
+    }
+
+    changeSelectedLink( $this );
+    
+    var href = $this.attr('href').replace( /^#/, '' ),
+        // convert href into object
+        // i.e. 'filter=inner-transition' -> { filter: 'inner-transition' }
+        option = $.deparam( href, true );
+    
+    $.extend( isotopeOptions, option );
+    
+    $.bbq.pushState( isotopeOptions );
+    isOptionLinkClicked = true;
+    
+    return false;
+  });
+
+
+  $(window).bind( 'hashchange', function( event ){
+    // get
+    var hashOptions = $.deparam.fragment( window.location.href, true );
+    
+    // do not proceed if hash options aren't new
+    if ( hashOptions === isotopeOptions ) {
+      return;
+    }
+    
+    isotopeOptions = hashOptions;
+    
+    $container.isotope( isotopeOptions );
+    
+    // if option link was not clicked
+    // then we'll need to update selected links with 
+    if ( !isOptionLinkClicked ) {
+      // iterate over options
+      for ( var key in isotopeOptions ) {
+        var hrefObj = {},
+            hrefValue;
+        
+        hrefObj[ key ] = isotopeOptions[ key ];
+        // convert object into parameter string
+        // i.e. { filter: 'inner-transition' } -> 'filter=inner-transition'
+        hrefValue = $.param( hrefObj );
+        var $selectedLink = $optionSets.find('a[href="#' + hrefValue + '"]');
+        changeSelectedLink( $selectedLink );
+        
+      }
+      
+    }
+    
+    isOptionLinkClicked = false;
+  })
+    .trigger('hashchange');
+
+
+});
+</script>
+  
--- a/js/jquery.ba-bbq.min.js
+++ b/js/jquery.ba-bbq.min.js
@ -0,0 +1,18 @@
+/*
+ * jQuery BBQ: Back Button & Query Library - v1.2.1 - 2/17/2010
+ * http://benalman.com/projects/jquery-bbq-plugin/
+ * 
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
+(function($,p){var i,m=Array.prototype.slice,r=decodeURIComponent,a=$.param,c,l,v,b=$.bbq=$.bbq||{},q,u,j,e=$.event.special,d="hashchange",A="querystring",D="fragment",y="elemUrlAttr",g="location",k="href",t="src",x=/^.*\?|#.*$/g,w=/^.*\#/,h,C={};function E(F){return typeof F==="string"}function B(G){var F=m.call(arguments,1);return function(){return G.apply(this,F.concat(m.call(arguments)))}}function n(F){return F.replace(/^[^#]*#?(.*)$/,"$1")}function o(F){return F.replace(/(?:^[^?#]*\?([^#]*).*$)?.*/,"$1")}function f(H,M,F,I,G){var O,L,K,N,J;if(I!==i){K=F.match(H?/^([^#]*)\#?(.*)$/:/^([^#?]*)\??([^#]*)(#?.*)/);J=K[3]||"";if(G===2&&E(I)){L=I.replace(H?w:x,"")}else{N=l(K[2]);I=E(I)?l[H?D:A](I):I;L=G===2?I:G===1?$.extend({},I,N):$.extend({},N,I);L=a(L);if(H){L=L.replace(h,r)}}O=K[1]+(H?"#":L||!K[1]?"?":"")+L+J}else{O=M(F!==i?F:p[g][k])}return O}a[A]=B(f,0,o);a[D]=c=B(f,1,n);c.noEscape=function(G){G=G||"";var F=$.map(G.split(""),encodeURIComponent);h=new RegExp(F.join("|"),"g")};c.noEscape(",/");$.deparam=l=function(I,F){var H={},G={"true":!0,"false":!1,"null":null};$.each(I.replace(/\+/g," ").split("&"),function(L,Q){var K=Q.split("="),P=r(K[0]),J,O=H,M=0,R=P.split("]["),N=R.length-1;if(/\[/.test(R[0])&&/\]$/.test(R[N])){R[N]=R[N].replace(/\]$/,"");R=R.shift().split("[").concat(R);N=R.length-1}else{N=0}if(K.length===2){J=r(K[1]);if(F){J=J&&!isNaN(J)?+J:J==="undefined"?i:G[J]!==i?G[J]:J}if(N){for(;M<=N;M++){P=R[M]===""?O.length:R[M];O=O[P]=M<N?O[P]||(R[M+1]&&isNaN(R[M+1])?{}:[]):J}}else{if($.isArray(H[P])){H[P].push(J)}else{if(H[P]!==i){H[P]=[H[P],J]}else{H[P]=J}}}}else{if(P){H[P]=F?i:""}}});return H};function z(H,F,G){if(F===i||typeof F==="boolean"){G=F;F=a[H?D:A]()}else{F=E(F)?F.replace(H?w:x,""):F}return l(F,G)}l[A]=B(z,0);l[D]=v=B(z,1);$[y]||($[y]=function(F){return $.extend(C,F)})({a:k,base:k,iframe:t,img:t,input:t,form:"action",link:k,script:t});j=$[y];function s(I,G,H,F){if(!E(H)&&typeof H!=="object"){F=H;H=G;G=i}return this.each(function(){var L=$(this),J=G||j()[(this.nodeName||"").toLowerCase()]||"",K=J&&L.attr(J)||"";L.attr(J,a[I](K,H,F))})}$.fn[A]=B(s,A);$.fn[D]=B(s,D);b.pushState=q=function(I,F){if(E(I)&&/^#/.test(I)&&F===i){F=2}var H=I!==i,G=c(p[g][k],H?I:{},H?F:2);p[g][k]=G+(/#/.test(G)?"":"#")};b.getState=u=function(F,G){return F===i||typeof F==="boolean"?v(F):v(G)[F]};b.removeState=function(F){var G={};if(F!==i){G=u();$.each($.isArray(F)?F:arguments,function(I,H){delete G[H]})}q(G,2)};e[d]=$.extend(e[d],{add:function(F){var H;function G(J){var I=J[D]=c();J.getState=function(K,L){return K===i||typeof K==="boolean"?l(I,K):l(I,L)[K]};H.apply(this,arguments)}if($.isFunction(F)){H=F;return G}else{H=F.handler;F.handler=G}}})})(jQuery,this);
+/*
+ * jQuery hashchange event - v1.2 - 2/11/2010
+ * http://benalman.com/projects/jquery-hashchange-plugin/
+ * 
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
+(function($,i,b){var j,k=$.event.special,c="location",d="hashchange",l="href",f=$.browser,g=document.documentMode,h=f.msie&&(g===b||g<8),e="on"+d in i&&!h;function a(m){m=m||i[c][l];return m.replace(/^[^#]*#?(.*)$/,"$1")}$[d+"Delay"]=100;k[d]=$.extend(k[d],{setup:function(){if(e){return false}$(j.start)},teardown:function(){if(e){return false}$(j.stop)}});j=(function(){var m={},r,n,o,q;function p(){o=q=function(s){return s};if(h){n=$('<iframe src="javascript:0"/>').hide().insertAfter("body")[0].contentWindow;q=function(){return a(n.document[c][l])};o=function(u,s){if(u!==s){var t=n.document;t.open().close();t[c].hash="#"+u}};o(a())}}m.start=function(){if(r){return}var t=a();o||p();(function s(){var v=a(),u=q(t);if(v!==t){o(t=v,u);$(i).trigger(d)}else{if(u!==t){i[c][l]=i[c][l].replace(/#.*/,"")+"#"+u}}r=setTimeout(s,$[d+"Delay"])})()};m.stop=function(){if(!n){r&&clearTimeout(r);r=0}};return m})()})(jQuery,this);