loke/ng2-fittext
1
0
Fork 0
Code Issues 2 Pull requests 2 Projects Releases 3 Packages Wiki Activity Actions

Added angular-librarian for manage library

Browse source
This commit is contained in:
Lorenzo Iovino 2017-11-14 11:07:08 +01:00
parent 9d174550f5
commit e625f9fd30
44 changed files with 1867 additions and 228 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/directives/ng2-fittext.directive.spec.ts Normal file
View file

@ -0,0 +1,15 @@
/* tslint:disable:no-unused-variable */
import {
async,
TestBed
} from '@angular/core/testing';
import { Ng2FittextDirective } from './ng2-fittext.directive';
describe('Ng2FittextDirective', () => {
it('', () => {
const directive = new Ng2FittextDirective();
expect(directive).toBeTruthy();
});
});

134
src/directives/ng2-fittext.directive.ts Normal file
View file

@ -0,0 +1,134 @@
import {Directive, ElementRef, Renderer, Input, AfterViewInit, AfterViewChecked, HostListener, OnInit, OnChanges} from '@angular/core';
@Directive({
selector: '[fittext]'
})
export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, AfterViewChecked {
@Input('fittext') fittext: any;
@Input('activateOnResize') activateOnResize: boolean;
@Input('container') container: any;
@Input('activateOnInputEvents') activateOnInputEvents: boolean;
@Input('useMaxFontSize') useMaxFontSize: boolean;
@Input('minFontSize') minFontSize = 7;
@Input('modelToWatch') modelToWatch: any;
private maxFontSize = 1000;
private fontSize = 1000;
private speed = 1.05;
private done = false;
constructor(public el: ElementRef, public renderer: Renderer) { }
setFontSize(fontSize) {
if (this.isVisible() && this.done === false) {
if (fontSize < this.minFontSize) {
// force that font size will never be lower than minimal allowed font size
fontSize = this.minFontSize;
}
this.fontSize = fontSize;
return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString() + 'px');
}
}
calculateFontSize(fontSize, speed) {
// TODO Do with Gauss
return Math.floor(fontSize / speed);
}
checkOverflow(parent: any, children: any) {
const overflowX = children.scrollWidth - parent.clientWidth;
const overflowY = children.clientHeight - parent.clientHeight;
return (overflowX > 1 || overflowY > 1);
}
@HostListener('window:resize', ['$event'])
onResize() {
this.done = false;
if (this.activateOnResize && this.fittext) {
if (this.activateOnInputEvents && this.fittext) {
this.setFontSize(this.getStartFontSizeFromHeight());
} else {
this.setFontSize(this.getStartFontSizeFromWeight());
}
this.ngAfterViewInit();
}
}
@HostListener('input', ['$event'])
onInputEvents() {
this.done = false;
if (this.activateOnInputEvents && this.fittext) {
this.setFontSize(this.getStartFontSizeFromHeight());
this.ngAfterViewInit();
}
}
ngOnInit() {
this.done = false;
if (this.useMaxFontSize) {
this.maxFontSize = parseInt(this.getComputetStyle().fontSize, null);
}
if (this.fittext) {
this.setFontSize(this.maxFontSize);
}
this.el.nativeElement.style.setProperty('will-change', 'content');
}
ngAfterViewInit() {
if (this.isVisible() && this.done === false) {
if (this.fittext) {
const overflow = this.container ? this.checkOverflow(this.container, this.el.nativeElement)
: this.checkOverflow(this.el.nativeElement.parentElement, this.el.nativeElement);
if (overflow) {
if (this.fontSize > this.minFontSize) {
// iterate only until font size is bigger than minimal value
this.setFontSize(this.calculateFontSize(this.fontSize, this.speed));
this.ngAfterViewInit();
}
} else {
if (this.useMaxFontSize) {
if (this.fontSize > this.maxFontSize) {
this.maxFontSize = parseInt(this.getComputetStyle().fontSize, null);
this.setFontSize(this.maxFontSize);
}
}
this.done = true;
}
}
}
}
ngOnChanges(changes: any): void {
if (changes.modelToWatch) {
// change of model to watch - call ngAfterViewInit where is implemented logic to change size
setTimeout(_ => this.ngAfterViewInit() );
}
}
ngAfterViewChecked() {
if (this.fontSize > this.minFontSize) {
this.setFontSize(this.getStartFontSizeFromHeight());
this.ngAfterViewInit();
}
}
private getComputetStyle(): CSSStyleDeclaration {
return window.getComputedStyle(this.container ? this.container : this.el.nativeElement.parentElement);
}
private getStartFontSizeFromHeight(): number {
return this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight;
}
private getStartFontSizeFromWeight(): number {
return this.container ? this.container.clientWidth : this.el.nativeElement.parentElement.clientWidth;
}
private isVisible(): boolean {
return this.getStartFontSizeFromHeight() > 0;
}
}

1
src/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './ng2-fittext.module';

23
src/ng2-fittext.module.ts Normal file
View file

@ -0,0 +1,23 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { Ng2FittextDirective } from './directives/ng2-fittext.directive';
@NgModule({
declarations: [
Ng2FittextDirective
],
exports: [
Ng2FittextDirective
],
imports: [
CommonModule
]
})
export class Ng2FittextModule {
static forRoot() {
return {
ngModule: Ng2FittextModule,
providers: []
};
}
}

8
src/ng2fittext.directive.spec.ts
View file

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

134
src/ng2fittext.directive.ts
View file

@ -1,134 +0,0 @@
import {Directive, ElementRef, Renderer, Input, AfterViewInit, AfterViewChecked, HostListener, OnInit, OnChanges, SimpleChanges} from '@angular/core';
@Directive({
selector: '[fittext]'
})
export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, AfterViewChecked {
@Input('fittext') fittext: any;
@Input('activateOnResize') activateOnResize: boolean;
@Input('container') container: any;
@Input('activateOnInputEvents') activateOnInputEvents: boolean;
@Input('useMaxFontSize') useMaxFontSize: boolean;
@Input('minFontSize') minFontSize = 7;
@Input('modelToWatch') modelToWatch: any;
private maxFontSize: number = 1000;
private fontSize: number = 1000;
private speed: number = 1.05;
private done: boolean = false;
constructor(public el: ElementRef, public renderer: Renderer) { }
setFontSize(fontSize) {
if (this.isVisible() && this.done === false) {
if (fontSize < this.minFontSize) {
// force that font size will never be lower than minimal allowed font size
fontSize = this.minFontSize;
}
this.fontSize = fontSize;
return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString() + 'px');
}
}
calculateFontSize(fontSize, speed) {
// TODO Do with Gauss
return Math.floor(fontSize / speed);
}
checkOverflow(parent: any, children: any) {
let overflowX = children.scrollWidth - parent.clientWidth;
let overflowY = children.clientHeight - parent.clientHeight;
return (overflowX > 1 || overflowY > 1);
}
@HostListener('window:resize', ['$event'])
onResize() {
this.done = false;
if (this.activateOnResize && this.fittext) {
if (this.activateOnInputEvents && this.fittext) {
this.setFontSize(this.getStartFontSizeFromHeight());
} else {
this.setFontSize(this.getStartFontSizeFromWeight());
}
this.ngAfterViewInit();
}
}
@HostListener('input', ['$event'])
onInputEvents() {
this.done = false;
if (this.activateOnInputEvents && this.fittext) {
this.setFontSize(this.getStartFontSizeFromHeight());
this.ngAfterViewInit();
}
}
ngOnInit() {
this.done = false;
if (this.useMaxFontSize) {
this.maxFontSize = parseInt(this.getComputetStyle().fontSize, null);
}
if (this.fittext) {
this.setFontSize(this.maxFontSize);
}
this.el.nativeElement.style.setProperty('will-change', 'content');
}
ngAfterViewInit() {
if (this.isVisible() && this.done === false) {
if (this.fittext) {
let overflow = this.container ? this.checkOverflow(this.container, this.el.nativeElement)
: this.checkOverflow(this.el.nativeElement.parentElement, this.el.nativeElement);
if (overflow) {
if (this.fontSize > this.minFontSize) {
// iterate only until font size is bigger than minimal value
this.setFontSize(this.calculateFontSize(this.fontSize, this.speed));
this.ngAfterViewInit();
}
} else {
if (this.useMaxFontSize) {
if (this.fontSize > this.maxFontSize) {
this.maxFontSize = parseInt(this.getComputetStyle().fontSize, null);
this.setFontSize(this.maxFontSize);
}
}
this.done = true;
}
}
}
}
ngOnChanges(changes: any): void {
if (changes.modelToWatch) {
// change of model to watch - call ngAfterViewInit where is implemented logic to change size
setTimeout(_ => this.ngAfterViewInit() );
}
}
ngAfterViewChecked() {
if (this.fontSize > this.minFontSize) {
this.setFontSize(this.getStartFontSizeFromHeight());
this.ngAfterViewInit();
}
}
private getComputetStyle(): CSSStyleDeclaration {
return window.getComputedStyle(this.container ? this.container : this.el.nativeElement.parentElement);
}
private getStartFontSizeFromHeight(): number {
return this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight;
}
private getStartFontSizeFromWeight(): number {
return this.container ? this.container.clientWidth : this.el.nativeElement.parentElement.clientWidth;
}
private isVisible(): boolean {
return this.getStartFontSizeFromHeight() > 0;
}
}

11
src/ng2fittext.module.ts
View file

@ -1,11 +0,0 @@
import { NgModule } from '@angular/core';
import { Ng2FittextDirective } from "./ng2fittext.directive";
@NgModule({
declarations: [
Ng2FittextDirective
],
exports: [Ng2FittextDirective]
})
export class Ng2FittextModule {};

24
src/test.js Normal file
View file

@ -0,0 +1,24 @@
require('core-js/es6');
require('core-js/es7');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
require('zone.js/dist/sync-test');
require('zone.js/dist/proxy');
require('zone.js/dist/jasmine-patch');
const browserTesting = require('@angular/platform-browser-dynamic/testing');
const coreTesting = require('@angular/core/testing');
const context = require.context('./', true, /\.spec\.ts$/);
Error.stackTraceLimit = Infinity;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 2000;
coreTesting.TestBed.resetTestEnvironment();
coreTesting.TestBed.initTestEnvironment(
browserTesting.BrowserDynamicTestingModule,
browserTesting.platformBrowserDynamicTesting()
);
context.keys().forEach(context);

19
src/vendor.ts Normal file
View file

@ -0,0 +1,19 @@
// polyfills Angular 2 requires to be loaded BEFORE the application
// only used in library development--not packaged
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';