From 0d7652c618cf313fc24a32c5101799b07553e42e Mon Sep 17 00:00:00 2001 From: Thierry Nischelwitzer Date: Mon, 19 Jun 2017 06:41:40 +0200 Subject: [PATCH 1/2] remove container dependency instead of container use direct parent element that we can use this directive in variable template combination --- README.md | 25 ++++++++++++------------- src/ng2fittext.directive.ts | 37 +++++++++++++++++++------------------ 2 files changed, 31 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index c5d615c..f707811 100644 --- a/README.md +++ b/README.md @@ -28,20 +28,20 @@ Import it in your Angular2 project like a module Ng2FittextModule ] }) - + ``` - + 2) Use it in your components ```sh import {Component} from '@angular/core'; - + @Component({ selector: 'label', - template: `
-
Bla bla bla...
+ template: `
+
Bla bla bla...
` }) - + export class LabelComponent {} ``` @@ -49,23 +49,22 @@ Import it in your Angular2 project like a module ```sh import {Component} from '@angular/core'; - + @Component({ selector: 'inputbox', - template: `
- `, + template: `
+ `,
` }) - + export class InputBoxComponent {} ``` Parameters: - + | Parameter | Description | Values | | --- | --- | --- | | fittext | is the selector of the directive | true/false - | container | the container to fit | 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) @@ -90,4 +89,4 @@ ISC **Lorenzo I.** - + diff --git a/src/ng2fittext.directive.ts b/src/ng2fittext.directive.ts index 9fdcbc0..040beb3 100644 --- a/src/ng2fittext.directive.ts +++ b/src/ng2fittext.directive.ts @@ -3,10 +3,9 @@ import {Directive, ElementRef, Renderer, Input, AfterViewInit, HostListener, OnI @Directive({ selector: '[fittext]' }) -export class Ng2FittextDirective implements AfterViewInit, OnInit { +export class FittextDirective implements AfterViewInit, OnInit { @Input('fittext') fittext: any; - @Input('container') container: any; @Input('activateOnResize') activateOnResize: boolean; @Input('activateOnInputEvents') activateOnInputEvents: boolean; private fontSize: number = 0; @@ -17,15 +16,17 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit { setFontSize(fontSize) { this.fontSize = fontSize; - return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString()+'px'); + return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString() + 'px'); } - calculateFontSize(fontSize, speed){ + calculateFontSize(fontSize, speed) { // TODO Do with Gauss - return Math.floor(fontSize/speed); + return Math.floor(fontSize / speed); } - checkOverflow(parent:any, children:any) { + checkOverflow(children: any) { + const parent = children.parentElement; + let overflowX = children.scrollWidth - parent.clientWidth; let overflowY = children.clientHeight - parent.clientHeight; return (overflowX > 1 || overflowY > 1); @@ -33,11 +34,11 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit { @HostListener('window:resize', ['$event']) onResize() { - if(this.activateOnResize && this.fittext) { - if(this.activateOnInputEvents && this.fittext) { - this.setFontSize(this.container.clientHeight); + if (this.activateOnResize && this.fittext) { + if (this.activateOnInputEvents && this.fittext) { + this.setFontSize(this.el.nativeElement.parentElement.clientHeight); } else{ - this.setFontSize(this.container.clientWidth); + this.setFontSize(this.el.nativeElement.parentElement.clientWidth); } this.ngAfterViewInit(); } @@ -45,18 +46,18 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit { @HostListener('input', ['$event']) onInputEvents() { - if(this.activateOnInputEvents && this.fittext) { - this.setFontSize(this.container.clientHeight); + if (this.activateOnInputEvents && this.fittext) { + this.setFontSize(this.el.nativeElement.parentElement.clientHeight); this.ngAfterViewInit(); } } ngOnInit() { if (this.fittext) { - if(this.activateOnInputEvents) { - this.setFontSize(this.container.clientHeight); + if (this.activateOnInputEvents) { + this.setFontSize(this.el.nativeElement.parentElement.clientHeight); } else { - this.setFontSize(this.container.clientWidth); + this.setFontSize(this.el.nativeElement.parentElement.clientWidth); } } this.el.nativeElement.style.setProperty('will-change', 'content'); @@ -64,11 +65,11 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit { ngAfterViewInit() { if (this.fittext) { - let overflow = this.checkOverflow(this.container, this.el.nativeElement); - if(overflow) { + let overflow = this.checkOverflow(this.el.nativeElement); + if (overflow) { this.setFontSize(this.calculateFontSize(this.fontSize, this.speed)); this.ngAfterViewInit(); } } } -} +} \ No newline at end of file From d15bc1326efc868d6a7c3b96e80f6f92fed1e807 Mon Sep 17 00:00:00 2001 From: Thierry Nischelwitzer Date: Mon, 19 Jun 2017 06:57:53 +0200 Subject: [PATCH 2/2] add maxfontsize Add possibility to set maxfontsize from the element. if set to true, the maxfontsize automaticaly set to the original font size of the element --- README.md | 5 +++-- src/ng2fittext.directive.ts | 16 ++++++++++------ 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index f707811..9e85c58 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ Import it in your Angular2 project like a module @Component({ selector: 'label', template: `
-
Bla bla bla...
+
Bla bla bla...
` }) @@ -53,7 +53,7 @@ Import it in your Angular2 project like a module @Component({ selector: 'inputbox', template: `
- `, + `,
` }) @@ -67,6 +67,7 @@ Import it in your Angular2 project like a module | fittext | is the selector of the directive | true/false | 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 ### Development diff --git a/src/ng2fittext.directive.ts b/src/ng2fittext.directive.ts index 040beb3..d077799 100644 --- a/src/ng2fittext.directive.ts +++ b/src/ng2fittext.directive.ts @@ -8,6 +8,8 @@ export class FittextDirective implements AfterViewInit, OnInit { @Input('fittext') fittext: any; @Input('activateOnResize') activateOnResize: boolean; @Input('activateOnInputEvents') activateOnInputEvents: boolean; + @Input('useMaxFontSize') useMaxFontSize: boolean; + private maxFontSize: number = 1000; private fontSize: number = 0; private speed: number = 1.05; @@ -15,6 +17,8 @@ export class FittextDirective implements AfterViewInit, OnInit { } setFontSize(fontSize) { + console.log(); + this.fontSize = fontSize; return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString() + 'px'); } @@ -37,7 +41,7 @@ export class FittextDirective implements AfterViewInit, OnInit { if (this.activateOnResize && this.fittext) { if (this.activateOnInputEvents && this.fittext) { this.setFontSize(this.el.nativeElement.parentElement.clientHeight); - } else{ + } else { this.setFontSize(this.el.nativeElement.parentElement.clientWidth); } this.ngAfterViewInit(); @@ -53,12 +57,12 @@ export class FittextDirective implements AfterViewInit, OnInit { } ngOnInit() { + if (this.useMaxFontSize) { + this.maxFontSize = parseInt(window.getComputedStyle(this.el.nativeElement).fontSize, null); + } + if (this.fittext) { - if (this.activateOnInputEvents) { - this.setFontSize(this.el.nativeElement.parentElement.clientHeight); - } else { - this.setFontSize(this.el.nativeElement.parentElement.clientWidth); - } + this.setFontSize(this.maxFontSize); } this.el.nativeElement.style.setProperty('will-change', 'content'); }