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

demos : standardize setting options; add option-set-buttons.js include

pull/96/head
David DeSandro 14 years ago
parent
eaf1ebbf68
commit
6873a644ec
7 changed files with 111 additions and 142 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      _includes/filter-buttons.html
  2. 29
      _includes/option-set-buttons.js
  3. 37
      _includes/sort-buttons.html
  4. 82
      _layouts/elements.html
  5. 25
      _posts/demos/2010-12-30-filtering.html
  6. 6
      _posts/demos/2010-12-30-sorting.html
  7. 60
      _posts/demos/2011-05-22-category-rows.html

14
_includes/filter-buttons.html
Unescape View File

@ -0,0 +1,14 @@
<h3>Filters</h3>
<ul id="filters" class="option-set floated 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>

29
_includes/option-set-buttons.js
Unescape View File

@ -0,0 +1,29 @@
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;
}
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;
$container.isotope( options );
return false;
});

37
_includes/sort-buttons.html
Unescape View File

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

82
_layouts/elements.html
Unescape View File

@ -10,24 +10,7 @@
<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 filter-buttons.html %}
{% include sort-buttons.html %}
@ -59,45 +42,9 @@
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
},
@ -130,6 +77,31 @@
}
}
});
{% 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');
});
});

25
_posts/demos/2010-12-30-filtering.html
Unescape View File

@ -13,19 +13,7 @@ related: filtering
<section id="options" class="clearfix">
<h3>Filters</h3>
<ul id="filters" class="option-set floated clearfix">
<li><a href="#filter" data-filter="*" class="selected">show all</a></li>
<li><a href="#filter" data-filter=".metal">metal</a></li>
<li><a href="#filter" data-filter=".transition">transition</a></li>
<li><a href="#filter" data-filter=".post-transition">post-transition</a></li>
<li><a href="#filter" data-filter=".nonmetal">nonmetal</a></li>
<li><a href="#filter" data-filter=".inner-transition">inner-transition</a></li>
<li><a href="#filter" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
<li><a href="#filter" data-filter=":not(.transition)">not transition</a></li>
<li><a href="#filter" data-filter=".metal:not(.transition)">metal but not transition</a></li>
</ul>
{% include filter-buttons.html %}
</section> <!-- #options -->
@ -43,19 +31,12 @@ related: filtering
var $container = $('#container');
// filter buttons
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
{% include option-buttons.js %}
$container.isotope({
itemSelector : '.element'
});
{% include option-set-buttons.js %}
});
</script>

6
_posts/demos/2010-12-30-sorting.html
Unescape View File

@ -29,10 +29,6 @@ related: sorting
$(function(){
var $container = $('#container');
{% include sort-buttons.js %}
{% include option-buttons.js %}
$container.isotope({
itemSelector : '.element',
@ -55,5 +51,7 @@ related: sorting
}
});
{% include option-set-buttons.js %}
});
</script>

60
_posts/demos/2011-05-22-category-rows.html
Unescape View File

@ -11,24 +11,7 @@ related: layouts
<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 filter-buttons.html %}
<h3>Etc</h3>
@ -109,27 +92,9 @@ related: layouts
$(function(){
var $container = $('#container');
$('#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 add-buttons.js %}
// toggle variable sizes of all elements
$('#toggle-sizes').find('a').click(function(){
$container
.toggleClass('variable-sizes')
.isotope('reLayout');
return false;
});
{% include option-buttons.js %}
{% include random-sizes.js %}
$container.isotope({
itemSelector : '.element',
layoutMode : 'categoryRows',
@ -146,6 +111,23 @@ related: layouts
});
{% include option-set-buttons.js %}
{% include add-buttons.js %}
// toggle variable sizes of all elements
$('#toggle-sizes').find('a').click(function(){
$container
.toggleClass('variable-sizes')
.isotope('reLayout');
return false;
});
});
</script>

Write Preview
Loading…
Cancel
Save