From abba46a9099010a4a44b6a9001bce59e5b0f31ed Mon Sep 17 00:00:00 2001 From: senty Date: Wed, 2 Aug 2017 16:17:28 +0200 Subject: [PATCH 1/4] model to watch - when model change -> trigger change of test size --- .idea/vcs.xml | 2 +- src/ng2fittext.directive.ts | 26 +++++++++++++++++--------- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/.idea/vcs.xml b/.idea/vcs.xml index 94a25f7..35eb1dd 100644 --- a/.idea/vcs.xml +++ b/.idea/vcs.xml @@ -1,6 +1,6 @@ - + \ No newline at end of file diff --git a/src/ng2fittext.directive.ts b/src/ng2fittext.directive.ts index b3fb0e7..9bcfb3a 100644 --- a/src/ng2fittext.directive.ts +++ b/src/ng2fittext.directive.ts @@ -1,15 +1,16 @@ -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('modelToWatch') modelToWatch: string; private maxFontSize: number = 1000; private fontSize: number = 0; private speed: number = 1.05; @@ -38,11 +39,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 +51,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 +71,25 @@ 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(); } 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() ); + } + } } From 7aa80b161d6b977e44628d3f78125bbb1e768e76 Mon Sep 17 00:00:00 2001 From: senty Date: Wed, 2 Aug 2017 16:19:21 +0200 Subject: [PATCH 2/4] reverted not needed change --- .idea/vcs.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.idea/vcs.xml b/.idea/vcs.xml index 35eb1dd..94a25f7 100644 --- a/.idea/vcs.xml +++ b/.idea/vcs.xml @@ -1,6 +1,6 @@ - + \ No newline at end of file From ebdcc0c7d6e1ce5186e06d64ee2a7134813d01e0 Mon Sep 17 00:00:00 2001 From: senty Date: Wed, 2 Aug 2017 16:26:08 +0200 Subject: [PATCH 3/4] model to watch can be "any" --- src/ng2fittext.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ng2fittext.directive.ts b/src/ng2fittext.directive.ts index 9bcfb3a..17d25e8 100644 --- a/src/ng2fittext.directive.ts +++ b/src/ng2fittext.directive.ts @@ -10,7 +10,7 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges { @Input('container') container: any; @Input('activateOnInputEvents') activateOnInputEvents: boolean; @Input('useMaxFontSize') useMaxFontSize: boolean; - @Input('modelToWatch') modelToWatch: string; + @Input('modelToWatch') modelToWatch: any; private maxFontSize: number = 1000; private fontSize: number = 0; private speed: number = 1.05; From f76196a816892981f7f1bb40ad792c755fea2a44 Mon Sep 17 00:00:00 2001 From: senty Date: Wed, 2 Aug 2017 17:28:50 +0200 Subject: [PATCH 4/4] minimal font size --- src/ng2fittext.directive.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/ng2fittext.directive.ts b/src/ng2fittext.directive.ts index 17d25e8..7263b01 100644 --- a/src/ng2fittext.directive.ts +++ b/src/ng2fittext.directive.ts @@ -10,6 +10,7 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges { @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; @@ -19,6 +20,11 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges { } 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'); } @@ -73,8 +79,11 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges { let overflow = this.container ? this.checkOverflow(this.container, 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) {