first commit - the initial version of ng2-fittext, not best but good

This commit is contained in:
Lorenzo Iovino 2017-03-14 13:46:18 +01:00
commit abf9e20a50
7 changed files with 125 additions and 0 deletions

10
.gitignore vendored Normal file
View file

@ -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

9
.npmignore Normal file
View file

@ -0,0 +1,9 @@
# Node generated files
node_modules
npm-debug.log
# OS generated files
Thumbs.db
.DS_Store
# Ignored files
*.ts
!*.d.ts

1
ng2-fittext.ts Normal file
View file

@ -0,0 +1 @@
export {FittextDirective} from './src/fittext.directive';

36
package.json Normal file
View file

@ -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/"
}
}

View file

@ -0,0 +1,8 @@
import { FittextDirective } from './fittext.directive';
describe('FittextDirective', () => {
it('should create an instance', () => {
const directive = new FittextDirective();
expect(directive).toBeTruthy();
});
});

43
src/fittext.directive.ts Normal file
View file

@ -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();
}
}
}
}

18
tsconfig.json Normal file
View file

@ -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"
]
}