@angular/flex-layout
Version:
Angular 2 Flexbox Layout
223 lines • 9.4 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 { Directive, ElementRef, Input, Optional, Renderer, Self } from '@angular/core';
import { extendObject } from '../../utils/object-extend';
import { BaseFxDirective } from './base';
import { MediaMonitor } from '../../media-query/media-monitor';
import { LAYOUT_VALUES, LayoutDirective } from './layout';
/**
* 'layout-align' flexbox styling directive
* Defines positioning of child elements along main and cross axis in a layout container
* Optional values: {main-axis} values or {main-axis cross-axis} value pairs
*
* @see https://css-tricks.com/almanac/properties/j/justify-content/
* @see https://css-tricks.com/almanac/properties/a/align-items/
* @see https://css-tricks.com/almanac/properties/a/align-content/
*/
export var LayoutAlignDirective = (function (_super) {
__extends(LayoutAlignDirective, _super);
function LayoutAlignDirective(monitor, elRef, renderer, container) {
_super.call(this, monitor, elRef, renderer);
this._layout = 'row'; // default flex-direction
if (container) {
this._layoutWatcher = container.layout$.subscribe(this._onLayoutChange.bind(this));
}
}
Object.defineProperty(LayoutAlignDirective.prototype, "align", {
set: function (val) { this._cacheInput('align', val); },
enumerable: true,
configurable: true
});
Object.defineProperty(LayoutAlignDirective.prototype, "alignXs", {
set: function (val) { this._cacheInput('alignXs', val); },
enumerable: true,
configurable: true
});
Object.defineProperty(LayoutAlignDirective.prototype, "alignGtXs", {
set: function (val) { this._cacheInput('alignGtXs', val); },
enumerable: true,
configurable: true
});
;
Object.defineProperty(LayoutAlignDirective.prototype, "alignSm", {
set: function (val) { this._cacheInput('alignSm', val); },
enumerable: true,
configurable: true
});
;
Object.defineProperty(LayoutAlignDirective.prototype, "alignGtSm", {
set: function (val) { this._cacheInput('alignGtSm', val); },
enumerable: true,
configurable: true
});
;
Object.defineProperty(LayoutAlignDirective.prototype, "alignMd", {
set: function (val) { this._cacheInput('alignMd', val); },
enumerable: true,
configurable: true
});
;
Object.defineProperty(LayoutAlignDirective.prototype, "alignGtMd", {
set: function (val) { this._cacheInput('alignGtMd', val); },
enumerable: true,
configurable: true
});
;
Object.defineProperty(LayoutAlignDirective.prototype, "alignLg", {
set: function (val) { this._cacheInput('alignLg', val); },
enumerable: true,
configurable: true
});
;
Object.defineProperty(LayoutAlignDirective.prototype, "alignGtLg", {
set: function (val) { this._cacheInput('alignGtLg', val); },
enumerable: true,
configurable: true
});
;
Object.defineProperty(LayoutAlignDirective.prototype, "alignXl", {
set: function (val) { this._cacheInput('alignXl', val); },
enumerable: true,
configurable: true
});
;
// *********************************************
// Lifecycle Methods
// *********************************************
LayoutAlignDirective.prototype.ngOnChanges = function (changes) {
if (changes['align'] != null || this._mqActivation) {
this._updateWithValue();
}
};
/**
* After the initial onChanges, build an mqActivation object that bridges
* mql change events to onMediaQueryChange handlers
*/
LayoutAlignDirective.prototype.ngOnInit = function () {
var _this = this;
this._listenForMediaQueryChanges('align', 'start stretch', function (changes) {
_this._updateWithValue(changes.value);
});
this._updateWithValue();
};
LayoutAlignDirective.prototype.ngOnDestroy = function () {
_super.prototype.ngOnDestroy.call(this);
if (this._layoutWatcher) {
this._layoutWatcher.unsubscribe();
}
};
// *********************************************
// Protected methods
// *********************************************
/**
*
*/
LayoutAlignDirective.prototype._updateWithValue = function (value) {
value = value || this._queryInput("align") || 'start stretch';
if (this._mqActivation) {
value = this._mqActivation.activatedInput;
}
this._applyStyleToElement(this._buildCSS(value));
this._allowStretching(value, !this._layout ? "row" : this._layout);
};
/**
* Cache the parent container 'flex-direction' and update the 'flex' styles
*/
LayoutAlignDirective.prototype._onLayoutChange = function (direction) {
var _this = this;
this._layout = (direction || '').toLowerCase();
if (!LAYOUT_VALUES.find(function (x) { return x === _this._layout; })) {
this._layout = 'row';
}
var value = this._queryInput("align") || 'start stretch';
if (this._mqActivation) {
value = this._mqActivation.activatedInput;
}
this._allowStretching(value, this._layout || "row");
};
LayoutAlignDirective.prototype._buildCSS = function (align) {
var css = {}, _a = align.split(' '), main_axis = _a[0], cross_axis = _a[1]; // tslint:disable-line:variable-name
css['justify-content'] = 'flex-start'; // default main axis
css['align-items'] = 'stretch'; // default cross axis
css['align-content'] = 'stretch'; // default cross axis
// Main axis
switch (main_axis) {
case 'center':
css['justify-content'] = 'center';
break;
case 'space-around':
css['justify-content'] = 'space-around';
break;
case 'space-between':
css['justify-content'] = 'space-between';
break;
case 'end':
css['justify-content'] = 'flex-end';
break;
}
// Cross-axis
switch (cross_axis) {
case 'start':
css['align-items'] = css['align-content'] = 'flex-start';
break;
case 'baseline':
css['align-items'] = 'baseline';
break;
case 'center':
css['align-items'] = css['align-content'] = 'center';
break;
case 'end':
css['align-items'] = css['align-content'] = 'flex-end';
break;
default:
break;
}
return extendObject(css, {
'display': 'flex',
'flex-direction': this._layout || "row",
'box-sizing': 'border-box'
});
};
/**
* Update container element to 'stretch' as needed...
* NOTE: this is only done if the crossAxis is explicitly set to 'stretch'
*/
LayoutAlignDirective.prototype._allowStretching = function (align, layout) {
var _a = align.split(' '), cross_axis = _a[1]; // tslint:disable-line:variable-name
if (cross_axis == 'stretch') {
// Use `null` values to remove style
this._applyStyleToElement({
'box-sizing': 'border-box',
'max-width': (layout === 'column') ? '100%' : null,
'max-height': (layout === 'row') ? '100%' : null
});
}
};
LayoutAlignDirective.decorators = [
{ type: Directive, args: [{ selector: "\n [fxLayoutAlign],\n [fxLayoutAlign.xs],\n [fxLayoutAlign.gt-xs],\n [fxLayoutAlign.sm],\n [fxLayoutAlign.gt-sm],\n [fxLayoutAlign.md],\n [fxLayoutAlign.gt-md],\n [fxLayoutAlign.lg],\n [fxLayoutAlign.gt-lg],\n [fxLayoutAlign.xl]\n" },] },
];
/** @nocollapse */
LayoutAlignDirective.ctorParameters = function () { return [
{ type: MediaMonitor, },
{ type: ElementRef, },
{ type: Renderer, },
{ type: LayoutDirective, decorators: [{ type: Optional }, { type: Self },] },
]; };
LayoutAlignDirective.propDecorators = {
'align': [{ type: Input, args: ['fxLayoutAlign',] },],
'alignXs': [{ type: Input, args: ['fxLayoutAlign.xs',] },],
'alignGtXs': [{ type: Input, args: ['fxLayoutAlign.gt-xs',] },],
'alignSm': [{ type: Input, args: ['fxLayoutAlign.sm',] },],
'alignGtSm': [{ type: Input, args: ['fxLayoutAlign.gt-sm',] },],
'alignMd': [{ type: Input, args: ['fxLayoutAlign.md',] },],
'alignGtMd': [{ type: Input, args: ['fxLayoutAlign.gt-md',] },],
'alignLg': [{ type: Input, args: ['fxLayoutAlign.lg',] },],
'alignGtLg': [{ type: Input, args: ['fxLayoutAlign.gt-lg',] },],
'alignXl': [{ type: Input, args: ['fxLayoutAlign.xl',] },],
};
return LayoutAlignDirective;
}(BaseFxDirective));
//# sourceMappingURL=/usr/local/google/home/tinagao/WebstormProjects/caretaker/flex-layout/src/lib/flexbox/api/layout-align.js.map