src/components/gridList/grid-list.js
function getTileStyle(position, spans, colCount, rowCount, gutter, rowMode, rowHeight) {
      // TODO(shyndman): There are style caching opportunities here.

      // Percent of the available horizontal space that one column takes up.
      var hShare = (1 / colCount) * 100;

      // Fraction of the gutter size that each column takes up.
      var hGutterShare = (colCount - 1) / colCount;

      // Base horizontal size of a column.
      var hUnit = UNIT({share: hShare, gutterShare: hGutterShare, gutter: gutter});

      // The width and horizontal position of each tile is always calculated the same way, but the
      // height and vertical position depends on the rowMode.
      var ltr = document.dir != 'rtl' && document.body.dir != 'rtl';
      var style = ltr ? {
          left: POSITION({ unit: hUnit, offset: position.col, gutter: gutter }),
          width: DIMENSION({ unit: hUnit, span: spans.col, gutter: gutter }),
          // resets
          paddingTop: '',
          marginTop: '',
          top: '',
          height: ''
        } : {
        right: POSITION({ unit: hUnit, offset: position.col, gutter: gutter }),
        width: DIMENSION({ unit: hUnit, span: spans.col, gutter: gutter }),
        // resets
        paddingTop: '',
        marginTop: '',
        top: '',
        height: ''
      };

      switch (rowMode) {
        case 'fixed':
          // In fixed mode, simply use the given rowHeight.
          style.top = POSITION({ unit: rowHeight, offset: position.row, gutter: gutter });
          style.height = DIMENSION({ unit: rowHeight, span: spans.row, gutter: gutter });
          break;

        case 'ratio':
          // Percent of the available vertical space that one row takes up. Here, rowHeight holds
          // the ratio value. For example, if the width:height ratio is 4:3, rowHeight = 1.333.
          var vShare = hShare / rowHeight;

          // Base veritcal size of a row.
          var vUnit = UNIT({ share: vShare, gutterShare: hGutterShare, gutter: gutter });

          // padidngTop and marginTop are used to maintain the given aspect ratio, as
          // a percentage-based value for these properties is applied to the *width* of the
          // containing block. See http://www.w3.org/TR/CSS2/box.html#margin-properties
          style.paddingTop = DIMENSION({ unit: vUnit, span: spans.row, gutter: gutter});
          style.marginTop = POSITION({ unit: vUnit, offset: position.row, gutter: gutter });
          break;

        case 'fit':
          // Fraction of the gutter size that each column takes up.
          var vGutterShare = (rowCount - 1) / rowCount;

          // Percent of the available vertical space that one row takes up.
          vShare = (1 / rowCount) * 100;

          // Base vertical size of a row.
          vUnit = UNIT({share: vShare, gutterShare: vGutterShare, gutter: gutter});

          style.top = POSITION({unit: vUnit, offset: position.row, gutter: gutter});
          style.height = DIMENSION({unit: vUnit, span: spans.row, gutter: gutter});
          break;
      }

      return style;
    }
function getTileStyle(position, spans, colCount, rowCount, gutter, rowMode, rowHeight) {
      // TODO(shyndman): There are style caching opportunities here.

      // Percent of the available horizontal space that one column takes up.
      var hShare = (1 / colCount) * 100;

      // Fraction of the gutter size that each column takes up.
      var hGutterShare = (colCount - 1) / colCount;

      // Base horizontal size of a column.
      var hUnit = UNIT({share: hShare, gutterShare: hGutterShare, gutter: gutter});

      // The width and horizontal position of each tile is always calculated the same way, but the
      // height and vertical position depends on the rowMode.
      var ltr = document.dir != 'rtl' && document.body.dir != 'rtl';
      var style = ltr ? {
          left: POSITION({ unit: hUnit, offset: position.col, gutter: gutter }),
          width: DIMENSION({ unit: hUnit, span: spans.col, gutter: gutter }),
          // resets
          paddingTop: '',
          marginTop: '',
          top: '',
          height: ''
        } : {
        right: POSITION({ unit: hUnit, offset: position.col, gutter: gutter }),
        width: DIMENSION({ unit: hUnit, span: spans.col, gutter: gutter }),
        // resets
        paddingTop: '',
        marginTop: '',
        top: '',
        height: ''
      };

      switch (rowMode) {
        case 'fixed':
          // In fixed mode, simply use the given rowHeight.
          style.top = POSITION({ unit: rowHeight, offset: position.row, gutter: gutter });
          style.height = DIMENSION({ unit: rowHeight, span: spans.row, gutter: gutter });
          break;

        case 'ratio':
          // Percent of the available vertical space that one row takes up. Here, rowHeight holds
          // the ratio value. For example, if the width:height ratio is 4:3, rowHeight = 1.333.
          var vShare = hShare / rowHeight;

          // Base veritcal size of a row.
          var vUnit = UNIT({ share: vShare, gutterShare: hGutterShare, gutter: gutter });

          // padidngTop and marginTop are used to maintain the given aspect ratio, as
          // a percentage-based value for these properties is applied to the *width* of the
          // containing block. See http://www.w3.org/TR/CSS2/box.html#margin-properties
          style.paddingTop = DIMENSION({ unit: vUnit, span: spans.row, gutter: gutter});
          style.marginTop = POSITION({ unit: vUnit, offset: position.row, gutter: gutter });
          break;

        case 'fit':
          // Fraction of the gutter size that each column takes up.
          var vGutterShare = (rowCount - 1) / rowCount;

          // Percent of the available vertical space that one row takes up.
          vShare = (1 / rowCount) * 100;

          // Base vertical size of a row.
          vUnit = UNIT({share: vShare, gutterShare: vGutterShare, gutter: gutter});

          style.top = POSITION({unit: vUnit, offset: position.row, gutter: gutter});
          style.height = DIMENSION({unit: vUnit, span: spans.row, gutter: gutter});
          break;
      }

      return style;
    }
function getTileStyle ( position , spans , colCount , rowCount , gutter , rowMode , rowHeight ) { // TODO(shyndman): There are style caching opportunities here. // Percent of the available horizontal space that one column takes up. var hShare = ( 1 / colCount ) * 100 ; // Fraction of the gutter size that each column takes up. var hGutterShare = ( colCount - 1 ) / colCount ; // Base horizontal size of a column. var hUnit = UNIT ( { share : hShare , gutterShare : hGutterShare , gutter : gutter } ) ; // The width and horizontal position of each tile is always calculated the same way, but the // height and vertical position depends on the rowMode. var ltr = document . dir != 'rtl' && document . body . dir != 'rtl' ; var style = ltr ? { left : POSITION ( { unit : hUnit , offset : position . col , gutter : gutter } ) , width : DIMENSION ( { unit : hUnit , span : spans . col , gutter : gutter } ) , // resets paddingTop : '' , marginTop : '' , top : '' , height : '' } : { right : POSITION ( { unit : hUnit , offset : position . col , gutter : gutter } ) , width : DIMENSION ( { unit : hUnit , span : spans . col , gutter : gutter } ) , // resets paddingTop : '' , marginTop : '' , top : '' , height : '' } ; switch ( rowMode ) { case 'fixed' : // In fixed mode, simply use the given rowHeight. style . top = POSITION ( { unit : rowHeight , offset : position . row , gutter : gutter } ) ; style . height = DIMENSION ( { unit : rowHeight , span : spans . row , gutter : gutter } ) ; break ; case 'ratio' : // Percent of the available vertical space that one row takes up. Here, rowHeight holds // the ratio value. For example, if the width:height ratio is 4:3, rowHeight = 1.333. var vShare = hShare / rowHeight ; // Base veritcal size of a row. var vUnit = UNIT ( { share : vShare , gutterShare : hGutterShare , gutter : gutter } ) ; // padidngTop and marginTop are used to maintain the given aspect ratio, as // a percentage-based value for these properties is applied to the *width* of the // containing block. See http://www.w3.org/TR/CSS2/box.html#margin-properties style . paddingTop = DIMENSION ( { unit : vUnit , span : spans . row , gutter : gutter } ) ; style . marginTop = POSITION ( { unit : vUnit , offset : position . row , gutter : gutter } ) ; break ; case 'fit' : // Fraction of the gutter size that each column takes up. var vGutterShare = ( rowCount - 1 ) / rowCount ; // Percent of the available vertical space that one row takes up. vShare = ( 1 / rowCount ) * 100 ; // Base vertical size of a row. vUnit = UNIT ( { share : vShare , gutterShare : vGutterShare , gutter : gutter } ) ; style . top = POSITION ( { unit : vUnit , offset : position . row , gutter : gutter } ) ; style . height = DIMENSION ( { unit : vUnit , span : spans . row , gutter : gutter } ) ; break ; } return style ; }
Gets the styles applied to a tile element described by the given parameters.
@param {{row: number, col: number}} position The row and column indices of the tile.
@param {{row: number, col: number}} spans The rowSpan and colSpan of the tile.
@param {number} colCount The number of columns.
@param {number} rowCount The number of rows.
@param {string} gutter The amount of space between tiles. This will be something like
'5px' or '2em'.
@param {string} rowMode The row height mode. Can be one of:
'fixed': all rows have a fixed size, given by rowHeight,
'ratio': row height defined as a ratio to width, or
'fit': fit to the grid-list element height, divinding evenly among rows.
@param {string|number} rowHeight The height of a row. This is only used for 'fixed' mode and
for 'ratio' mode. For 'ratio' mode, this is the *ratio* of width-to-height (e.g., 0.75).
@returns {Object} Map of CSS properties to be applied to the style element. Will define
values for top, left, width, height, marginTop, and paddingTop.
Gets the styles applied to a tile element described by the given parameters .