--- /dev/null
+/*!
+ * Angular Material Design
+ * https://github.com/angular/material
+ * @license MIT
+ * v0.9.8
+ */
+goog.provide('ng.material.components.gridList');
+goog.require('ng.material.core');
+/**
+ * @ngdoc module
+ * @name material.components.gridList
+ */
+angular.module('material.components.gridList', ['material.core'])
+ .directive('mdGridList', GridListDirective)
+ .directive('mdGridTile', GridTileDirective)
+ .directive('mdGridTileFooter', GridTileCaptionDirective)
+ .directive('mdGridTileHeader', GridTileCaptionDirective)
+ .factory('$mdGridLayout', GridLayoutFactory);
+
+/**
+ * @ngdoc directive
+ * @name mdGridList
+ * @module material.components.gridList
+ * @restrict E
+ * @description
+ * Grid lists are an alternative to standard list views. Grid lists are distinct
+ * from grids used for layouts and other visual presentations.
+ *
+ * A grid list is best suited to presenting a homogenous data type, typically
+ * images, and is optimized for visual comprehension and differentiating between
+ * like data types.
+ *
+ * A grid list is a continuous element consisting of tessellated, regular
+ * subdivisions called cells that contain tiles (`md-grid-tile`).
+ *
+ * <img src="//material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7OVlEaXZ5YmU1Xzg/components_grids_usage2.png"
+ * style="width: 300px; height: auto; margin-right: 16px;" alt="Concept of grid explained visually">
+ * <img src="//material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7VGhsOE5idWlJWXM/components_grids_usage3.png"
+ * style="width: 300px; height: auto;" alt="Grid concepts legend">
+ *
+ * Cells are arrayed vertically and horizontally within the grid.
+ *
+ * Tiles hold content and can span one or more cells vertically or horizontally.
+ *
+ * ### Responsive Attributes
+ *
+ * The `md-grid-list` directive supports "responsive" attributes, which allow
+ * different `md-cols`, `md-gutter` and `md-row-height` values depending on the
+ * currently matching media query (as defined in `$mdConstant.MEDIA`).
+ *
+ * In order to set a responsive attribute, first define the fallback value with
+ * the standard attribute name, then add additional attributes with the
+ * following convention: `{base-attribute-name}-{media-query-name}="{value}"`
+ * (ie. `md-cols-lg="8"`)
+ *
+ * @param {number} md-cols Number of columns in the grid.
+ * @param {string} md-row-height One of
+ * <ul>
+ * <li>CSS length - Fixed height rows (eg. `8px` or `1rem`)</li>
+ * <li>`{width}:{height}` - Ratio of width to height (eg.
+ * `md-row-height="16:9"`)</li>
+ * <li>`"fit"` - Height will be determined by subdividing the available
+ * height by the number of rows</li>
+ * </ul>
+ * @param {string=} md-gutter The amount of space between tiles in CSS units
+ * (default 1px)
+ * @param {expression=} md-on-layout Expression to evaluate after layout. Event
+ * object is available as `$event`, and contains performance information.
+ *
+ * @usage
+ * Basic:
+ * <hljs lang="html">
+ * <md-grid-list md-cols="5" md-gutter="1em" md-row-height="4:3">
+ * <md-grid-tile></md-grid-tile>
+ * </md-grid-list>
+ * </hljs>
+ *
+ * Fixed-height rows:
+ * <hljs lang="html">
+ * <md-grid-list md-cols="4" md-row-height="200px" ...>
+ * <md-grid-tile></md-grid-tile>
+ * </md-grid-list>
+ * </hljs>
+ *
+ * Fit rows:
+ * <hljs lang="html">
+ * <md-grid-list md-cols="4" md-row-height="fit" style="height: 400px;" ...>
+ * <md-grid-tile></md-grid-tile>
+ * </md-grid-list>
+ * </hljs>
+ *
+ * Using responsive attributes:
+ * <hljs lang="html">
+ * <md-grid-list
+ * md-cols-sm="2"
+ * md-cols-md="4"
+ * md-cols-lg="8"
+ * md-cols-gt-lg="12"
+ * ...>
+ * <md-grid-tile></md-grid-tile>
+ * </md-grid-list>
+ * </hljs>
+ */
+function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia) {
+ return {
+ restrict: 'E',
+ controller: GridListController,
+ scope: {
+ mdOnLayout: '&'
+ },
+ link: postLink
+ };
+
+ function postLink(scope, element, attrs, ctrl) {
+ // Apply semantics
+ element.attr('role', 'list');
+
+ // Provide the controller with a way to trigger layouts.
+ ctrl.layoutDelegate = layoutDelegate;
+
+ var invalidateLayout = angular.bind(ctrl, ctrl.invalidateLayout),
+ unwatchAttrs = watchMedia();
+ scope.$on('$destroy', unwatchMedia);
+
+ /**
+ * Watches for changes in media, invalidating layout as necessary.
+ */
+ function watchMedia() {
+ for (var mediaName in $mdConstant.MEDIA) {
+ $mdMedia(mediaName); // initialize
+ $mdMedia.getQuery($mdConstant.MEDIA[mediaName])
+ .addListener(invalidateLayout);
+ }
+ return $mdMedia.watchResponsiveAttributes(
+ ['md-cols', 'md-row-height'], attrs, layoutIfMediaMatch);
+ }
+
+ function unwatchMedia() {
+ ctrl.layoutDelegate = angular.noop;
+
+ unwatchAttrs();
+ for (var mediaName in $mdConstant.MEDIA) {
+ $mdMedia.getQuery($mdConstant.MEDIA[mediaName])
+ .removeListener(invalidateLayout);
+ }
+ }
+
+ /**
+ * Performs grid layout if the provided mediaName matches the currently
+ * active media type.
+ */
+ function layoutIfMediaMatch(mediaName) {
+ if (mediaName == null) {
+ // TODO(shyndman): It would be nice to only layout if we have
+ // instances of attributes using this media type
+ ctrl.invalidateLayout();
+ } else if ($mdMedia(mediaName)) {
+ ctrl.invalidateLayout();
+ }
+ }
+
+ var lastLayoutProps;
+
+ /**
+ * Invokes the layout engine, and uses its results to lay out our
+ * tile elements.
+ *
+ * @param {boolean} tilesInvalidated Whether tiles have been
+ * added/removed/moved since the last layout. This is to avoid situations
+ * where tiles are replaced with properties identical to their removed
+ * counterparts.
+ */
+ function layoutDelegate(tilesInvalidated) {
+ var tiles = getTileElements();
+ var props = {
+ tileSpans: getTileSpans(tiles),
+ colCount: getColumnCount(),
+ rowMode: getRowMode(),
+ rowHeight: getRowHeight(),
+ gutter: getGutter()
+ };
+
+ if (!tilesInvalidated && angular.equals(props, lastLayoutProps)) {
+ return;
+ }
+
+ var performance =
+ $mdGridLayout(props.colCount, props.tileSpans, tiles)
+ .map(function(tilePositions, rowCount) {
+ return {
+ grid: {
+ element: element,
+ style: getGridStyle(props.colCount, rowCount,
+ props.gutter, props.rowMode, props.rowHeight)
+ },
+ tiles: tilePositions.map(function(ps, i) {
+ return {
+ element: angular.element(tiles[i]),
+ style: getTileStyle(ps.position, ps.spans,
+ props.colCount, props.rowCount,
+ props.gutter, props.rowMode, props.rowHeight)
+ }
+ })
+ }
+ })
+ .reflow()
+ .performance();
+
+ // Report layout
+ scope.mdOnLayout({
+ $event: {
+ performance: performance
+ }
+ });
+
+ lastLayoutProps = props;
+ }
+
+ // Use $interpolate to do some simple string interpolation as a convenience.
+
+ var startSymbol = $interpolate.startSymbol();
+ var endSymbol = $interpolate.endSymbol();
+
+ // Returns an expression wrapped in the interpolator's start and end symbols.
+ function expr(exprStr) {
+ return startSymbol + exprStr + endSymbol;
+ }
+
+ // The amount of space a single 1x1 tile would take up (either width or height), used as
+ // a basis for other calculations. This consists of taking 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 fration
+ // (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).
+ var UNIT = $interpolate(expr('share') + '% - (' + expr('gutter') + ' * ' + expr('gutterShare') + ')');
+
+ // The horizontal or vertical position of a tile, e.g., the 'top' or 'left' property value.
+ // The position comes the size of a 1x1 tile plus gutter for each previous tile in the
+ // row/column (offset).
+ var POSITION = $interpolate('calc((' + expr('unit') + ' + ' + expr('gutter') + ') * ' + expr('offset') + ')');
+
+ // The actual size of a tile, e.g., width or height, taking rowSpan or colSpan into account.
+ // This is computed by multiplying the base unit by the rowSpan/colSpan, and then adding back
+ // in the space that the gutter would normally have used (which was already accounted for in
+ // the base unit calculation).
+ var DIMENSION = $interpolate('calc((' + expr('unit') + ') * ' + expr('span') + ' + (' + expr('span') + ' - 1) * ' + expr('gutter') + ')');
+
+ /**
+ * 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.
+ */
+ 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 style = {
+ left: 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.
+ var vShare = (1 / rowCount) * 100;
+
+ // Base vertical size of a row.
+ var 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 getGridStyle(colCount, rowCount, gutter, rowMode, rowHeight) {
+ var style = {
+ height: '',
+ paddingBottom: ''
+ };
+
+ switch(rowMode) {
+ case 'fixed':
+ style.height = DIMENSION({ unit: rowHeight, span: rowCount, gutter: gutter });
+ break;
+
+ case 'ratio':
+ // rowHeight is width / height
+ var hGutterShare = colCount === 1 ? 0 : (colCount - 1) / colCount,
+ hShare = (1 / colCount) * 100,
+ vShare = hShare * (1 / rowHeight),
+ vUnit = UNIT({ share: vShare, gutterShare: hGutterShare, gutter: gutter });
+
+ style.paddingBottom = DIMENSION({ unit: vUnit, span: rowCount, gutter: gutter});
+ break;
+
+ case 'fit':
+ // noop, as the height is user set
+ break;
+ }
+
+ return style;
+ }
+
+ function getTileElements() {
+ return [].filter.call(element.children(), function(ele) {
+ return ele.tagName == 'MD-GRID-TILE';
+ });
+ }
+
+ /**
+ * Gets an array of objects containing the rowspan and colspan for each tile.
+ * @returns {Array<{row: number, col: number}>}
+ */
+ function getTileSpans(tileElements) {
+ return [].map.call(tileElements, function(ele) {
+ var ctrl = angular.element(ele).controller('mdGridTile');
+ return {
+ row: parseInt(
+ $mdMedia.getResponsiveAttribute(ctrl.$attrs, 'md-rowspan'), 10) || 1,
+ col: parseInt(
+ $mdMedia.getResponsiveAttribute(ctrl.$attrs, 'md-colspan'), 10) || 1
+ };
+ });
+ }
+
+ function getColumnCount() {
+ var colCount = parseInt($mdMedia.getResponsiveAttribute(attrs, 'md-cols'), 10);
+ if (isNaN(colCount)) {
+ throw 'md-grid-list: md-cols attribute was not found, or contained a non-numeric value';
+ }
+ return colCount;
+ }
+
+ function getGutter() {
+ return applyDefaultUnit($mdMedia.getResponsiveAttribute(attrs, 'md-gutter') || 1);
+ }
+
+ function getRowHeight() {
+ var rowHeight = $mdMedia.getResponsiveAttribute(attrs, 'md-row-height');
+ switch (getRowMode()) {
+ case 'fixed':
+ return applyDefaultUnit(rowHeight);
+ case 'ratio':
+ var whRatio = rowHeight.split(':');
+ return parseFloat(whRatio[0]) / parseFloat(whRatio[1]);
+ case 'fit':
+ return 0; // N/A
+ }
+ }
+
+ function getRowMode() {
+ var rowHeight = $mdMedia.getResponsiveAttribute(attrs, 'md-row-height');
+ if (rowHeight == 'fit') {
+ return 'fit';
+ } else if (rowHeight.indexOf(':') !== -1) {
+ return 'ratio';
+ } else {
+ return 'fixed';
+ }
+ }
+
+ function applyDefaultUnit(val) {
+ return /\D$/.test(val) ? val : val + 'px';
+ }
+ }
+}
+GridListDirective.$inject = ["$interpolate", "$mdConstant", "$mdGridLayout", "$mdMedia"];
+
+/* ngInject */
+function GridListController($timeout) {
+ this.layoutInvalidated = false;
+ this.tilesInvalidated = false;
+ this.$timeout_ = $timeout;
+ this.layoutDelegate = angular.noop;
+}
+GridListController.$inject = ["$timeout"];
+
+GridListController.prototype = {
+ invalidateTiles: function() {
+ this.tilesInvalidated = true;
+ this.invalidateLayout();
+ },
+
+ invalidateLayout: function() {
+ if (this.layoutInvalidated) {
+ return;
+ }
+ this.layoutInvalidated = true;
+ this.$timeout_(angular.bind(this, this.layout));
+ },
+
+ layout: function() {
+ try {
+ this.layoutDelegate(this.tilesInvalidated);
+ } finally {
+ this.layoutInvalidated = false;
+ this.tilesInvalidated = false;
+ }
+ }
+};
+
+
+/* ngInject */
+function GridLayoutFactory($mdUtil) {
+ var defaultAnimator = GridTileAnimator;
+
+ /**
+ * Set the reflow animator callback
+ */
+ GridLayout.animateWith = function(customAnimator) {
+ defaultAnimator = !angular.isFunction(customAnimator) ? GridTileAnimator : customAnimator;
+ };
+
+ return GridLayout;
+
+ /**
+ * Publish layout function
+ */
+ function GridLayout(colCount, tileSpans) {
+ var self, layoutInfo, gridStyles, layoutTime, mapTime, reflowTime;
+
+ layoutTime = $mdUtil.time(function() {
+ layoutInfo = calculateGridFor(colCount, tileSpans);
+ });
+
+ return self = {
+
+ /**
+ * An array of objects describing each tile's position in the grid.
+ */
+ layoutInfo: function() {
+ return layoutInfo;
+ },
+
+ /**
+ * Maps grid positioning to an element and a set of styles using the
+ * provided updateFn.
+ */
+ map: function(updateFn) {
+ mapTime = $mdUtil.time(function() {
+ var info = self.layoutInfo();
+ gridStyles = updateFn(info.positioning, info.rowCount);
+ });
+ return self;
+ },
+
+ /**
+ * Default animator simply sets the element.css( <styles> ). An alternate
+ * animator can be provided as an argument. The function has the following
+ * signature:
+ *
+ * function({grid: {element: JQLite, style: Object}, tiles: Array<{element: JQLite, style: Object}>)
+ */
+ reflow: function(animatorFn) {
+ reflowTime = $mdUtil.time(function() {
+ var animator = animatorFn || defaultAnimator;
+ animator(gridStyles.grid, gridStyles.tiles);
+ });
+ return self;
+ },
+
+ /**
+ * Timing for the most recent layout run.
+ */
+ performance: function() {
+ return {
+ tileCount: tileSpans.length,
+ layoutTime: layoutTime,
+ mapTime: mapTime,
+ reflowTime: reflowTime,
+ totalTime: layoutTime + mapTime + reflowTime
+ };
+ }
+ };
+ }
+
+ /**
+ * Default Gridlist animator simple sets the css for each element;
+ * NOTE: any transitions effects must be manually set in the CSS.
+ * e.g.
+ *
+ * md-grid-tile {
+ * transition: all 700ms ease-out 50ms;
+ * }
+ *
+ */
+ function GridTileAnimator(grid, tiles) {
+ grid.element.css(grid.style);
+ tiles.forEach(function(t) {
+ t.element.css(t.style);
+ })
+ }
+
+ /**
+ * Calculates the positions of tiles.
+ *
+ * The algorithm works as follows:
+ * An Array<Number> with length colCount (spaceTracker) keeps track of
+ * available tiling positions, where elements of value 0 represents an
+ * empty position. Space for a tile is reserved by finding a sequence of
+ * 0s with length <= than the tile's colspan. When such a space has been
+ * found, the occupied tile positions are incremented by the tile's
+ * rowspan value, as these positions have become unavailable for that
+ * many rows.
+ *
+ * If the end of a row has been reached without finding space for the
+ * tile, spaceTracker's elements are each decremented by 1 to a minimum
+ * of 0. Rows are searched in this fashion until space is found.
+ */
+ function calculateGridFor(colCount, tileSpans) {
+ var curCol = 0,
+ curRow = 0,
+ spaceTracker = newSpaceTracker();
+
+ return {
+ positioning: tileSpans.map(function(spans, i) {
+ return {
+ spans: spans,
+ position: reserveSpace(spans, i)
+ };
+ }),
+ rowCount: curRow + Math.max.apply(Math, spaceTracker)
+ };
+
+ function reserveSpace(spans, i) {
+ if (spans.col > colCount) {
+ throw 'md-grid-list: Tile at position ' + i + ' has a colspan ' +
+ '(' + spans.col + ') that exceeds the column count ' +
+ '(' + colCount + ')';
+ }
+
+ var start = 0,
+ end = 0;
+
+ // TODO(shyndman): This loop isn't strictly necessary if you can
+ // determine the minimum number of rows before a space opens up. To do
+ // this, recognize that you've iterated across an entire row looking for
+ // space, and if so fast-forward by the minimum rowSpan count. Repeat
+ // until the required space opens up.
+ while (end - start < spans.col) {
+ if (curCol >= colCount) {
+ nextRow();
+ continue;
+ }
+
+ start = spaceTracker.indexOf(0, curCol);
+ if (start === -1 || (end = findEnd(start + 1)) === -1) {
+ start = end = 0;
+ nextRow();
+ continue;
+ }
+
+ curCol = end + 1;
+ }
+
+ adjustRow(start, spans.col, spans.row);
+ curCol = start + spans.col;
+
+ return {
+ col: start,
+ row: curRow
+ };
+ }
+
+ function nextRow() {
+ curCol = 0;
+ curRow++;
+ adjustRow(0, colCount, -1); // Decrement row spans by one
+ }
+
+ function adjustRow(from, cols, by) {
+ for (var i = from; i < from + cols; i++) {
+ spaceTracker[i] = Math.max(spaceTracker[i] + by, 0);
+ }
+ }
+
+ function findEnd(start) {
+ var i;
+ for (i = start; i < spaceTracker.length; i++) {
+ if (spaceTracker[i] !== 0) {
+ return i;
+ }
+ }
+
+ if (i === spaceTracker.length) {
+ return i;
+ }
+ }
+
+ function newSpaceTracker() {
+ var tracker = [];
+ for (var i = 0; i < colCount; i++) {
+ tracker.push(0);
+ }
+ return tracker;
+ }
+ }
+}
+GridLayoutFactory.$inject = ["$mdUtil"];
+
+/**
+ * @ngdoc directive
+ * @name mdGridTile
+ * @module material.components.gridList
+ * @restrict E
+ * @description
+ * Tiles contain the content of an `md-grid-list`. They span one or more grid
+ * cells vertically or horizontally, and use `md-grid-tile-{footer,header}` to
+ * display secondary content.
+ *
+ * ### Responsive Attributes
+ *
+ * The `md-grid-tile` directive supports "responsive" attributes, which allow
+ * different `md-rowspan` and `md-colspan` values depending on the currently
+ * matching media query (as defined in `$mdConstant.MEDIA`).
+ *
+ * In order to set a responsive attribute, first define the fallback value with
+ * the standard attribute name, then add additional attributes with the
+ * following convention: `{base-attribute-name}-{media-query-name}="{value}"`
+ * (ie. `md-colspan-sm="4"`)
+ *
+ * @param {number=} md-colspan The number of columns to span (default 1). Cannot
+ * exceed the number of columns in the grid. Supports interpolation.
+ * @param {number=} md-rowspan The number of rows to span (default 1). Supports
+ * interpolation.
+ *
+ * @usage
+ * With header:
+ * <hljs lang="html">
+ * <md-grid-tile>
+ * <md-grid-tile-header>
+ * <h3>This is a header</h3>
+ * </md-grid-tile-header>
+ * </md-grid-tile>
+ * </hljs>
+ *
+ * With footer:
+ * <hljs lang="html">
+ * <md-grid-tile>
+ * <md-grid-tile-footer>
+ * <h3>This is a footer</h3>
+ * </md-grid-tile-footer>
+ * </md-grid-tile>
+ * </hljs>
+ *
+ * Spanning multiple rows/columns:
+ * <hljs lang="html">
+ * <md-grid-tile md-colspan="2" md-rowspan="3">
+ * </md-grid-tile>
+ * </hljs>
+ *
+ * Responsive attributes:
+ * <hljs lang="html">
+ * <md-grid-tile md-colspan="1" md-colspan-sm="3" md-colspan-md="5">
+ * </md-grid-tile>
+ * </hljs>
+ */
+function GridTileDirective($mdMedia) {
+ return {
+ restrict: 'E',
+ require: '^mdGridList',
+ template: '<figure ng-transclude></figure>',
+ transclude: true,
+ scope: {},
+ // Simple controller that exposes attributes to the grid directive
+ controller: ["$attrs", function($attrs) {
+ this.$attrs = $attrs;
+ }],
+ link: postLink
+ };
+
+ function postLink(scope, element, attrs, gridCtrl) {
+ // Apply semantics
+ element.attr('role', 'listitem');
+
+ // If our colspan or rowspan changes, trigger a layout
+ var unwatchAttrs = $mdMedia.watchResponsiveAttributes(['md-colspan', 'md-rowspan'],
+ attrs, angular.bind(gridCtrl, gridCtrl.invalidateLayout));
+
+ // Tile registration/deregistration
+ gridCtrl.invalidateTiles();
+ scope.$on('$destroy', function() {
+ unwatchAttrs();
+ gridCtrl.invalidateLayout();
+ });
+
+ if (angular.isDefined(scope.$parent.$index)) {
+ scope.$watch(function() { return scope.$parent.$index; },
+ function indexChanged(newIdx, oldIdx) {
+ if (newIdx === oldIdx) {
+ return;
+ }
+ gridCtrl.invalidateTiles();
+ });
+ }
+ }
+}
+GridTileDirective.$inject = ["$mdMedia"];
+
+
+function GridTileCaptionDirective() {
+ return {
+ template: '<figcaption ng-transclude></figcaption>',
+ transclude: true
+ };
+}
+
+ng.material.components.gridList = angular.module("material.components.gridList");
\ No newline at end of file
Code Review / portal.git / blobdiff