@material-git/all
Version:
Angular 2 Material
191 lines (189 loc) • 9.81 kB
JavaScript
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
import { MdGridListBadRatioError } from './grid-list-errors';
/**
* Sets the style properties for an individual tile, given the position calculated by the
* Tile Coordinator.
* TODO: internal
*/
export var TileStyler = (function () {
function TileStyler() {
this._rows = 0;
this._rowspan = 0;
}
/**
* Adds grid-list layout info once it is available. Cannot be processed in the constructor
* because these properties haven't been calculated by that point.
*/
TileStyler.prototype.init = function (_gutterSize, tracker, cols, direction) {
this._gutterSize = normalizeUnits(_gutterSize);
this._rows = tracker.rowCount;
this._rowspan = tracker.rowspan;
this._cols = cols;
this._direction = direction;
};
/**
* Computes the amount of space a single 1x1 tile would take up (width or height).
* Used as a basis for other calculations.
* @param sizePercent Percent of the total grid-list space that one 1x1 tile would take up.
* @param gutterFraction Fraction of the gutter size taken up by one 1x1 tile.
* @return The size of a 1x1 tile as an expression that can be evaluated via CSS calc().
*/
TileStyler.prototype.getBaseTileSize = function (sizePercent, gutterFraction) {
// Take the base size percent (as would be if evenly dividing the size between cells),
// and then subtracting the size of one gutter. However, since there are no gutters on the
// edges, each tile only uses a fraction (gutterShare = numGutters / numCells) of the gutter
// size. (Imagine having one gutter per tile, and then breaking up the extra gutter on the
// edge evenly among the cells).
return "(" + sizePercent + "% - ( " + this._gutterSize + " * " + gutterFraction + " ))";
};
/**
* Gets The horizontal or vertical position of a tile, e.g., the 'top' or 'left' property value.
* @param offset Number of tiles that have already been rendered in the row/column.
* @param baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).
* @return Position of the tile as a CSS calc() expression.
*/
TileStyler.prototype.getTilePosition = function (baseSize, offset) {
// The position comes the size of a 1x1 tile plus gutter for each previous tile in the
// row/column (offset).
return calc("(" + baseSize + " + " + this._gutterSize + ") * " + offset);
};
/**
* Gets the actual size of a tile, e.g., width or height, taking rowspan or colspan into account.
* @param baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).
* @param span The tile's rowspan or colspan.
* @return Size of the tile as a CSS calc() expression.
*/
TileStyler.prototype.getTileSize = function (baseSize, span) {
return "(" + baseSize + " * " + span + ") + (" + (span - 1) + " * " + this._gutterSize + ")";
};
/** Gets the style properties to be applied to a tile for the given row and column index. */
TileStyler.prototype.setStyle = function (tile, rowIndex, colIndex) {
// Percent of the available horizontal space that one column takes up.
var percentWidthPerTile = 100 / this._cols;
// Fraction of the vertical gutter size that each column takes up.
// For example, if there are 5 columns, each column uses 4/5 = 0.8 times the gutter width.
var 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. */
TileStyler.prototype.setColStyles = function (tile, colIndex, percentWidth, gutterWidth) {
// Base horizontal size of a column.
var baseTileWidth = this.getBaseTileSize(percentWidth, gutterWidth);
// 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 side = this._direction === 'ltr' ? 'left' : 'right';
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. */
TileStyler.prototype.getGutterSpan = function () {
return this._gutterSize + " * (" + this._rowspan + " - 1)";
};
/** Calculates the total size taken up by tiles across one axis of a list. */
TileStyler.prototype.getTileSpan = function (tileHeight) {
return this._rowspan + " * " + this.getTileSize(tileHeight, 1);
};
/**
* Sets the vertical placement of the tile in the list.
* This method will be implemented by each type of TileStyler.
*/
TileStyler.prototype.setRowStyles = function (tile, rowIndex, percentWidth, gutterWidth) { };
/**
* Calculates the computed height and returns the correct style property to set.
* This method will be implemented by each type of TileStyler.
*/
TileStyler.prototype.getComputedHeight = function () { return null; };
return TileStyler;
}());
/**
* This type of styler is instantiated when the user passes in a fixed row height.
* Example <md-grid-list cols="3" rowHeight="100px">
* TODO: internal
*/
export var FixedTileStyler = (function (_super) {
__extends(FixedTileStyler, _super);
function FixedTileStyler(fixedRowHeight) {
_super.call(this);
this.fixedRowHeight = fixedRowHeight;
}
FixedTileStyler.prototype.init = function (gutterSize, tracker, cols, direction) {
_super.prototype.init.call(this, gutterSize, tracker, cols, direction);
this.fixedRowHeight = normalizeUnits(this.fixedRowHeight);
};
FixedTileStyler.prototype.setRowStyles = function (tile, rowIndex, percentWidth, gutterWidth) {
tile._setStyle('top', this.getTilePosition(this.fixedRowHeight, rowIndex));
tile._setStyle('height', calc(this.getTileSize(this.fixedRowHeight, tile.rowspan)));
};
FixedTileStyler.prototype.getComputedHeight = function () {
return [
'height', calc(this.getTileSpan(this.fixedRowHeight) + " + " + this.getGutterSpan())
];
};
return FixedTileStyler;
}(TileStyler));
/**
* This type of styler is instantiated when the user passes in a width:height ratio
* for the row height. Example <md-grid-list cols="3" rowHeight="3:1">
* TODO: internal
*/
export var RatioTileStyler = (function (_super) {
__extends(RatioTileStyler, _super);
function RatioTileStyler(value) {
_super.call(this);
this._parseRatio(value);
}
RatioTileStyler.prototype.setRowStyles = function (tile, rowIndex, percentWidth, gutterWidth) {
var percentHeightPerTile = percentWidth / this.rowHeightRatio;
this.baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterWidth);
// Use paddingTop and marginTop to maintain the given aspect ratio, as
// a percentage-based value for these properties is applied versus the *width* of the
// containing block. See http://www.w3.org/TR/CSS2/box.html#margin-properties
tile._setStyle('marginTop', this.getTilePosition(this.baseTileHeight, rowIndex));
tile._setStyle('paddingTop', calc(this.getTileSize(this.baseTileHeight, tile.rowspan)));
};
RatioTileStyler.prototype.getComputedHeight = function () {
return [
'paddingBottom', calc(this.getTileSpan(this.baseTileHeight) + " + " + this.getGutterSpan())
];
};
RatioTileStyler.prototype._parseRatio = function (value) {
var ratioParts = value.split(':');
if (ratioParts.length !== 2) {
throw new MdGridListBadRatioError(value);
}
this.rowHeightRatio = parseFloat(ratioParts[0]) / parseFloat(ratioParts[1]);
};
return RatioTileStyler;
}(TileStyler));
/* This type of styler is instantiated when the user selects a "fit" row height mode.
* In other words, the row height will reflect the total height of the container divided
* by the number of rows. Example <md-grid-list cols="3" rowHeight="fit"> */
export var FitTileStyler = (function (_super) {
__extends(FitTileStyler, _super);
function FitTileStyler() {
_super.apply(this, arguments);
}
FitTileStyler.prototype.setRowStyles = function (tile, rowIndex, percentWidth, gutterWidth) {
// Percent of the available vertical space that one row takes up.
var percentHeightPerTile = 100 / this._rowspan;
// Fraction of the horizontal gutter size that each column takes up.
var gutterHeightPerTile = (this._rows - 1) / this._rows;
// Base vertical size of a column.
var baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterHeightPerTile);
tile._setStyle('top', this.getTilePosition(baseTileHeight, rowIndex));
tile._setStyle('height', calc(this.getTileSize(baseTileHeight, tile.rowspan)));
};
return FitTileStyler;
}(TileStyler));
/** 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(/px|em|rem/)) ? value : value + 'px';
}
//# sourceMappingURL=tile-styler.js.map