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

demos : use option-set-buttons.js where possible

pull/96/head
David DeSandro 14 years ago
parent
6873a644ec
commit
07ef99e143
11 changed files with 68 additions and 167 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. 2
      _includes/add-buttons.js
  2. 22
      _includes/layout-change.js
  3. 23
      _includes/layout-options.html
  4. 14
      _includes/option-set-buttons.js
  5. 13
      _includes/sort-buttons.js
  6. 12
      _posts/demos/2010-12-29-layout-modes.html
  7. 33
      _posts/tests/2011-03-27-flash01.html
  8. 2
      _posts/tests/2011-04-26-item-position-data01.html
  9. 60
      _posts/tests/2011-05-13-jquery-animation01.html
  10. 35
      _posts/tests/2011-05-18-centered-masonry.html
  11. 19
      _posts/tests/2011-05-24-elements-complete-test.html

2
_includes/add-buttons.js
Unescape View File

@ -1,3 +1,4 @@
$('#insert a').click(function(){
var $newEls = $( fakeElement.getGroup() );
$container.isotope( 'insert', $newEls );
@ -11,4 +12,3 @@
return false;
});

22
_includes/layout-change.js
Unescape View File

@ -1,28 +1,24 @@
// change layout
var isHorizontal = false;
$('#layouts a').click(function(){
var $this = $(this),
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;
});
}

23
_includes/layout-options.html
Unescape View File

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

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

@ -4,14 +4,11 @@
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return;
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
@ -22,8 +19,13 @@
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
$container.isotope( options );
if ( key === 'layoutMode' && changeLayoutMode ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
}
return false;
});

13
_includes/sort-buttons.js
Unescape View File

@ -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;
});

12
_posts/demos/2010-12-29-layout-modes.html
Unescape View File

@ -30,11 +30,7 @@ related: layouts
var $container = $('#container');
{% include random-sizes.js %}
{% include layout-change.js %}
{% include option-buttons.js %}
$container.isotope({
itemSelector : '.element',
masonry : {
@ -53,6 +49,12 @@ related: layouts
}
});
{% include layout-change.js %}
{% include option-set-buttons.js %}
});
</script>

33
_posts/tests/2011-03-27-flash01.html
Unescape View File

@ -29,13 +29,12 @@ category: tests
<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-link" data-filter=".link">link</a></li>
<li><a href="#filter-audio" data-filter=".audio">audio</a></li>
<li><a href="#filter-video" data-filter=".video">video</a></li>
<li><a href="#filter-photo" data-filter=".photo">photo</a></li>
<ul id="filters" class="option-set floated clearfix" data-option-key="filter">
<li><a href="#filter-show-all" data-option-value="*" class="selected">show all</a></li>
<li><a href="#filter-link" data-option-value=".link">link</a></li>
<li><a href="#filter-audio" data-option-value=".audio">audio</a></li>
<li><a href="#filter-video" data-option-value=".video">video</a></li>
<li><a href="#filter-photo" data-option-value=".photo">photo</a></li>
</ul>
</section> <!-- #options -->
@ -113,24 +112,6 @@ category: tests
var $container = $('#container');
$('#filters a').click(function(){
var filterName = $(this).attr('data-filter');
$container.isotope({ filter : filterName });
return false;
});
// switches selected class on buttons
$('#options').find('.option-set a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( !$this.hasClass('selected') ) {
$this.parents('.option-set').find('.selected').removeClass('selected');
$this.addClass('selected');
}
});
$container.imagesLoaded(function(){
$container.isotope({
transformsEnabled: false,
@ -141,5 +122,7 @@ category: tests
});
});
{% include option-set-buttons.js %}
});
</script>

2
_posts/tests/2011-04-26-item-position-data01.html
Unescape View File

@ -36,7 +36,7 @@ category: tests
{% include random-sizes.js %}
{% include sort-buttons.js %}
{% include option-set-buttons.js %}
// toggle variable sizes of all elements
$('#toggle-sizes').find('a').click(function(){

60
_posts/tests/2011-05-13-jquery-animation01.html
Unescape View File

@ -19,24 +19,8 @@ category: tests
<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 %}
@ -63,32 +47,6 @@ category: tests
{% include random-sizes.js %}
{% include sort-buttons.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 option-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;
});
$container.isotope({
itemSelector: '.element',
transformsEnabled: false,
@ -114,6 +72,22 @@ category: tests
}
}
});
{% include option-set-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;
});
});
</script>

35
_posts/tests/2011-05-18-centered-masonry.html
Unescape View File

@ -16,24 +16,7 @@ category: tests
<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 %}
@ -124,6 +107,7 @@ category: tests
var $container = $('#container');
{% include random-sizes.js %}
$container.isotope({
itemSelector : '.element',
@ -150,19 +134,8 @@ category: tests
}
});
{% include option-set-buttons.js %}
{% include random-sizes.js %}
{% include sort-buttons.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;
});
// change size of clicked element
$container.find('.element').live('click', function(){
$(this).toggleClass('large');
@ -184,7 +157,7 @@ category: tests
return false;
});
{% include option-buttons.js %}
});

19
_posts/tests/2011-05-24-elements-complete-test.html
Unescape View File

@ -10,24 +10,7 @@ category: tests
<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 %}

Write Preview
Loading…
Cancel
Save