md2
Version:
Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Chips(Tags), Collapse, Colorpicker, Data Table, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.
148 lines • 5.39 kB
JavaScript
/**
* A strategy for positioning overlays. Using this strategy, an overlay is given an
* explicit position relative to the browser's viewport. We use flexbox, instead of
* transforms, in order to avoid issues with subpixel rendering which can cause the
* element to become blurry.
*/
var GlobalPositionStrategy = (function () {
function GlobalPositionStrategy() {
this._cssPosition = 'static';
this._topOffset = '';
this._bottomOffset = '';
this._leftOffset = '';
this._rightOffset = '';
this._alignItems = '';
this._justifyContent = '';
this._width = '';
this._height = '';
}
/**
* Sets the top position of the overlay. Clears any previously set vertical position.
* @param value New top offset.
*/
GlobalPositionStrategy.prototype.top = function (value) {
this._bottomOffset = '';
this._topOffset = value;
this._alignItems = 'flex-start';
return this;
};
/**
* Sets the left position of the overlay. Clears any previously set horizontal position.
* @param value New left offset.
*/
GlobalPositionStrategy.prototype.left = function (value) {
this._rightOffset = '';
this._leftOffset = value;
this._justifyContent = 'flex-start';
return this;
};
/**
* Sets the bottom position of the overlay. Clears any previously set vertical position.
* @param value New bottom offset.
*/
GlobalPositionStrategy.prototype.bottom = function (value) {
this._topOffset = '';
this._bottomOffset = value;
this._alignItems = 'flex-end';
return this;
};
/**
* Sets the right position of the overlay. Clears any previously set horizontal position.
* @param value New right offset.
*/
GlobalPositionStrategy.prototype.right = function (value) {
this._leftOffset = '';
this._rightOffset = value;
this._justifyContent = 'flex-end';
return this;
};
/**
* Sets the overlay width and clears any previously set width.
* @param value New width for the overlay
*/
GlobalPositionStrategy.prototype.width = function (value) {
this._width = value;
// When the width is 100%, we should reset the `left` and the offset,
// in order to ensure that the element is flush against the viewport edge.
if (value === '100%') {
this.left('0px');
}
return this;
};
/**
* Sets the overlay height and clears any previously set height.
* @param value New height for the overlay
*/
GlobalPositionStrategy.prototype.height = function (value) {
this._height = value;
// When the height is 100%, we should reset the `top` and the offset,
// in order to ensure that the element is flush against the viewport edge.
if (value === '100%') {
this.top('0px');
}
return this;
};
/**
* Centers the overlay horizontally with an optional offset.
* Clears any previously set horizontal position.
*
* @param offset Overlay offset from the horizontal center.
*/
GlobalPositionStrategy.prototype.centerHorizontally = function (offset) {
if (offset === void 0) { offset = ''; }
this.left(offset);
this._justifyContent = 'center';
return this;
};
/**
* Centers the overlay vertically with an optional offset.
* Clears any previously set vertical position.
*
* @param offset Overlay offset from the vertical center.
*/
GlobalPositionStrategy.prototype.centerVertically = function (offset) {
if (offset === void 0) { offset = ''; }
this.top(offset);
this._alignItems = 'center';
return this;
};
/**
* Apply the position to the element.
* @docs-private
*
* @param element Element to which to apply the CSS.
* @returns Resolved when the styles have been applied.
*/
GlobalPositionStrategy.prototype.apply = function (element) {
if (!this._wrapper) {
this._wrapper = document.createElement('div');
this._wrapper.classList.add('cdk-global-overlay-wrapper');
element.parentNode.insertBefore(this._wrapper, element);
this._wrapper.appendChild(element);
}
var styles = element.style;
var parentStyles = element.parentNode.style;
styles.position = this._cssPosition;
styles.marginTop = this._topOffset;
styles.marginLeft = this._leftOffset;
styles.marginBottom = this._bottomOffset;
styles.marginRight = this._rightOffset;
styles.width = this._width;
styles.height = this._height;
parentStyles.justifyContent = this._justifyContent;
parentStyles.alignItems = this._alignItems;
return Promise.resolve(null);
};
/**
* Removes the wrapper element from the DOM.
*/
GlobalPositionStrategy.prototype.dispose = function () {
if (this._wrapper && this._wrapper.parentNode) {
this._wrapper.parentNode.removeChild(this._wrapper);
this._wrapper = null;
}
};
return GlobalPositionStrategy;
}());
export { GlobalPositionStrategy };
//# sourceMappingURL=global-position-strategy.js.map