import { Directive, ElementRef, Renderer2, AfterViewInit, OnDestroy } from '@angular/core';

/**
 *
 * input 元素element auto focus 並且 全選所有的值
 * @author GYC 
 */
@Directive( { selector: '[esbAutoFocusSelected]' } )
export class EsbAutoFocusSelectedDirective implements AfterViewInit {

    hasChange: boolean = false;
    eleValue: any;
    listenerFn: () => void;

    constructor( private el: ElementRef, private renderer: Renderer2 ) {

        let nativeElement = el.nativeElement;
        this.listenerFn = renderer.listen( nativeElement, 'focus', ( event ) => {
            this.setFocus();
        } );
        
    }


    ngAfterViewInit() {

        let nativeElement = this.el.nativeElement;

        let intervalVar = setInterval(() => {

            this.setFocus();
            clearInterval(intervalVar );

        }, 200 );

    }

    /**
     * destory函式,在離開頁面時,release物件
     */
    ngOnDestroy() {

        if ( this.listenerFn ) {
            this.listenerFn();
        }

    }

    setFocus() {

        let nativeElement = this.el.nativeElement;
        let typeAttr = nativeElement.type;
        if ( typeAttr && typeAttr.match( /^(text|search|password|tel|url)$/i ) ) {
            nativeElement.focus();
            nativeElement.setSelectionRange( 0, nativeElement.value.length )
            nativeElement.select();

        }
    }

}