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

ref: Formatted code using Prettier rules

Browse source
This commit is contained in:
Giacomo Ferlaino 2020-03-12 00:00:35 +01:00
parent 1badcaf080
commit 1c902e2d90
3 changed files with 133 additions and 128 deletions
Download patch file Download diff file Expand all files Collapse all files

231
src/directives/ng2-fittext.directive.ts
View file

@ -1,141 +1,152 @@
import {
AfterViewChecked,
AfterViewInit,
Directive,
ElementRef, HostListener,
Input,
Output,
EventEmitter,
OnChanges,
OnInit,
Renderer2
AfterViewChecked,
AfterViewInit,
Directive,
ElementRef,
HostListener,
Input,
Output,
EventEmitter,
OnChanges,
OnInit,
Renderer2,
} from '@angular/core';
@Directive({
selector: '[fittext]'
selector: '[fittext]',
})
export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, AfterViewChecked {
export class Ng2FittextDirective
implements AfterViewInit, OnInit, OnChanges, AfterViewChecked {
@Input('fittext') fittext: any;
@Input('activateOnResize') activateOnResize: boolean;
@Input('container') container: HTMLElement;
@Input('activateOnInputEvents') activateOnInputEvents: boolean;
@Input('minFontSize') minFontSize = 7;
@Input('maxFontSize') maxFontSize = 1000;
@Input('fittext') fittext: any;
@Input('activateOnResize') activateOnResize: boolean;
@Input('container') container: HTMLElement;
@Input('activateOnInputEvents') activateOnInputEvents: boolean;
@Input('minFontSize') minFontSize = 7;
@Input('maxFontSize') maxFontSize = 1000;
/* Deprecated */
@Input('useMaxFontSize') useMaxFontSize = true;
/* Deprecated */
@Input('useMaxFontSize') useMaxFontSize = true;
@Input('modelToWatch') modelToWatch: any;
@Input('modelToWatch') modelToWatch: any;
@Output() fontSizeChanged = new EventEmitter();
private fontSize = 1000;
private speed = 1.05;
private done = false;
@Output() fontSizeChanged = new EventEmitter();
constructor(public el: ElementRef,
public renderer: Renderer2) {}
private fontSize = 1000;
private speed = 1.05;
private done = false;
setFontSize(fontSize: number) {
if (this.isVisible() && !this.done) {
if (fontSize < this.minFontSize) {
fontSize = this.minFontSize;
}
if(fontSize > this.maxFontSize){
fontSize = this.maxFontSize;
}
constructor(public el: ElementRef, public renderer: Renderer2) {}
this.fontSize = fontSize;
this.fontSizeChanged.emit(fontSize);
return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString() + 'px');
}
setFontSize(fontSize: number) {
if (this.isVisible() && !this.done) {
if (fontSize < this.minFontSize) {
fontSize = this.minFontSize;
}
if (fontSize > this.maxFontSize) {
fontSize = this.maxFontSize;
}
this.fontSize = fontSize;
this.fontSizeChanged.emit(fontSize);
return this.el.nativeElement.style.setProperty(
'font-size',
fontSize.toString() + 'px'
);
}
}
calculateFontSize(fontSize: number, speed: number) {
return Math.floor(fontSize / speed);
calculateFontSize(fontSize: number, speed: number) {
return Math.floor(fontSize / speed);
}
checkOverflow(parent: any, children: any) {
const overflowX = children.scrollWidth - parent.clientWidth;
const overflowY = children.clientHeight - parent.clientHeight;
return overflowX > 1 || overflowY > 1;
}
@HostListener('window:resize', ['$event'])
onResize(event: Event) {
this.done = false;
if (this.activateOnResize && this.fittext) {
if (this.activateOnInputEvents && this.fittext) {
this.setFontSize(this.getStartFontSizeFromHeight());
} else {
this.setFontSize(this.getStartFontSizeFromWeight());
}
this.ngAfterViewInit();
}
}
checkOverflow(parent: any, children: any) {
const overflowX = children.scrollWidth - parent.clientWidth;
const overflowY = children.clientHeight - parent.clientHeight;
return (overflowX > 1 || overflowY > 1);
@HostListener('input', ['$event'])
onInputEvents(event: Event) {
this.done = false;
if (this.activateOnInputEvents && this.fittext) {
this.setFontSize(this.getStartFontSizeFromHeight());
this.ngAfterViewInit();
}
}
@HostListener('window:resize', ['$event'])
onResize(event: Event) {
this.done = false;
if (this.activateOnResize && this.fittext) {
if (this.activateOnInputEvents && this.fittext) {
this.setFontSize(this.getStartFontSizeFromHeight());
} else {
this.setFontSize(this.getStartFontSizeFromWeight());
}
ngOnInit() {
this.done = false;
this.el.nativeElement.style.setProperty('will-change', 'content');
this.ngAfterViewInit();
}
ngAfterViewInit() {
if (this.isVisible() && !this.done) {
if (this.fittext) {
const overflow = this.container
? this.checkOverflow(this.container, this.el.nativeElement)
: this.checkOverflow(
this.el.nativeElement.parentElement,
this.el.nativeElement
);
if (overflow) {
if (this.fontSize > this.minFontSize) {
// iterate only until font size is bigger than minimal value
this.setFontSize(this.calculateFontSize(this.fontSize, this.speed));
this.ngAfterViewInit();
}
} else {
this.done = true;
}
}
}
}
@HostListener('input', ['$event'])
onInputEvents(event: Event) {
ngOnChanges(changes: any): void {
if (changes.modelToWatch) {
// change of model to watch - call ngAfterViewInit where is implemented logic to change size
setTimeout(() => {
this.done = false;
if (this.activateOnInputEvents && this.fittext) {
this.setFontSize(this.getStartFontSizeFromHeight());
this.ngAfterViewInit();
}
}
ngOnInit() {
this.done = false;
this.el.nativeElement.style.setProperty('will-change', 'content');
this.setFontSize(this.maxFontSize);
this.ngAfterViewInit();
});
}
}
ngAfterViewInit() {
if (this.isVisible() && !this.done) {
if (this.fittext) {
const overflow = this.container ? this.checkOverflow(this.container, this.el.nativeElement)
: this.checkOverflow(this.el.nativeElement.parentElement, this.el.nativeElement);
if (overflow) {
if (this.fontSize > this.minFontSize) {
// iterate only until font size is bigger than minimal value
this.setFontSize(this.calculateFontSize(this.fontSize, this.speed));
this.ngAfterViewInit();
}
} else {
this.done = true;
}
}
}
ngAfterViewChecked() {
if (this.fontSize > this.minFontSize) {
this.setFontSize(this.getStartFontSizeFromHeight());
this.ngAfterViewInit();
}
}
ngOnChanges(changes: any): void {
if (changes.modelToWatch) {
// change of model to watch - call ngAfterViewInit where is implemented logic to change size
setTimeout(() => {
this.done = false;
this.setFontSize(this.maxFontSize);
this.ngAfterViewInit();
});
}
}
private getStartFontSizeFromHeight(): number {
return this.container
? this.container.clientHeight
: this.el.nativeElement.parentElement.clientHeight;
}
ngAfterViewChecked() {
if (this.fontSize > this.minFontSize) {
this.setFontSize(this.getStartFontSizeFromHeight());
this.ngAfterViewInit();
}
}
private getStartFontSizeFromWeight(): number {
return this.container
? this.container.clientWidth
: this.el.nativeElement.parentElement.clientWidth;
}
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;
}
private isVisible(): boolean {
return this.getStartFontSizeFromHeight() > 0;
}
}

28
src/ng2-fittext.module.ts
View file

@ -1,23 +1,17 @@
import { Ng2FittextDirective } from './directives/ng2-fittext.directive';
import {CommonModule} from '@angular/common';
import {NgModule} from "@angular/core";
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
@NgModule({
declarations: [
Ng2FittextDirective
],
exports: [
Ng2FittextDirective
],
imports: [
CommonModule
]
declarations: [Ng2FittextDirective],
exports: [Ng2FittextDirective],
imports: [CommonModule],
})
export class Ng2FittextModule {
static forRoot() {
return {
ngModule: Ng2FittextModule,
providers: []
};
}
static forRoot() {
return {
ngModule: Ng2FittextModule,
providers: [],
};
}
}