All files html.ts

100% Statements 15/15
100% Branches 6/6
100% Functions 2/2
100% Lines 15/15
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44                        1x 3x 2x     1x 1x 1x                 1x 1x 1x 1x   1x     1x 11x 3x     8x    
export interface ClientRectWithMargin {
    width: number;
    height: number;
    top: number;
    bottom: number;
    left: number;
    right: number;
}
 
/**
 * Gets the client bounding rectangle including any margins of an element.
 */
export function getClientRectWithMargin(element: HTMLElement): ClientRectWithMargin {
    if (!element) {
        return;
    }
 
    const rect: ClientRect = element.getBoundingClientRect();
    const style: CSSStyleDeclaration = window.getComputedStyle(element, null);
    const clone: ClientRectWithMargin = {
        width: rect.width,
        height: rect.height,
        top: rect.top,
        bottom: rect.bottom,
        left: rect.left,
        right: rect.right
    };
 
    clone.width += convertStylePropertyPixelsToNumber(style, "margin-left");
    clone.width += convertStylePropertyPixelsToNumber(style, "margin-right");
    clone.height += convertStylePropertyPixelsToNumber(style, "margin-top");
    clone.height += convertStylePropertyPixelsToNumber(style, "margin-bottom");
 
    return clone;
}
 
export function convertStylePropertyPixelsToNumber(computedStyle: CSSStyleDeclaration, property: string): number {
    if (!computedStyle || !property) {
        return;
    }
 
    return parseInt(computedStyle.getPropertyValue(property).substring(0, computedStyle.getPropertyValue(property).length - 2), 10);
}