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'); }