v 1.0.4 / cleaned up directive, test & readme

sollenne · Jun 6, 2017 · 0791cfa · 0791cfa
1 parent 6413c71
commit 0791cfa
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -37,8 +37,15 @@ Import it in your Angular4 project like a module
    
     @Component({
       selector: 'hero',
-      template: `<div #container class="hero">
-                    <h1 [fittext]="true" [activateOnResize]="true" [container]="container">RESIZE THIS TEXT</h1>
+      template: `<div #heroContainer class="hero">
+                    <h1 [fittext]
+                        [activateOnResize]="true" 
+                        [container]="heroContainer"
+                        [minFontSize]="16"
+                        [maxFontSize]="200"
+                        [compression]="1.2">
+                        RESIZE THIS TEXT
+                    </h1>
                 </div>`
     })
     
@@ -49,12 +56,12 @@ Import it in your Angular4 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 auto-scale in case of window resize | true or false (default false)
-  | compression | compression rate. How fast should the text resize | number (default 1)
-  | minFontSize | minimum font size allowed on element | number (default -infinity)
-  | MaxFontSize | maximum font size allowed on element | number (default bitSize limit)
+  | `[fittext]` (required) | Selector for the directive. It accepts a boolean value but defaults `true`. You can disable the directive for this element by passing in `false`. But why? just remove it to disable. | boolean (default `true`)
+  | `[container]` (required) | Your fittext elements parent. Must be a `div` | ElementRef (`<div>`)
+  | `[activateOnResize]` (optional) | enable/disable the auto-scale in case of window resize | boolean (default `true`)
+  | `[compression]` (optional) | compression rate. How fast should the text resize | number (default `1`)
+  | `[minFontSize]` (optional) | minimum font size allowed on element | number (default -infinity)
+  | `[minFontSize]` (optional) | maximum font size allowed on element | number (default bitSize limit)
 
 
 ### Development

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng4-fittext",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "An Angular4.* directive to auto-scale the font-size of an element to fit it's parent element.",
   "main": "index.ts",
   "scripts": {

diff --git a/src/ng4fittext.directive.spec.ts b/src/ng4fittext.directive.spec.ts
@@ -6,13 +6,15 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
 
 @Component({
     template: `
-        <h1 [fittext]="true"
-            [activateOnResize]="true"
-            [container]="fittext"
-            [maxFontSize]="160"
-            [compression]="0.7">
-            TEST ELEMENT TEXT
-        </h1>`
+        <div #container>
+            <h1 [fittext]
+                [activateOnResize]="true"
+                [container]="container"
+                [maxFontSize]="160"
+                [compression]="0.7">
+                TEST ELEMENT TEXT
+            </h1>
+        </div>`
 })
 class TestFittextComponent {
 }

diff --git a/src/ng4fittext.directive.ts b/src/ng4fittext.directive.ts
@@ -5,51 +5,35 @@ import {Directive, ElementRef, Input, AfterViewInit, HostListener} from '@angula
 })
 export class Ng4FittextDirective implements AfterViewInit {
 
-    @Input('fittext') fittext: boolean;
+    @Input('fittext') fittext: boolean = true;
     @Input('container') container: HTMLDivElement;
-    @Input('activateOnResize') activateOnResize = true;
-    @Input('maxFontSize') maxFontSize: number;
-    @Input('minFontSize') minFontSize: number;
-    @Input('compression') compression: number;
+    @Input('activateOnResize') activateOnResize: boolean = true;
+    @Input('minFontSize') minFontSize: number = -1 / 0;
+    @Input('maxFontSize') maxFontSize: number = 1 / 0;
+    @Input('compression') compression: number = 1;
 
-    public settings: any;
-    public fontSize: number;
-    public containerWidth: number;
-
-    constructor(
-        public el: ElementRef
-    ) {
-
-        this.settings = {
-            'minFontSize': -1 / 0,
-            'maxFontSize': 1 / 0,
-            'compression': 0.9
-        };
-
-        this.compression = this.compression || this.settings.compression;
-        this.minFontSize = this.minFontSize || this.settings.minFontSize;
-        this.maxFontSize = this.maxFontSize || this.settings.maxFontSize;
-    }
+    constructor(public el: ElementRef) {}
 
     private setFontSize = (): void => {
-        const windowWidth = window.screen.width;
-        const parentWidth = this.container.parentElement.clientWidth;
-        parentWidth > windowWidth ? this.containerWidth = windowWidth : this.containerWidth = parentWidth;
+        if (this.fittext) {
+            let containerWidth, fontSize;
+            const windowWidth = window.screen.width;
+            const parentWidth = this.container.parentElement.clientWidth;
+            parentWidth > windowWidth ? containerWidth = windowWidth : containerWidth = parentWidth;
+            fontSize = Math.max(Math.min(containerWidth / (this.compression * 10), this.maxFontSize), this.minFontSize);
 
-        this.fontSize = Math.max(Math.min(this.containerWidth / (this.compression * 10), this.maxFontSize), this.minFontSize);
-        return this.el.nativeElement.style.setProperty('font-size', (this.fontSize).toString() + 'px');
+            return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString() + 'px');
+        }
     };
 
     @HostListener('window:resize', ['$event'])
     public onResize = (): void => {
-        if (this.activateOnResize && this.fittext) {
+        if (this.activateOnResize) {
             this.setFontSize();
         }
     };
 
     ngAfterViewInit() {
-        if (this.fittext) {
-            this.setFontSize();
-        }
+        this.setFontSize();
     }
 }