license import { MatGridList } from './grid-list' ; import { MatGridTile } from './grid-tile' ; import { TileCoordinator } from './tile-coordinator' ; /**
 * RegExp that can be used to check whether a value will
 * be allowed inside a CSS `calc()` expression.
 */ const cssCalcAllowedValue = /^-?\d+((\.\d+)?[A-Za-z%$]?)+$/ ; docs-private export abstract class TileStyler { _gutterSize : string ; _rows : number = 0 ; _rowspan : number = 0 ; _cols : number ; _direction : string ; param gutterSize param tracker param cols param direction init ( gutterSize , tracker , cols , direction ) { this . _gutterSize = normalizeUnits ( gutterSize ) ; this . _rows = tracker . rowCount ; this . _rowspan = tracker . rowspan ; this . _cols = cols ; this . _direction = direction ; } param sizePercent param gutterFraction return getBaseTileSize ( sizePercent , gutterFraction ) { return `(${ sizePercent }% - (${ this . _gutterSize } * ${ gutterFraction }))` ; } param offset param baseSize return getTilePosition ( baseSize , offset ) { return offset === 0 ? '0' : calc ( `(${ baseSize } + ${ this . _gutterSize }) * ${ offset }` ) ; } param baseSize param span return getTileSize ( baseSize , span ) { return `(${ baseSize } * ${ span }) + (${ span - 1 } * ${ this . _gutterSize })` ; } param tile param rowIndex param colIndex setStyle ( tile , rowIndex , colIndex ) { let percentWidthPerTile = 100 / this . _cols ; let gutterWidthFractionPerTile = ( this . _cols - 1 ) / this . _cols ; this . setColStyles ( tile , colIndex , percentWidthPerTile , gutterWidthFractionPerTile ) ; this . setRowStyles ( tile , rowIndex , percentWidthPerTile , gutterWidthFractionPerTile ) ; } /** Sets the horizontal placement of the tile in the list. */ setColStyles ( tile , colIndex , percentWidth , gutterWidth ) { let baseTileWidth = this . getBaseTileSize ( percentWidth , gutterWidth ) ; let side = this . _direction === 'rtl' ? 'right' : 'left' ; tile . _setStyle ( side , this . getTilePosition ( baseTileWidth , colIndex ) ) ; tile . _setStyle ( 'width' , calc ( this . getTileSize ( baseTileWidth , tile . colspan ) ) ) ; } /**
     * Calculates the total size taken up by gutters across one axis of a list.
     */ getGutterSpan ( ) { return `${ this . _gutterSize } * (${ this . _rowspan } - 1)` ; } param tileHeight getTileSpan ( tileHeight ) { return `${ this . _rowspan } * ${ this . getTileSize ( tileHeight , 1 ) }` ; } docs-private abstract setRowStyles ( tile , rowIndex , percentWidth , gutterWidth ) ; docs-private getComputedHeight ( ) { return null ; } param list docs-private abstract reset ( list ) ; } docs-private export class FixedTileStyler extends TileStyler { constructor ( public fixedRowHeight ) { super ( ) ; } init ( gutterSize , tracker , cols , direction ) { super . init ( gutterSize , tracker , cols , direction ) ; this . fixedRowHeight = normalizeUnits ( this . fixedRowHeight ) ; if ( ! cssCalcAllowedValue . test ( this . fixedRowHeight ) ) { throw Error ( `Invalid value "${ this . fixedRowHeight }" set as rowHeight.` ) ; } } setRowStyles ( tile , rowIndex ) { tile . _setStyle ( 'top' , this . getTilePosition ( this . fixedRowHeight , rowIndex ) ) ; tile . _setStyle ( 'height' , calc ( this . getTileSize ( this . fixedRowHeight , tile . rowspan ) ) ) ; } getComputedHeight ( ) { return [ 'height' , calc ( `${ this . getTileSpan ( this . fixedRowHeight ) } + ${ this . getGutterSpan ( ) }` ) ] ; } reset ( list ) { list . _setListStyle ( [ 'height' , null ] ) ; if ( list . _tiles ) { list . _tiles . forEach ( tile => { tile . _setStyle ( 'top' , null ) ; tile . _setStyle ( 'height' , null ) ; } ) ; } } } docs-private export class RatioTileStyler extends TileStyler { /** Ratio width:height given by user to determine row height. */ rowHeightRatio : number ; baseTileHeight : string ; constructor ( value ) { super ( ) ; this . _parseRatio ( value ) ; } setRowStyles ( tile , rowIndex , percentWidth , gutterWidth ) { let percentHeightPerTile = percentWidth / this . rowHeightRatio ; this . baseTileHeight = this . getBaseTileSize ( percentHeightPerTile , gutterWidth ) ; tile . _setStyle ( 'marginTop' , this . getTilePosition ( this . baseTileHeight , rowIndex ) ) ; tile . _setStyle ( 'paddingTop' , calc ( this . getTileSize ( this . baseTileHeight , tile . rowspan ) ) ) ; } getComputedHeight ( ) { return [ 'paddingBottom' , calc ( `${ this . getTileSpan ( this . baseTileHeight ) } + ${ this . getGutterSpan ( ) }` ) ] ; } reset ( list ) { list . _setListStyle ( [ 'paddingBottom' , null ] ) ; list . _tiles . forEach ( tile => { tile . _setStyle ( 'marginTop' , null ) ; tile . _setStyle ( 'paddingTop' , null ) ; } ) ; } private _parseRatio ( value ) { const ratioParts = value . split ( ':' ) ; if ( ratioParts . length !== 2 ) { throw Error ( `mat-grid-list: invalid ratio given for row-height: "${ value }"` ) ; } this . rowHeightRatio = parseFloat ( ratioParts [ 0 ] ) / parseFloat ( ratioParts [ 1 ] ) ; } } docs-private export class FitTileStyler extends TileStyler { setRowStyles ( tile , rowIndex ) { let percentHeightPerTile = 100 / this . _rowspan ; let gutterHeightPerTile = ( this . _rows - 1 ) / this . _rows ; let baseTileHeight = this . getBaseTileSize ( percentHeightPerTile , gutterHeightPerTile ) ; tile . _setStyle ( 'top' , this . getTilePosition ( baseTileHeight , rowIndex ) ) ; tile . _setStyle ( 'height' , calc ( this . getTileSize ( baseTileHeight , tile . rowspan ) ) ) ; } reset ( list ) { if ( list . _tiles ) { list . _tiles . forEach ( tile => { tile . _setStyle ( 'top' , null ) ; tile . _setStyle ( 'height' , null ) ; } ) ; } } } /** Wraps a CSS string in a calc function */ function calc ( exp ) { return `calc(${ exp })` ; } /** Appends pixels to a CSS string if no units are given. */ function normalizeUnits ( value ) { return value . match ( /([A-Za-z%]+)$/ ) ? value : `${ value }px` ; }