mirror of https://github.com/metafizzy/isotope
David DeSandro
13 years ago
64 changed files with 1040 additions and 935 deletions
@ -0,0 +1,73 @@
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/fake-element.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
{% include random-sizes.js %} |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
masonry : { |
||||
columnWidth : 120 |
||||
}, |
||||
masonryHorizontal : { |
||||
rowHeight: 120 |
||||
}, |
||||
cellsByRow : { |
||||
columnWidth : 240, |
||||
rowHeight : 240 |
||||
}, |
||||
cellsByColumn : { |
||||
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(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
{% include option-set-buttons.js %} |
||||
|
||||
// toggle variable sizes of all elements |
||||
$('#toggle-sizes').find('a').click(function(){ |
||||
$container |
||||
.toggleClass('variable-sizes') |
||||
.isotope('reLayout'); |
||||
return false; |
||||
}); |
||||
|
||||
{% include layout-change.js %} |
||||
|
||||
{% include add-buttons.js %} |
||||
|
||||
$('#shuffle a').click(function(){ |
||||
$container.isotope('shuffle'); |
||||
return false; |
||||
}); |
||||
|
||||
// change size of clicked element |
||||
$container.find('.element').live('click', function(){ |
||||
$(this).toggleClass('large'); |
||||
$container.isotope('reLayout'); |
||||
}); |
||||
|
||||
|
||||
}); |
||||
</script> |
||||
@ -0,0 +1,22 @@
|
||||
<section id="copy"> |
||||
<p>Isotope’s capabilities are designed to be used together cohesively. You can do it all — filter, sort, change layout modes, add items — and Isotope will handle it with ease.</p> |
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
{% include filter-buttons.html %} |
||||
|
||||
{% include sort-buttons.html %} |
||||
|
||||
{% include layout-options.html %} |
||||
|
||||
<h3>Etc</h3> |
||||
|
||||
<ul id="etc" class="clearfix"> |
||||
|
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li> |
||||
<li id="insert"><a href="#insert">Insert new elements</a></li> |
||||
<li id="append"><a href='#append'>Append new elements</a></li> |
||||
<!-- <li id="shuffle"><a href='#shuffle'>Shuffle</a></li> --> |
||||
</ul> |
||||
</section> <!-- #options --> |
||||
@ -0,0 +1,14 @@
|
||||
|
||||
<h3>Filters</h3> |
||||
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter"> |
||||
<li><a href="#filter" data-option-value="*" class="selected">show all</a></li> |
||||
<li><a href="#filter" data-option-value=".metal">metal</a></li> |
||||
<li><a href="#filter" data-option-value=".transition">transition</a></li> |
||||
<li><a href="#filter" data-option-value=".post-transition">post-transition</a></li> |
||||
<li><a href="#filter" data-option-value=".nonmetal">nonmetal</a></li> |
||||
<li><a href="#filter" data-option-value=".inner-transition">inner-transition</a></li> |
||||
<li><a href="#filter" data-option-value=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li> |
||||
<li><a href="#filter" data-option-value=":not(.transition)">not transition</a></li> |
||||
<li><a href="#filter" data-option-value=".metal:not(.transition)">metal but not transition</a></li> |
||||
</ul> |
||||
@ -1,4 +0,0 @@
|
||||
|
||||
<footer> |
||||
{{ site.name }} by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a> |
||||
</footer> |
||||
@ -1,10 +0,0 @@
|
||||
<!-- analytics --> |
||||
<script> |
||||
var _gaq=[['_setAccount','UA-592624-5'],['_trackPageview'],['_setDomainName', '.metafizzy.co']]; |
||||
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1; |
||||
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; |
||||
s.parentNode.insertBefore(g,s)}(document,'script')); |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -1,16 +0,0 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>{{ page.title }} · {{ site.name }} {% if page.category == 'docs' %}Docs{% elsif page.category == 'demos' %}Demo{% endif %}</title> |
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> |
||||
|
||||
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" /> |
||||
|
||||
<!-- scripts at bottom of page --> |
||||
|
||||
<script src="http://desandro.com/haveamint/?js"></script> <!-- analytics --> |
||||
|
||||
</head> |
||||
<body class="{% if page.category == 'docs' %}doc{% elsif page.category == 'demos' %}demo{% endif %} {{ page.body_class }}"> |
||||
@ -0,0 +1,21 @@
|
||||
<div id="container" class="variable-sizes"> |
||||
{% assign page_position = page.page_position %} |
||||
{% for element in site.elements limit:20 offset:page.page_position %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
layoutMode : 'fitRows' |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
@ -1,28 +1,24 @@
|
||||
|
||||
// change layout
|
||||
var isHorizontal = false; |
||||
$('#layouts a').click(function(){ |
||||
var mode = $(this).attr('href').slice(1); |
||||
wasHorizontal = isHorizontal; |
||||
isHorizontal = $(this).hasClass('horizontal'); |
||||
|
||||
function changeLayoutMode( $link, options ) { |
||||
var wasHorizontal = isHorizontal; |
||||
isHorizontal = $link.hasClass('horizontal'); |
||||
|
||||
if ( wasHorizontal !== isHorizontal ) { |
||||
// orientation change
|
||||
// need to do some clean up for transitions and sizes
|
||||
var style = isHorizontal ?
|
||||
{ height: '80%', width: $container.width() } :
|
||||
{ width: 'auto' }; |
||||
// stop any animation on container height / width
|
||||
$container.filter(':animated').stop(); |
||||
|
||||
// disable transition, apply revised style
|
||||
$container.addClass('no-transition').css( style ); |
||||
setTimeout(function(){ |
||||
$container.removeClass('no-transition').isotope({ layoutMode : mode }); |
||||
$container.removeClass('no-transition').isotope( options ); |
||||
}, 100 ) |
||||
} else { |
||||
// go ahead and apply new layout
|
||||
$container.isotope({ layoutMode : mode }); |
||||
|
||||
$container.isotope( options ); |
||||
} |
||||
|
||||
return false; |
||||
}); |
||||
} |
||||
|
||||
@ -1,12 +1,13 @@
|
||||
<h3>Layout modes</h3> |
||||
|
||||
<ul id="layouts" class="option-set floated clearfix"> |
||||
<li><a href="#masonry" class="selected">masonry</a></li> |
||||
<li><a href="#fitRows">fitRows</a></li> |
||||
<li><a href="#cellsByRow">cellsByRow</a></li> |
||||
<li><a href="#straightDown">straightDown</a></li> |
||||
<li><a href="#masonryHorizontal" class="horizontal">masonryHorizontal</a></li> |
||||
<li><a href="#fitColumns" class="horizontal">fitColumns</a></li> |
||||
<li><a href="#cellsByColumn" class="horizontal">cellsByColumn</a></li> |
||||
<li><a href="#straightAcross" class="horizontal">straightAcross</a></li> |
||||
</ul> |
||||
<h3>Layout modes</h3> |
||||
|
||||
<ul id="layouts" class="option-set clearfix" data-option-key="layoutMode"> |
||||
<li><a href="#masonry" data-option-value="masonry" class="selected">masonry</a></li> |
||||
<li><a href="#fitRows" data-option-value="fitRows">fitRows</a></li> |
||||
<li><a href="#cellsByRow" data-option-value="cellsByRow">cellsByRow</a></li> |
||||
<li><a href="#straightDown" data-option-value="straightDown">straightDown</a></li> |
||||
<li><a href="#masonryHorizontal" data-option-value="masonryHorizontal" class="horizontal">masonryHorizontal</a></li> |
||||
<li><a href="#fitColumns" data-option-value="fitColumns" class="horizontal">fitColumns</a></li> |
||||
<li><a href="#cellsByColumn" data-option-value="cellsByColumn" class="horizontal">cellsByColumn</a></li> |
||||
<li><a href="#straightAcross" data-option-value="straightAcross" class="horizontal">straightAcross</a></li> |
||||
</ul> |
||||
|
||||
@ -0,0 +1,31 @@
|
||||
|
||||
var $optionSets = $('#options .option-set'), |
||||
$optionLinks = $optionSets.find('a'); |
||||
|
||||
$optionLinks.click(function(){ |
||||
var $this = $(this); |
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) { |
||||
return false; |
||||
} |
||||
var $optionSet = $this.parents('.option-set'); |
||||
$optionSet.find('.selected').removeClass('selected'); |
||||
$this.addClass('selected'); |
||||
|
||||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||||
var options = {}, |
||||
key = $optionSet.attr('data-option-key'), |
||||
value = $this.attr('data-option-value'); |
||||
// parse 'false' as false boolean
|
||||
value = value === 'false' ? false : value; |
||||
options[ key ] = value; |
||||
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) { |
||||
// changes in layout modes need extra logic
|
||||
changeLayoutMode( $this, options ) |
||||
} else { |
||||
// otherwise, apply new options
|
||||
$container.isotope( options ); |
||||
} |
||||
|
||||
return false; |
||||
}); |
||||
@ -1,25 +1,18 @@
|
||||
|
||||
<h3>Sort</h3> |
||||
|
||||
<ul id="sort" class="sort option-set"> |
||||
<li> |
||||
<ul class="sort asc option-set floated clearfix"> |
||||
<li><a href="#original-order" class="selected">original-order (asc)</a></li> |
||||
<li><a href="#name">name (asc)</a></li> |
||||
<li><a href="#symbol">symbol (asc)</a></li> |
||||
<li><a href="#number">number (asc)</a></li> |
||||
<li><a href="#weight">weight (asc)</a></li> |
||||
<li><a href="#category">category (asc)</a></li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<ul class="sort desc option-set floated clearfix"> |
||||
<li><a href="#original-order">original-order (desc)</a></li> |
||||
<li><a href="#name">name (desc)</a></li> |
||||
<li><a href="#symbol">symbol (desc)</a></li> |
||||
<li><a href="#number">number (desc)</a></li> |
||||
<li><a href="#weight">weight (desc)</a></li> |
||||
<li><a href="#category">category (desc)</a></li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
<ul id="sort" class="sort option-set clearfix" data-option-key="sortBy"> |
||||
<li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>original-order</a></li> |
||||
<li><a href="#sortBy=name" data-option-value="name">name</a></li> |
||||
<li><a href="#sortBy=symbol" data-option-value="symbol">symbol</a></li> |
||||
<li><a href="#sortBy=number" data-option-value="number">number</a></li> |
||||
<li><a href="#sortBy=weight" data-option-value="weight">weight</a></li> |
||||
<li><a href="#sortBy=category" data-option-value="category">category</a></li> |
||||
</ul> |
||||
|
||||
<h3>Sort direction</h3> |
||||
|
||||
<ul id="sort-direction" class="option-set clearfix" data-option-key="sortAscending"> |
||||
<li><a href="#sortAscending=true" data-option-value="true" class="selected">sort ascending</a></li> |
||||
<li><a href="#sortAscending=false" data-option-value="false">sort descending</a></li> |
||||
</ul> |
||||
|
||||
@ -1,13 +0,0 @@
|
||||
|
||||
// sorting
|
||||
$('#sort a').click(function(){ |
||||
// get href attribute, minus the #
|
||||
var $this = $(this), |
||||
sortName = $this.attr('href').slice(1), |
||||
asc = $this.parents('.sort').hasClass('asc'); |
||||
$container.isotope({
|
||||
sortBy : sortName, |
||||
sortAscending : asc |
||||
}); |
||||
return false; |
||||
}); |
||||
@ -0,0 +1,67 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
{% if page.category != 'homepage' %}{% assign root_path = '../' %}{% assign link_path = '..' %}{% else %}{% assign link_path = '.' %}{% endif %} |
||||
<meta charset="utf-8" /> |
||||
<title>{{ page.title }}{% if page.category != 'homepage' %} · {{ site.name }} {% if page.category == 'docs' %}Docs{% elsif page.category == 'demos' %}Demo{% endif %}{% endif %}</title> |
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> |
||||
|
||||
<link rel="stylesheet" href="{{ root_path }}css/style.css" /> |
||||
|
||||
<!-- scripts at bottom of page --> |
||||
|
||||
</head> |
||||
<body class="{{ page.category }} {{ page.body_class }}"> |
||||
|
||||
<nav id="site-nav"> |
||||
<h1><a href="{{ root_path }}index.html">{{ site.name }}</a></h1> |
||||
|
||||
<h2>Docs</h2> |
||||
|
||||
<ul> |
||||
{% for doc in site.categories.docs reversed %} |
||||
{% if page.title == doc.title and page.category == 'docs' %} |
||||
<li class="current"><a href="#content">{{ doc.title }}</a> |
||||
<ul class="toc"> |
||||
{% for item in page.toc %} |
||||
<li><a href="#{{ item.anchor }}">{{ item.title }}</a></li> |
||||
{% endfor %} |
||||
</ul> |
||||
</li> |
||||
{% else %} |
||||
<li><a href="{{ link_path }}{{ doc.url }}">{{ doc.title }}</a> |
||||
{% endif %} |
||||
{% endfor %} |
||||
</ul> |
||||
|
||||
<h2>Demos</h2> |
||||
|
||||
<ul> |
||||
{% for demo in site.categories.demos reversed %} |
||||
{% if page.title == demo.title and page.category == 'demos' %} |
||||
<li class="current"><a href="#content">{{ demo.title }}</a></li> |
||||
{% else %} |
||||
<li><a href="{{ link_path }}{{ demo.url }}">{{ demo.title }}</a> |
||||
{% endif %} |
||||
{% endfor %} |
||||
</ul> |
||||
|
||||
</nav> <!-- #site-nav --> |
||||
|
||||
<section id="content"> |
||||
{% if page.category != 'homepage' %} |
||||
<h1>{{ page.title }}</h1> |
||||
{% endif %} |
||||
|
||||
{{ content }} |
||||
|
||||
<footer> |
||||
{{ site.name }} by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a> |
||||
</footer> |
||||
|
||||
</section> <!-- #content --> |
||||
|
||||
|
||||
</body> |
||||
</html> |
||||
@ -1,11 +0,0 @@
|
||||
{% include html-head.html %} |
||||
|
||||
<p id="demo-nav"><a href="../index.html">{{ site.name }}</a> Demo</p> |
||||
|
||||
<h1>{{ page.title }}</h1> |
||||
|
||||
{{ content }} |
||||
|
||||
{% include footer.html %} |
||||
|
||||
{% include html-foot.html %} |
||||
@ -1,36 +0,0 @@
|
||||
{% include html-head.html %} |
||||
|
||||
<nav id="docs-nav"> |
||||
<h1><a href="../index.html">{{ site.name }}</a> Docs</h1> |
||||
|
||||
<ul> |
||||
{% for doc in site.categories.docs reversed %} |
||||
{% if page.title == doc.title %} |
||||
<li class="current"><a href="#content">{{ doc.title }}</a> |
||||
<ul class="toc"> |
||||
{% for item in page.toc %} |
||||
<li><a href="#{{ item.anchor }}">{{ item.title }}</a></li> |
||||
{% endfor %} |
||||
</ul> |
||||
</li> |
||||
{% else %} |
||||
{% if doc.layout != 'index-page' %} |
||||
<li><a href="..{{ doc.url }}">{{ doc.title }}</a> |
||||
{% endif %} |
||||
{% endif %} |
||||
{% endfor %} |
||||
</ul> |
||||
|
||||
</nav> <!-- #docs-nav --> |
||||
|
||||
<section id="content"> |
||||
|
||||
<h1>{{ page.title }}</h1> |
||||
|
||||
{{ content }} |
||||
|
||||
{% include footer.html %} |
||||
|
||||
</section> <!-- #content --> |
||||
|
||||
{% include html-foot.html %} |
||||
@ -1,141 +0,0 @@
|
||||
{% include html-head.html %} |
||||
|
||||
<p id="demo-nav"><a href="../index.html">{{ site.name }}</a> Demo</p> |
||||
|
||||
<h1>{{ page.title }}</h1> |
||||
|
||||
<section id="copy"> |
||||
<p>Isotope’s capabilities are designed to be used together cohesively. You can do it all — filter, sort, change layout modes, add items — 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="#show-all" class="selected">show all</a></li> |
||||
<li><a href="#metalloid">metalloid</a></li> |
||||
<li><a href="#metal">metal</a></li> |
||||
<li><a href="#alkali">alkali</a></li> |
||||
<li><a href="#alkaline-earth">alkaline-earth</a></li> |
||||
<li><a href="#inner-transition">inner-transition</a></li> |
||||
<li><a href="#lanthanoid">lanthanoid</a></li> |
||||
<li><a href="#actinoid">actinoid</a></li> |
||||
<li><a href="#transition">transition</a></li> |
||||
<li><a href="#post-transition">post-transition</a></li> |
||||
<li><a href="#nonmetal">nonmetal</a></li> |
||||
<li><a href="#other">other</a></li> |
||||
<li><a href="#halogen">halogen</a></li> |
||||
<li><a href="#noble-gas">noble-gas</a></li> |
||||
</ul> |
||||
|
||||
{% include sort-buttons.html %} |
||||
|
||||
{% include layout-options.html %} |
||||
|
||||
<h3>Etc</h3> |
||||
|
||||
<ul id="etc" class="floated clearfix"> |
||||
|
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li> |
||||
<li id="insert"><a href="#insert">Insert new elements</a></li> |
||||
<li id="append"><a href='#append'>Append new elements</a></li> |
||||
<!-- <li id="shuffle"><a href='#shuffle'>Shuffle</a></li> --> |
||||
</ul> |
||||
</section> <!-- #options --> |
||||
|
||||
|
||||
|
||||
{{ content }} |
||||
|
||||
{% include footer.html %} |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/fake-element.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
{% include random-sizes.js %} |
||||
|
||||
$('#filters').find('a').click(function(){ |
||||
// get href attribute, minus the #, plus a . to make it a class |
||||
var filterName = '.' + $(this).attr('href').slice(1); |
||||
filterName = filterName === '.show-all' ? '*' : filterName; |
||||
$container.isotope({ filter: filterName }) |
||||
return false; |
||||
}); |
||||
|
||||
{% include sort-buttons.js %} |
||||
|
||||
// change size of clicked element |
||||
$container.find('.element').live('click', function(){ |
||||
$(this).toggleClass('large'); |
||||
$container.isotope('reLayout'); |
||||
}); |
||||
|
||||
// toggle variable sizes of all elements |
||||
$('#toggle-sizes').find('a').click(function(){ |
||||
$container |
||||
.toggleClass('variable-sizes') |
||||
.isotope('reLayout'); |
||||
return false; |
||||
}); |
||||
|
||||
{% include layout-change.js %} |
||||
|
||||
{% include add-buttons.js %} |
||||
|
||||
$('#shuffle a').click(function(){ |
||||
$container.isotope('shuffle'); |
||||
return false; |
||||
}); |
||||
|
||||
{% include option-buttons.js %} |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
// layoutMode : 'fitRows', |
||||
masonry : { |
||||
columnWidth : 120 |
||||
}, |
||||
masonryHorizontal : { |
||||
rowHeight: 120 |
||||
}, |
||||
cellsByRow : { |
||||
columnWidth : 240, |
||||
rowHeight : 240 |
||||
}, |
||||
cellsByColumn : { |
||||
columnWidth : 240, |
||||
rowHeight : 240 |
||||
}, |
||||
animationEngine : $.browser.opera ? 'jquery' : 'best-available', |
||||
// animationEngine : 'jquery', |
||||
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(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
|
||||
}); |
||||
</script> |
||||
|
||||
|
||||
{% include html-foot.html %} |
||||
@ -1,17 +0,0 @@
|
||||
{% include html-head.html %} |
||||
|
||||
<p id="demo-nav"><a href="../index.html">{{ site.name }}</a></p> |
||||
|
||||
<h1>{{ page.title }}</h1> |
||||
|
||||
<ul id="index-list"> |
||||
{% for post in site.categories[page.category] reversed %} |
||||
{% if post.layout != 'index-page' %} |
||||
<li><a href="{{ post.url }}">{{ post.title }}</a></li> |
||||
{% endif %} |
||||
{% endfor %} |
||||
</ul> |
||||
|
||||
{% include footer.html %} |
||||
|
||||
{% include html-foot.html %} |
||||
@ -1,31 +0,0 @@
|
||||
{% include html-head.html %} |
||||
|
||||
<p id="demo-nav"><a href="../index.html">{{ site.name }}</a> Demo</p> |
||||
|
||||
<h1>{{ page.title }}</h1> |
||||
|
||||
<div id="container" class="variable-sizes"> |
||||
{% assign page_position = page.page_position %} |
||||
{% for element in site.elements limit:20 offset:page_position %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> |
||||
|
||||
{% include footer.html %} |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
layoutMode : 'fitRows' |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
|
||||
{% include html-foot.html %} |
||||
@ -1,7 +0,0 @@
|
||||
--- |
||||
title: Demos |
||||
layout: index-page |
||||
category: demos |
||||
body_class: doc |
||||
--- |
||||
|
||||
@ -0,0 +1,190 @@
|
||||
--- |
||||
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> |
||||
</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' |
||||
}; |
||||
|
||||
|
||||
// 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'); |
||||
} |
||||
}); |
||||
|
||||
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; |
||||
}); |
||||
|
||||
|
||||
$(window).bind( 'hashchange', function( event ){ |
||||
// get options object from hash |
||||
var hashOptions = window.location.hash ? $.deparam.fragment( window.location.hash, true ) : {}, |
||||
// apply defaults where no option was specified |
||||
options = $.extend( {}, defaultOptions, hashOptions ); |
||||
// 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; |
||||
}) |
||||
// trigger hashchange to capture any hash data on init |
||||
.trigger('hashchange'); |
||||
|
||||
|
||||
}); |
||||
</script> |
||||
|
||||
@ -1,5 +0,0 @@
|
||||
--- |
||||
title: Docs |
||||
layout: index-page |
||||
category: docs |
||||
--- |
||||
@ -0,0 +1,86 @@
|
||||
--- |
||||
|
||||
title: Hash history with jQuery BBQ |
||||
category: docs |
||||
layout: default |
||||
toc: |
||||
- { title: Markup, anchor: markup } |
||||
- { title: jQuery script, anchor: jquery_script } |
||||
|
||||
--- |
||||
|
||||
As cool as Isotope is, the only thing that could make it even cooler would be adding bookmark-able URL hashes. Ben Alman's [jQuery BBQ](http://benalman.com/projects/jquery-bbq-plugin/) allows us to do just that. |
||||
|
||||
> jQuery BBQ leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history. |
||||
|
||||
[**See Demo: Hash history**](../demos/hash-history.html) |
||||
|
||||
BBQ is a marvelous plugin that provides for a lot more functionality. The [hash history demo](../demos/hash-history.html) uses multiple options (`sortBy`, `sortAscending`, and `layoutMode` in addition to `filter`), the ability to use back-button history, and properly highlights selected links. |
||||
|
||||
Given BBQ's tremendous capabilities, the code can grow to be a bit complex. Be sure to read through [BBQ's docs](http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html) and take look at [its examples](http://benalman.com/code/projects/jquery-bbq/examples/) before you dive in and code up your own solution. |
||||
|
||||
## Markup |
||||
|
||||
Instead of setting the option values and keys with `data` attributes, we can add the option in the `href` for each link. |
||||
|
||||
{% highlight html %} |
||||
|
||||
<ul class="option-set"> |
||||
<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=.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> |
||||
|
||||
{% endhighlight %} |
||||
|
||||
The `href` value is a serialized string, suitable for a URL. These values can be created with [jQuery.param()](http://api.jquery.com/jQuery.param/). |
||||
|
||||
{% highlight javascript %} |
||||
|
||||
$.param({ filter: '.metal' }) |
||||
// >> "filter=.metal" |
||||
$.param({ filter: '.alkali, alkaline-earth' }) |
||||
// >> "filter=.alkali%2C+alkaline-earth" |
||||
$.param({ filter: ':not(.transition)' }) |
||||
// >> "#filter=%3Anot(.transition)" |
||||
|
||||
{% endhighlight %} |
||||
|
||||
## jQuery script |
||||
|
||||
These serialized `href` values can be converted into their proper jQuery object form when clicked using [jQuery.deparam()](http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.deparam) from jQuery BBQ. |
||||
|
||||
{% highlight javascript %} |
||||
|
||||
$('.option-set a').click(function(){ |
||||
// 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 ); |
||||
// set hash, triggers hashchange on window |
||||
$.bbq.pushState( option ); |
||||
return false; |
||||
}); |
||||
|
||||
{% endhighlight %} |
||||
|
||||
Calling [$.bbq.pushState()](http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.bbq.pushState) will trigger the `hashchange` event. At that point, we can parse the hash from the URL and use it to trigger the proper change in the Isotope instance. |
||||
|
||||
{% highlight javascript %} |
||||
|
||||
$(window).bind( 'hashchange', function( event ){ |
||||
// get options object from hash |
||||
var hashOptions = $.deparam.fragment(); |
||||
// apply options from hash |
||||
$container.isotope( hashOptions ); |
||||
}) |
||||
// trigger hashchange to capture any hash data on init |
||||
.trigger('hashchange'); |
||||
|
||||
{% endhighlight %} |
||||
|
||||
Now any filter buttons that are clicked will update the URL hash, so these options can be bookmarked. |
||||
@ -1,7 +1,9 @@
|
||||
--- |
||||
title: Infinite Scroll Page 2 |
||||
category: pages |
||||
layout: inf-scroll-page |
||||
layout: default |
||||
page_position: 20 |
||||
infinite_scroll: true |
||||
--- |
||||
--- |
||||
|
||||
{% include inf-scroll-page.html %} |
||||
@ -1,7 +1,9 @@
|
||||
--- |
||||
title: Infinite Scroll Page 3 |
||||
category: pages |
||||
layout: inf-scroll-page |
||||
layout: default |
||||
page_position: 40 |
||||
infinite_scroll: true |
||||
--- |
||||
--- |
||||
|
||||
{% include inf-scroll-page.html %} |
||||
@ -1,7 +1,9 @@
|
||||
--- |
||||
title: Infinite Scroll Page 4 |
||||
category: pages |
||||
layout: inf-scroll-page |
||||
layout: default |
||||
page_position: 60 |
||||
infinite_scroll: true |
||||
--- |
||||
--- |
||||
|
||||
{% include inf-scroll-page.html %} |
||||
@ -1,7 +1,9 @@
|
||||
--- |
||||
title: Infinite Scroll Page 5 |
||||
category: pages |
||||
layout: inf-scroll-page |
||||
layout: default |
||||
page_position: 80 |
||||
infinite_scroll: true |
||||
--- |
||||
--- |
||||
|
||||
{% include inf-scroll-page.html %} |
||||
@ -1,7 +1,9 @@
|
||||
--- |
||||
title: Infinite Scroll Page 6 |
||||
category: pages |
||||
layout: inf-scroll-page |
||||
layout: default |
||||
page_position: 100 |
||||
infinite_scroll: true |
||||
--- |
||||
--- |
||||
|
||||
{% include inf-scroll-page.html %} |
||||
@ -0,0 +1,14 @@
|
||||
--- |
||||
title: Tests Index |
||||
layout: default |
||||
category: tests |
||||
body_class: doc |
||||
--- |
||||
|
||||
<ul> |
||||
{% for post in site.categories[page.category] reversed %} |
||||
{% if post.layout != 'index-page' %} |
||||
<li><a href="{{ post.url }}">{{ post.title }}</a></li> |
||||
{% endif %} |
||||
{% endfor %} |
||||
</ul> |
||||
@ -1,6 +0,0 @@
|
||||
--- |
||||
title: Tests |
||||
layout: index-page |
||||
category: tests |
||||
body_class: doc |
||||
--- |
||||
@ -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); |
||||
Loading…
Reference in new issue