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

Removed console.log, added possibility of choose if fit a specified container (old way) or the element parent

Browse source
This commit is contained in:
Lorenzo Iovino 2017-06-19 11:24:41 +02:00
parent 97c428f0af
commit 129cb1251c
4 changed files with 67 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/ng2fittext.directive.ts
View file

@ -3,10 +3,11 @@ import {Directive, ElementRef, Renderer, Input, AfterViewInit, HostListener, OnI
@Directive({
selector: '[fittext]'
})
export class FittextDirective implements AfterViewInit, OnInit {
export class Ng2FittextDirective implements AfterViewInit, OnInit {
@Input('fittext') fittext: any;
@Input('activateOnResize') activateOnResize: boolean;
@Input('container') container: any;
@Input('activateOnInputEvents') activateOnInputEvents: boolean;
@Input('useMaxFontSize') useMaxFontSize: boolean;
private maxFontSize: number = 1000;
@ -17,8 +18,6 @@ export class FittextDirective implements AfterViewInit, OnInit {
}
setFontSize(fontSize) {
console.log();
this.fontSize = fontSize;
return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString() + 'px');
}
@ -28,8 +27,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,9 +38,9 @@ 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,7 +49,7 @@ export class FittextDirective implements AfterViewInit, OnInit {
@HostListener('input', ['$event'])
onInputEvents() {
if (this.activateOnInputEvents && this.fittext) {
this.setFontSize(this.el.nativeElement.parentElement.clientHeight);
this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight);
this.ngAfterViewInit();
}
}
@ -64,16 +62,18 @@ export class FittextDirective implements AfterViewInit, OnInit {
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();
}
}
}
}
}