diff options
Diffstat (limited to 'vnfmarket/common/thirdparty/angular-material/modules/js/gridList')
5 files changed, 872 insertions, 0 deletions
diff --git a/vnfmarket/common/thirdparty/angular-material/modules/js/gridList/bower.json b/vnfmarket/common/thirdparty/angular-material/modules/js/gridList/bower.json new file mode 100644 index 00000000..4223e738 --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/js/gridList/bower.json @@ -0,0 +1,7 @@ +{ + "name": "angular-material-gridList", + "version": "1.1.2-master-a9ba340", + "dependencies": { + "angular-material-core": "1.1.2-master-a9ba340" + } +}
\ No newline at end of file diff --git a/vnfmarket/common/thirdparty/angular-material/modules/js/gridList/gridList.css b/vnfmarket/common/thirdparty/angular-material/modules/js/gridList/gridList.css new file mode 100644 index 00000000..a0c41f34 --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/js/gridList/gridList.css @@ -0,0 +1,77 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.3 + */ +md-grid-list { + box-sizing: border-box; + display: block; + position: relative; } + md-grid-list md-grid-tile, + md-grid-list md-grid-tile > figure, + md-grid-list md-grid-tile-header, + md-grid-list md-grid-tile-footer { + box-sizing: border-box; } + md-grid-list md-grid-tile { + display: block; + position: absolute; } + md-grid-list md-grid-tile figure { + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + justify-content: center; + height: 100%; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: 0; + margin: 0; } + md-grid-list md-grid-tile md-grid-tile-header, + md-grid-list md-grid-tile md-grid-tile-footer { + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; + height: 48px; + color: #fff; + background: rgba(0, 0, 0, 0.18); + overflow: hidden; + position: absolute; + left: 0; + right: 0; } + md-grid-list md-grid-tile md-grid-tile-header h3, + md-grid-list md-grid-tile md-grid-tile-header h4, + md-grid-list md-grid-tile md-grid-tile-footer h3, + md-grid-list md-grid-tile md-grid-tile-footer h4 { + font-weight: 400; + margin: 0 0 0 16px; } + md-grid-list md-grid-tile md-grid-tile-header h3, + md-grid-list md-grid-tile md-grid-tile-footer h3 { + font-size: 14px; } + md-grid-list md-grid-tile md-grid-tile-header h4, + md-grid-list md-grid-tile md-grid-tile-footer h4 { + font-size: 12px; } + md-grid-list md-grid-tile md-grid-tile-header { + top: 0; } + md-grid-list md-grid-tile md-grid-tile-footer { + bottom: 0; } + +@media screen and (-ms-high-contrast: active) { + md-grid-tile { + border: 1px solid #fff; } + md-grid-tile-footer { + border-top: 1px solid #fff; } } diff --git a/vnfmarket/common/thirdparty/angular-material/modules/js/gridList/gridList.js b/vnfmarket/common/thirdparty/angular-material/modules/js/gridList/gridList.js new file mode 100644 index 00000000..00f44efd --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/js/gridList/gridList.js @@ -0,0 +1,775 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.3 + */ +(function( window, angular, undefined ){ +"use strict"; + +/** + * @ngdoc module + * @name material.components.gridList + */ +GridListController['$inject'] = ["$mdUtil"]; +GridLayoutFactory['$inject'] = ["$mdUtil"]; +GridListDirective['$inject'] = ["$interpolate", "$mdConstant", "$mdGridLayout", "$mdMedia"]; +GridTileDirective['$inject'] = ["$mdMedia"]; +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. + * + * 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) { + element.addClass('_md'); // private md component indicator for styling + + // 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', 'md-gutter'], 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, 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 = {}; + + switch(rowMode) { + case 'fixed': + style.height = DIMENSION({ unit: rowHeight, span: rowCount, gutter: gutter }); + style.paddingBottom = ''; + 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.height = ''; + 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' && !ele.$$mdDestroyed; + }); + } + + /** + * 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'); + if (!rowHeight) { + throw 'md-grid-list: md-row-height attribute was not found'; + } + + 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) { + throw 'md-grid-list: md-row-height attribute was not found'; + } + + 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'; + } + } +} + +/* ngInject */ +function GridListController($mdUtil) { + this.layoutInvalidated = false; + this.tilesInvalidated = false; + this.$timeout_ = $mdUtil.nextTick; + this.layoutDelegate = angular.noop; +} + +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; + } + } +} + +/** + * @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. + * + * 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() { + // Mark the tile as destroyed so it is no longer considered in layout, + // even if the DOM element sticks around (like during a leave animation) + element[0].$$mdDestroyed = true; + 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(); + }); + } + } +} + + +function GridTileCaptionDirective() { + return { + template: '<figcaption ng-transclude></figcaption>', + transclude: true + }; +} + +})(window, window.angular);
\ No newline at end of file diff --git a/vnfmarket/common/thirdparty/angular-material/modules/js/gridList/gridList.min.css b/vnfmarket/common/thirdparty/angular-material/modules/js/gridList/gridList.min.css new file mode 100644 index 00000000..9cd2062c --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/js/gridList/gridList.min.css @@ -0,0 +1,6 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.2-master-a9ba340 + */md-grid-list{display:block;position:relative}md-grid-list,md-grid-list md-grid-tile,md-grid-list md-grid-tile-footer,md-grid-list md-grid-tile-header,md-grid-list md-grid-tile>figure{box-sizing:border-box}md-grid-list md-grid-tile{display:block;position:absolute}md-grid-list md-grid-tile figure{-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;height:100%;top:0;bottom:0;padding:0;margin:0}md-grid-list md-grid-tile figure,md-grid-list md-grid-tile md-grid-tile-footer,md-grid-list md-grid-tile md-grid-tile-header{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;position:absolute;right:0;left:0}md-grid-list md-grid-tile md-grid-tile-footer,md-grid-list md-grid-tile md-grid-tile-header{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row;height:48px;color:#fff;background:rgba(0,0,0,.18);overflow:hidden}md-grid-list md-grid-tile md-grid-tile-footer h3,md-grid-list md-grid-tile md-grid-tile-footer h4,md-grid-list md-grid-tile md-grid-tile-header h3,md-grid-list md-grid-tile md-grid-tile-header h4{font-weight:400;margin:0 0 0 16px}md-grid-list md-grid-tile md-grid-tile-footer h3,md-grid-list md-grid-tile md-grid-tile-header h3{font-size:14px}md-grid-list md-grid-tile md-grid-tile-footer h4,md-grid-list md-grid-tile md-grid-tile-header h4{font-size:12px}md-grid-list md-grid-tile md-grid-tile-header{top:0}md-grid-list md-grid-tile md-grid-tile-footer{bottom:0}@media screen and (-ms-high-contrast:active){md-grid-tile{border:1px solid #fff}md-grid-tile-footer{border-top:1px solid #fff}}
\ No newline at end of file diff --git a/vnfmarket/common/thirdparty/angular-material/modules/js/gridList/gridList.min.js b/vnfmarket/common/thirdparty/angular-material/modules/js/gridList/gridList.min.js new file mode 100644 index 00000000..413131e6 --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/js/gridList/gridList.min.js @@ -0,0 +1,7 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.2-master-a9ba340 + */ +!function(t,e,n){"use strict";function i(t,n,i,o){function a(r,a,u,s){function l(){for(var t in n.MEDIA)o(t),o.getQuery(n.MEDIA[t]).addListener(T);return o.watchResponsiveAttributes(["md-cols","md-row-height","md-gutter"],u,d)}function c(){s.layoutDelegate=e.noop,L();for(var t in n.MEDIA)o.getQuery(n.MEDIA[t]).removeListener(T)}function d(t){null==t?s.invalidateLayout():o(t)&&s.invalidateLayout()}function f(t){var n=h(),o={tileSpans:v(n),colCount:w(),rowMode:b(),rowHeight:$(),gutter:y()};if(t||!e.equals(o,D)){var u=i(o.colCount,o.tileSpans,n).map(function(t,i){return{grid:{element:a,style:p(o.colCount,i,o.gutter,o.rowMode,o.rowHeight)},tiles:t.map(function(t,r){return{element:e.element(n[r]),style:g(t.position,t.spans,o.colCount,i,o.gutter,o.rowMode,o.rowHeight)}})}}).reflow().performance();r.mdOnLayout({$event:{performance:u}}),D=o}}function m(t){return x+t+M}function g(t,e,n,i,r,o,a){var u=1/n*100,s=(n-1)/n,l=A({share:u,gutterShare:s,gutter:r}),c={left:C({unit:l,offset:t.col,gutter:r}),width:G({unit:l,span:e.col,gutter:r}),paddingTop:"",marginTop:"",top:"",height:""};switch(o){case"fixed":c.top=C({unit:a,offset:t.row,gutter:r}),c.height=G({unit:a,span:e.row,gutter:r});break;case"ratio":var d=u/a,f=A({share:d,gutterShare:s,gutter:r});c.paddingTop=G({unit:f,span:e.row,gutter:r}),c.marginTop=C({unit:f,offset:t.row,gutter:r});break;case"fit":var m=(i-1)/i,d=1/i*100,f=A({share:d,gutterShare:m,gutter:r});c.top=C({unit:f,offset:t.row,gutter:r}),c.height=G({unit:f,span:e.row,gutter:r})}return c}function p(t,e,n,i,r){var o={};switch(i){case"fixed":o.height=G({unit:r,span:e,gutter:n}),o.paddingBottom="";break;case"ratio":var a=1===t?0:(t-1)/t,u=1/t*100,s=u*(1/r),l=A({share:s,gutterShare:a,gutter:n});o.height="",o.paddingBottom=G({unit:l,span:e,gutter:n});break;case"fit":}return o}function h(){return[].filter.call(a.children(),function(t){return"MD-GRID-TILE"==t.tagName&&!t.$$mdDestroyed})}function v(t){return[].map.call(t,function(t){var n=e.element(t).controller("mdGridTile");return{row:parseInt(o.getResponsiveAttribute(n.$attrs,"md-rowspan"),10)||1,col:parseInt(o.getResponsiveAttribute(n.$attrs,"md-colspan"),10)||1}})}function w(){var t=parseInt(o.getResponsiveAttribute(u,"md-cols"),10);if(isNaN(t))throw"md-grid-list: md-cols attribute was not found, or contained a non-numeric value";return t}function y(){return I(o.getResponsiveAttribute(u,"md-gutter")||1)}function $(){var t=o.getResponsiveAttribute(u,"md-row-height");if(!t)throw"md-grid-list: md-row-height attribute was not found";switch(b()){case"fixed":return I(t);case"ratio":var e=t.split(":");return parseFloat(e[0])/parseFloat(e[1]);case"fit":return 0}}function b(){var t=o.getResponsiveAttribute(u,"md-row-height");if(!t)throw"md-grid-list: md-row-height attribute was not found";return"fit"==t?"fit":t.indexOf(":")!==-1?"ratio":"fixed"}function I(t){return/\D$/.test(t)?t:t+"px"}a.addClass("_md"),a.attr("role","list"),s.layoutDelegate=f;var T=e.bind(s,s.invalidateLayout),L=l();r.$on("$destroy",c);var D,x=t.startSymbol(),M=t.endSymbol(),A=t(m("share")+"% - ("+m("gutter")+" * "+m("gutterShare")+")"),C=t("calc(("+m("unit")+" + "+m("gutter")+") * "+m("offset")+")"),G=t("calc(("+m("unit")+") * "+m("span")+" + ("+m("span")+" - 1) * "+m("gutter")+")")}return{restrict:"E",controller:r,scope:{mdOnLayout:"&"},link:a}}function r(t){this.layoutInvalidated=!1,this.tilesInvalidated=!1,this.$timeout_=t.nextTick,this.layoutDelegate=e.noop}function o(t){function n(e,n){var i,a,u,s,l,c;return s=t.time(function(){a=r(e,n)}),i={layoutInfo:function(){return a},map:function(e){return l=t.time(function(){var t=i.layoutInfo();u=e(t.positioning,t.rowCount)}),i},reflow:function(e){return c=t.time(function(){var t=e||o;t(u.grid,u.tiles)}),i},performance:function(){return{tileCount:n.length,layoutTime:s,mapTime:l,reflowTime:c,totalTime:s+l+c}}}}function i(t,e){t.element.css(t.style),e.forEach(function(t){t.element.css(t.style)})}function r(t,e){function n(e,n){if(e.col>t)throw"md-grid-list: Tile at position "+n+" has a colspan ("+e.col+") that exceeds the column count ("+t+")";for(var a=0,c=0;c-a<e.col;)u>=t?i():(a=l.indexOf(0,u),a!==-1&&(c=o(a+1))!==-1?u=c+1:(a=c=0,i()));return r(a,e.col,e.row),u=a+e.col,{col:a,row:s}}function i(){u=0,s++,r(0,t,-1)}function r(t,e,n){for(var i=t;i<t+e;i++)l[i]=Math.max(l[i]+n,0)}function o(t){var e;for(e=t;e<l.length;e++)if(0!==l[e])return e;if(e===l.length)return e}function a(){for(var e=[],n=0;n<t;n++)e.push(0);return e}var u=0,s=0,l=a();return{positioning:e.map(function(t,e){return{spans:t,position:n(t,e)}}),rowCount:s+Math.max.apply(Math,l)}}var o=i;return n.animateWith=function(t){o=e.isFunction(t)?t:i},n}function a(t){function n(n,i,r,o){i.attr("role","listitem");var a=t.watchResponsiveAttributes(["md-colspan","md-rowspan"],r,e.bind(o,o.invalidateLayout));o.invalidateTiles(),n.$on("$destroy",function(){i[0].$$mdDestroyed=!0,a(),o.invalidateLayout()}),e.isDefined(n.$parent.$index)&&n.$watch(function(){return n.$parent.$index},function(t,e){t!==e&&o.invalidateTiles()})}return{restrict:"E",require:"^mdGridList",template:"<figure ng-transclude></figure>",transclude:!0,scope:{},controller:["$attrs",function(t){this.$attrs=t}],link:n}}function u(){return{template:"<figcaption ng-transclude></figcaption>",transclude:!0}}r.$inject=["$mdUtil"],o.$inject=["$mdUtil"],i.$inject=["$interpolate","$mdConstant","$mdGridLayout","$mdMedia"],a.$inject=["$mdMedia"],e.module("material.components.gridList",["material.core"]).directive("mdGridList",i).directive("mdGridTile",a).directive("mdGridTileFooter",u).directive("mdGridTileHeader",u).factory("$mdGridLayout",o),r.prototype={invalidateTiles:function(){this.tilesInvalidated=!0,this.invalidateLayout()},invalidateLayout:function(){this.layoutInvalidated||(this.layoutInvalidated=!0,this.$timeout_(e.bind(this,this.layout)))},layout:function(){try{this.layoutDelegate(this.tilesInvalidated)}finally{this.layoutInvalidated=!1,this.tilesInvalidated=!1}}}}(window,window.angular);
\ No newline at end of file |