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

remove container dependency & implement usemaxfontsize #7

Merged
nischi merged 2 commits from master into master 2017-06-19 08:21:05 +00:00
Conversation 4 Commits 2 Files changed 2 +31 -31
2 changed files with 31 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 0d7652c618 - Show all commits

9
README.md
View file

@ -37,8 +37,8 @@ Import it in your Angular2 project like a module
@Component({ @Component({
selector: 'label', selector: 'label',
template: `<div #container> template: `<div>
<div [fittext]="true" [activateOnResize]="true" [container]="container">Bla bla bla...</div> <div [fittext]="true" [activateOnResize]="true">Bla bla bla...</div>
</div>` </div>`
}) })
@ -52,8 +52,8 @@ Import it in your Angular2 project like a module
@Component({ @Component({
selector: 'inputbox', selector: 'inputbox',
template: `<div #container> template: `<div>
<input [fittext]="true" [activateOnResize]="true" [activateOnInputEvents]="true" [container]="container">`, <input [fittext]="true" [activateOnResize]="true" [activateOnInputEvents]="true">`,
</div>` </div>`
}) })
@ -65,7 +65,6 @@ Import it in your Angular2 project like a module
| Parameter | Description | Values | | Parameter | Description | Values |
| --- | --- | --- | | --- | --- | --- |
| fittext | is the selector of the directive | true/false | fittext | is the selector of the directive | true/false
| container | the container to fit | ElementRef
| activateOnResize | enable/disable the autofit in case of window resize | true or false (default false) | activateOnResize | enable/disable the autofit in case of window resize | true or false (default false)
| activateOnInputEvents | enbale/disable the autofit in case of input box events (keydown, keyup etc..) | true or false (default false) | activateOnInputEvents | enbale/disable the autofit in case of input box events (keydown, keyup etc..) | true or false (default false)

19
src/ng2fittext.directive.ts
View file

@ -3,10 +3,9 @@ import {Directive, ElementRef, Renderer, Input, AfterViewInit, HostListener, OnI
@Directive({ @Directive({
selector: '[fittext]' selector: '[fittext]'
}) })
export class Ng2FittextDirective implements AfterViewInit, OnInit { export class FittextDirective implements AfterViewInit, OnInit {
@Input('fittext') fittext: any; @Input('fittext') fittext: any;
@Input('container') container: any;
@Input('activateOnResize') activateOnResize: boolean; @Input('activateOnResize') activateOnResize: boolean;
@Input('activateOnInputEvents') activateOnInputEvents: boolean; @Input('activateOnInputEvents') activateOnInputEvents: boolean;
private fontSize: number = 0; private fontSize: number = 0;
@ -25,7 +24,9 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit {
return Math.floor(fontSize / speed); return Math.floor(fontSize / speed);
} }
checkOverflow(parent:any, children:any) { checkOverflow(children: any) {
const parent = children.parentElement;
let overflowX = children.scrollWidth - parent.clientWidth; let overflowX = children.scrollWidth - parent.clientWidth;
let overflowY = children.clientHeight - parent.clientHeight; let overflowY = children.clientHeight - parent.clientHeight;
return (overflowX > 1 || overflowY > 1); return (overflowX > 1 || overflowY > 1);
@ -35,9 +36,9 @@ 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.clientHeight); this.setFontSize(this.el.nativeElement.parentElement.clientHeight);
} else{ } else{
this.setFontSize(this.container.clientWidth); this.setFontSize(this.el.nativeElement.parentElement.clientWidth);
} }
this.ngAfterViewInit(); this.ngAfterViewInit();
} }
@ -46,7 +47,7 @@ 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.clientHeight); this.setFontSize(this.el.nativeElement.parentElement.clientHeight);
this.ngAfterViewInit(); this.ngAfterViewInit();
} }
} }
@ -54,9 +55,9 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit {
ngOnInit() { ngOnInit() {
if (this.fittext) { if (this.fittext) {
if (this.activateOnInputEvents) { if (this.activateOnInputEvents) {
this.setFontSize(this.container.clientHeight); this.setFontSize(this.el.nativeElement.parentElement.clientHeight);
} else { } else {
this.setFontSize(this.container.clientWidth); this.setFontSize(this.el.nativeElement.parentElement.clientWidth);
} }
} }
this.el.nativeElement.style.setProperty('will-change', 'content'); this.el.nativeElement.style.setProperty('will-change', 'content');
@ -64,7 +65,7 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit {
ngAfterViewInit() { ngAfterViewInit() {
if (this.fittext) { if (this.fittext) {
let overflow = this.checkOverflow(this.container, this.el.nativeElement); let overflow = this.checkOverflow(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();