From 943426a4c838aa1f897e56928c2473f961471dba Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sat, 21 May 2011 12:15:47 -0400 Subject: [PATCH 1/4] Rakefile : removed --- Rakefile | 35 ----------------------------------- _config.yml | 2 +- 2 files changed, 1 insertion(+), 36 deletions(-) delete mode 100644 Rakefile diff --git a/Rakefile b/Rakefile deleted file mode 100644 index 4f32eb6..0000000 --- a/Rakefile +++ /dev/null @@ -1,35 +0,0 @@ -# automates minifying jquery.isotope.js -# requires Google Closure Compiler http://code.google.com/closure/compiler/ -# from command line run: -# rake min COMPILER='path/to/compiler.jar' -file compiler = ENV["COMPILER"] || '../../resources/google-closure/compiler.jar' -js = 'jquery.isotope.js' -min_js = 'jquery.isotope.min.js' - -desc "Generates #{min_js}" -task :min do - unless File.exists?( compiler ) - puts "ERROR: Compiler not found at " + compiler - else - puts "Minifying jquery.isotope.js..." - sh "java -jar #{compiler} --js #{js} --js_output_file #{min_js}" - # Adds header comment - min = File.read( min_js ) - File.open( min_js, 'w') do |f| - f.write File.readlines( js )[0..9].join() - f.write min - end - end -end - -desc "Zips _site/ into isotope-site.zip on to Desktop" -task :zip do - # makes isotope-site/ directory - sh 'mkdir isotope-site;' - # copies _site/ - sh 'cp -r _site/ isotope-site;' - # zips isotope-site/ - sh 'zip -r ~/Desktop/isotope-site.zip isotope-site/;' - # removes isotope-site/ - sh 'rm -rf isotope-site;' -end \ No newline at end of file diff --git a/_config.yml b/_config.yml index 422b213..0c96e6f 100644 --- a/_config.yml +++ b/_config.yml @@ -3,7 +3,7 @@ permalink: /:categories/:title.html pygments: true isotope_js: jquery.isotope.min.js jquery_js: js/jquery-1.5.1.min.js -exclude: [ Rakefile ] +exclude: [ Makefile ] random_order: [ 11, 91, 63, 38, 4, 25, 94, 29, 60, 48, 32, 67, 33, 37, 39, 84, 40, 7, 96, 8, 97, 9, 14, 99, 15, 19, 5, 36, 114, 20, 30, 80, 13, 47, 21, 3, 22, 31, 54, 66, 55, 71, 1, 23, 41, 70, 2, 77, 117, 79, 42, 95, 46, 50, 69, 53, 56, 72, 51, 73, 59, 74, 35, 49, 101, 88, 34, 76, 102, 75, 103, 81, 58, 6, 82, 26, 27, 44, 83, 45, 86, 68, 87, 104, 105, 10, 85, 43, 12, 109, 110, 113, 28, 106, 107, 108, 115, 62, 116, 0, 57, 111, 112, 61, 89, 90, 64, 65, 92, 93, 78, 24, 98, 100, 16, 17, 18, 52 ] From c7510673c1b4d70a7e328dbe46fb9e13c6f20790 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sat, 21 May 2011 13:28:29 -0400 Subject: [PATCH 2/4] Makefile : abstract vars --- Makefile | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/Makefile b/Makefile index 8d9d0c2..000392c 100644 --- a/Makefile +++ b/Makefile @@ -1,23 +1,24 @@ JS_ENGINE ?= `which node nodejs` -ISO = jquery.isotope.js -ISO_MIN = jquery.isotope.min.js +JS = jquery.isotope.js +JS_MIN = jquery.isotope.min.js +SITE = isotope-site # minifies jquery.isotope.js # requires NodeJS and global uglify-js min: ${ISO} @@if test ! -z ${JS_ENGINE}; then \ - echo "Minifying" ${ISO}; \ - uglifyjs ${ISO} > ${ISO_MIN}.tmp; \ - echo ';' >> ${ISO_MIN}.tmp; \ - sed 's/\*\//&§/; y/§/\n/;' ${ISO_MIN}.tmp > ${ISO_MIN}; \ - rm ${ISO_MIN}.tmp; \ + echo "Minifying" ${JS}; \ + uglifyjs ${JS} > ${JS_MIN}.tmp; \ + echo ';' >> ${JS_MIN}.tmp; \ + sed 's/\*\//&§/g; y/§/\n/;' ${JS_MIN}.tmp > ${JS_MIN}; \ + rm ${JS_MIN}.tmp; \ else \ echo "NodeJS required for minification."; \ fi # creates zip file of site zip: _site - mkdir isotope-site - cp -r _site/ isotope-site - zip -r ~/Desktop/isotope-site.zip isotope-site/ - rm -rf isotope-site \ No newline at end of file + mkdir ${SITE} + cp -r _site/ ${SITE} + zip -r ~/Desktop/${SITE}.zip ${SITE}/ + rm -rf ${SITE} \ No newline at end of file From c61c13f58dea58062488b6670378f51e0130211f Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 22 May 2011 16:06:31 -0400 Subject: [PATCH 3/4] docs : add category Rows custom layout mode demo --- _posts/demos/2011-05-22-category-rows.html | 151 +++++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 _posts/demos/2011-05-22-category-rows.html diff --git a/_posts/demos/2011-05-22-category-rows.html b/_posts/demos/2011-05-22-category-rows.html new file mode 100644 index 0000000..e768a67 --- /dev/null +++ b/_posts/demos/2011-05-22-category-rows.html @@ -0,0 +1,151 @@ +--- +title: Category columns +layout: demo +category: demos +related: layouts +--- + +
+

This demo uses a custom layout mode that arranges elements into columns based on an attribute.

+
+ +
+ +

Filters

+ + + +

Etc

+ + +
+ +
+ {% for elem_number in site.random_order | limit:60 %} + {% assign element = site.elements[elem_number] %} + {% include element-partial.html %} + {% endfor %} +
+ +{% include footer.html %} + + + + + + + \ No newline at end of file From 93f3ba2d681ddd9bcd503cbbd6d32e006087d07e Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 23 May 2011 19:16:19 -0400 Subject: [PATCH 4/4] docs : re-do categoryRows logic --- _posts/demos/2011-05-22-category-rows.html | 78 ++++++++++++---------- 1 file changed, 43 insertions(+), 35 deletions(-) diff --git a/_posts/demos/2011-05-22-category-rows.html b/_posts/demos/2011-05-22-category-rows.html index e768a67..054a884 100644 --- a/_posts/demos/2011-05-22-category-rows.html +++ b/_posts/demos/2011-05-22-category-rows.html @@ -1,5 +1,5 @@ --- -title: Category columns +title: Category rows layout: demo category: demos related: layouts @@ -34,7 +34,6 @@ related: layouts @@ -45,8 +44,6 @@ related: layouts {% endfor %} -{% include footer.html %} - @@ -58,59 +55,67 @@ related: layouts _categoryRowsReset : function() { // reset namespace properties this.categoryRows = { - // the number of rows - rows : 0, + rowIndex : 0, // the x & y position in each row - positions : {} + position : { + x : this.posLeft, + y : this.posTop + } }; + this._getSegments('categoryRows', true); return this; }, _categoryRowsLayout : function( $elems ) { - var instance = this; - options = this.options.categoryRows, + var instance = this, // namespaced properties - props = this.categoryRows; + position = this.categoryRows.position, + sortBy = this.options.sortBy, + containerWidth = this.element.width(), + currentRowName, nextX; $elems.each(function(){ var $this = $(this), // get row based on function passed in options - rowName = options.getRow( $this ); - - if ( !props.positions[ rowName ] ) { - // if row does not exists, create it - props.positions[ rowName ] = { - x : instance.posLeft, - y : instance.posTop + options.rowHeight * props.rows - }; - // increment rows - props.rows ++; + rowName = $this.data('isotope-sort-data')[ sortBy ], + atomWidth = $this.outerWidth(true); + + // for new row + if ( !currentRowName ) { + currentRowName = rowName; + } else if ( currentRowName !== rowName ) { + instance._categoryRowsNewRow(); + currentRowName = rowName; } - instance._pushPosition( $this, props.positions[ rowName ].x, props.positions[ rowName ].y ); + // if item doesn't fit on row + nextX = position.x + atomWidth; + if ( nextX >= containerWidth ) { + instance._categoryRowsNewRow(); + } + + instance._pushPosition( $this, position.x, position.y ); - props.positions[ rowName ].x += $this.outerWidth(true); + position.x += atomWidth; }); return this; }, + + // convience method + _categoryRowsNewRow : function() { + var props = this.categoryRows; + props.position.x = this.posLeft; + props.position.y += props.rowHeight; + }, _categoryRowsGetContainerSize : function() { - var y = this.categoryRows.rows * this.options.categoryRows.rowHeight + this.posTop, - maxX = 0, - rowName, position; - - // get max X position from the positions object - for ( rowName in this.categoryRows.positions ) { - position = this.categoryRows.positions[ rowName ] - maxX = position.x > maxX ? position.x : maxX; - } - return { width: maxX, height: y }; + return { height: this.categoryRows.position.y + this.categoryRows.rowHeight }; }, _categoryRowsResize : function() { - return this; + this.reLayout(); } }); @@ -136,11 +141,14 @@ related: layouts itemSelector : '.element', layoutMode : 'categoryRows', categoryRows : { - rowHeight : 120, - getRow : function( $elem ) { + rowHeight : 120 + }, + getSortData : { + category : function( $elem ) { return $elem.attr('data-category'); } }, + sortBy: 'category', animationEngine : $.browser.opera ? 'jquery' : 'best-available' });