isotope/item.js

/**
 * Packery Item Element
**/

( function( window ) {

'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 ) {

// sub-class Outlayer Item
function Item() {
  Outlayer.Item.apply( this, arguments );
}

Item.prototype = new Outlayer.Item();

Item.prototype._create = function() {
  // assign id, used for original-order sorting
  this.id = this.layout.itemGUID++;
  Outlayer.Item.prototype._create.call( this );
  this.sortData = {};
};

Item.prototype.updateSortData = function() {
  // default sorters
  this.sortData.id = this.id;
  // for backward compatibility
  this.sortData['original-order'] = this.id;
  this.sortData.random = Math.random();
  // go thru getSortData obj and apply the sorters
  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;
  }
  // parse the sorter string
  var args = trim( sorter ).split(' ');
  var query = args[0];
  // check if query looks like [an-attribute]
  var attrMatch = query.match( /^\[(.+)\]$/ );
  var attr = attrMatch && attrMatch[1];
  var getValue = getValueGetter( attr, query );
  // use second argument as a parser
  var parser = getParser( args[1] );
  // 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;
}

// get an attribute getter, or get text of the querySelector
function getValueGetter( attr, query ) {
  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 ) );
    };
  }
  return getValue;
}

// return a parser function if arg matches
function getParser( arg ) {
  var parser;
  switch ( arg ) {
    case 'parseInt' :
      parser = function( val ) {
        return parseInt( val, 10 );
      };
      break;
    case 'parseFloat' :
      parser = function( val ) {
        return parseFloat( val );
      };
  }
  return parser;
}

return Item;

}

// -------------------------- transport -------------------------- //

if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( [
      'outlayer/outlayer'
    ],
    itemDefinition );
} else {
  // browser global
  window.Isotope = window.Isotope || {};
  window.Isotope.Item = itemDefinition(
    window.Outlayer
  );
}

})( window );