[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-forms / textarea-autoresize.directive.ts

// Thanks: https://github.com/evseevdev/ngx-textarea-autosize
import { AfterViewInit, Directive, ElementRef, HostBinding, HostListener } from '@angular/core'

@Directive({
  selector: 'textarea[myAutoResize]'
})
export class TextareaAutoResizeDirective implements AfterViewInit {
  @HostBinding('attr.rows') rows = '1'
  @HostBinding('style.overflow') overflow = 'hidden'

  constructor (private elem: ElementRef) { }

  public ngAfterViewInit () {
    this.resize()
  }

  @HostListener('input')
  resize () {
    const textarea = this.elem.nativeElement as HTMLTextAreaElement
    // Reset textarea height to auto that correctly calculate the new height
    textarea.style.height = 'auto'
    // Set new height
    textarea.style.height = `${textarea.scrollHeight}px`
  }
}
Commit	Line	Data
2fbe7f19 C	1	// Thanks: https://github.com/evseevdev/ngx-textarea-autosize
	2	import { AfterViewInit, Directive, ElementRef, HostBinding, HostListener } from '@angular/core'
	3
	4	@Directive({
	5	selector: 'textarea[myAutoResize]'
	6	})
	7	export class TextareaAutoResizeDirective implements AfterViewInit {
	8	@HostBinding('attr.rows') rows = '1'
	9	@HostBinding('style.overflow') overflow = 'hidden'
	10
	11	constructor (private elem: ElementRef) { }
	12
	13	public ngAfterViewInit () {
	14	this.resize()
	15	}
	16
	17	@HostListener('input')
	18	resize () {
	19	const textarea = this.elem.nativeElement as HTMLTextAreaElement
	20	// Reset textarea height to auto that correctly calculate the new height
	21	textarea.style.height = 'auto'
	22	// Set new height
	23	textarea.style.height = `${textarea.scrollHeight}px`
	24	}
	25	}