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

Refactoring

Browse source
This commit is contained in:
Lorenzo Iovino 2017-03-26 18:04:41 +02:00
parent 8c4ed13876
commit fa661c5060
1 changed files with 27 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/ng2fittext.directive.ts
View file

@ -1,44 +1,55 @@
import {Directive, ElementRef, Renderer, Input, AfterViewInit, HostListener} from '@angular/core'; import {Directive, ElementRef, Renderer, Input, AfterViewInit, HostListener, OnInit} from '@angular/core';
@Directive({ @Directive({
selector: '[fittext]' selector: '[fittext]'
}) })
export class Ng2FittextDirective implements AfterViewInit { export class Ng2FittextDirective implements AfterViewInit, OnInit {
@Input('fittext') fittext: any; @Input('fittext') fittext: any;
@Input('container') container: any; @Input('container') container: any;
@Input('activateOnResize') activateOnResize: boolean; @Input('activateOnResize') activateOnResize: boolean;
public fontSize:number = 0; private fontSize: number = 0;
public speed:number = 1.05; private speed: number = 1.05;
constructor(public el: ElementRef, public renderer: Renderer) { constructor(public el: ElementRef, public renderer: Renderer) {
} }
setFontSize(fontSize) {
this.fontSize = fontSize;
return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString()+'px');
}
calculateFontSize(fontSize, speed){
// TODO Do with Gauss
return Math.floor(fontSize/speed);
}
checkOverflow(parent:any, children:any) { checkOverflow(parent:any, children:any) {
return (children.clientHeight > parent.clientHeight || children.scrollWidth > parent.clientWidth); let overflowX = children.scrollWidth - parent.clientWidth;
let overflowY = children.clientHeight - parent.clientHeight;
return (overflowX > 1 || overflowY > 1);
} }
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize() { onResize() {
if(this.activateOnResize){ if(this.activateOnResize && this.fittext) {
this.fontSize = 0; this.setFontSize(this.container.clientWidth);
this.ngAfterViewInit(); this.ngAfterViewInit();
} }
} }
ngOnInit() {
if (this.fittext) {
this.setFontSize(this.container.clientWidth);
this.el.nativeElement.style.setProperty('will-change', 'content');
}
}
ngAfterViewInit() { ngAfterViewInit() {
if (this.fittext) { if (this.fittext) {
if(this.fontSize == 0){
this.fontSize = this.container.clientWidth;
this.el.nativeElement.style.setProperty('font-size', (this.fontSize).toString()+'px');
}
let overflow = this.checkOverflow(this.container, this.el.nativeElement); let overflow = this.checkOverflow(this.container, this.el.nativeElement);
if(overflow) { if(overflow) {
if(this.fontSize < 2) { this.setFontSize(this.calculateFontSize(this.fontSize, this.speed));
return;
}
this.fontSize = Math.floor(this.fontSize/this.speed);
this.el.nativeElement.style.setProperty('font-size', (this.fontSize).toString()+'px');
this.ngAfterViewInit(); this.ngAfterViewInit();
} }
} }