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

Model to watch #10

Merged
martinduris merged 4 commits from master into master 2017-08-02 20:09:28 +00:00
Conversation 1 Commits 4 Files changed 1 +18 -10
2 changed files with 18 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit abba46a909 - Show all commits

2
.idea/vcs.xml generated
View file

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="VcsDirectoryMappings"> <component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" /> <mapping directory="" vcs="Git" />
</component> </component>
</project> </project>

26
src/ng2fittext.directive.ts
View file

@ -1,15 +1,16 @@
import {Directive, ElementRef, Renderer, Input, AfterViewInit, HostListener, OnInit} from '@angular/core'; import {Directive, ElementRef, Renderer, Input, AfterViewInit, HostListener, OnInit, OnChanges, SimpleChanges} from '@angular/core';
@Directive({ @Directive({
selector: '[fittext]' selector: '[fittext]'
}) })
export class Ng2FittextDirective implements AfterViewInit, OnInit { export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges {
@Input('fittext') fittext: any; @Input('fittext') fittext: any;
@Input('activateOnResize') activateOnResize: boolean; @Input('activateOnResize') activateOnResize: boolean;
@Input('container') container: any; @Input('container') container: any;
@Input('activateOnInputEvents') activateOnInputEvents: boolean; @Input('activateOnInputEvents') activateOnInputEvents: boolean;
@Input('useMaxFontSize') useMaxFontSize: boolean; @Input('useMaxFontSize') useMaxFontSize: boolean;
@Input('modelToWatch') modelToWatch: string;
private maxFontSize: number = 1000; private maxFontSize: number = 1000;
private fontSize: number = 0; private fontSize: number = 0;
private speed: number = 1.05; private speed: number = 1.05;
@ -38,11 +39,11 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit {
onResize() { onResize() {
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.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight);
} else { } else {
this.setFontSize(this.container ? this.container.clientWidth : this.el.nativeElement.parentElement.clientWidth); this.setFontSize(this.container ? this.container.clientWidth : this.el.nativeElement.parentElement.clientWidth);
} }
this.ngAfterViewInit(); this.ngAfterViewInit();
} }
} }
@ -50,8 +51,8 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit {
@HostListener('input', ['$event']) @HostListener('input', ['$event'])
onInputEvents() { onInputEvents() {
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.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight);
this.ngAfterViewInit(); this.ngAfterViewInit();
} }
} }
@ -70,18 +71,25 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit {
ngAfterViewInit() { ngAfterViewInit() {
if (this.fittext) { 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) {
this.setFontSize(this.calculateFontSize(this.fontSize, this.speed)); this.setFontSize(this.calculateFontSize(this.fontSize, this.speed));
this.ngAfterViewInit(); this.ngAfterViewInit();
} 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(window.getComputedStyle(this.container ? this.container : this.el.nativeElement.parentElement).fontSize, null);
this.setFontSize(this.maxFontSize); this.setFontSize(this.maxFontSize);
} }
} }
} }
} }
} }
ngOnChanges(changes: SimpleChanges): void {
if (changes.modelToWatch) {
// change of model to watch - call ngAfterViewInit where is implemented logic to change size
setTimeout(_ => this.ngAfterViewInit() );
}
}
} }