@angular2-material/core
Version:
Angular 2 Material core
103 lines (101 loc) • 4.15 kB
JavaScript
import { applyCssTransform } from '@angular2-material/core';
/**
* A strategy for positioning overlays. Using this strategy, an overlay is given an
* explicit position relative to the browser's viewport.
*/
export var GlobalPositionStrategy = (function () {
function GlobalPositionStrategy() {
this._cssPosition = 'absolute';
this._top = '';
this._bottom = '';
this._left = '';
this._right = '';
/** Array of individual applications of translateX(). Currently only for centering. */
this._translateX = [];
/** Array of individual applications of translateY(). Currently only for centering. */
this._translateY = [];
}
/** Sets the element to usee CSS position: fixed */
GlobalPositionStrategy.prototype.fixed = function () {
this._cssPosition = 'fixed';
return this;
};
/** Sets the element to usee CSS position: absolute. This is the default. */
GlobalPositionStrategy.prototype.absolute = function () {
this._cssPosition = 'absolute';
return this;
};
/** Sets the top position of the overlay. Clears any previously set vertical position. */
GlobalPositionStrategy.prototype.top = function (value) {
this._bottom = '';
this._translateY = [];
this._top = value;
return this;
};
/** Sets the left position of the overlay. Clears any previously set horizontal position. */
GlobalPositionStrategy.prototype.left = function (value) {
this._right = '';
this._translateX = [];
this._left = value;
return this;
};
/** Sets the bottom position of the overlay. Clears any previously set vertical position. */
GlobalPositionStrategy.prototype.bottom = function (value) {
this._top = '';
this._translateY = [];
this._bottom = value;
return this;
};
/** Sets the right position of the overlay. Clears any previously set horizontal position. */
GlobalPositionStrategy.prototype.right = function (value) {
this._left = '';
this._translateX = [];
this._right = value;
return this;
};
/**
* Centers the overlay horizontally with an optional offset.
* Clears any previously set horizontal position.
*/
GlobalPositionStrategy.prototype.centerHorizontally = function (offset) {
if (offset === void 0) { offset = '0px'; }
this._left = '50%';
this._right = '';
this._translateX = ['-50%', offset];
return this;
};
/**
* Centers the overlay vertically with an optional offset.
* Clears any previously set vertical position.
*/
GlobalPositionStrategy.prototype.centerVertically = function (offset) {
if (offset === void 0) { offset = '0px'; }
this._top = '50%';
this._bottom = '';
this._translateY = ['-50%', offset];
return this;
};
/**
* Apply the position to the element.
* TODO: internal
*/
GlobalPositionStrategy.prototype.apply = function (element) {
element.style.position = this._cssPosition;
element.style.top = this._top;
element.style.left = this._left;
element.style.bottom = this._bottom;
element.style.right = this._right;
// TODO(jelbourn): we don't want to always overwrite the transform property here,
// because it will need to be used for animations.
var tranlateX = this._reduceTranslateValues('translateX', this._translateX);
var translateY = this._reduceTranslateValues('translateY', this._translateY);
applyCssTransform(element, tranlateX + " " + translateY);
return Promise.resolve(null);
};
/** Reduce a list of translate values to a string that can be used in the transform property */
GlobalPositionStrategy.prototype._reduceTranslateValues = function (translateFn, values) {
return values.map(function (t) { return (translateFn + "(" + t + ")"); }).join(' ');
};
return GlobalPositionStrategy;
}());
//# sourceMappingURL=global-position-strategy.js.map