diff --git a/src/ng2fittext.directive.ts b/src/ng2fittext.directive.ts index b3fb0e7..7263b01 100644 --- a/src/ng2fittext.directive.ts +++ b/src/ng2fittext.directive.ts @@ -1,15 +1,17 @@ -import {Directive, ElementRef, Renderer, Input, AfterViewInit, HostListener, OnInit} from '@angular/core'; +import {Directive, ElementRef, Renderer, Input, AfterViewInit, HostListener, OnInit, OnChanges, SimpleChanges} from '@angular/core'; @Directive({ selector: '[fittext]' }) -export class Ng2FittextDirective implements AfterViewInit, OnInit { +export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges { @Input('fittext') fittext: any; @Input('activateOnResize') activateOnResize: boolean; @Input('container') container: any; @Input('activateOnInputEvents') activateOnInputEvents: boolean; @Input('useMaxFontSize') useMaxFontSize: boolean; + @Input('minFontSize') minFontSize = 7; + @Input('modelToWatch') modelToWatch: any; private maxFontSize: number = 1000; private fontSize: number = 0; private speed: number = 1.05; @@ -18,6 +20,11 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit { } setFontSize(fontSize) { + 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'); } @@ -38,11 +45,11 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit { onResize() { 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.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight); } else { this.setFontSize(this.container ? this.container.clientWidth : this.el.nativeElement.parentElement.clientWidth); } - + this.ngAfterViewInit(); } } @@ -50,8 +57,8 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit { @HostListener('input', ['$event']) onInputEvents() { if (this.activateOnInputEvents && this.fittext) { - this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight); - this.ngAfterViewInit(); + this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight); + this.ngAfterViewInit(); } } @@ -70,18 +77,28 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit { ngAfterViewInit() { if (this.fittext) { 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) { - this.setFontSize(this.calculateFontSize(this.fontSize, this.speed)); - this.ngAfterViewInit(); + 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); + this.maxFontSize = parseInt(window.getComputedStyle(this.container ? this.container : this.el.nativeElement.parentElement).fontSize, null); + this.setFontSize(this.maxFontSize); } } } } } + + ngOnChanges(changes: SimpleChanges): void { + if (changes.modelToWatch) { + // change of model to watch - call ngAfterViewInit where is implemented logic to change size + setTimeout(_ => this.ngAfterViewInit() ); + } + } }