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

Avoid rerendering #13

Merged
nischi merged 3 commits from master into master 2017-08-24 07:42:42 +00:00
Conversation 1 Commits 3 Files changed 1 +50 -34
1 changed files with 50 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit f10725757b - Show all commits

42
src/ng2fittext.directive.ts
View file

@ -13,14 +13,14 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af
@Input('minFontSize') minFontSize = 7; @Input('minFontSize') minFontSize = 7;
@Input('modelToWatch') modelToWatch: any; @Input('modelToWatch') modelToWatch: any;
private maxFontSize: number = 1000; private maxFontSize: number = 1000;
private fontSize: number = 0; private fontSize: number = 1000;
private speed: number = 1.05; private speed: number = 1.05;
private done: boolean = false; private done: boolean = false;
constructor(public el: ElementRef, public renderer: Renderer) { constructor(public el: ElementRef, public renderer: Renderer) { }
}
setFontSize(fontSize) { setFontSize(fontSize) {
if (this.isVisible() && this.done === false) {
if (fontSize < this.minFontSize) { if (fontSize < this.minFontSize) {
// force that font size will never be lower than minimal allowed font size // force that font size will never be lower than minimal allowed font size
fontSize = this.minFontSize; fontSize = this.minFontSize;
@ -29,6 +29,7 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af
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');
} }
}
calculateFontSize(fontSize, speed) { calculateFontSize(fontSize, speed) {
// TODO Do with Gauss // TODO Do with Gauss
@ -36,7 +37,6 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af
} }
checkOverflow(parent: any, children: any) { checkOverflow(parent: any, children: any) {
let overflowX = children.scrollWidth - parent.clientWidth; let overflowX = children.scrollWidth - parent.clientWidth;
let overflowY = children.clientHeight - parent.clientHeight; let overflowY = children.clientHeight - parent.clientHeight;
return (overflowX > 1 || overflowY > 1); return (overflowX > 1 || overflowY > 1);
@ -47,9 +47,9 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af
this.done = false; this.done = false;
if (this.activateOnResize && this.fittext) { if (this.activateOnResize && this.fittext) {
if (this.activateOnInputEvents && this.fittext) { if (this.activateOnInputEvents && this.fittext) {
this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight); this.setFontSize(this.getStartFontSizeFromHeight());
} else { } else {
this.setFontSize(this.container ? this.container.clientWidth : this.el.nativeElement.parentElement.clientWidth); this.setFontSize(this.getStartFontSizeFromWeight());
} }
this.ngAfterViewInit(); this.ngAfterViewInit();
@ -60,14 +60,15 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af
onInputEvents() { onInputEvents() {
this.done = false; this.done = false;
if (this.activateOnInputEvents && this.fittext) { if (this.activateOnInputEvents && this.fittext) {
this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight); this.setFontSize(this.getStartFontSizeFromHeight());
this.ngAfterViewInit(); this.ngAfterViewInit();
} }
} }
ngOnInit() { ngOnInit() {
this.done = false;
if (this.useMaxFontSize) { if (this.useMaxFontSize) {
this.maxFontSize = parseInt(window.getComputedStyle(this.container ? this.container : this.el.nativeElement.parentElement).fontSize, null); this.maxFontSize = parseInt(this.getComputetStyle().fontSize, null);
} }
if (this.fittext) { if (this.fittext) {
@ -78,7 +79,8 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af
} }
ngAfterViewInit() { ngAfterViewInit() {
if (this.fittext && this.done === false) { if (this.isVisible() && this.done === false) {
if (this.fittext) {
let overflow = this.container ? this.checkOverflow(this.container, this.el.nativeElement) let overflow = this.container ? this.checkOverflow(this.container, this.el.nativeElement)
: this.checkOverflow(this.el.nativeElement.parentElement, this.el.nativeElement); : this.checkOverflow(this.el.nativeElement.parentElement, this.el.nativeElement);
if (overflow) { if (overflow) {
@ -90,7 +92,7 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af
} else { } else {
if (this.useMaxFontSize) { if (this.useMaxFontSize) {
if (this.fontSize > this.maxFontSize) { if (this.fontSize > this.maxFontSize) {
this.maxFontSize = parseInt(window.getComputedStyle(this.container ? this.container : this.el.nativeElement.parentElement).fontSize, null); this.maxFontSize = parseInt(this.getComputetStyle().fontSize, null);
this.setFontSize(this.maxFontSize); this.setFontSize(this.maxFontSize);
} }
} }
@ -98,6 +100,7 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af
} }
} }
} }
}
ngOnChanges(changes: any): void { ngOnChanges(changes: any): void {
if (changes.modelToWatch) { if (changes.modelToWatch) {
@ -108,11 +111,24 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af
ngAfterViewChecked() { ngAfterViewChecked() {
if (this.fontSize > this.minFontSize) { if (this.fontSize > this.minFontSize) {
const fontSize = this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight; this.setFontSize(this.getStartFontSizeFromHeight());
if (fontSize > 0 && this.done === false) {
this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight);
this.ngAfterViewInit(); this.ngAfterViewInit();
} }
} }
private getComputetStyle(): CSSStyleDeclaration {
return window.getComputedStyle(this.container ? this.container : this.el.nativeElement.parentElement);
}
private getStartFontSizeFromHeight(): number {
return this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight;
}
private getStartFontSizeFromWeight(): number {
return this.container ? this.container.clientWidth : this.el.nativeElement.parentElement.clientWidth;
}
private isVisible(): boolean {
return this.getStartFontSizeFromHeight() > 0;
} }
} }