loke/ng2-fittext
1
0
Fork 0
Code Issues 2 Pull requests 2 Projects Releases 3 Packages Wiki Activity Actions

remove container dependency & implement usemaxfontsize #7

Merged
nischi merged 2 commits from master into master 2017-06-19 08:21:05 +00:00
Conversation 4 Commits 2 Files changed 2 +13 -8
2 changed files with 13 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit d15bc1326e - Show all commits

5
README.md
View file

@ -38,7 +38,7 @@ Import it in your Angular2 project like a module
@Component({
selector: 'label',
template: `<div>
<div [fittext]="true" [activateOnResize]="true">Bla bla bla...</div>
<div [fittext]="true" [activateOnResize]="true" [useMaxFontSize]="false">Bla bla bla...</div>
</div>`
})
@ -53,7 +53,7 @@ Import it in your Angular2 project like a module
@Component({
selector: 'inputbox',
template: `<div>
<input [fittext]="true" [activateOnResize]="true" [activateOnInputEvents]="true">`,
<input [fittext]="true" [activateOnResize]="true" [activateOnInputEvents]="true" [useMaxFontSize]="false">`,
</div>`
})
@ -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

16
src/ng2fittext.directive.ts
View file

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