From f10725757be508e6db2df4d6e6dc66288d065873 Mon Sep 17 00:00:00 2001 From: Thierry Nischelwitzer Date: Thu, 24 Aug 2017 08:01:28 +0200 Subject: [PATCH] refactor and bugfix if box is invisible to begin --- src/ng2fittext.directive.ts | 84 ++++++++++++++++++++++--------------- 1 file changed, 50 insertions(+), 34 deletions(-) diff --git a/src/ng2fittext.directive.ts b/src/ng2fittext.directive.ts index 1e96384..1bd3092 100644 --- a/src/ng2fittext.directive.ts +++ b/src/ng2fittext.directive.ts @@ -13,21 +13,22 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af @Input('minFontSize') minFontSize = 7; @Input('modelToWatch') modelToWatch: any; private maxFontSize: number = 1000; - private fontSize: number = 0; + private fontSize: number = 1000; private speed: number = 1.05; private done: boolean = false; - constructor(public el: ElementRef, public renderer: Renderer) { - } + constructor(public el: ElementRef, public renderer: Renderer) { } setFontSize(fontSize) { - if (fontSize < this.minFontSize) { - // force that font size will never be lower than minimal allowed font size - fontSize = this.minFontSize; - } + if (this.isVisible() && this.done === false) { + if (fontSize < this.minFontSize) { + // force that font size will never be lower than minimal allowed font size + fontSize = this.minFontSize; + } - this.fontSize = fontSize; - return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString() + 'px'); + this.fontSize = fontSize; + return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString() + 'px'); + } } calculateFontSize(fontSize, speed) { @@ -36,7 +37,6 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af } checkOverflow(parent: any, children: any) { - let overflowX = children.scrollWidth - parent.clientWidth; let overflowY = children.clientHeight - parent.clientHeight; return (overflowX > 1 || overflowY > 1); @@ -47,9 +47,9 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af this.done = false; if (this.activateOnResize && this.fittext) { if (this.activateOnInputEvents && this.fittext) { - this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight); + this.setFontSize(this.getStartFontSizeFromHeight()); } else { - this.setFontSize(this.container ? this.container.clientWidth : this.el.nativeElement.parentElement.clientWidth); + this.setFontSize(this.getStartFontSizeFromWeight()); } this.ngAfterViewInit(); @@ -60,14 +60,15 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af onInputEvents() { this.done = false; if (this.activateOnInputEvents && this.fittext) { - this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight); + this.setFontSize(this.getStartFontSizeFromHeight()); this.ngAfterViewInit(); } } ngOnInit() { + this.done = false; if (this.useMaxFontSize) { - this.maxFontSize = parseInt(window.getComputedStyle(this.container ? this.container : this.el.nativeElement.parentElement).fontSize, null); + this.maxFontSize = parseInt(this.getComputetStyle().fontSize, null); } if (this.fittext) { @@ -78,23 +79,25 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af } ngAfterViewInit() { - if (this.fittext && this.done === false) { - let overflow = this.container ? this.checkOverflow(this.container, this.el.nativeElement) - : this.checkOverflow(this.el.nativeElement.parentElement, this.el.nativeElement); - if (overflow) { - if (this.fontSize > this.minFontSize) { - // iterate only until font size is bigger than minimal value - this.setFontSize(this.calculateFontSize(this.fontSize, this.speed)); - this.ngAfterViewInit(); - } - } else { - if (this.useMaxFontSize) { - if (this.fontSize > this.maxFontSize) { - this.maxFontSize = parseInt(window.getComputedStyle(this.container ? this.container : this.el.nativeElement.parentElement).fontSize, null); - this.setFontSize(this.maxFontSize); + if (this.isVisible() && this.done === false) { + if (this.fittext) { + let overflow = this.container ? this.checkOverflow(this.container, this.el.nativeElement) + : this.checkOverflow(this.el.nativeElement.parentElement, this.el.nativeElement); + if (overflow) { + if (this.fontSize > this.minFontSize) { + // iterate only until font size is bigger than minimal value + this.setFontSize(this.calculateFontSize(this.fontSize, this.speed)); + this.ngAfterViewInit(); } + } else { + if (this.useMaxFontSize) { + if (this.fontSize > this.maxFontSize) { + this.maxFontSize = parseInt(this.getComputetStyle().fontSize, null); + this.setFontSize(this.maxFontSize); + } + } + this.done = true; } - this.done = true; } } } @@ -108,11 +111,24 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af ngAfterViewChecked() { 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.ngAfterViewInit(); - } + this.setFontSize(this.getStartFontSizeFromHeight()); + this.ngAfterViewInit(); } } + + private getComputetStyle(): CSSStyleDeclaration { + return window.getComputedStyle(this.container ? this.container : this.el.nativeElement.parentElement); + } + + private getStartFontSizeFromHeight(): number { + return this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight; + } + + private getStartFontSizeFromWeight(): number { + return this.container ? this.container.clientWidth : this.el.nativeElement.parentElement.clientWidth; + } + + private isVisible(): boolean { + return this.getStartFontSizeFromHeight() > 0; + } }