2
我正在尋找Angular 2工具提示應該自動調整位置本身(至少從左側和右側)在移動或當窗口調整大小,以便它應完全顯示在屏幕上。我在Plunker上分享我的當前代碼,非常感謝任何人都可以幫助我解決這個問題。謝謝。Angular 2工具提示應自動調整位置本身在移動或當窗口調整大小
我使用這個位置功能:
private positionElements(hostEl: HTMLElement, targetEl: HTMLElement, positionStr: string, appendToBody: boolean = false): { top: number, left: number } {
let positionStrParts = positionStr.split("-");
let pos0 = positionStrParts[0];
let pos1 = positionStrParts[1] || "center";
let hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
let targetElWidth = targetEl.offsetWidth;
let targetElHeight = targetEl.offsetHeight;
let shiftWidth: any = {
center: function(): number {
return hostElPos.left + hostElPos.width/2 - targetElWidth/2;
},
left: function(): number {
return hostElPos.left;
},
right: function(): number {
return hostElPos.left + hostElPos.width;
}
};
let shiftHeight: any = {
center: function(): number {
return hostElPos.top + hostElPos.height/2 - targetElHeight/2;
},
top: function(): number {
return hostElPos.top;
},
bottom: function(): number {
return hostElPos.top + hostElPos.height;
}
};
let targetElPos: { top: number, left: number };
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](this.useAlternateMobileTooltip)
};
break;
default:
targetElPos = {
top: hostElPos.top - targetElHeight,
left: shiftWidth[pos1]()
};
break;
}
return targetElPos;
}
private position(nativeEl: HTMLElement): { width: number, height: number, top: number, left: number } {
let offsetParentBCR = { top: 0, left: 0 };
const elBCR = this.offset(nativeEl);
const offsetParentEl = this.parentOffsetEl(nativeEl);
if (offsetParentEl !== window.document) {
offsetParentBCR = this.offset(offsetParentEl);
offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop;
offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft;
}
const boundingClientRect = nativeEl.getBoundingClientRect();
return {
width: boundingClientRect.width || nativeEl.offsetWidth,
height: boundingClientRect.height || nativeEl.offsetHeight,
top: elBCR.top - offsetParentBCR.top,
left: elBCR.left - offsetParentBCR.left
};
}
private offset(nativeEl: any): { width: number, height: number, top: number, left: number } {
const 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)
};
}
private getStyle(nativeEl: HTMLElement, cssProp: string): string {
if ((nativeEl as any).currentStyle) // IE
return (nativeEl as any).currentStyle[cssProp];
if (window.getComputedStyle)
return (window.getComputedStyle(nativeEl) as any)[cssProp];
// finally try and get inline style
return (nativeEl.style as any)[cssProp];
}
private isStaticPositioned(nativeEl: HTMLElement): boolean {
return (this.getStyle(nativeEl, "position") || "static") === "static";
}
private parentOffsetEl(nativeEl: HTMLElement): any {
let offsetParent: any = nativeEl.offsetParent || window.document;
while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) {
offsetParent = offsetParent.offsetParent;
}
return offsetParent || window.document;
}