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

add maxfontsize

Browse source 
Add possibility to set maxfontsize from the element. if set to true, the
maxfontsize automaticaly set to the original font size of the element
This commit is contained in:
Thierry Nischelwitzer 2017-06-19 06:57:53 +02:00
parent 0d7652c618
commit d15bc1326e
2 changed files with 13 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

5
README.md
View file

@ -38,7 +38,7 @@ Import it in your Angular2 project like a module
@Component({ @Component({
selector: 'label', selector: 'label',
template: `<div> template: `<div>
<div [fittext]="true" [activateOnResize]="true">Bla bla bla...</div> <div [fittext]="true" [activateOnResize]="true" [useMaxFontSize]="false">Bla bla bla...</div>
</div>` </div>`
}) })
@ -53,7 +53,7 @@ Import it in your Angular2 project like a module
@Component({ @Component({
selector: 'inputbox', selector: 'inputbox',
template: `<div> template: `<div>
<input [fittext]="true" [activateOnResize]="true" [activateOnInputEvents]="true">`, <input [fittext]="true" [activateOnResize]="true" [activateOnInputEvents]="true" [useMaxFontSize]="false">`,
</div>` </div>`
}) })
@ -67,6 +67,7 @@ Import it in your Angular2 project like a module
| fittext | is the selector of the directive | true/false | fittext | is the selector of the directive | true/false
| activateOnResize | enable/disable the autofit in case of window resize | true or false (default 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) | 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 ### Development

14
src/ng2fittext.directive.ts
View file

@ -8,6 +8,8 @@ export class FittextDirective implements AfterViewInit, OnInit {
@Input('fittext') fittext: any; @Input('fittext') fittext: any;
@Input('activateOnResize') activateOnResize: boolean; @Input('activateOnResize') activateOnResize: boolean;
@Input('activateOnInputEvents') activateOnInputEvents: boolean; @Input('activateOnInputEvents') activateOnInputEvents: boolean;
@Input('useMaxFontSize') useMaxFontSize: boolean;
private maxFontSize: number = 1000;
private fontSize: number = 0; private fontSize: number = 0;
private speed: number = 1.05; private speed: number = 1.05;
@ -15,6 +17,8 @@ export class FittextDirective implements AfterViewInit, OnInit {
} }
setFontSize(fontSize) { setFontSize(fontSize) {
console.log();
this.fontSize = 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');
} }
@ -53,12 +57,12 @@ export class FittextDirective implements AfterViewInit, OnInit {
} }
ngOnInit() { ngOnInit() {
if (this.fittext) { if (this.useMaxFontSize) {
if (this.activateOnInputEvents) { this.maxFontSize = parseInt(window.getComputedStyle(this.el.nativeElement).fontSize, null);
this.setFontSize(this.el.nativeElement.parentElement.clientHeight);
} else {
this.setFontSize(this.el.nativeElement.parentElement.clientWidth);
} }
if (this.fittext) {
this.setFontSize(this.maxFontSize);
} }
this.el.nativeElement.style.setProperty('will-change', 'content'); this.el.nativeElement.style.setProperty('will-change', 'content');
} }