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