From 07ef99e1437f5f860a55a5eb32ac1c605c08fd55 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 15 Jun 2011 08:10:37 -0400 Subject: [PATCH] demos : use option-set-buttons.js where possible --- _includes/add-buttons.js | 2 +- _includes/layout-change.js | 22 +++---- _includes/layout-options.html | 23 +++---- _includes/option-set-buttons.js | 14 +++-- _includes/sort-buttons.js | 13 ---- _posts/demos/2010-12-29-layout-modes.html | 12 ++-- _posts/tests/2011-03-27-flash01.html | 33 +++------- .../2011-04-26-item-position-data01.html | 2 +- .../tests/2011-05-13-jquery-animation01.html | 60 ++++++------------- _posts/tests/2011-05-18-centered-masonry.html | 35 ++--------- .../2011-05-24-elements-complete-test.html | 19 +----- 11 files changed, 68 insertions(+), 167 deletions(-) delete mode 100644 _includes/sort-buttons.js diff --git a/_includes/add-buttons.js b/_includes/add-buttons.js index 62e2797..699c55e 100644 --- a/_includes/add-buttons.js +++ b/_includes/add-buttons.js @@ -1,3 +1,4 @@ + $('#insert a').click(function(){ var $newEls = $( fakeElement.getGroup() ); $container.isotope( 'insert', $newEls ); @@ -11,4 +12,3 @@ return false; }); - \ No newline at end of file diff --git a/_includes/layout-change.js b/_includes/layout-change.js index 5898340..4dcf825 100644 --- a/_includes/layout-change.js +++ b/_includes/layout-change.js @@ -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; - }); \ No newline at end of file + } diff --git a/_includes/layout-options.html b/_includes/layout-options.html index 1d950c7..3cacfc0 100644 --- a/_includes/layout-options.html +++ b/_includes/layout-options.html @@ -1,12 +1,13 @@ -

Layout modes

- \ No newline at end of file +

Layout modes

+ + diff --git a/_includes/option-set-buttons.js b/_includes/option-set-buttons.js index 81e0b5d..ab930c0 100644 --- a/_includes/option-set-buttons.js +++ b/_includes/option-set-buttons.js @@ -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; }); diff --git a/_includes/sort-buttons.js b/_includes/sort-buttons.js deleted file mode 100644 index 6871b11..0000000 --- a/_includes/sort-buttons.js +++ /dev/null @@ -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; - }); \ No newline at end of file diff --git a/_posts/demos/2010-12-29-layout-modes.html b/_posts/demos/2010-12-29-layout-modes.html index c8f47e2..2f37636 100644 --- a/_posts/demos/2010-12-29-layout-modes.html +++ b/_posts/demos/2010-12-29-layout-modes.html @@ -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 %} + + + }); diff --git a/_posts/tests/2011-03-27-flash01.html b/_posts/tests/2011-03-27-flash01.html index 3011aab..b3b9e0e 100644 --- a/_posts/tests/2011-03-27-flash01.html +++ b/_posts/tests/2011-03-27-flash01.html @@ -29,13 +29,12 @@ category: tests

Filters

-