loke/ng2-fittext
1
0
Fork 0
Code Issues 2 Pull requests 2 Projects Releases 3 Packages Wiki Activity Actions

Avoid rendering if box is not visible and avoid rerendering if not needed

Browse source
This commit is contained in:
Thierry Nischelwitzer 2017-08-24 07:04:09 +02:00
parent 144578c1cd
commit 1eaf665692
1 changed files with 10 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/ng2fittext.directive.ts
View file

@ -15,6 +15,7 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af
private maxFontSize: number = 1000; private maxFontSize: number = 1000;
private fontSize: number = 0; private fontSize: number = 0;
private speed: number = 1.05; private speed: number = 1.05;
private done: boolean = false;
constructor(public el: ElementRef, public renderer: Renderer) { constructor(public el: ElementRef, public renderer: Renderer) {
} }
@ -43,6 +44,7 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize() { onResize() {
this.done = false;
if (this.activateOnResize && this.fittext) { if (this.activateOnResize && this.fittext) {
if (this.activateOnInputEvents && this.fittext) { if (this.activateOnInputEvents && this.fittext) {
this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight); this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight);
@ -56,6 +58,7 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af
@HostListener('input', ['$event']) @HostListener('input', ['$event'])
onInputEvents() { onInputEvents() {
this.done = false;
if (this.activateOnInputEvents && this.fittext) { if (this.activateOnInputEvents && this.fittext) {
this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight); this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight);
this.ngAfterViewInit(); this.ngAfterViewInit();
@ -75,7 +78,7 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af
} }
ngAfterViewInit() { ngAfterViewInit() {
if (this.fittext) { if (this.fittext && this.done === false) {
let overflow = this.container ? this.checkOverflow(this.container, this.el.nativeElement) let overflow = this.container ? this.checkOverflow(this.container, this.el.nativeElement)
: this.checkOverflow(this.el.nativeElement.parentElement, this.el.nativeElement); : this.checkOverflow(this.el.nativeElement.parentElement, this.el.nativeElement);
if (overflow) { if (overflow) {
@ -91,6 +94,7 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af
this.setFontSize(this.maxFontSize); this.setFontSize(this.maxFontSize);
} }
} }
this.done = true;
} }
} }
} }
@ -104,8 +108,11 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af
ngAfterViewChecked() { ngAfterViewChecked() {
if (this.fontSize > this.minFontSize) { if (this.fontSize > this.minFontSize) {
const fontSize = this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight;
if (fontSize > 0 && this.done === false) {
this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight); this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight);
this.ngAfterViewInit(); this.ngAfterViewInit();
} }
} }
}
} }