isotope/layout-mode.js

( function( window ) {

'use strict';

// --------------------------  -------------------------- //

function layoutModeDefinition( getSize, Outlayer ) {

var layoutMode = {};

layoutMode.modes = {};

layoutMode.create = function( namespace, options ) {
  // layout mode class
  function LayoutMode( isotope ) {
    this.isotope = isotope;
    // link properties
    if ( isotope ) {
      this.options = isotope.options[ this.namespace ];
      this._getMeasurement = isotope._getMeasurement;
      this.element = isotope.element;
      this.items = isotope.filteredItems;
      this.size = isotope.size;
    }
  }

  // default options
  if ( options ) {
    LayoutMode.options = options;
  }

  LayoutMode.prototype.namespace = namespace;
  // register in Isotope
  layoutMode.modes[ namespace ] = LayoutMode;


  /**
   * some methods should just defer to default Outlayer method
   * and reference the Isotope instance as `this`
  **/
  ( function() {
    var facadeMethods = [
      '_resetLayout',
      '_getItemLayoutPosition',
      '_manageStamp',
      '_getContainerSize',
      '_getElementOffset',
      'resize',
      'layout'
    ];

    for ( var i=0, len = facadeMethods.length; i < len; i++ ) {
      var methodName = facadeMethods[i];
      LayoutMode.prototype[ methodName ] = getOutlayerMethod( methodName );
    }

    function getOutlayerMethod( methodName ) {
      return function() {
        return Outlayer.prototype[ methodName ].apply( this.isotope, arguments );
      };
    }
  })();

  // -----  ----- //

  // for horizontal layout modes, check vertical size
  LayoutMode.prototype.resizeVertical = function() {
    // don't trigger if size did not change
    var size = getSize( this.isotope.element );
    // check that this.size and size are there
    // IE8 triggers resize on body size change, so they might not be
    var hasSizes = this.isotope.size && size;
    if ( hasSizes && size.innerHeight === this.isotope.size.innerHeight ) {
      return;
    }

    this.isotope.layout();
  };

  // ----- measurements ----- //

  LayoutMode.prototype.getColumnWidth = function() {
    this._getMeasurement( 'columnWidth', 'outerWidth' );
    if ( this.columnWidth ) {
      // got column width, we can chill
      return;
    }
    // columnWidth fall back to item of first element
    var firstItemSize = this.getFirstItemSize();
    this.columnWidth = firstItemSize && firstItemSize.outerWidth ||
      // or size of container
      this.isotope.size.innerWidth;
  };

  LayoutMode.prototype.getRowHeight = function() {
    this._getMeasurement( 'rowHeight', 'outerHeight' );
    if ( this.rowHeight ) {
      // got rowHeight, we can chill
      return;
    }
    // columnWidth fall back to item of first element
    var firstItemSize = this.getFirstItemSize();
    this.rowHeight = firstItemSize && firstItemSize.outerHeight ||
      // or size of container
      this.isotope.size.innerHeight;
  };

  LayoutMode.prototype.getFirstItemSize = function() {
    var firstItem = this.isotope.filteredItems[0];
    return firstItem && firstItem.element && getSize( firstItem.element );
  };

  // ----- methods that should reference isotope ----- //

  LayoutMode.prototype.getSize = function() {
    this.isotope.getSize();
    this.size = this.isotope.size;
  };

  // -----  ----- //

  return LayoutMode;
};


return layoutMode;

}

if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( [
      'get-size/get-size',
      'outlayer/outlayer'
    ],
    layoutModeDefinition );
} else {
  // browser global
  window.Isotope = window.Isotope || {};
  window.Isotope.layoutMode = layoutModeDefinition(
    window.getSize,
    window.Outlayer
  );
}


})( window );