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(); + } + } +}