From 4e79341410f5e97444c278d5642217ee61ef084e Mon Sep 17 00:00:00 2001 From: Giacomo Ferlaino Date: Thu, 12 Mar 2020 22:32:26 +0100 Subject: [PATCH 01/11] fix: Enabled decorators support for VSCode --- .vscode/settings.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 864b7ce..40aae00 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,5 @@ { "prettier.configPath": "./src/.prettierrc", - "editor.formatOnSave": true + "editor.formatOnSave": true, + "javascript.implicitProjectConfig.experimentalDecorators": true } \ No newline at end of file From 7fe1b1ab3031e515ec98a21a46f32c9c5da89b7e Mon Sep 17 00:00:00 2001 From: Giacomo Ferlaino Date: Thu, 12 Mar 2020 22:47:14 +0100 Subject: [PATCH 02/11] feat: Added headless test command --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index ca68a8d..1e9a344 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "start": "./node_modules/.bin/ng serve", "build": "./node_modules/.bin/ng build --aot --prod", "test": "./node_modules/.bin/ng test", + "test:headless": "./node_modules/.bin/ng test --browsers=ChromeHeadless", "lint": "./node_modules/.bin/ng lint", "e2e": "./node_modules/.bin/ng e2e", "pack": "./node_modules/.bin/ng-packagr -p ./src/lib/package.json" From 889b0364a94418448c59d7e16246a529a3111696 Mon Sep 17 00:00:00 2001 From: Giacomo Ferlaino Date: Fri, 13 Mar 2020 00:51:50 +0100 Subject: [PATCH 03/11] feat: Added headless test configuration (vscode debug support) --- .vscode/launch.json | 20 ++++++++++++++++++++ karma.conf.js | 20 +++++++++++++------- package.json | 2 +- 3 files changed, 34 insertions(+), 8 deletions(-) create mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..38981d2 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,20 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "attach", + "name": "Unit tests", + "address": "localhost", + "port": 9333, + "sourceMaps": true, + "webRoot": "${workspaceFolder}", + "pathMapping": { + "/_karma_webpack_": "${workspaceFolder}" + } + } + ] +} diff --git a/karma.conf.js b/karma.conf.js index b6e0042..13f7a1e 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -1,7 +1,7 @@ // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html -module.exports = function (config) { +module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular-devkit/build-angular'], @@ -10,22 +10,28 @@ module.exports = function (config) { require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'), - require('@angular-devkit/build-angular/plugins/karma') + require('@angular-devkit/build-angular/plugins/karma'), ], client: { - clearContext: false // leave Jasmine Spec Runner output visible in browser + clearContext: false, // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { dir: require('path').join(__dirname, '../coverage'), reports: ['html', 'lcovonly'], - fixWebpackSourcePaths: true + fixWebpackSourcePaths: true, }, reporters: ['progress', 'kjhtml'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, - browsers: ['Chrome'], - singleRun: false + browsers: ['Chrome', 'ChromeHeadlessDebug'], + customLaunchers: { + ChromeHeadlessDebug: { + base: 'ChromeHeadless', + flags: ['--remote-debugging-port=9333'], + }, + }, + singleRun: false, }); -}; \ No newline at end of file +}; diff --git a/package.json b/package.json index 1e9a344..f8c7333 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "start": "./node_modules/.bin/ng serve", "build": "./node_modules/.bin/ng build --aot --prod", "test": "./node_modules/.bin/ng test", - "test:headless": "./node_modules/.bin/ng test --browsers=ChromeHeadless", + "test:headless": "./node_modules/.bin/ng test --browsers=ChromeHeadlessDebug", "lint": "./node_modules/.bin/ng lint", "e2e": "./node_modules/.bin/ng e2e", "pack": "./node_modules/.bin/ng-packagr -p ./src/lib/package.json" From e54f881e554290394312b52d62f41487508b4cec Mon Sep 17 00:00:00 2001 From: Giacomo Ferlaino Date: Fri, 13 Mar 2020 00:52:56 +0100 Subject: [PATCH 04/11] feat: Added setFontSize method unit tests --- src/lib/directives/ng2-fittext.directive.ts | 21 +++-- .../specs/ng2-fittext.directive.spec.ts | 90 +++++++++++++++++++ 2 files changed, 104 insertions(+), 7 deletions(-) create mode 100644 src/lib/directives/specs/ng2-fittext.directive.spec.ts diff --git a/src/lib/directives/ng2-fittext.directive.ts b/src/lib/directives/ng2-fittext.directive.ts index 3d7b7e6..3b7813a 100644 --- a/src/lib/directives/ng2-fittext.directive.ts +++ b/src/lib/directives/ng2-fittext.directive.ts @@ -29,7 +29,7 @@ export class Ng2FittextDirective @Input('modelToWatch') modelToWatch: any; - @Output() fontSizeChanged = new EventEmitter(); + @Output() fontSizeChanged: EventEmitter = new EventEmitter(); private fontSize = 1000; private speed = 1.05; @@ -37,24 +37,27 @@ export class Ng2FittextDirective constructor(public el: ElementRef, public renderer: Renderer2) {} - setFontSize(fontSize: number) { - if (this.isVisible() && !this.done) { + setFontSize(fontSize: number): void { + if (this.isVisible() && !this.isDone()) { if (fontSize < this.minFontSize) { fontSize = this.minFontSize; } if (fontSize > this.maxFontSize) { fontSize = this.maxFontSize; } - this.fontSize = fontSize; this.fontSizeChanged.emit(fontSize); - return this.el.nativeElement.style.setProperty( + this.el.nativeElement.style.setProperty( 'font-size', fontSize.toString() + 'px' ); } } + getFontSize(): number { + return this.fontSize; + } + calculateFontSize(fontSize: number, speed: number) { return Math.floor(fontSize / speed); } @@ -95,7 +98,7 @@ export class Ng2FittextDirective } ngAfterViewInit() { - if (this.isVisible() && !this.done) { + if (this.isVisible() && !this.isDone()) { if (this.fittext) { const overflow = this.container ? this.checkOverflow(this.container, this.el.nativeElement) @@ -146,7 +149,11 @@ export class Ng2FittextDirective : this.el.nativeElement.parentElement.clientWidth; } - private isVisible(): boolean { + isDone(): boolean { + return this.done; + } + + isVisible(): boolean { return this.getStartFontSizeFromHeight() > 0; } } diff --git a/src/lib/directives/specs/ng2-fittext.directive.spec.ts b/src/lib/directives/specs/ng2-fittext.directive.spec.ts new file mode 100644 index 0000000..467e56c --- /dev/null +++ b/src/lib/directives/specs/ng2-fittext.directive.spec.ts @@ -0,0 +1,90 @@ +import { Ng2FittextDirective } from '../ng2-fittext.directive'; +import { Renderer2, ElementRef } from '@angular/core'; + +describe('Class: Ng2FittextDirective', () => { + let ng2FittextDirective: Ng2FittextDirective; + let elMock: ElementRef; + let rendererMock: Renderer2; + + beforeEach(() => { + elMock = {} as ElementRef; + rendererMock = {} as Renderer2; + ng2FittextDirective = new Ng2FittextDirective(elMock, rendererMock); + }); + + describe('Method: setFontSize', () => { + let newFontSize: number; + let isVisibleSpy: jasmine.Spy; + let isDoneSpy: jasmine.Spy; + + beforeEach(() => { + newFontSize = 100; + isVisibleSpy = spyOn(ng2FittextDirective, 'isVisible').and.returnValue( + true + ); + isDoneSpy = spyOn(ng2FittextDirective, 'isDone').and.returnValue(false); + elMock.nativeElement = { + style: { + setProperty: () => {}, + }, + }; + }); + + it('Should not change the font size if the element is not visible', () => { + isVisibleSpy.and.returnValue(false); + const previousFontSize: number = ng2FittextDirective.getFontSize(); + ng2FittextDirective.setFontSize(newFontSize); + expect(ng2FittextDirective.getFontSize()).toEqual(previousFontSize); + }); + + it('Should not change the font size if the fitting operation is done', () => { + isDoneSpy.and.returnValue(true); + const previousFontSize: number = ng2FittextDirective.getFontSize(); + ng2FittextDirective.setFontSize(newFontSize); + expect(ng2FittextDirective.getFontSize()).toEqual(previousFontSize); + }); + + it('Should use the minFontSize property value if the specified font size is smaller', () => { + const minFontSize: number = ng2FittextDirective.minFontSize; + newFontSize = 5; + ng2FittextDirective.setFontSize(newFontSize); + const currentFontSize: number = ng2FittextDirective.getFontSize(); + expect(currentFontSize).toEqual(minFontSize); + }); + + it('Should use the maxFontSize property value if the specified font size is bigger', () => { + const maxFontSize: number = ng2FittextDirective.maxFontSize; + newFontSize = 1001; + ng2FittextDirective.setFontSize(newFontSize); + const currentFontSize: number = ng2FittextDirective.getFontSize(); + expect(currentFontSize).toEqual(maxFontSize); + }); + + it('Should set a new fontSize value', () => { + newFontSize = 500; + ng2FittextDirective.setFontSize(newFontSize); + const currentFontSize: number = ng2FittextDirective.getFontSize(); + expect(currentFontSize).toEqual(newFontSize); + }); + + it('Should emit the font size change', () => { + newFontSize = 500; + spyOn(ng2FittextDirective.fontSizeChanged, 'emit'); + ng2FittextDirective.setFontSize(newFontSize); + const currentFontSize: number = ng2FittextDirective.getFontSize(); + expect(ng2FittextDirective.fontSizeChanged.emit).toHaveBeenCalledWith( + newFontSize + ); + }); + + it('Should update the nativeElement with the new font size', () => { + newFontSize = 500; + spyOn(ng2FittextDirective.el.nativeElement.style, 'setProperty'); + ng2FittextDirective.setFontSize(newFontSize); + const currentFontSize: number = ng2FittextDirective.getFontSize(); + expect( + ng2FittextDirective.el.nativeElement.style.setProperty + ).toHaveBeenCalledWith('font-size', `${newFontSize}px`); + }); + }); +}); From b3aab20ac2f6b1563b4a881db7cb14e90c057418 Mon Sep 17 00:00:00 2001 From: Giacomo Ferlaino Date: Fri, 13 Mar 2020 21:26:11 +0100 Subject: [PATCH 05/11] feat: Added getFontSize method test --- src/lib/directives/specs/ng2-fittext.directive.spec.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/lib/directives/specs/ng2-fittext.directive.spec.ts b/src/lib/directives/specs/ng2-fittext.directive.spec.ts index 467e56c..11bceaf 100644 --- a/src/lib/directives/specs/ng2-fittext.directive.spec.ts +++ b/src/lib/directives/specs/ng2-fittext.directive.spec.ts @@ -87,4 +87,10 @@ describe('Class: Ng2FittextDirective', () => { ).toHaveBeenCalledWith('font-size', `${newFontSize}px`); }); }); + + describe('Method: getFontSize', () => { + it('Should return the current font size', () => { + expect(ng2FittextDirective.getFontSize()).toEqual(1000); + }); + }); }); From afa67c729b03e798ccaccd6b0c8e8b0a2c975b29 Mon Sep 17 00:00:00 2001 From: Giacomo Ferlaino Date: Fri, 13 Mar 2020 21:26:45 +0100 Subject: [PATCH 06/11] feat: Added calculateFontSize method test --- src/lib/directives/ng2-fittext.directive.ts | 2 +- src/lib/directives/specs/ng2-fittext.directive.spec.ts | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/lib/directives/ng2-fittext.directive.ts b/src/lib/directives/ng2-fittext.directive.ts index 3b7813a..8922fbd 100644 --- a/src/lib/directives/ng2-fittext.directive.ts +++ b/src/lib/directives/ng2-fittext.directive.ts @@ -58,7 +58,7 @@ export class Ng2FittextDirective return this.fontSize; } - calculateFontSize(fontSize: number, speed: number) { + calculateFontSize(fontSize: number, speed: number): number { return Math.floor(fontSize / speed); } diff --git a/src/lib/directives/specs/ng2-fittext.directive.spec.ts b/src/lib/directives/specs/ng2-fittext.directive.spec.ts index 11bceaf..4dca2a1 100644 --- a/src/lib/directives/specs/ng2-fittext.directive.spec.ts +++ b/src/lib/directives/specs/ng2-fittext.directive.spec.ts @@ -93,4 +93,12 @@ describe('Class: Ng2FittextDirective', () => { expect(ng2FittextDirective.getFontSize()).toEqual(1000); }); }); + + describe('Method: calculateFontSize', () => { + it('Should return the font size rounded down', () => { + expect(ng2FittextDirective.calculateFontSize(10, 3)).toEqual(3); + expect(ng2FittextDirective.calculateFontSize(9, 3)).toEqual(3); + expect(ng2FittextDirective.calculateFontSize(8, 3)).toEqual(2); + }); + }); }); From e0c4c6dd997d49152906ada2bca22831575be76f Mon Sep 17 00:00:00 2001 From: Giacomo Ferlaino Date: Fri, 13 Mar 2020 21:53:48 +0100 Subject: [PATCH 07/11] feat: Added checkOverflow method tests --- src/lib/directives/ng2-fittext.directive.ts | 2 +- .../specs/ng2-fittext.directive.spec.ts | 47 ++++++++++++++++++- 2 files changed, 46 insertions(+), 3 deletions(-) diff --git a/src/lib/directives/ng2-fittext.directive.ts b/src/lib/directives/ng2-fittext.directive.ts index 8922fbd..2c435b8 100644 --- a/src/lib/directives/ng2-fittext.directive.ts +++ b/src/lib/directives/ng2-fittext.directive.ts @@ -62,7 +62,7 @@ export class Ng2FittextDirective return Math.floor(fontSize / speed); } - checkOverflow(parent: any, children: any) { + checkOverflow(parent: any, children: any): boolean { const overflowX = children.scrollWidth - parent.clientWidth; const overflowY = children.clientHeight - parent.clientHeight; return overflowX > 1 || overflowY > 1; diff --git a/src/lib/directives/specs/ng2-fittext.directive.spec.ts b/src/lib/directives/specs/ng2-fittext.directive.spec.ts index 4dca2a1..84ecdc3 100644 --- a/src/lib/directives/specs/ng2-fittext.directive.spec.ts +++ b/src/lib/directives/specs/ng2-fittext.directive.spec.ts @@ -71,7 +71,6 @@ describe('Class: Ng2FittextDirective', () => { newFontSize = 500; spyOn(ng2FittextDirective.fontSizeChanged, 'emit'); ng2FittextDirective.setFontSize(newFontSize); - const currentFontSize: number = ng2FittextDirective.getFontSize(); expect(ng2FittextDirective.fontSizeChanged.emit).toHaveBeenCalledWith( newFontSize ); @@ -81,7 +80,6 @@ describe('Class: Ng2FittextDirective', () => { newFontSize = 500; spyOn(ng2FittextDirective.el.nativeElement.style, 'setProperty'); ng2FittextDirective.setFontSize(newFontSize); - const currentFontSize: number = ng2FittextDirective.getFontSize(); expect( ng2FittextDirective.el.nativeElement.style.setProperty ).toHaveBeenCalledWith('font-size', `${newFontSize}px`); @@ -101,4 +99,49 @@ describe('Class: Ng2FittextDirective', () => { expect(ng2FittextDirective.calculateFontSize(8, 3)).toEqual(2); }); }); + + describe('Method: checkOverflow', () => { + let parentElementMock: any; + let childrenElementMock: any; + + beforeEach(() => { + parentElementMock = { + clientWidth: 0, + clientHeight: 0, + }; + childrenElementMock = { + scrollWidth: 0, + clientHeight: 0, + }; + }); + + it('Should return false if no overflow is present', () => { + expect( + ng2FittextDirective.checkOverflow( + parentElementMock, + childrenElementMock + ) + ).toBe(false); + }); + + it('Should return true if x axis has overflow', () => { + childrenElementMock.scrollWidth = 2; + expect( + ng2FittextDirective.checkOverflow( + parentElementMock, + childrenElementMock + ) + ).toBe(true); + }); + + it('Should return true if y axis has overflow', () => { + childrenElementMock.clientHeight = 2; + expect( + ng2FittextDirective.checkOverflow( + parentElementMock, + childrenElementMock + ) + ).toBe(true); + }); + }); }); From 2e73f1c9eef135667080a19a4e5e156c9983aabd Mon Sep 17 00:00:00 2001 From: Giacomo Ferlaino Date: Fri, 13 Mar 2020 22:10:33 +0100 Subject: [PATCH 08/11] feat: Added getStartFontSizeFromWeight method tests --- src/lib/directives/ng2-fittext.directive.ts | 2 +- .../specs/ng2-fittext.directive.spec.ts | 24 +++++++++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/src/lib/directives/ng2-fittext.directive.ts b/src/lib/directives/ng2-fittext.directive.ts index 2c435b8..24ee24e 100644 --- a/src/lib/directives/ng2-fittext.directive.ts +++ b/src/lib/directives/ng2-fittext.directive.ts @@ -137,7 +137,7 @@ export class Ng2FittextDirective } } - private getStartFontSizeFromHeight(): number { + getStartFontSizeFromHeight(): number { return this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight; diff --git a/src/lib/directives/specs/ng2-fittext.directive.spec.ts b/src/lib/directives/specs/ng2-fittext.directive.spec.ts index 84ecdc3..872cfc5 100644 --- a/src/lib/directives/specs/ng2-fittext.directive.spec.ts +++ b/src/lib/directives/specs/ng2-fittext.directive.spec.ts @@ -144,4 +144,28 @@ describe('Class: Ng2FittextDirective', () => { ).toBe(true); }); }); + + describe('Method: getStartFontSizeFromHeight', () => { + it('Should return the container clientHeight value if the container is present', () => { + const containerClientHeight = 10; + ng2FittextDirective.container = { + clientHeight: containerClientHeight, + } as HTMLElement; + expect(ng2FittextDirective.getStartFontSizeFromHeight()).toEqual( + containerClientHeight + ); + }); + + it('Should return the parentElement clientHeight value if no container is present', () => { + const parentlientHeight = 11; + elMock.nativeElement = { + parentElement: { + clientHeight: parentlientHeight, + }, + } as HTMLElement; + expect(ng2FittextDirective.getStartFontSizeFromHeight()).toEqual( + parentlientHeight + ); + }); + }); }); From ce51adb1fae96f18e4dc717dcd2156688f6c85a6 Mon Sep 17 00:00:00 2001 From: Giacomo Ferlaino Date: Fri, 13 Mar 2020 22:21:35 +0100 Subject: [PATCH 09/11] feat: Added isDone method test --- src/lib/directives/specs/ng2-fittext.directive.spec.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/lib/directives/specs/ng2-fittext.directive.spec.ts b/src/lib/directives/specs/ng2-fittext.directive.spec.ts index 872cfc5..262add9 100644 --- a/src/lib/directives/specs/ng2-fittext.directive.spec.ts +++ b/src/lib/directives/specs/ng2-fittext.directive.spec.ts @@ -168,4 +168,11 @@ describe('Class: Ng2FittextDirective', () => { ); }); }); + + describe('Method: isDone', () => { + it('Should return the done property value', () => { + const defaultDoneValue = false; + expect(ng2FittextDirective.isDone()).toBe(defaultDoneValue); + }); + }); }); From e90507b6b6312633bc2c089d801b7837c2fd1c31 Mon Sep 17 00:00:00 2001 From: Giacomo Ferlaino Date: Fri, 13 Mar 2020 22:27:30 +0100 Subject: [PATCH 10/11] feat: Added isVisible method tests --- .../specs/ng2-fittext.directive.spec.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/lib/directives/specs/ng2-fittext.directive.spec.ts b/src/lib/directives/specs/ng2-fittext.directive.spec.ts index 262add9..32c2ce7 100644 --- a/src/lib/directives/specs/ng2-fittext.directive.spec.ts +++ b/src/lib/directives/specs/ng2-fittext.directive.spec.ts @@ -175,4 +175,23 @@ describe('Class: Ng2FittextDirective', () => { expect(ng2FittextDirective.isDone()).toBe(defaultDoneValue); }); }); + + describe('Method: isVisible', () => { + it('Should return the true if getStartFontSizeFromHeight() is greater than zero', () => { + spyOn(ng2FittextDirective, 'getStartFontSizeFromHeight').and.returnValue( + 1 + ); + expect(ng2FittextDirective.isVisible()).toBe(true); + }); + + it('Should return the false if getStartFontSizeFromHeight() is smaller or equal to zero', () => { + const spy = spyOn( + ng2FittextDirective, + 'getStartFontSizeFromHeight' + ).and.returnValue(0); + expect(ng2FittextDirective.isVisible()).toBe(false); + spy.and.returnValue(-1); + expect(ng2FittextDirective.isVisible()).toBe(false); + }); + }); }); From 06c5055ab87a057495807155d46c5f9535699760 Mon Sep 17 00:00:00 2001 From: Giacomo Ferlaino Date: Fri, 13 Mar 2020 23:02:47 +0100 Subject: [PATCH 11/11] ref: Improved README file --- README.md | 89 +++++++++++++++++++++++++++---------------------------- 1 file changed, 44 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index 7fd5e35..f6a79b3 100644 --- a/README.md +++ b/README.md @@ -1,41 +1,45 @@ # ng2-fittext -An Angular2 directive written in pure typescript (and without jquery!), for autoscale the font size of an element to fit an upper level container. +An Angular2 directive written in pure typescript (and without jquery!), to autoscale the font size of an element so that it fits an upper level container. ### Demo + http://plnkr.co/edit/v0TQaYepV4E2Heur02j5?p=preview ### Installation Install the library + ```sh $ npm install --save ng2-fittext ``` ### Usage -1) Declare it in your module - ```sh - import {Ng2FittextModule} from "ng2-fittext"; - @NgModule({ - imports: [ - Ng2FittextModule - ] - }) + +1. Declare it in your module + ```sh + import {Ng2FittextModule} from "ng2-fittext"; + @NgModule({ + imports: [ + Ng2FittextModule + ] + }) ``` -2) Use it in your components - ```sh +2. Use it in your components + ```sh import {Component} from '@angular/core'; - @Component({ - selector: 'label', - template: `
-
Bla bla bla...
-
` - }) - export class LabelComponent {} + @Component({ + selector: 'label', + template: `
+
Bla bla bla...
+
` + }) + export class LabelComponent {} ``` ### Examples -Fit with the parent element (this works if you have a variable number of element between element and parent) + +Fit to the parent element (this works if you have a variable number of elements between your element and its parent) ```sh import {Component} from '@angular/core'; @@ -61,6 +65,7 @@ import {Component} from '@angular/core'; export class InputBoxComponent {} ``` + **NEW! Support for maxFontSize!** ```sh @@ -74,46 +79,40 @@ import {Component} from '@angular/core'; export class InputBoxComponent {} ``` +Input Parameters: - Input Parameters: +| Parameter | Description | Values | +| ------------------------------- | --------------------------------------------------------------------------------------- | ----------------------------- | +| fittext | the directive selector | true/false | +| container | the container to fit (if not present it fits to the parent container by default) | ElementRef | +| activateOnResize | enable/disable the autofit in case of window resize | true or false (default false) | +| activateOnInputEvents | enable/disable the autofit in case of input box events (keydown, keyup etc..) | true or false (default false) | +| maxFontSize | maximum font size | number, default is 1000 | +| **!deprecated!** useMaxFontSize | use max font size if is true | deprecated! | +| minFontSize | minimum font size | number, default is 7 | +| modelToWatch | pass model to watch, when this model changes -> font size is automatically recalculated | any type of model | - | Parameter | Description | Values | - | --- | --- | --- | - | fittext | is the selector of the directive | true/false - | container | the container to fit (if not present it fit default to parent container)| 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) - | maxFontSize | maximal font size | number, default is 1000 - | **!deprecated!** useMaxFontSize | use max font size if is true | deprecated! - | minFontSize | minimal font size | number, default is 7 - | modelToWatch | pass model to watch, when this model changes -> font size is automatically recalculated | any type of model +Output Parameters: +| Parameter | Description | Values | +| --------------- | ----------------- | ------ | +| fontSizeChanged | current font size | string | - Output Parameters: - - | Parameter | Description | Values | - | --- | --- | --- | - | fontSizeChanged | current font size | string - ### Development Want to contribute? Great! Simply, clone the repository! -I created this library because I always spended too much time for solve this problem and because i didn't find nothing on the web (13/03/2017) that do this without jquery and easily integrable in angular2. -For sure is not a good implementation, maybe is not the best way to do it, but, it do the job. +I created this library because I always spent too much time to solve this problem and didn't find anything on the web (13/03/2017) that does this without jquery and that is also easily integrable in angular2. +For sure it is not the best implementation, maybe is not the best way to do it, but, it gets the job done. ### Todos - - Write tests - - Find a better algorithm to find the font-size who fits better the container +- Write tests +- Find a better algorithm to find the font-size who fits better the container -License ----- +## License MIT - **Lorenzo I.** - -