Created
July 6, 2019 18:35
-
-
Save SnisarOnline/60a5181b134f5d12117888228e1a6c8e to your computer and use it in GitHub Desktop.
Изменение высоты input/textarea
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {AfterViewInit, Directive, HostListener, Input, ElementRef} from '@angular/core'; | |
@Directive({ | |
selector: '[Autosize]' | |
}) | |
export class AutosizeDirective implements AfterViewInit { | |
private el: HTMLElement; | |
private _minHeight: string; | |
private _maxHeight: string; | |
private _lastHeight: number; | |
private _clientWidth: number; | |
@Input('minHeight') | |
get minHeight() { | |
return this._minHeight; | |
} | |
set minHeight(val: string) { | |
this._minHeight = val; | |
this.updateMinHeight(); | |
} | |
@Input('maxHeight') | |
get maxHeight() { | |
return this._maxHeight; | |
} | |
set maxHeight(val: string) { | |
this._maxHeight = val; | |
this.updateMaxHeight(); | |
} | |
@HostListener('window:resize', ['$event.target']) | |
onResize(textArea: HTMLTextAreaElement) { | |
//Only apply adjustment if element width had changed. | |
if (this.el.clientWidth === this._clientWidth) return; | |
this._clientWidth = this.element.nativeElement.clientWidth; | |
this.adjust(); | |
} | |
@HostListener('input',['$event.target']) | |
onInput(textArea: HTMLTextAreaElement): void { | |
this.adjust(); | |
} | |
constructor(public element: ElementRef){ | |
this.el = element.nativeElement; | |
this._clientWidth = this.el.clientWidth; | |
} | |
ngAfterViewInit(): void{ | |
// set element resize allowed manually by user | |
const style = window.getComputedStyle(this.el, null); | |
if (style.resize === 'both') { | |
this.el.style.resize = 'horizontal'; | |
} | |
else if (style.resize === 'vertical') { | |
this.el.style.resize = 'none'; | |
} | |
// run first adjust | |
this.adjust(); | |
} | |
adjust(): void{ | |
// perform height adjustments after input changes, if height is different | |
if (this.el.style.height == this.element.nativeElement.scrollHeight + "px") return; | |
this.el.style.overflow = 'hidden'; | |
this.el.style.height = 'auto'; | |
this.el.style.height = this.el.scrollHeight + "px"; | |
} | |
updateMinHeight(): void{ | |
// Set textarea min height if input defined | |
this.el.style.minHeight = this._minHeight + 'px'; | |
} | |
updateMaxHeight(): void{ | |
// Set textarea max height if input defined | |
this.el.style.maxHeight = this._maxHeight + 'px'; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment