From 1c902e2d90ff8bfd5ed963344e985f3ece52e729 Mon Sep 17 00:00:00 2001 From: Giacomo Ferlaino Date: Thu, 12 Mar 2020 00:00:35 +0100 Subject: [PATCH] ref: Formatted code using Prettier rules --- package-lock.json | 2 +- src/directives/ng2-fittext.directive.ts | 231 +++++++++++++----------- src/ng2-fittext.module.ts | 28 ++- 3 files changed, 133 insertions(+), 128 deletions(-) diff --git a/package-lock.json b/package-lock.json index 708853d..a29981b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "ng2-fittext", - "version": "1.2.9", + "version": "1.2.10", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/directives/ng2-fittext.directive.ts b/src/directives/ng2-fittext.directive.ts index 4fa4902..3d7b7e6 100644 --- a/src/directives/ng2-fittext.directive.ts +++ b/src/directives/ng2-fittext.directive.ts @@ -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; + } } diff --git a/src/ng2-fittext.module.ts b/src/ng2-fittext.module.ts index bc326cb..fdc4e3e 100644 --- a/src/ng2-fittext.module.ts +++ b/src/ng2-fittext.module.ts @@ -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: [], + }; + } }