|
1 --- |
|
2 title: Hash history |
|
3 layout: default |
|
4 category: demos |
|
5 --- |
|
6 |
|
7 <section id="copy"> |
|
8 <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> |
|
9 </section> |
|
10 |
|
11 <section id="options" class="clearfix"> |
|
12 |
|
13 <h3>Filters</h3> |
|
14 |
|
15 <ul class="option-set clearfix"> |
|
16 <li><a href="#filter=*" class="selected">show all</a></li> |
|
17 <li><a href="#filter=.metal">metal</a></li> |
|
18 <li><a href="#filter=.transition">transition</a></li> |
|
19 <li><a href="#filter=.post-transition">post-transition</a></li> |
|
20 <li><a href="#filter=.nonmetal">nonmetal</a></li> |
|
21 <li><a href="#filter=.inner-transition">inner-transition</a></li> |
|
22 <li><a href="#filter=.alkali%2C+.alkaline-earth">alkali and alkaline-earth</a></li> |
|
23 <li><a href="#filter=%3Anot(.transition)">not transition</a></li> |
|
24 <li><a href="#filter=.metal%3Anot(.transition)">metal but not transition</a></li> |
|
25 </ul> |
|
26 |
|
27 <h3>Sort</h3> |
|
28 |
|
29 <ul class="option-set clearfix"> |
|
30 <li><a href="#sortBy=original-order" class="selected">original-order</a></li> |
|
31 <li><a href="#sortBy=name">name</a></li> |
|
32 <li><a href="#sortBy=symbol">symbol</a></li> |
|
33 <li><a href="#sortBy=number">number</a></li> |
|
34 <li><a href="#sortBy=weight">weight</a></li> |
|
35 <li><a href="#sortBy=category">category</a></li> |
|
36 <li><a href="#sortBy=random">random</a></li> |
|
37 </ul> |
|
38 |
|
39 <h3>Sort direction</h3> |
|
40 |
|
41 <ul class="option-set clearfix"> |
|
42 <li><a href="#sortAscending=true" class="selected">sort ascending</a></li> |
|
43 <li><a href="#sortAscending=false">sort descending</a></li> |
|
44 </ul> |
|
45 |
|
46 <h3>Layout modes</h3> |
|
47 |
|
48 <ul class="option-set clearfix"> |
|
49 <li><a href="#layoutMode=masonry" class="selected">masonry</a></li> |
|
50 <li><a href="#layoutMode=fitRows">fitRows</a></li> |
|
51 <li><a href="#layoutMode=cellsByRow">cellsByRow</a></li> |
|
52 <li><a href="#layoutMode=straightDown">straightDown</a></li> |
|
53 </ul> |
|
54 |
|
55 </section> <!-- #options --> |
|
56 |
|
57 <div id="container" class="variable-sizes clearfix"> |
|
58 {% for elem_number in site.random_order | limit:60 %} |
|
59 {% assign element = site.elements[elem_number] %} |
|
60 {% include element-partial.html %} |
|
61 {% endfor %} |
|
62 </div> <!-- #container --> |
|
63 |
|
64 <script src="../{{ site.jquery_js }}"></script> |
|
65 <script src="../{{ site.isotope_js }}"></script> |
|
66 <script src="../js/jquery.ba-bbq.min.js"></script> |
|
67 <script> |
|
68 $(function(){ |
|
69 |
|
70 var $container = $('#container'), |
|
71 // object that will keep track of options |
|
72 isotopeOptions = {}, |
|
73 // defaults, used if not explicitly set in hash |
|
74 defaultOptions = { |
|
75 filter: '*', |
|
76 sortBy: 'original-order', |
|
77 sortAscending: true, |
|
78 layoutMode: 'masonry' |
|
79 }; |
|
80 |
|
81 {% include random-sizes.js %} |
|
82 |
|
83 var setupOptions = $.extend( {}, defaultOptions, { |
|
84 itemSelector : '.element', |
|
85 masonry : { |
|
86 columnWidth : 120 |
|
87 }, |
|
88 cellsByRow : { |
|
89 columnWidth : 240, |
|
90 rowHeight : 240 |
|
91 }, |
|
92 getSortData : { |
|
93 symbol : function( $elem ) { |
|
94 return $elem.attr('data-symbol'); |
|
95 }, |
|
96 category : function( $elem ) { |
|
97 return $elem.attr('data-category'); |
|
98 }, |
|
99 number : function( $elem ) { |
|
100 return parseInt( $elem.find('.number').text(), 10 ); |
|
101 }, |
|
102 weight : function( $elem ) { |
|
103 return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') ); |
|
104 }, |
|
105 name : function ( $elem ) { |
|
106 return $elem.find('.name').text(); |
|
107 } |
|
108 } |
|
109 }); |
|
110 |
|
111 // set up Isotope |
|
112 $container.isotope( setupOptions ); |
|
113 |
|
114 var $optionSets = $('#options').find('.option-set'), |
|
115 isOptionLinkClicked = false; |
|
116 |
|
117 // switches selected class on buttons |
|
118 function changeSelectedLink( $elem ) { |
|
119 // remove selected class on previous item |
|
120 $elem.parents('.option-set').find('.selected').removeClass('selected'); |
|
121 // set selected class on new item |
|
122 $elem.addClass('selected'); |
|
123 } |
|
124 |
|
125 |
|
126 $optionSets.find('a').click(function(){ |
|
127 var $this = $(this); |
|
128 // don't proceed if already selected |
|
129 if ( $this.hasClass('selected') ) { |
|
130 return; |
|
131 } |
|
132 changeSelectedLink( $this ); |
|
133 // get href attr, remove leading # |
|
134 var href = $this.attr('href').replace( /^#/, '' ), |
|
135 // convert href into object |
|
136 // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' } |
|
137 option = $.deparam( href, true ); |
|
138 // apply new option to previous |
|
139 $.extend( isotopeOptions, option ); |
|
140 // set hash, triggers hashchange on window |
|
141 $.bbq.pushState( isotopeOptions ); |
|
142 isOptionLinkClicked = true; |
|
143 return false; |
|
144 }); |
|
145 |
|
146 var hashChanged = false; |
|
147 |
|
148 $(window).bind( 'hashchange', function( event ){ |
|
149 // get options object from hash |
|
150 var hashOptions = window.location.hash ? $.deparam.fragment( window.location.hash, true ) : {}, |
|
151 // do not animate first call |
|
152 aniEngine = hashChanged ? 'best-available' : 'none', |
|
153 // apply defaults where no option was specified |
|
154 options = $.extend( {}, defaultOptions, hashOptions, { animationEngine: aniEngine } ); |
|
155 // apply options from hash |
|
156 $container.isotope( options ); |
|
157 // save options |
|
158 isotopeOptions = hashOptions; |
|
159 |
|
160 // if option link was not clicked |
|
161 // then we'll need to update selected links |
|
162 if ( !isOptionLinkClicked ) { |
|
163 // iterate over options |
|
164 var hrefObj, hrefValue, $selectedLink; |
|
165 for ( var key in options ) { |
|
166 hrefObj = {}; |
|
167 hrefObj[ key ] = options[ key ]; |
|
168 // convert object into parameter string |
|
169 // i.e. { filter: '.inner-transition' } -> 'filter=.inner-transition' |
|
170 hrefValue = $.param( hrefObj ); |
|
171 // get matching link |
|
172 $selectedLink = $optionSets.find('a[href="#' + hrefValue + '"]'); |
|
173 changeSelectedLink( $selectedLink ); |
|
174 } |
|
175 } |
|
176 |
|
177 isOptionLinkClicked = false; |
|
178 hashChanged = true; |
|
179 }) |
|
180 // trigger hashchange to capture any hash data on init |
|
181 .trigger('hashchange'); |
|
182 |
|
183 }); |
|
184 </script> |
|
185 |