From 1ecb92f360cd88ef63dacf7fba99b2a96928b072 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Tue, 13 Aug 2013 22:56:21 -0400 Subject: [PATCH] add sorter munging --- examples/sorting.html | 32 ++++++++++------- item.js | 83 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 103 insertions(+), 12 deletions(-) diff --git a/examples/sorting.html b/examples/sorting.html index 6e27cbc..8ea3678 100644 --- a/examples/sorting.html +++ b/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'); } + + } }); diff --git a/item.js b/item.js index b521d2f..4a2fe36 100644 --- a/item.js +++ b/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; }