ng2-encrm-components
Version:
226 lines • 9.54 kB
JavaScript
"use strict";
var core_1 = require("@angular/core");
var PopoverContent = (function () {
// -------------------------------------------------------------------------
// Constructor
// -------------------------------------------------------------------------
function PopoverContent(element, cdr) {
var _this = this;
this.element = element;
this.cdr = cdr;
this.placement = "bottom";
this.animation = true;
this.closeOnClickOutside = true;
this.closeOnMouseOutside = false;
this.flavor = 'default';
this.onCloseFromOutside = new core_1.EventEmitter();
this.top = -1000;
this.left = -1000;
this.isIn = false;
this.displayType = "none";
// -------------------------------------------------------------------------
// Anonymous
// -------------------------------------------------------------------------
/**
* Closes dropdown if user clicks outside of this directive.
*/
this.onDocumentMouseDown = function (event) {
var element = _this.element.nativeElement;
if (!element || !_this.popover)
return;
if (element.contains(event.target) || _this.popover.getElement().contains(event.target))
return;
_this.hide();
_this.onCloseFromOutside.emit(undefined);
};
}
// -------------------------------------------------------------------------
// Lifecycle callbacks
// -------------------------------------------------------------------------
PopoverContent.prototype.ngAfterViewInit = function () {
if (this.closeOnClickOutside)
document.addEventListener("mousedown", this.onDocumentMouseDown);
if (this.closeOnMouseOutside)
document.addEventListener("mouseover", this.onDocumentMouseDown);
this.show();
this.cdr.detectChanges();
};
PopoverContent.prototype.ngOnDestroy = function () {
if (this.closeOnClickOutside)
document.removeEventListener("mousedown", this.onDocumentMouseDown);
if (this.closeOnMouseOutside)
document.removeEventListener("mouseover", this.onDocumentMouseDown);
};
// -------------------------------------------------------------------------
// Public Methods
// -------------------------------------------------------------------------
PopoverContent.prototype.show = function () {
if (!this.popover || !this.popover.getElement())
return;
var p = this.positionElements(this.popover.getElement(), this.popoverDiv.nativeElement, this.placement);
this.displayType = "block";
this.top = p.top;
this.left = p.left;
this.isIn = true;
};
PopoverContent.prototype.hide = function () {
this.top = -1000;
this.left = -1000;
this.isIn = true;
this.popover.hide();
};
PopoverContent.prototype.hideFromPopover = function () {
this.top = -1000;
this.left = -1000;
this.isIn = true;
};
// -------------------------------------------------------------------------
// Private Methods
// -------------------------------------------------------------------------
PopoverContent.prototype.positionElements = function (hostEl, targetEl, positionStr, appendToBody) {
if (appendToBody === void 0) { appendToBody = false; }
var positionStrParts = positionStr.split("-");
var pos0 = positionStrParts[0];
var pos1 = positionStrParts[1] || "center";
var hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
var targetElWidth = targetEl.offsetWidth;
var targetElHeight = targetEl.offsetHeight;
var shiftWidth = {
center: function () {
return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2;
},
left: function () {
return hostElPos.left;
},
right: function () {
return hostElPos.left + hostElPos.width;
}
};
var shiftHeight = {
center: function () {
return hostElPos.top + hostElPos.height / 2 - targetElHeight / 2;
},
top: function () {
return hostElPos.top;
},
bottom: function () {
return hostElPos.top + hostElPos.height;
}
};
var targetElPos;
switch (pos0) {
case "right":
targetElPos = {
top: shiftHeight[pos1](),
left: shiftWidth[pos0]()
};
break;
case "left":
targetElPos = {
top: shiftHeight[pos1](),
left: hostElPos.left - targetElWidth
};
break;
case "bottom":
targetElPos = {
top: shiftHeight[pos0](),
left: shiftWidth[pos1]()
};
break;
default:
targetElPos = {
top: hostElPos.top - targetElHeight,
left: shiftWidth[pos1]()
};
break;
}
return targetElPos;
};
PopoverContent.prototype.position = function (nativeEl) {
var offsetParentBCR = { top: 0, left: 0 };
var elBCR = this.offset(nativeEl);
var offsetParentEl = this.parentOffsetEl(nativeEl);
if (offsetParentEl !== window.document) {
offsetParentBCR = this.offset(offsetParentEl);
offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop;
offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft;
}
var boundingClientRect = nativeEl.getBoundingClientRect();
return {
width: boundingClientRect.width || nativeEl.offsetWidth,
height: boundingClientRect.height || nativeEl.offsetHeight,
top: elBCR.top - offsetParentBCR.top,
left: elBCR.left - offsetParentBCR.left
};
};
PopoverContent.prototype.offset = function (nativeEl) {
var boundingClientRect = nativeEl.getBoundingClientRect();
return {
width: boundingClientRect.width || nativeEl.offsetWidth,
height: boundingClientRect.height || nativeEl.offsetHeight,
top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop),
left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft)
};
};
PopoverContent.prototype.getStyle = function (nativeEl, cssProp) {
if (nativeEl.currentStyle)
return nativeEl.currentStyle[cssProp];
if (window.getComputedStyle)
return window.getComputedStyle(nativeEl)[cssProp];
// finally try and get inline style
return nativeEl.style[cssProp];
};
PopoverContent.prototype.isStaticPositioned = function (nativeEl) {
return (this.getStyle(nativeEl, "position") || "static") === "static";
};
PopoverContent.prototype.parentOffsetEl = function (nativeEl) {
var offsetParent = nativeEl.offsetParent || window.document;
while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) {
offsetParent = offsetParent.offsetParent;
}
return offsetParent || window.document;
};
__decorate([
core_1.Input(),
__metadata('design:type', String)
], PopoverContent.prototype, "content", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], PopoverContent.prototype, "placement", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', String)
], PopoverContent.prototype, "title", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Boolean)
], PopoverContent.prototype, "animation", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Boolean)
], PopoverContent.prototype, "closeOnClickOutside", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Boolean)
], PopoverContent.prototype, "closeOnMouseOutside", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], PopoverContent.prototype, "flavor", void 0);
__decorate([
core_1.ViewChild("popoverDiv"),
__metadata('design:type', core_1.ElementRef)
], PopoverContent.prototype, "popoverDiv", void 0);
PopoverContent = __decorate([
core_1.Component({
selector: "popover-content",
template: require('./popover-conent.component.html'),
styles: [require('./popover-content.component.scss')]
}),
__metadata('design:paramtypes', [core_1.ElementRef, core_1.ChangeDetectorRef])
], PopoverContent);
return PopoverContent;
}());
exports.PopoverContent = PopoverContent;
//# sourceMappingURL=popover-content.component.js.map