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

Ref: maxFontSize instead useMaxFontSize

Browse source
This commit is contained in:
Lorenzo Iovino 2019-05-03 17:07:42 +02:00
parent 5ae00a7caa
commit 8a6fa82fde
11 changed files with 275 additions and 252 deletions
Download patch file Download diff file Expand all files Collapse all files

5
examples/dev/src/app/app.component.html
View file

@ -2,8 +2,9 @@
<div style="border: 2px solid; overflow:hidden; width:100%; height:300px; font-size:520px;">
<div [fittext]="true"
[modelToWatch]="title"
[activateOnResize]="true"
[useMaxFontSize]="true">{{title}}</div>
[maxFontSize]="50"
[minFontSize]="30"
[activateOnResize]="true">{{title}}</div>
</div>
<button (click)="click('add')"> ADD text</button>

10
examples/dev/src/app/app.module.ts
View file

@ -1,17 +1,17 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {Ng2FittextModule} from 'ng2-fittext';
import {Ng2FittextDirective} from './ng2-fittext.directive';
@NgModule({
declarations: [
AppComponent
AppComponent,
Ng2FittextDirective
],
imports: [
BrowserModule,
Ng2FittextModule
BrowserModule
],
providers: [],
providers: [Ng2FittextDirective],
bootstrap: [AppComponent]
})
export class AppModule { }

27
examples/dev/src/app/ng2-fittext.directive.ts
View file

@ -18,10 +18,9 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af
@Input('activateOnResize') activateOnResize: boolean;
@Input('container') container: HTMLElement;
@Input('activateOnInputEvents') activateOnInputEvents: boolean;
@Input('useMaxFontSize') useMaxFontSize: boolean;
@Input('minFontSize') minFontSize = 7;
@Input('maxFontSize') maxFontSize = 1000;
@Input('modelToWatch') modelToWatch: any;
private maxFontSize = 1000;
private fontSize = 1000;
private speed = 1.05;
private done = false;
@ -35,6 +34,9 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af
// force that font size will never be lower than minimal allowed font size
fontSize = this.minFontSize;
}
if(fontSize > this.maxFontSize){
fontSize = this.maxFontSize;
}
this.fontSize = fontSize;
return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString() + 'px');
@ -77,13 +79,10 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af
ngOnInit() {
this.done = false;
if (this.useMaxFontSize) {
const fontSize = this.getComputetStyle().fontSize;
if (fontSize) {
this.maxFontSize = parseInt(fontSize, undefined);
}
const fontSize = this.getComputetStyle().fontSize;
if (fontSize) {
this.maxFontSize = parseInt(fontSize, undefined);
}
if (this.fittext) {
this.setFontSize(this.maxFontSize);
}
@ -104,13 +103,11 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af
this.ngAfterViewInit();
}
} else {
if (this.useMaxFontSize) {
if (this.fontSize > this.maxFontSize) {
const fontSize = this.getComputetStyle().fontSize;
if (fontSize) {
this.maxFontSize = parseInt(fontSize, undefined);
this.setFontSize(this.maxFontSize);
}
if (this.fontSize > this.maxFontSize) {
const fontSize = this.getComputetStyle().fontSize;
if (fontSize) {
this.maxFontSize = parseInt(fontSize, undefined);
this.setFontSize(this.maxFontSize);
}
}
this.done = true;