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