diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 3a2c066..36a6239 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -5,8 +5,18 @@ + + + + + + + + + + @@ -79,51 +89,54 @@ - - + + - + - + + - - - + + + + - - - + + + + - - - - - + + + + + - - - - - + + + + + @@ -131,65 +144,83 @@ - + - - + + + + + + + + + + + + + + + + + + + + + - + - - + + - + - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - + + + + + + + + + + + + + + + + + + + + + + + + + @@ -197,22 +228,8 @@ - - - - - - - - - - - - - - - - + + @@ -238,6 +255,10 @@ ng2 Proxy tar + maxFontSize + useMax + use + useFont Ngx @@ -255,7 +276,6 @@ @@ -303,6 +325,7 @@ + @@ -315,6 +338,12 @@ + + + + + + @@ -336,16 +365,18 @@ - - - + + + + + + `, + `, ` }) @@ -89,7 +89,7 @@ Import it in your Angular2 project like a module @Component({ selector: 'inputbox', template: `
- `, + `,
` }) @@ -105,7 +105,7 @@ Import it in your Angular2 project like a module | 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) - | useMaxFontSize | Use font-size from element as maximum font-size | enable/disable the usage of max font-size of the lement + | maxFontSize | maximal font size | number, default is 1000 | 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 diff --git a/examples/dev/package-lock.json b/examples/dev/package-lock.json index 70289cb..df79bb1 100644 --- a/examples/dev/package-lock.json +++ b/examples/dev/package-lock.json @@ -6450,9 +6450,9 @@ "dev": true }, "ng2-fittext": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/ng2-fittext/-/ng2-fittext-1.2.1.tgz", - "integrity": "sha512-jPv7VDa1Buk0+UWev6MzGB9K0rFq4CiCnEvHpWvigG4MJ6xeGbGfyiEVejZ9v58K+IFnbKKdQgOUqi8zoWH8dQ==" + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/ng2-fittext/-/ng2-fittext-1.2.2.tgz", + "integrity": "sha512-19nLCEXk0ig0Tzk8RlkUwdlTxyo2YyFViwV0yPZCvNlaPLUE84bmUkJ0iA8Bn1pV3eOJcBk/DRWA8Kggd7fVTQ==" }, "nice-try": { "version": "1.0.5", diff --git a/examples/dev/src/app/app.component.html b/examples/dev/src/app/app.component.html index c57d534..9cbc1f6 100644 --- a/examples/dev/src/app/app.component.html +++ b/examples/dev/src/app/app.component.html @@ -2,8 +2,9 @@
{{title}}
+ [maxFontSize]="50" + [minFontSize]="30" + [activateOnResize]="true">{{title}}
diff --git a/examples/dev/src/app/app.module.ts b/examples/dev/src/app/app.module.ts index 5259011..129358b 100644 --- a/examples/dev/src/app/app.module.ts +++ b/examples/dev/src/app/app.module.ts @@ -1,17 +1,17 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; -import {Ng2FittextModule} from 'ng2-fittext'; +import {Ng2FittextDirective} from './ng2-fittext.directive'; @NgModule({ declarations: [ - AppComponent + AppComponent, + Ng2FittextDirective ], imports: [ - BrowserModule, - Ng2FittextModule + BrowserModule ], - providers: [], + providers: [Ng2FittextDirective], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/examples/dev/src/app/ng2-fittext.directive.ts b/examples/dev/src/app/ng2-fittext.directive.ts index 8b44258..36c8d10 100644 --- a/examples/dev/src/app/ng2-fittext.directive.ts +++ b/examples/dev/src/app/ng2-fittext.directive.ts @@ -18,10 +18,9 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af @Input('activateOnResize') activateOnResize: boolean; @Input('container') container: HTMLElement; @Input('activateOnInputEvents') activateOnInputEvents: boolean; - @Input('useMaxFontSize') useMaxFontSize: boolean; @Input('minFontSize') minFontSize = 7; + @Input('maxFontSize') maxFontSize = 1000; @Input('modelToWatch') modelToWatch: any; - private maxFontSize = 1000; private fontSize = 1000; private speed = 1.05; private done = false; @@ -35,6 +34,9 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af // force that font size will never be lower than minimal allowed font size fontSize = this.minFontSize; } + if(fontSize > this.maxFontSize){ + fontSize = this.maxFontSize; + } this.fontSize = fontSize; return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString() + 'px'); @@ -77,13 +79,10 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af ngOnInit() { this.done = false; - if (this.useMaxFontSize) { - const fontSize = this.getComputetStyle().fontSize; - if (fontSize) { - this.maxFontSize = parseInt(fontSize, undefined); - } + const fontSize = this.getComputetStyle().fontSize; + if (fontSize) { + this.maxFontSize = parseInt(fontSize, undefined); } - if (this.fittext) { this.setFontSize(this.maxFontSize); } @@ -104,13 +103,11 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af this.ngAfterViewInit(); } } else { - if (this.useMaxFontSize) { - if (this.fontSize > this.maxFontSize) { - const fontSize = this.getComputetStyle().fontSize; - if (fontSize) { - this.maxFontSize = parseInt(fontSize, undefined); - this.setFontSize(this.maxFontSize); - } + if (this.fontSize > this.maxFontSize) { + const fontSize = this.getComputetStyle().fontSize; + if (fontSize) { + this.maxFontSize = parseInt(fontSize, undefined); + this.setFontSize(this.maxFontSize); } } this.done = true; diff --git a/package-lock.json b/package-lock.json index a0f4234..da13f80 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "ng2-fittext", - "version": "1.2.1", + "version": "1.2.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 0c22349..08f178d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng2-fittext", - "version": "1.2.2", + "version": "1.2.3", "description": "Ng2 Fittext, an Angular library", "main": "./bundles/ng2-fittext.umd.js", "module": "./ng2-fittext.es5.js", diff --git a/publishPackage.json b/publishPackage.json index 179ab61..197a9cd 100644 --- a/publishPackage.json +++ b/publishPackage.json @@ -1,6 +1,6 @@ { "name": "ng2-fittext", - "version": "1.2.2", + "version": "1.2.3", "description": "Ng2-fittext: An Angular2+ directive that change the font size until it fit the upper level container dimension.", "main": "./bundles/ng2-fittext.umd.js", "module": "./ng2-fittext.es5.js", diff --git a/src/directives/ng2-fittext.directive.ts b/src/directives/ng2-fittext.directive.ts index 6ee06ff..e484a31 100644 --- a/src/directives/ng2-fittext.directive.ts +++ b/src/directives/ng2-fittext.directive.ts @@ -18,10 +18,9 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af @Input('activateOnResize') activateOnResize: boolean; @Input('container') container: HTMLElement; @Input('activateOnInputEvents') activateOnInputEvents: boolean; - @Input('useMaxFontSize') useMaxFontSize: boolean; @Input('minFontSize') minFontSize = 7; + @Input('maxFontSize') maxFontSize = 1000; @Input('modelToWatch') modelToWatch: any; - private maxFontSize = 1000; private fontSize = 1000; private speed = 1.05; private done = false; @@ -35,6 +34,9 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af // force that font size will never be lower than minimal allowed font size fontSize = this.minFontSize; } + if(fontSize > this.maxFontSize){ + fontSize = this.maxFontSize; + } this.fontSize = fontSize; return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString() + 'px'); @@ -77,13 +79,10 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af ngOnInit() { this.done = false; - if (this.useMaxFontSize) { - const fontSize = this.getComputetStyle().fontSize; - if (fontSize) { - this.maxFontSize = parseInt(fontSize, undefined); - } + const fontSize = this.getComputetStyle().fontSize; + if (fontSize) { + this.maxFontSize = parseInt(fontSize, undefined); } - if (this.fittext) { this.setFontSize(this.maxFontSize); } @@ -104,13 +103,11 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, Af this.ngAfterViewInit(); } } else { - if (this.useMaxFontSize) { - if (this.fontSize > this.maxFontSize) { - const fontSize = this.getComputetStyle().fontSize; - if (fontSize) { - this.maxFontSize = parseInt(fontSize, undefined); - this.setFontSize(this.maxFontSize); - } + if (this.fontSize > this.maxFontSize) { + const fontSize = this.getComputetStyle().fontSize; + if (fontSize) { + this.maxFontSize = parseInt(fontSize, undefined); + this.setFontSize(this.maxFontSize); } } this.done = true; diff --git a/src/distPackage.json b/src/distPackage.json deleted file mode 100644 index b29fbb0..0000000 --- a/src/distPackage.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "name": "angular-amazing", - "version": "1.0.0", - "description": "An amazing module for Angular.", - "main": "bundles/amazing.umd.js", - "module": "index.js", - "typings": "index.d.ts", - "keywords": [ - "angular", - "angular2", - "angular 2", - "angular4" - ], - "author": "Your name", - "license": "MIT", - "repository": { - "type": "git", - "url": "https://github.com/youraccount/angular-amazing.git" - }, - "homepage": "https://github.com/youraccount/angular-amazing", - "bugs": { - "url": "https://github.com/youraccount/angular-amazing/issues" - }, - "peerDependencies": { - "@angular/core": "^2.4.0 || ^4.0.0", - "rxjs": "^5.0.1" - } -} \ No newline at end of file