first commit - the initial version of ng2-fittext, not best but good
This commit is contained in:
commit
abf9e20a50
7 changed files with 125 additions and 0 deletions
10
.gitignore
vendored
Normal file
10
.gitignore
vendored
Normal 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
9
.npmignore
Normal 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
1
ng2-fittext.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export {FittextDirective} from './src/fittext.directive';
|
||||
36
package.json
Normal file
36
package.json
Normal 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/"
|
||||
}
|
||||
}
|
||||
8
src/fittext.directive.spec.ts
Normal file
8
src/fittext.directive.spec.ts
Normal 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
43
src/fittext.directive.ts
Normal 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
18
tsconfig.json
Normal 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"
|
||||
]
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue