From 129cb1251c0c8e007f8ed1a67b509db1aad65ef4 Mon Sep 17 00:00:00 2001 From: Lorenzo Iovino Date: Mon, 19 Jun 2017 11:24:41 +0200 Subject: [PATCH 01/14] Removed console.log, added possibility of choose if fit a specified container (old way) or the element parent --- .gitignore | 21 ++++++++++--------- .idea/vcs.xml | 6 ++++++ README.md | 42 +++++++++++++++++++++++++++++++++++-- src/ng2fittext.directive.ts | 20 +++++++++--------- 4 files changed, 67 insertions(+), 22 deletions(-) create mode 100644 .idea/vcs.xml diff --git a/.gitignore b/.gitignore index b5c6a7b..7c0acad 100644 --- a/.gitignore +++ b/.gitignore @@ -1,10 +1,11 @@ -# Node generated files -node_modules -npm-debug.log -# OS generated files -Thumbs.db -.DS_Store -# Ignored files -*.js -*.map -*.d.ts \ No newline at end of file +# Node generated files +node_modules +npm-debug.log +# OS generated files +Thumbs.db +.DS_Store +# Ignored files +*.js +*.map +*.d.ts +.idea \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/README.md b/README.md index 9e85c58..2e0061b 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,23 @@ Import it in your Angular2 project like a module ``` 2) Use it in your components + + Fit with specified container (can be the parent or a deeper ancestor) + ```sh + import {Component} from '@angular/core'; + + @Component({ + selector: 'label', + template: `
+
Bla bla bla...
+
` + }) + + export class LabelComponent {} + ``` + + + Fit with the parent element (this works if you have a variable number of element between element and parent) ```sh import {Component} from '@angular/core'; @@ -45,6 +62,8 @@ Import it in your Angular2 project like a module export class LabelComponent {} ``` + + **NEW! Support for autoresize input box!** ```sh @@ -52,19 +71,38 @@ Import it in your Angular2 project like a module @Component({ selector: 'inputbox', - template: `
- `, + template: `
+ `,
` }) export class InputBoxComponent {} ``` + + + **NEW! Support for maxFontSize!** + + ```sh + import {Component} from '@angular/core'; + + @Component({ + selector: 'inputbox', + template: `
+ `, +
` + }) + + export class InputBoxComponent {} + ``` + + Parameters: | Parameter | Description | Values | | --- | --- | --- | | fittext | is the selector of the directive | true/false + | container | the container to fit (if not present it fit default to parent container)| ElementRef | activateOnResize | enable/disable the autofit in case of window resize | true or false (default false) | activateOnInputEvents | enbale/disable the autofit in case of input box events (keydown, keyup etc..) | true or false (default false) | useMaxFontSize | Use font-size from element as maximum font-size | enable/disable the usage of max font-size of the lement diff --git a/src/ng2fittext.directive.ts b/src/ng2fittext.directive.ts index d077799..39071cb 100644 --- a/src/ng2fittext.directive.ts +++ b/src/ng2fittext.directive.ts @@ -3,10 +3,11 @@ import {Directive, ElementRef, Renderer, Input, AfterViewInit, HostListener, OnI @Directive({ selector: '[fittext]' }) -export class FittextDirective implements AfterViewInit, OnInit { +export class Ng2FittextDirective implements AfterViewInit, OnInit { @Input('fittext') fittext: any; @Input('activateOnResize') activateOnResize: boolean; + @Input('container') container: any; @Input('activateOnInputEvents') activateOnInputEvents: boolean; @Input('useMaxFontSize') useMaxFontSize: boolean; private maxFontSize: number = 1000; @@ -17,8 +18,6 @@ export class FittextDirective implements AfterViewInit, OnInit { } setFontSize(fontSize) { - console.log(); - this.fontSize = fontSize; return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString() + 'px'); } @@ -28,8 +27,7 @@ export class FittextDirective implements AfterViewInit, OnInit { return Math.floor(fontSize / speed); } - checkOverflow(children: any) { - const parent = children.parentElement; + checkOverflow(parent: any, children: any) { let overflowX = children.scrollWidth - parent.clientWidth; let overflowY = children.clientHeight - parent.clientHeight; @@ -40,9 +38,9 @@ export class FittextDirective implements AfterViewInit, OnInit { onResize() { if (this.activateOnResize && this.fittext) { if (this.activateOnInputEvents && this.fittext) { - this.setFontSize(this.el.nativeElement.parentElement.clientHeight); + this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight); } else { - this.setFontSize(this.el.nativeElement.parentElement.clientWidth); + this.setFontSize(this.container ? this.container.clientWidth : this.el.nativeElement.parentElement.clientWidth); } this.ngAfterViewInit(); } @@ -51,7 +49,7 @@ export class FittextDirective implements AfterViewInit, OnInit { @HostListener('input', ['$event']) onInputEvents() { if (this.activateOnInputEvents && this.fittext) { - this.setFontSize(this.el.nativeElement.parentElement.clientHeight); + this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight); this.ngAfterViewInit(); } } @@ -64,16 +62,18 @@ export class FittextDirective implements AfterViewInit, OnInit { if (this.fittext) { this.setFontSize(this.maxFontSize); } + this.el.nativeElement.style.setProperty('will-change', 'content'); } ngAfterViewInit() { if (this.fittext) { - let overflow = this.checkOverflow(this.el.nativeElement); + 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(); } } } -} \ No newline at end of file +} From e19540589858c60635af16e0f16252c7a292fb5b Mon Sep 17 00:00:00 2001 From: Lorenzo Iovino Date: Mon, 19 Jun 2017 11:28:38 +0200 Subject: [PATCH 02/14] Version 1.0.18 (thanks to nischi) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0440868..1668443 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng2-fittext", - "version": "1.0.17", + "version": "1.0.18", "description": "An Angular2 directive for autoscale the font size of an element to fit an upper level container.", "main": "index.js", "scripts": { From 85d3b3af8922162dc9d95d05890fe5c5f20a3512 Mon Sep 17 00:00:00 2001 From: Lorenzo Iovino Date: Mon, 19 Jun 2017 11:42:53 +0200 Subject: [PATCH 03/14] Now max font size works also if container is resized --- package.json | 2 +- src/ng2fittext.directive.ts | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 1668443..674ee4e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng2-fittext", - "version": "1.0.18", + "version": "1.0.19", "description": "An Angular2 directive for autoscale the font size of an element to fit an upper level container.", "main": "index.js", "scripts": { diff --git a/src/ng2fittext.directive.ts b/src/ng2fittext.directive.ts index 39071cb..f8f568a 100644 --- a/src/ng2fittext.directive.ts +++ b/src/ng2fittext.directive.ts @@ -42,6 +42,7 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit { } else { this.setFontSize(this.container ? this.container.clientWidth : this.el.nativeElement.parentElement.clientWidth); } + this.ngAfterViewInit(); } } @@ -72,6 +73,12 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit { : this.checkOverflow(this.el.nativeElement.parentElement, this.el.nativeElement); if (overflow) { this.setFontSize(this.calculateFontSize(this.fontSize, this.speed)); + if (this.useMaxFontSize) { + if(this.fontSize > this.maxFontSize){ + this.maxFontSize = parseInt(window.getComputedStyle(this.el.nativeElement).fontSize, null); + this.setFontSize(this.maxFontSize); + } + } this.ngAfterViewInit(); } } From 5173c610e6e5228d67daf58e1add1e82ced668fa Mon Sep 17 00:00:00 2001 From: Lorenzo Iovino Date: Mon, 19 Jun 2017 11:49:51 +0200 Subject: [PATCH 04/14] Missing condition for do work it in case of resize and not overflow --- package.json | 2 +- src/ng2fittext.directive.ts | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 674ee4e..70ca82a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng2-fittext", - "version": "1.0.19", + "version": "1.0.20", "description": "An Angular2 directive for autoscale the font size of an element to fit an upper level container.", "main": "index.js", "scripts": { diff --git a/src/ng2fittext.directive.ts b/src/ng2fittext.directive.ts index f8f568a..1ed4ed4 100644 --- a/src/ng2fittext.directive.ts +++ b/src/ng2fittext.directive.ts @@ -73,13 +73,14 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit { : 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){ + if(this.fontSize > this.maxFontSize) { this.maxFontSize = parseInt(window.getComputedStyle(this.el.nativeElement).fontSize, null); this.setFontSize(this.maxFontSize); } } - this.ngAfterViewInit(); } } } From ff9b79d9562f1f69e327b0a9c9f67df4aa277286 Mon Sep 17 00:00:00 2001 From: Lorenzo Iovino Date: Mon, 19 Jun 2017 11:54:44 +0200 Subject: [PATCH 05/14] Can't stop to commit fixes, need to sleep. Last fix and last version for today. --- package.json | 2 +- src/ng2fittext.directive.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 70ca82a..e08ff7c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng2-fittext", - "version": "1.0.20", + "version": "1.0.21", "description": "An Angular2 directive for autoscale the font size of an element to fit an upper level container.", "main": "index.js", "scripts": { diff --git a/src/ng2fittext.directive.ts b/src/ng2fittext.directive.ts index 1ed4ed4..b3fb0e7 100644 --- a/src/ng2fittext.directive.ts +++ b/src/ng2fittext.directive.ts @@ -57,7 +57,7 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit { ngOnInit() { if (this.useMaxFontSize) { - this.maxFontSize = parseInt(window.getComputedStyle(this.el.nativeElement).fontSize, null); + this.maxFontSize = parseInt(window.getComputedStyle(this.container ? this.container : this.el.nativeElement.parentElement).fontSize, null); } if (this.fittext) { @@ -77,7 +77,7 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit { } else { if (this.useMaxFontSize) { if(this.fontSize > this.maxFontSize) { - this.maxFontSize = parseInt(window.getComputedStyle(this.el.nativeElement).fontSize, null); + this.maxFontSize = parseInt(window.getComputedStyle(this.container ? this.container : this.el.nativeElement.parentElement).fontSize, null); this.setFontSize(this.maxFontSize); } } From abba46a9099010a4a44b6a9001bce59e5b0f31ed Mon Sep 17 00:00:00 2001 From: senty Date: Wed, 2 Aug 2017 16:17:28 +0200 Subject: [PATCH 06/14] 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 07/14] 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 08/14] 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 09/14] 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) { From 2b6482999e4ba14c56ec2a1afa96be59f3b9e752 Mon Sep 17 00:00:00 2001 From: senty Date: Thu, 3 Aug 2017 08:59:51 +0200 Subject: [PATCH 10/14] documentation --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 2e0061b..69530d3 100644 --- a/README.md +++ b/README.md @@ -106,6 +106,8 @@ Import it in your Angular2 project like a module | activateOnResize | enable/disable the autofit in case of window resize | true or false (default false) | activateOnInputEvents | enbale/disable the autofit in case of input box events (keydown, keyup etc..) | true or false (default false) | useMaxFontSize | Use font-size from element as maximum font-size | enable/disable the usage of max font-size of the lement + | minFontSize | minimal font size, default is 7 + | modelToWatch | pass model to watch, when this model changes -> font size is automatically recalculated ### Development From 692722f1ee3fed67a1416c983798e549dfe34ce9 Mon Sep 17 00:00:00 2001 From: senty Date: Thu, 3 Aug 2017 09:02:50 +0200 Subject: [PATCH 11/14] documentation --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 69530d3..b20152a 100644 --- a/README.md +++ b/README.md @@ -106,8 +106,8 @@ Import it in your Angular2 project like a module | activateOnResize | enable/disable the autofit in case of window resize | true or false (default false) | activateOnInputEvents | enbale/disable the autofit in case of input box events (keydown, keyup etc..) | true or false (default false) | useMaxFontSize | Use font-size from element as maximum font-size | enable/disable the usage of max font-size of the lement - | minFontSize | minimal font size, default is 7 - | modelToWatch | pass model to watch, when this model changes -> font size is automatically recalculated + | minFontSize | minimal font size | number, default is 7 + | modelToWatch | pass model to watch, when this model changes -> font size is automatically recalculated | any type of model ### Development From 1c87abbf2afc85ecded797d7352dd3b9876f8596 Mon Sep 17 00:00:00 2001 From: Lorenzo Iovino Date: Fri, 11 Aug 2017 12:17:03 +0200 Subject: [PATCH 12/14] Added resize on contentViewChanged hook --- package.json | 2 +- src/ng2fittext.directive.ts | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index e08ff7c..cfba17a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng2-fittext", - "version": "1.0.21", + "version": "1.0.22", "description": "An Angular2 directive for autoscale the font size of an element to fit an upper level container.", "main": "index.js", "scripts": { diff --git a/src/ng2fittext.directive.ts b/src/ng2fittext.directive.ts index 7263b01..c215282 100644 --- a/src/ng2fittext.directive.ts +++ b/src/ng2fittext.directive.ts @@ -1,9 +1,9 @@ -import {Directive, ElementRef, Renderer, Input, AfterViewInit, HostListener, OnInit, OnChanges, SimpleChanges} from '@angular/core'; +import {Directive, ElementRef, Renderer, Input, AfterViewInit, AfterViewChecked, HostListener, OnInit, OnChanges, SimpleChanges} from '@angular/core'; @Directive({ selector: '[fittext]' }) -export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges { +export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, AfterViewChecked { @Input('fittext') fittext: any; @Input('activateOnResize') activateOnResize: boolean; @@ -101,4 +101,9 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges { setTimeout(_ => this.ngAfterViewInit() ); } } + + ngAfterViewChecked() { + this.setFontSize(this.container ? this.container.clientWidth : this.el.nativeElement.parentElement.clientWidth); + this.ngAfterViewInit(); + } } From fc5e5e800faf10e6da28248801746941bea283c9 Mon Sep 17 00:00:00 2001 From: Lorenzo Iovino Date: Fri, 11 Aug 2017 12:19:31 +0200 Subject: [PATCH 13/14] up --- 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 c215282..7b2207b 100644 --- a/src/ng2fittext.directive.ts +++ b/src/ng2fittext.directive.ts @@ -95,7 +95,7 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af } } - ngOnChanges(changes: SimpleChanges): void { + ngOnChanges(changes: any): void { if (changes.modelToWatch) { // change of model to watch - call ngAfterViewInit where is implemented logic to change size setTimeout(_ => this.ngAfterViewInit() ); From 14a7091b5385460b1f4c810ff6143bb010144ec5 Mon Sep 17 00:00:00 2001 From: Lorenzo Iovino Date: Fri, 11 Aug 2017 14:15:31 +0200 Subject: [PATCH 14/14] Fixed ngAfterwViewChecked, now compute size with height instead width --- package.json | 2 +- src/ng2fittext.directive.ts | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index cfba17a..267a6be 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng2-fittext", - "version": "1.0.22", + "version": "1.0.23", "description": "An Angular2 directive for autoscale the font size of an element to fit an upper level container.", "main": "index.js", "scripts": { diff --git a/src/ng2fittext.directive.ts b/src/ng2fittext.directive.ts index 7b2207b..e38c07d 100644 --- a/src/ng2fittext.directive.ts +++ b/src/ng2fittext.directive.ts @@ -86,7 +86,7 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af } } else { if (this.useMaxFontSize) { - if(this.fontSize > this.maxFontSize) { + if (this.fontSize > this.maxFontSize) { this.maxFontSize = parseInt(window.getComputedStyle(this.container ? this.container : this.el.nativeElement.parentElement).fontSize, null); this.setFontSize(this.maxFontSize); } @@ -103,7 +103,9 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af } ngAfterViewChecked() { - this.setFontSize(this.container ? this.container.clientWidth : this.el.nativeElement.parentElement.clientWidth); - this.ngAfterViewInit(); + if (this.fontSize > this.minFontSize) { + this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight); + this.ngAfterViewInit(); + } } }