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
Unified 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. 33
      _includes/sort-buttons.html
  4. 80
      _layouts/elements.html
  5. 25
      _posts/demos/2010-12-30-filtering.html
  6. 6
      _posts/demos/2010-12-30-sorting.html
  7. 56
      _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;
});

33
_includes/sort-buttons.html
Unescape View File

@ -1,25 +1,18 @@
<h3>Sort</h3> <h3>Sort</h3>
<ul id="sort" class="sort option-set"> <ul id="sort" class="sort option-set floated clearfix" data-option-key="sortBy">
<li> <li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>original-order</a></li>
<ul class="sort asc option-set floated clearfix"> <li><a href="#sortBy=name" data-option-value="name">name</a></li>
<li><a href="#original-order" class="selected">original-order (asc)</a></li> <li><a href="#sortBy=symbol" data-option-value="symbol">symbol</a></li>
<li><a href="#name">name (asc)</a></li> <li><a href="#sortBy=number" data-option-value="number">number</a></li>
<li><a href="#symbol">symbol (asc)</a></li> <li><a href="#sortBy=weight" data-option-value="weight">weight</a></li>
<li><a href="#number">number (asc)</a></li> <li><a href="#sortBy=category" data-option-value="category">category</a></li>
<li><a href="#weight">weight (asc)</a></li>
<li><a href="#category">category (asc)</a></li>
</ul> </ul>
</li>
<li> <h3>Sort direction</h3>
<ul class="sort desc option-set floated clearfix">
<li><a href="#original-order">original-order (desc)</a></li> <ul id="sort-direction" class="option-set floated clearfix" data-option-key="sortAscending">
<li><a href="#name">name (desc)</a></li> <li><a href="#sortAscending=true" data-option-value="true" class="selected">sort ascending</a></li>
<li><a href="#symbol">symbol (desc)</a></li> <li><a href="#sortAscending=false" data-option-value="false">sort descending</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>

80
_layouts/elements.html
Unescape View File

@ -10,24 +10,7 @@
<section id="options" class="clearfix"> <section id="options" class="clearfix">
<h3>Filters</h3> {% include filter-buttons.html %}
<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 sort-buttons.html %}
@ -60,44 +43,8 @@
{% include random-sizes.js %} {% 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({ $container.isotope({
itemSelector : '.element', itemSelector : '.element',
// layoutMode : 'fitRows',
masonry : { masonry : {
columnWidth : 120 columnWidth : 120
}, },
@ -131,6 +78,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');
});
}); });
</script> </script>

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

@ -13,19 +13,7 @@ related: filtering
<section id="options" class="clearfix"> <section id="options" class="clearfix">
<h3>Filters</h3> {% include filter-buttons.html %}
<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>
</section> <!-- #options --> </section> <!-- #options -->
@ -43,19 +31,12 @@ related: filtering
var $container = $('#container'); 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({ $container.isotope({
itemSelector : '.element' itemSelector : '.element'
}); });
{% include option-set-buttons.js %}
}); });
</script> </script>

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

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

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

@ -11,24 +11,7 @@ related: layouts
<section id="options" class="clearfix"> <section id="options" class="clearfix">
<h3>Filters</h3> {% include filter-buttons.html %}
<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>
<h3>Etc</h3> <h3>Etc</h3>
@ -110,25 +93,7 @@ related: layouts
var $container = $('#container'); var $container = $('#container');
$('#filters').find('a').click(function(){ {% include random-sizes.js %}
// 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 %}
$container.isotope({ $container.isotope({
itemSelector : '.element', itemSelector : '.element',
@ -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> </script>

Write Preview
Loading…
Cancel
Save