add sorter munging

examples/sorting.html

@@ -152,22 +152,30 @@ docReady( function() {
   var iso = window.iso = new Isotope( container, {
     layoutMode: 'fitRows',
     getSortData: {
-      number: function( itemElem ) {
-        return parseInt( getText( itemElem.querySelector('.number') ), 10 );
-      },
-      symbol: function( itemElem ) {
-        return getText( itemElem.querySelector('.symbol') );
-      },
-      name: function( itemElem ) {
-        return getText( itemElem.querySelector('.name') );
-      },
+      // number: function( itemElem ) {
+      //   return parseInt( getText( itemElem.querySelector('.number') ), 10 );
+      // },
+      // symbol: function( itemElem ) {
+      //   return getText( itemElem.querySelector('.symbol') );
+      // },
+      // name: function( itemElem ) {
+      //   return getText( itemElem.querySelector('.name') );
+      // },
+      // category: function( itemElem ) {
+      //   return itemElem.getAttribute('data-category');
+      // },
+
+      number: '.number parseInt',
+      symbol: '.symbol',
+      name: '.name',
+      category: '[data-category]',
+
       weight: function( itemElem ) {
         // remove parenthesis
         return parseFloat( getText( itemElem.querySelector('.weight') ).replace( /[\(\)]/g, '') );
-      },
-      category: function( itemElem ) {
-        return itemElem.getAttribute('data-category');
       }
+
+
     }
   });
 

item.js

@@ -6,6 +6,30 @@
 
 'use strict';
 
+// -------------------------- helpers -------------------------- //
+
+// trim
+
+var trim = String.prototype.trim ?
+  function( str ) {
+    return str.trim();
+  } :
+  function( str ) {
+    return str.replace( /^\s+|\s+$/g, '' );
+  };
+
+
+var docElem = document.documentElement;
+
+var getText = docElem.textContent ?
+  function( elem ) {
+    return elem.textContent;
+  } :
+  function( elem ) {
+    return elem.innerText;
+  };
+
+
 // -------------------------- Item -------------------------- //
 
 function itemDefinition( Outlayer ) {
@@ -34,10 +58,69 @@ Item.prototype.updateSortData = function() {
   var getSortData = this.layout.options.getSortData;
   for ( var key in getSortData ) {
     var sorter = getSortData[ key ];
+    sorter = mungeSorter( sorter );
     this.sortData[ key ] = sorter( this.element, this );
   }
 };
 
+// add a magic layer to sorters
+// for convienent shorthands
+// .foo-bar will use the text of .foo-bar querySelector
+// [foo-bar] will use attribute
+// you can also add parser
+// `.foo-bar parseInt` will parse that as a number
+function mungeSorter( sorter ) {
+  if ( typeof sorter !== 'string' ) {
+    return sorter;
+  }
+
+  var args = trim( sorter ).split(' ');
+  var parser;
+
+  // use second argument as a parser
+  switch ( args[1] ) {
+    case 'parseInt' :
+      parser = function( val ) {
+        return parseInt( val, 10 );
+      };
+      break;
+    case 'parseFloat' :
+      parser = function( val ) {
+        return parseFloat( val );
+      };
+  }
+
+  var query = args[0];
+  var attrMatch = query.match( /^\[(.+)\]$/ );
+  var attr = attrMatch && attrMatch[1];
+
+
+  var getValue;
+
+  // if query looks like [foo-bar], get attribute
+  if ( attr ) {
+    getValue = function( elem ) {
+      return elem.getAttribute( attr );
+    };
+  } else {
+    // otherwise, assume its a querySelector, and get its text
+    getValue = function( elem ) {
+      return getText( elem.querySelector( query ) );
+    };
+  }
+
+  // parse the value, if there was a parser
+  sorter = parser ? function( elem ) {
+    return parser( getValue( elem ) );
+  } :
+  // otherwise just return value
+  function( elem ) {
+    return getValue( elem );
+  };
+
+  return sorter;
+}
+
 return Item;
 
 }