ninja-splitter
Version:
Convenient and easy to use splitter component for Angular 9+
62 lines • 9.33 kB
JavaScript
export class PositionService {
static position(element) {
const nativeEl = element.nativeElement;
const elBCR = this.offset(nativeEl);
let offsetParentBCR = { top: 0, left: 0 };
const offsetParentEl = this.parentOffsetEl(nativeEl);
if (offsetParentEl !== this.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,
};
}
static offset(element) {
const nativeEl = element.nativeElement;
const boundingClientRect = nativeEl.getBoundingClientRect();
return {
width: boundingClientRect.width || nativeEl.offsetWidth,
height: boundingClientRect.height || nativeEl.offsetHeight,
top: boundingClientRect.top +
(this.window.pageYOffset || this.document.documentElement.scrollTop),
left: boundingClientRect.left +
(this.window.pageXOffset || this.document.documentElement.scrollLeft),
};
}
static get window() {
return window;
}
static get document() {
return window.document;
}
static getStyle(nativeEl, cssProp) {
if (nativeEl.currentStyle) {
return nativeEl.currentStyle[cssProp];
}
if (this.window.getComputedStyle) {
return this.window.getComputedStyle(nativeEl)[cssProp];
}
return nativeEl.style[cssProp];
}
static isStaticPositioned(nativeEl) {
return (this.getStyle(nativeEl, 'position') || 'static') === 'static';
}
static parentOffsetEl(nativeEl) {
let offsetParent = nativeEl.offsetParent || this.document;
while (offsetParent &&
offsetParent !== this.document &&
this.isStaticPositioned(offsetParent)) {
offsetParent = offsetParent.offsetParent;
}
return offsetParent || this.document;
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9zaXRpb24uc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25pbmphLXNwbGl0L3NyYy9saWIvcG9zaXRpb24uc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQSxNQUFNLE9BQU8sZUFBZTtJQUNuQixNQUFNLENBQUMsUUFBUSxDQUNwQixPQUFtQjtRQUVuQixNQUFNLFFBQVEsR0FBUSxPQUFPLENBQUMsYUFBYSxDQUFDO1FBQzVDLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDcEMsSUFBSSxlQUFlLEdBQUcsRUFBRSxHQUFHLEVBQUUsQ0FBQyxFQUFFLElBQUksRUFBRSxDQUFDLEVBQUUsQ0FBQztRQUMxQyxNQUFNLGNBQWMsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ3JELElBQUksY0FBYyxLQUFLLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDcEMsZUFBZSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsY0FBYyxDQUFDLENBQUM7WUFDOUMsZUFBZSxDQUFDLEdBQUc7Z0JBQ2pCLGNBQWMsQ0FBQyxTQUFTLEdBQUcsY0FBYyxDQUFDLFNBQVMsQ0FBQztZQUN0RCxlQUFlLENBQUMsSUFBSTtnQkFDbEIsY0FBYyxDQUFDLFVBQVUsR0FBRyxjQUFjLENBQUMsVUFBVSxDQUFDO1NBQ3pEO1FBRUQsTUFBTSxrQkFBa0IsR0FBRyxRQUFRLENBQUMscUJBQXFCLEVBQUUsQ0FBQztRQUM1RCxPQUFPO1lBQ0wsS0FBSyxFQUFFLGtCQUFrQixDQUFDLEtBQUssSUFBSSxRQUFRLENBQUMsV0FBVztZQUN2RCxNQUFNLEVBQUUsa0JBQWtCLENBQUMsTUFBTSxJQUFJLFFBQVEsQ0FBQyxZQUFZO1lBQzFELEdBQUcsRUFBRSxLQUFLLENBQUMsR0FBRyxHQUFHLGVBQWUsQ0FBQyxHQUFHO1lBQ3BDLElBQUksRUFBRSxLQUFLLENBQUMsSUFBSSxHQUFHLGVBQWUsQ0FBQyxJQUFJO1NBQ3hDLENBQUM7SUFDSixDQUFDO0lBRU0sTUFBTSxDQUFDLE1BQU0sQ0FDbEIsT0FBbUI7UUFFbkIsTUFBTSxRQUFRLEdBQVEsT0FBTyxDQUFDLGFBQWEsQ0FBQztRQUM1QyxNQUFNLGtCQUFrQixHQUFHLFFBQVEsQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO1FBQzVELE9BQU87WUFDTCxLQUFLLEVBQUUsa0JBQWtCLENBQUMsS0FBSyxJQUFJLFFBQVEsQ0FBQyxXQUFXO1lBQ3ZELE1BQU0sRUFBRSxrQkFBa0IsQ0FBQyxNQUFNLElBQUksUUFBUSxDQUFDLFlBQVk7WUFDMUQsR0FBRyxFQUNELGtCQUFrQixDQUFDLEdBQUc7Z0JBQ3RCLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxXQUFXLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxlQUFlLENBQUMsU0FBUyxDQUFDO1lBQ3RFLElBQUksRUFDRixrQkFBa0IsQ0FBQyxJQUFJO2dCQUN2QixDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsV0FBVyxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsZUFBZSxDQUFDLFVBQVUsQ0FBQztTQUN4RSxDQUFDO0lBQ0osQ0FBQztJQUVPLE1BQU0sS0FBSyxNQUFNO1FBQ3ZCLE9BQU8sTUFBTSxDQUFDO0lBQ2hCLENBQUM7SUFFTyxNQUFNLEtBQUssUUFBUTtRQUN6QixPQUFPLE1BQU0sQ0FBQyxRQUFRLENBQUM7SUFDekIsQ0FBQztJQUVPLE1BQU0sQ0FBQyxRQUFRLENBQUMsUUFBYSxFQUFFLE9BQWU7UUFFcEQsSUFBSSxRQUFRLENBQUMsWUFBWSxFQUFFO1lBQ3pCLE9BQU8sUUFBUSxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsQ0FBQztTQUN2QztRQUVELElBQUksSUFBSSxDQUFDLE1BQU0sQ0FBQyxnQkFBZ0IsRUFBRTtZQUNoQyxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsUUFBUSxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUM7U0FDeEQ7UUFDRCxPQUFPLFFBQVEsQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDakMsQ0FBQztJQUVPLE1BQU0sQ0FBQyxrQkFBa0IsQ0FBQyxRQUFhO1FBQzdDLE9BQU8sQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsRUFBRSxVQUFVLENBQUMsSUFBSSxRQUFRLENBQUMsS0FBSyxRQUFRLENBQUM7SUFDeEUsQ0FBQztJQUVPLE1BQU0sQ0FBQyxjQUFjLENBQUMsUUFBYTtRQUN6QyxJQUFJLFlBQVksR0FBRyxRQUFRLENBQUMsWUFBWSxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUM7UUFDMUQsT0FDRSxZQUFZO1lBQ1osWUFBWSxLQUFLLElBQUksQ0FBQyxRQUFRO1lBQzlCLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxZQUFZLENBQUMsRUFDckM7WUFDQSxZQUFZLEdBQUcsWUFBWSxDQUFDLFlBQVksQ0FBQztTQUMxQztRQUNELE9BQU8sWUFBWSxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDdkMsQ0FBQztDQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRWxlbWVudFJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG4vLyBAZHluYW1pY1xyXG5leHBvcnQgY2xhc3MgUG9zaXRpb25TZXJ2aWNlIHtcclxuICBwdWJsaWMgc3RhdGljIHBvc2l0aW9uKFxyXG4gICAgZWxlbWVudDogRWxlbWVudFJlZlxyXG4gICk6IHsgd2lkdGg6IG51bWJlcjsgaGVpZ2h0OiBudW1iZXI7IHRvcDogbnVtYmVyOyBsZWZ0OiBudW1iZXIgfSB7XHJcbiAgICBjb25zdCBuYXRpdmVFbDogYW55ID0gZWxlbWVudC5uYXRpdmVFbGVtZW50O1xyXG4gICAgY29uc3QgZWxCQ1IgPSB0aGlzLm9mZnNldChuYXRpdmVFbCk7XHJcbiAgICBsZXQgb2Zmc2V0UGFyZW50QkNSID0geyB0b3A6IDAsIGxlZnQ6IDAgfTtcclxuICAgIGNvbnN0IG9mZnNldFBhcmVudEVsID0gdGhpcy5wYXJlbnRPZmZzZXRFbChuYXRpdmVFbCk7XHJcbiAgICBpZiAob2Zmc2V0UGFyZW50RWwgIT09IHRoaXMuZG9jdW1lbnQpIHtcclxuICAgICAgb2Zmc2V0UGFyZW50QkNSID0gdGhpcy5vZmZzZXQob2Zmc2V0UGFyZW50RWwpO1xyXG4gICAgICBvZmZzZXRQYXJlbnRCQ1IudG9wICs9XHJcbiAgICAgICAgb2Zmc2V0UGFyZW50RWwuY2xpZW50VG9wIC0gb2Zmc2V0UGFyZW50RWwuc2Nyb2xsVG9wO1xyXG4gICAgICBvZmZzZXRQYXJlbnRCQ1IubGVmdCArPVxyXG4gICAgICAgIG9mZnNldFBhcmVudEVsLmNsaWVudExlZnQgLSBvZmZzZXRQYXJlbnRFbC5zY3JvbGxMZWZ0O1xyXG4gICAgfVxyXG5cclxuICAgIGNvbnN0IGJvdW5kaW5nQ2xpZW50UmVjdCA9IG5hdGl2ZUVsLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xyXG4gICAgcmV0dXJuIHtcclxuICAgICAgd2lkdGg6IGJvdW5kaW5nQ2xpZW50UmVjdC53aWR0aCB8fCBuYXRpdmVFbC5vZmZzZXRXaWR0aCxcclxuICAgICAgaGVpZ2h0OiBib3VuZGluZ0NsaWVudFJlY3QuaGVpZ2h0IHx8IG5hdGl2ZUVsLm9mZnNldEhlaWdodCxcclxuICAgICAgdG9wOiBlbEJDUi50b3AgLSBvZmZzZXRQYXJlbnRCQ1IudG9wLFxyXG4gICAgICBsZWZ0OiBlbEJDUi5sZWZ0IC0gb2Zmc2V0UGFyZW50QkNSLmxlZnQsXHJcbiAgICB9O1xyXG4gIH1cclxuXHJcbiAgcHVibGljIHN0YXRpYyBvZmZzZXQoXHJcbiAgICBlbGVtZW50OiBFbGVtZW50UmVmXHJcbiAgKTogeyB3aWR0aDogbnVtYmVyOyBoZWlnaHQ6IG51bWJlcjsgdG9wOiBudW1iZXI7IGxlZnQ6IG51bWJlciB9IHtcclxuICAgIGNvbnN0IG5hdGl2ZUVsOiBhbnkgPSBlbGVtZW50Lm5hdGl2ZUVsZW1lbnQ7XHJcbiAgICBjb25zdCBib3VuZGluZ0NsaWVudFJlY3QgPSBuYXRpdmVFbC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcclxuICAgIHJldHVybiB7XHJcbiAgICAgIHdpZHRoOiBib3VuZGluZ0NsaWVudFJlY3Qud2lkdGggfHwgbmF0aXZlRWwub2Zmc2V0V2lkdGgsXHJcbiAgICAgIGhlaWdodDogYm91bmRpbmdDbGllbnRSZWN0LmhlaWdodCB8fCBuYXRpdmVFbC5vZmZzZXRIZWlnaHQsXHJcbiAgICAgIHRvcDpcclxuICAgICAgICBib3VuZGluZ0NsaWVudFJlY3QudG9wICtcclxuICAgICAgICAodGhpcy53aW5kb3cucGFnZVlPZmZzZXQgfHwgdGhpcy5kb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuc2Nyb2xsVG9wKSxcclxuICAgICAgbGVmdDpcclxuICAgICAgICBib3VuZGluZ0NsaWVudFJlY3QubGVmdCArXHJcbiAgICAgICAgKHRoaXMud2luZG93LnBhZ2VYT2Zmc2V0IHx8IHRoaXMuZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LnNjcm9sbExlZnQpLFxyXG4gICAgfTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgc3RhdGljIGdldCB3aW5kb3coKTogV2luZG93IHtcclxuICAgIHJldHVybiB3aW5kb3c7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIHN0YXRpYyBnZXQgZG9jdW1lbnQoKTogRG9jdW1lbnQge1xyXG4gICAgcmV0dXJuIHdpbmRvdy5kb2N1bWVudDtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgc3RhdGljIGdldFN0eWxlKG5hdGl2ZUVsOiBhbnksIGNzc1Byb3A6IHN0cmluZyk6IGFueSB7XHJcbiAgICAvLyBJRVxyXG4gICAgaWYgKG5hdGl2ZUVsLmN1cnJlbnRTdHlsZSkge1xyXG4gICAgICByZXR1cm4gbmF0aXZlRWwuY3VycmVudFN0eWxlW2Nzc1Byb3BdO1xyXG4gICAgfVxyXG5cclxuICAgIGlmICh0aGlzLndpbmRvdy5nZXRDb21wdXRlZFN0eWxlKSB7XHJcbiAgICAgIHJldHVybiB0aGlzLndpbmRvdy5nZXRDb21wdXRlZFN0eWxlKG5hdGl2ZUVsKVtjc3NQcm9wXTtcclxuICAgIH1cclxuICAgIHJldHVybiBuYXRpdmVFbC5zdHlsZVtjc3NQcm9wXTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgc3RhdGljIGlzU3RhdGljUG9zaXRpb25lZChuYXRpdmVFbDogYW55KTogYW55IHtcclxuICAgIHJldHVybiAodGhpcy5nZXRTdHlsZShuYXRpdmVFbCwgJ3Bvc2l0aW9uJykgfHwgJ3N0YXRpYycpID09PSAnc3RhdGljJztcclxuICB9XHJcblxyXG4gIHByaXZhdGUgc3RhdGljIHBhcmVudE9mZnNldEVsKG5hdGl2ZUVsOiBhbnkpOiBhbnkge1xyXG4gICAgbGV0IG9mZnNldFBhcmVudCA9IG5hdGl2ZUVsLm9mZnNldFBhcmVudCB8fCB0aGlzLmRvY3VtZW50O1xyXG4gICAgd2hpbGUgKFxyXG4gICAgICBvZmZzZXRQYXJlbnQgJiZcclxuICAgICAgb2Zmc2V0UGFyZW50ICE9PSB0aGlzLmRvY3VtZW50ICYmXHJcbiAgICAgIHRoaXMuaXNTdGF0aWNQb3NpdGlvbmVkKG9mZnNldFBhcmVudClcclxuICAgICkge1xyXG4gICAgICBvZmZzZXRQYXJlbnQgPSBvZmZzZXRQYXJlbnQub2Zmc2V0UGFyZW50O1xyXG4gICAgfVxyXG4gICAgcmV0dXJuIG9mZnNldFBhcmVudCB8fCB0aGlzLmRvY3VtZW50O1xyXG4gIH1cclxufVxyXG4iXX0=