commit abf9e20a50943b077cfb766008d26b344d11aa0b Author: Lorenzo Iovino Date: Tue Mar 14 13:46:18 2017 +0100 first commit - the initial version of ng2-fittext, not best but good diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b5c6a7b --- /dev/null +++ b/.gitignore @@ -0,0 +1,10 @@ +# Node generated files +node_modules +npm-debug.log +# OS generated files +Thumbs.db +.DS_Store +# Ignored files +*.js +*.map +*.d.ts \ No newline at end of file diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..1472915 --- /dev/null +++ b/.npmignore @@ -0,0 +1,9 @@ +# Node generated files +node_modules +npm-debug.log +# OS generated files +Thumbs.db +.DS_Store +# Ignored files +*.ts +!*.d.ts \ No newline at end of file diff --git a/ng2-fittext.ts b/ng2-fittext.ts new file mode 100644 index 0000000..962feed --- /dev/null +++ b/ng2-fittext.ts @@ -0,0 +1 @@ +export {FittextDirective} from './src/fittext.directive'; \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..f3192fe --- /dev/null +++ b/package.json @@ -0,0 +1,36 @@ +{ + "name": "ng2-fittext", + "version": "1.0.1", + "description": "An Angular2 directive for autoscale the font size of an element to fit an upper level container.", + "main": "index.js", + "scripts": { + "prepublish": "tsc", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/lokenxo/ng2-fittext.git" + }, + "keywords": [ + "angular2", + "ng2", + "fittext", + "ng2-fittext", + "responsivefont" + ], + "author": "Lorenzo Iovino", + "license": "ISC", + "bugs": { + "url": "https://github.com/lokenxo/ng2-fittext/issues" + }, + "homepage": "https://github.com/lokenxo/ng2-fittext#readme", + "dependencies": { + "@angular/core": "^2.4.0" + }, + "devDependencies": { + "typescript": "~2.0.0" + }, + "publishConfig": { + "registry": "https://registry.npmjs.org/" + } +} diff --git a/src/fittext.directive.spec.ts b/src/fittext.directive.spec.ts new file mode 100644 index 0000000..09f82f2 --- /dev/null +++ b/src/fittext.directive.spec.ts @@ -0,0 +1,8 @@ +import { FittextDirective } from './fittext.directive'; + +describe('FittextDirective', () => { + it('should create an instance', () => { + const directive = new FittextDirective(); + expect(directive).toBeTruthy(); + }); +}); diff --git a/src/fittext.directive.ts b/src/fittext.directive.ts new file mode 100644 index 0000000..e703b2d --- /dev/null +++ b/src/fittext.directive.ts @@ -0,0 +1,43 @@ +import {Directive, ElementRef, Renderer, Input, AfterViewInit, HostListener} from '@angular/core'; + +@Directive({ + selector: '[fittext]' +}) +export class FittextDirective implements AfterViewInit { + + @Input('fittext') fittext: any; + @Input('container') container: any; + @Input('onResize') activateOnResize: boolean; + public fontSize:number = 0; + public speed:number = 1.05; + + constructor(public el: ElementRef, public renderer: Renderer) { + } + + checkOverflowX(parent:any, children:any) { + return children.clientHeight > parent.clientHeight; + } + + @HostListener('window:resize', ['$event']) + onResize() { + if(this.activateOnResize){ + this.fontSize = 0; + this.ngAfterViewInit(); + } + } + + ngAfterViewInit() { + if (this.fittext) { + if(this.fontSize == 0){ + this.fontSize = this.container.clientWidth; + this.el.nativeElement.style.setProperty('font-size', (this.fontSize).toString()+'px'); + } + let overflow = this.checkOverflowX(this.container, this.el.nativeElement); + if(overflow) { + this.fontSize = Math.floor(this.fontSize/this.speed); + this.el.nativeElement.style.setProperty('font-size', (this.fontSize).toString()+'px'); + this.ngAfterViewInit(); + } + } + } +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..cb6f1d8 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,18 @@ +{ + "compilerOptions": { + "module": "commonjs", + "moduleResolution": "node", + "target": "es5", + "sourceMap": true, + "inlineSources": false, + "declaration": false, + "experimentalDecorators": true, + "emitDecoratorMetadata": true, + "stripInternal": true, + "skipLibCheck": true + }, + "files": [ + "ng2-fittext.ts", + "ng2-fittext.d.ts" + ] +} \ No newline at end of file