All files / src/lib/common/listeners resizer.directive.ts

100% Statements 32/32
100% Branches 6/6
100% Functions 7/7
100% Lines 29/29

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 611x           1x   1x               6x 6x 6x 6x     1x 2x   2x 2x     1x 2x 2x     2x 2x   2x 2x   2x 1x         1x 3x 3x   3x 1x     2x 2x   2x   1x  
import {Attribute, Directive, Output, EventEmitter, OnInit, OnDestroy, ElementRef} from '@angular/core';
 
/** @internal */
@Directive({
    selector: '[anjResizer]'
})
export class ResizerDirective implements OnInit, OnDestroy {
 
    @Output() public resize: EventEmitter<null>;
 
    private parentElement: HTMLElement;
    private resizeListener: EventListener;
    private resizeDebouncer: number;
    private parentWidth: number;
    private parentHeight: number;
 
    constructor(@Attribute('anjResizer') public anjResizer: number,
                private element: ElementRef) {
        this.resize = new EventEmitter<null>();
        this.resizeListener = this.handleResize.bind(this);
    }
 
    public ngOnInit(): void {
        window.addEventListener('resize', this.resizeListener);
 
        this.parentElement = this.element.nativeElement.parentElement;
        this.getDimensions();
    }
 
    public ngOnDestroy(): void {
        window.clearTimeout(this.resizeDebouncer);
        window.removeEventListener('resize', this.resizeListener);
    }
 
    public handleResize(): void {
        window.clearTimeout(this.resizeDebouncer);
 
        this.resizeDebouncer = window.setTimeout(() => {
            const needsResize: boolean = this.getDimensions();
 
            if (needsResize) {
                this.resize.emit();
            }
        }, this.anjResizer);
    }
 
    public getDimensions(): boolean {
        const parentWidth = this.parentElement.clientWidth;
        const parentHeight = this.parentElement.clientHeight;
 
        if (parentWidth === this.parentWidth && parentHeight === this.parentHeight) {
            return false;
        }
 
        this.parentWidth = parentWidth;
        this.parentHeight = parentHeight;
 
        return true;
    }
}