Merge pull request #7 from nischi/master

remove container dependency & implement usemaxfontsize

README.md

@@ -37,8 +37,8 @@ Import it in your Angular2 project like a module
 
     @Component({
       selector: 'label',
-      template: `<div #container>
+      template: `<div>
-                    <div [fittext]="true" [activateOnResize]="true" [container]="container">Bla bla bla...</div>
+                    <div [fittext]="true" [activateOnResize]="true" [useMaxFontSize]="false">Bla bla bla...</div>
                 </div>`
     })
 
@@ -52,8 +52,8 @@ Import it in your Angular2 project like a module
 
     @Component({
       selector: 'inputbox',
-      template: `<div #container>
+      template: `<div>
-                    <input [fittext]="true" [activateOnResize]="true" [activateOnInputEvents]="true" [container]="container">`,
+                    <input [fittext]="true" [activateOnResize]="true" [activateOnInputEvents]="true" [useMaxFontSize]="false">`,
                 </div>`
     })
 
@@ -65,9 +65,9 @@ Import it in your Angular2 project like a module
   | Parameter | Description | Values |
   | --- | --- | --- |
   | 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)
   | activateOnInputEvents | enbale/disable the autofit in case of input box events (keydown, keyup etc..) | true or false (default false)
+  | useMaxFontSize | Use font-size from element as maximum font-size | enable/disable the usage of max font-size of the lement
 
 
 ### Development

src/ng2fittext.directive.ts

@@ -3,12 +3,13 @@ import {Directive, ElementRef, Renderer, Input, AfterViewInit, HostListener, OnI
 @Directive({
   selector: '[fittext]'
 })
-export class Ng2FittextDirective implements AfterViewInit, OnInit {
+export class FittextDirective implements AfterViewInit, OnInit {
 
   @Input('fittext') fittext: any;
-  @Input('container') container: any;
   @Input('activateOnResize') activateOnResize: boolean;
   @Input('activateOnInputEvents') activateOnInputEvents: boolean;
+  @Input('useMaxFontSize') useMaxFontSize: boolean;
+  private maxFontSize: number = 1000;
   private fontSize: number = 0;
   private speed: number = 1.05;
 
@@ -16,16 +17,20 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit {
   }
 
   setFontSize(fontSize) {
+    console.log();
+
     this.fontSize = fontSize;
-    return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString()+'px');
+    return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString() + 'px');
   }
 
-  calculateFontSize(fontSize, speed){
+  calculateFontSize(fontSize, speed) {
     // TODO Do with Gauss
-    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 overflowY = children.clientHeight - parent.clientHeight;
     return (overflowX > 1 || overflowY > 1);
@@ -33,11 +38,11 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit {
 
   @HostListener('window:resize', ['$event'])
   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();
     }
@@ -45,27 +50,27 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit {
 
   @HostListener('input', ['$event'])
   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();
     }
   }
 
   ngOnInit() {
-    if (this.fittext) {
+    if (this.useMaxFontSize) {
-      if(this.activateOnInputEvents) {
+      this.maxFontSize = parseInt(window.getComputedStyle(this.el.nativeElement).fontSize, null);
-        this.setFontSize(this.container.clientHeight);
-      } else {
-        this.setFontSize(this.container.clientWidth);
     }
+
+    if (this.fittext) {
+      this.setFontSize(this.maxFontSize);
     }
     this.el.nativeElement.style.setProperty('will-change', 'content');
   }
 
   ngAfterViewInit() {
     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.ngAfterViewInit();
       }