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..b20152a 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,22 +71,43 @@ 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
+ | 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
diff --git a/package.json b/package.json
index 0440868..267a6be 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "ng2-fittext",
- "version": "1.0.17",
+ "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 d077799..e38c07d 100644
--- a/src/ng2fittext.directive.ts
+++ b/src/ng2fittext.directive.ts
@@ -1,14 +1,17 @@
-import {Directive, ElementRef, Renderer, Input, AfterViewInit, HostListener, OnInit} from '@angular/core';
+import {Directive, ElementRef, Renderer, Input, AfterViewInit, AfterViewChecked, HostListener, OnInit, OnChanges, SimpleChanges} from '@angular/core';
@Directive({
selector: '[fittext]'
})
-export class FittextDirective implements AfterViewInit, OnInit {
+export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, AfterViewChecked {
@Input('fittext') fittext: any;
@Input('activateOnResize') activateOnResize: boolean;
+ @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;
private speed: number = 1.05;
@@ -17,7 +20,10 @@ export class FittextDirective implements AfterViewInit, OnInit {
}
setFontSize(fontSize) {
- console.log();
+ 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');
@@ -28,8 +34,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,10 +45,11 @@ 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,29 +57,55 @@ export class FittextDirective implements AfterViewInit, OnInit {
@HostListener('input', ['$event'])
onInputEvents() {
if (this.activateOnInputEvents && this.fittext) {
- this.setFontSize(this.el.nativeElement.parentElement.clientHeight);
- this.ngAfterViewInit();
+ this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight);
+ this.ngAfterViewInit();
}
}
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) {
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();
+ 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) {
+ this.maxFontSize = parseInt(window.getComputedStyle(this.container ? this.container : this.el.nativeElement.parentElement).fontSize, null);
+ this.setFontSize(this.maxFontSize);
+ }
+ }
}
}
}
-}
\ No newline at end of file
+
+ ngOnChanges(changes: any): void {
+ if (changes.modelToWatch) {
+ // change of model to watch - call ngAfterViewInit where is implemented logic to change size
+ setTimeout(_ => this.ngAfterViewInit() );
+ }
+ }
+
+ ngAfterViewChecked() {
+ if (this.fontSize > this.minFontSize) {
+ this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight);
+ this.ngAfterViewInit();
+ }
+ }
+}