Compare commits
No commits in common. "master" and "1.0.2" have entirely different histories.
42 changed files with 162 additions and 14478 deletions
21
.github/workflows/mirror-to-forgejo.yml
vendored
21
.github/workflows/mirror-to-forgejo.yml
vendored
|
|
@ -1,21 +0,0 @@
|
||||||
name: Mirror to Forgejo
|
|
||||||
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
branches: ["**"]
|
|
||||||
tags: ["**"]
|
|
||||||
delete:
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
mirror:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v4
|
|
||||||
with:
|
|
||||||
fetch-depth: 0
|
|
||||||
|
|
||||||
- name: Push to Forgejo
|
|
||||||
run: |
|
|
||||||
git remote add forgejo https://loke:${{ secrets.FORGEJO_TOKEN }}@git.lorenzoiovino.com/loke/ng2-fittext.git
|
|
||||||
git push forgejo --all --force
|
|
||||||
git push forgejo --tags --force
|
|
||||||
22
.github/workflows/npmpub.yml
vendored
22
.github/workflows/npmpub.yml
vendored
|
|
@ -1,22 +0,0 @@
|
||||||
name: Publish to NPM
|
|
||||||
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
branches: [master]
|
|
||||||
jobs:
|
|
||||||
build:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
strategy:
|
|
||||||
matrix:
|
|
||||||
os: [ubuntu-latest]
|
|
||||||
node-version: [21.x]
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v2
|
|
||||||
- run: npm install
|
|
||||||
- run: npm run pack
|
|
||||||
- run: cp README.md ./dist/lib/README.md
|
|
||||||
- uses: JS-DevTools/npm-publish@v1
|
|
||||||
with:
|
|
||||||
token: ${{ secrets.NPM_TOKEN }}
|
|
||||||
package: './dist/lib/package.json'
|
|
||||||
21
.github/workflows/tests.yml
vendored
21
.github/workflows/tests.yml
vendored
|
|
@ -1,21 +0,0 @@
|
||||||
name: Run CI Tests
|
|
||||||
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
branches:
|
|
||||||
- '*'
|
|
||||||
- '!master'
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
build:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
strategy:
|
|
||||||
matrix:
|
|
||||||
os: [ubuntu-latest]
|
|
||||||
node-version: [21.x]
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v2
|
|
||||||
|
|
||||||
- run: npm install
|
|
||||||
- run: npm run test:headless:singleRun
|
|
||||||
16
.gitignore
vendored
16
.gitignore
vendored
|
|
@ -1,10 +1,10 @@
|
||||||
build
|
# Node generated files
|
||||||
coverage
|
|
||||||
dist
|
|
||||||
debug.log
|
|
||||||
node_modules
|
node_modules
|
||||||
out-tsc
|
npm-debug.log
|
||||||
/.vs
|
# OS generated files
|
||||||
/.angular
|
Thumbs.db
|
||||||
.idea
|
|
||||||
.DS_Store
|
.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
|
||||||
20
.vscode/launch.json
vendored
20
.vscode/launch.json
vendored
|
|
@ -1,20 +0,0 @@
|
||||||
{
|
|
||||||
// Use IntelliSense to learn about possible attributes.
|
|
||||||
// Hover to view descriptions of existing attributes.
|
|
||||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
|
||||||
"version": "0.2.0",
|
|
||||||
"configurations": [
|
|
||||||
{
|
|
||||||
"type": "chrome",
|
|
||||||
"request": "attach",
|
|
||||||
"name": "Unit tests",
|
|
||||||
"address": "localhost",
|
|
||||||
"port": 9333,
|
|
||||||
"sourceMaps": true,
|
|
||||||
"webRoot": "${workspaceFolder}",
|
|
||||||
"pathMapping": {
|
|
||||||
"/_karma_webpack_": "${workspaceFolder}"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
5
.vscode/settings.json
vendored
5
.vscode/settings.json
vendored
|
|
@ -1,5 +0,0 @@
|
||||||
{
|
|
||||||
"prettier.configPath": "./src/.prettierrc",
|
|
||||||
"editor.formatOnSave": true,
|
|
||||||
"javascript.implicitProjectConfig.experimentalDecorators": true
|
|
||||||
}
|
|
||||||
21
LICENSE
21
LICENSE
|
|
@ -1,21 +0,0 @@
|
||||||
MIT License
|
|
||||||
|
|
||||||
Copyright (c) 2019 Lorenzo Iovino
|
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
|
||||||
in the Software without restriction, including without limitation the rights
|
|
||||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
||||||
copies of the Software, and to permit persons to whom the Software is
|
|
||||||
furnished to do so, subject to the following conditions:
|
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be included in all
|
|
||||||
copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
||||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
||||||
SOFTWARE.
|
|
||||||
159
README.md
159
README.md
|
|
@ -1,141 +1,76 @@
|
||||||
<h1 align="center">
|
# ng2-fittext
|
||||||
ng2-fittext
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p align="center">An Angular 2+ directive, written in pure TypeScript (without jQuery!), to automatically scale the font size of an element so that it fits within its parent container.</p>
|
An Angular2 directive written in pure typescript (and without jquery!), inspired from http://fittextjs.com/, for autoscale the font size of an element to fit an upper level container.
|
||||||
|
|
||||||
[](https://www.npmjs.com/package/ng2-fittext)
|
### Demo
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
[](https://opensource.org/licenses/MIT)
|
|
||||||
|
|
||||||
## Demo
|
http://plnkr.co/edit/v0TQaYepV4E2Heur02j5?p=preview
|
||||||
Check out the live demo: [ng2-fittext Demo](https://stackblitz.com/edit/stackblitz-starters-7ghzat?file=src%2Fmain.ts)
|
|
||||||
<div>
|
|
||||||
<img src="ng2-fittext-example.gif" alt="ng2 fittext example" border="0" style="width: 70%" align="center"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Installation
|
### Installation
|
||||||
|
|
||||||
Install the library using npm according to your angular version (see table below):
|
|
||||||
|
|
||||||
| Angular | ng2-fittext | command |
|
|
||||||
|---------|-------------|-------------------------------|
|
|
||||||
| <= v17 | 1.4.3 | ```npm i ng2-fittext@1.4.3``` |
|
|
||||||
| >= v18 | 2.0.0 | ```npm i ng2-fittext@2.0.0``` |
|
|
||||||
|
|
||||||
|
Install the library
|
||||||
|
```sh
|
||||||
|
$ npm install --save ng2-fittext
|
||||||
|
```
|
||||||
|
|
||||||
### Usage
|
### Usage
|
||||||
|
|
||||||
1. Import the module in your Angular application:
|
Import it in your Angular2 project like a directive
|
||||||
```ts
|
|
||||||
import { Ng2FittextModule } from "ng2-fittext";
|
|
||||||
|
|
||||||
@NgModule({
|
1) Declare it in your module
|
||||||
imports: [Ng2FittextModule]
|
```sh
|
||||||
})
|
import {FittextDirective} from "ng2-fittext/ng2-fittext";
|
||||||
```
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
...
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
FittextDirective
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
2. Use the directive in your components:
|
```
|
||||||
```ts
|
|
||||||
import { Component } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
1) Use it in your components
|
||||||
selector: 'label',
|
```sh
|
||||||
template: `
|
import {Component} from '@angular/core';
|
||||||
<div #container>
|
|
||||||
<div [fittext]="true" [activateOnResize]="true" [container]="container">Bla bla bla...</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
export class LabelComponent {}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Examples
|
@Component({
|
||||||
|
selector: 'label',
|
||||||
|
template: `<div #container>
|
||||||
|
<div [fittext]="true" [onResize]="true" [container]="container">Bla bla bla...</div>
|
||||||
|
</div>`
|
||||||
|
})
|
||||||
|
|
||||||
Fit to the parent element (works if you have a variable number of elements between your element and its parent):
|
export class LabelComponent {}
|
||||||
|
|
||||||
```ts
|
```
|
||||||
import { Component } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
Parameters:
|
||||||
selector: 'label',
|
|
||||||
template: `
|
|
||||||
<div>
|
|
||||||
<div [fittext]="true" [activateOnResize]="true">Bla bla bla...</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
export class LabelComponent {}
|
|
||||||
```
|
|
||||||
|
|
||||||
**NEW! Support for auto-resize input box:**
|
| Parameter | Description | Values |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| fittext | is the selector of the directive | true/false
|
||||||
|
| container | the container to fit | ElementRef
|
||||||
|
| onResize | enable/disable the autofit in case of window resize | true or false (default false)
|
||||||
|
|
||||||
```ts
|
|
||||||
import { Component } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'inputbox',
|
|
||||||
template: `
|
|
||||||
<div #container>
|
|
||||||
<input [fittext]="true" [activateOnResize]="true" [container]="container" [activateOnInputEvents]="true">
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
export class InputBoxComponent {}
|
|
||||||
```
|
|
||||||
|
|
||||||
**NEW! Support for maxFontSize:**
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import { Component } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'inputbox',
|
|
||||||
template: `
|
|
||||||
<div>
|
|
||||||
<input [fittext]="true" [activateOnResize]="true" [activateOnInputEvents]="true" [minFontSize]="40" [maxFontSize]="100">
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
export class InputBoxComponent {}
|
|
||||||
```
|
|
||||||
|
|
||||||
Input Parameters:
|
|
||||||
|
|
||||||
| Parameter | Description | Values |
|
|
||||||
| ------------------------------- | --------------------------------------------------------------------------------------- | ----------------------------- |
|
|
||||||
| fittext | Directive selector | true/false |
|
|
||||||
| container | The container to fit (if not present it fits to the parent container by default) | ElementRef |
|
|
||||||
| activateOnResize | Enable/disable the autofit on window resize | true or false (default false) |
|
|
||||||
| activateOnInputEvents | Enable/disable the auto-fit in case of input box events (keydown, keyup etc..) | true or false (default false) |
|
|
||||||
| maxFontSize | Maximum font size | Number (default is 1000) |
|
|
||||||
| **!deprecated!** useMaxFontSize | Use max font size if is true | Deprecated! |
|
|
||||||
| minFontSize | Minimum font size | Number (default is 7) |
|
|
||||||
| modelToWatch | Pass model to watch; when this model changes, font size is automatically recalculated | Any type of model |
|
|
||||||
|
|
||||||
Output Parameters:
|
|
||||||
|
|
||||||
| Parameter | Description | Values |
|
|
||||||
| --------------- | ----------------- | ------ |
|
|
||||||
| fontSizeChanged | Current font size | string |
|
|
||||||
|
|
||||||
### Development
|
### Development
|
||||||
|
|
||||||
Want to contribute? Great!
|
Want to contribute? Great!
|
||||||
Simply, clone the repository!
|
Simply, clone the repository and start to improve the code.
|
||||||
|
|
||||||
I created this library because I always spent too much time solving this problem and didn't find anything on the web (as of 13/03/2017) that does this without jQuery and is easily integrable in Angular 2+.
|
|
||||||
While it might not be the best implementation, it gets the job done.
|
|
||||||
|
|
||||||
### Todos
|
### Todos
|
||||||
|
|
||||||
- Write tests
|
- Write tests
|
||||||
- Find a performant algorithm to find the font size that fits the container better
|
- Find a better algorithm to find the font-size who fits better the container.
|
||||||
|
|
||||||
## License
|
License
|
||||||
|
----
|
||||||
|
|
||||||
|
ISC
|
||||||
|
|
||||||
MIT
|
|
||||||
|
|
||||||
**Lorenzo I.**
|
**Lorenzo I.**
|
||||||
|
|
||||||
|
|
|
||||||
140
angular.json
140
angular.json
|
|
@ -1,140 +0,0 @@
|
||||||
{
|
|
||||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
|
||||||
"version": 1,
|
|
||||||
"newProjectRoot": "projects",
|
|
||||||
"projects": {
|
|
||||||
"dev": {
|
|
||||||
"projectType": "application",
|
|
||||||
"schematics": {
|
|
||||||
"@schematics/angular:component": {
|
|
||||||
"style": "scss",
|
|
||||||
"prefix": "app"
|
|
||||||
},
|
|
||||||
"@schematics/angular:directive": {
|
|
||||||
"prefix": "app"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"root": "",
|
|
||||||
"sourceRoot": "src",
|
|
||||||
"prefix": "app",
|
|
||||||
"architect": {
|
|
||||||
"build": {
|
|
||||||
"builder": "@angular-devkit/build-angular:browser",
|
|
||||||
"options": {
|
|
||||||
"outputPath": "dist",
|
|
||||||
"index": "./src/index.html",
|
|
||||||
"main": "./src/main.ts",
|
|
||||||
"polyfills": [
|
|
||||||
"zone.js"
|
|
||||||
],
|
|
||||||
"tsConfig": "tsconfig.app.json",
|
|
||||||
"assets": [
|
|
||||||
"src/favicon.ico",
|
|
||||||
"src/assets"
|
|
||||||
],
|
|
||||||
"styles": [
|
|
||||||
],
|
|
||||||
"scripts": []
|
|
||||||
},
|
|
||||||
"configurations": {
|
|
||||||
"production": {
|
|
||||||
"fileReplacements": [
|
|
||||||
{
|
|
||||||
"replace": "src/environments/environment.ts",
|
|
||||||
"with": "src/environments/environment.prod.ts"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"outputHashing": "all",
|
|
||||||
"budgets": [
|
|
||||||
{
|
|
||||||
"type": "initial",
|
|
||||||
"maximumWarning": "500kb",
|
|
||||||
"maximumError": "1mb"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "anyComponentStyle",
|
|
||||||
"maximumWarning": "2kb",
|
|
||||||
"maximumError": "4kb"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"development": {
|
|
||||||
"optimization": false,
|
|
||||||
"extractLicenses": false,
|
|
||||||
"sourceMap": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"defaultConfiguration": "production"
|
|
||||||
},
|
|
||||||
"serve": {
|
|
||||||
"builder": "@angular-devkit/build-angular:dev-server",
|
|
||||||
"options": {
|
|
||||||
"buildTarget": "dev:build"
|
|
||||||
},
|
|
||||||
"configurations": {
|
|
||||||
"production": {
|
|
||||||
"buildTarget": "dev:build:production"
|
|
||||||
},
|
|
||||||
"development": {
|
|
||||||
"buildTarget": "dev:build:development"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"test": {
|
|
||||||
"builder": "@angular-devkit/build-angular:karma",
|
|
||||||
"options": {
|
|
||||||
"polyfills": [
|
|
||||||
"zone.js",
|
|
||||||
"zone.js/testing"
|
|
||||||
],
|
|
||||||
"tsConfig": "tsconfig.spec.json",
|
|
||||||
"inlineStyleLanguage": "scss",
|
|
||||||
"assets": [
|
|
||||||
"src/favicon.ico",
|
|
||||||
"src/assets"
|
|
||||||
],
|
|
||||||
"styles": [
|
|
||||||
],
|
|
||||||
"scripts": []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"lib": {
|
|
||||||
"projectType": "library",
|
|
||||||
"root": "projects/lib",
|
|
||||||
"sourceRoot": "projects/lib/src",
|
|
||||||
"prefix": "lib",
|
|
||||||
"architect": {
|
|
||||||
"build": {
|
|
||||||
"builder": "@angular-devkit/build-angular:ng-packagr",
|
|
||||||
"options": {
|
|
||||||
"project": "projects/lib/ng-package.json"
|
|
||||||
},
|
|
||||||
"configurations": {
|
|
||||||
"production": {
|
|
||||||
"tsConfig": "projects/lib/tsconfig.lib.prod.json"
|
|
||||||
},
|
|
||||||
"development": {
|
|
||||||
"tsConfig": "projects/lib/tsconfig.lib.json"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"defaultConfiguration": "production"
|
|
||||||
},
|
|
||||||
"test": {
|
|
||||||
"builder": "@angular-devkit/build-angular:karma",
|
|
||||||
"options": {
|
|
||||||
"tsConfig": "projects/lib/tsconfig.spec.json",
|
|
||||||
"polyfills": [
|
|
||||||
"zone.js",
|
|
||||||
"zone.js/testing"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"cli": {
|
|
||||||
"analytics": false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
1
index.ts
Normal file
1
index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export {FittextDirective} from './src/fittext.directive';
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 12 MiB |
1
ng2-fittext.ts
Normal file
1
ng2-fittext.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export {FittextDirective} from './src/fittext.directive';
|
||||||
13258
package-lock.json
generated
13258
package-lock.json
generated
File diff suppressed because it is too large
Load diff
66
package.json
66
package.json
|
|
@ -1,46 +1,36 @@
|
||||||
{
|
{
|
||||||
"name": "dev",
|
"name": "ng2-fittext",
|
||||||
"version": "0.0.0",
|
"version": "1.0.2",
|
||||||
|
"description": "An Angular2 directive for autoscale the font size of an element to fit an upper level container.",
|
||||||
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"ng": "./node_modules/.bin/ng",
|
"prepublish": "tsc",
|
||||||
"start": "node node_modules/@angular/cli/bin/ng serve",
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
"build": "node node_modules/@angular/cli/bin/ng build --configuration production",
|
|
||||||
"test": "node node_modules/@angular/cli/bin/ng test lib",
|
|
||||||
"test:headless": "node node_modules/@angular/cli/bin/ng test --browsers=ChromeHeadless",
|
|
||||||
"test:headless:singleRun": "node node_modules/@angular/cli/bin/ng test --no-watch --no-progress --browsers=ChromeHeadless lib",
|
|
||||||
"release:minor": "cd ./projects/lib/ && npm version minor",
|
|
||||||
"release:major": "cd ./projects/lib/ && npm version major",
|
|
||||||
"release:patch": "cd ./projects/lib/ && npm version patch",
|
|
||||||
"pack": "npm run build lib && cp ./README.md ./dist/lib/README.md"
|
|
||||||
},
|
},
|
||||||
"private": true,
|
"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": {
|
"dependencies": {
|
||||||
"@angular/animations": "^18.0.6",
|
"@angular/core": "^2.4.0"
|
||||||
"@angular/common": "^18.0.6",
|
|
||||||
"@angular/compiler": "^18.0.6",
|
|
||||||
"@angular/core": "^18.0.6",
|
|
||||||
"@angular/forms": "^18.0.6",
|
|
||||||
"@angular/platform-browser": "^18.0.6",
|
|
||||||
"@angular/platform-browser-dynamic": "^18.0.6",
|
|
||||||
"@angular/router": "^18.0.6",
|
|
||||||
"rxjs": "~7.8.0",
|
|
||||||
"tslib": "^2.3.0",
|
|
||||||
"zone.js": "~0.14.2"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-devkit/build-angular": "^18.0.7",
|
"typescript": "~2.0.0"
|
||||||
"@angular/cli": "^18.0.7",
|
},
|
||||||
"@angular/compiler-cli": "^18.0.6",
|
"publishConfig": {
|
||||||
"@types/jasmine": "~5.1.0",
|
"registry": "https://registry.npmjs.org/"
|
||||||
"@types/jasminewd2": "~2.0.3",
|
|
||||||
"@types/node": "^18.18.0",
|
|
||||||
"jasmine-core": "~5.1.0",
|
|
||||||
"karma": "~6.4.0",
|
|
||||||
"karma-chrome-launcher": "~3.2.0",
|
|
||||||
"karma-coverage": "~2.2.0",
|
|
||||||
"karma-jasmine": "~5.1.0",
|
|
||||||
"karma-jasmine-html-reporter": "~2.1.0",
|
|
||||||
"ng-packagr": "^18.0.0",
|
|
||||||
"typescript": "5.4.5"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
# Lib
|
|
||||||
|
|
||||||
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.0.
|
|
||||||
|
|
||||||
## Code scaffolding
|
|
||||||
|
|
||||||
Run `ng generate component component-name --project lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project lib`.
|
|
||||||
> Note: Don't forget to add `--project lib` or else it will be added to the default project in your `angular.json` file.
|
|
||||||
|
|
||||||
## Build
|
|
||||||
|
|
||||||
Run `ng build lib` to build the project. The build artifacts will be stored in the `dist/` directory.
|
|
||||||
|
|
||||||
## Publishing
|
|
||||||
|
|
||||||
After building your library with `ng build lib`, go to the dist folder `cd dist/lib` and run `npm publish`.
|
|
||||||
|
|
||||||
## Running unit tests
|
|
||||||
|
|
||||||
Run `ng test lib` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
|
||||||
|
|
||||||
## Further help
|
|
||||||
|
|
||||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
{
|
|
||||||
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
|
|
||||||
"dest": "../../dist/lib",
|
|
||||||
"lib": {
|
|
||||||
"entryFile": "src/public-api.ts"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
{
|
|
||||||
"name": "ng2-fittext",
|
|
||||||
"version": "2.0.0",
|
|
||||||
"description": "Ng2-fittext: An Angular2+ directive that change the font size until it fit the upper level container dimension.",
|
|
||||||
"keywords": [
|
|
||||||
"ng2-fittext",
|
|
||||||
"fittext",
|
|
||||||
"angular",
|
|
||||||
"angular 2",
|
|
||||||
"angular 4",
|
|
||||||
"angular 5",
|
|
||||||
"angular 6",
|
|
||||||
"angular 7",
|
|
||||||
"angular 8",
|
|
||||||
"angular 9",
|
|
||||||
"angular 10",
|
|
||||||
"angular 11",
|
|
||||||
"angular 12",
|
|
||||||
"angular 13",
|
|
||||||
"angular 14",
|
|
||||||
"angular 15",
|
|
||||||
"angular 16",
|
|
||||||
"angular 17",
|
|
||||||
"angular 18",
|
|
||||||
"fit text",
|
|
||||||
"responsive text",
|
|
||||||
"responsive font size",
|
|
||||||
"font size"
|
|
||||||
],
|
|
||||||
"author": "Lorenzo Iovino",
|
|
||||||
"license": "MIT",
|
|
||||||
"peerDependencies": {
|
|
||||||
"@angular/common": ">=18.0.0",
|
|
||||||
"@angular/core": ">=18.0.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"tslib": "^2.3.0"
|
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"url": "https://github.com/thisloke/ng2-fittext.git"
|
|
||||||
},
|
|
||||||
"sideEffects": false
|
|
||||||
}
|
|
||||||
|
|
@ -1,310 +0,0 @@
|
||||||
import { Ng2FittextDirective } from './ng2-fittext.directive';
|
|
||||||
import { Renderer2, ElementRef } from '@angular/core';
|
|
||||||
|
|
||||||
describe('Class: Ng2FittextDirective', () => {
|
|
||||||
let ng2FittextDirective: Ng2FittextDirective;
|
|
||||||
let elMock: ElementRef;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
elMock = {} as ElementRef;
|
|
||||||
ng2FittextDirective = new Ng2FittextDirective(elMock);
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Method: setFontSize', () => {
|
|
||||||
let newFontSize: number;
|
|
||||||
let isVisibleSpy: jasmine.Spy;
|
|
||||||
let isDoneSpy: jasmine.Spy;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
newFontSize = 100;
|
|
||||||
isVisibleSpy = spyOn(ng2FittextDirective, 'isVisible').and.returnValue(
|
|
||||||
true
|
|
||||||
);
|
|
||||||
isDoneSpy = spyOn(ng2FittextDirective, 'isDone').and.returnValue(false);
|
|
||||||
elMock.nativeElement = {
|
|
||||||
style: {
|
|
||||||
setProperty: () => {},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Should not change the font size if the element is not visible', () => {
|
|
||||||
isVisibleSpy.and.returnValue(false);
|
|
||||||
const previousFontSize: number = ng2FittextDirective.getFontSize();
|
|
||||||
ng2FittextDirective.setFontSize(newFontSize);
|
|
||||||
expect(ng2FittextDirective.getFontSize()).toEqual(previousFontSize);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Should not change the font size if the fitting operation is done', () => {
|
|
||||||
isDoneSpy.and.returnValue(true);
|
|
||||||
const previousFontSize: number = ng2FittextDirective.getFontSize();
|
|
||||||
ng2FittextDirective.setFontSize(newFontSize);
|
|
||||||
expect(ng2FittextDirective.getFontSize()).toEqual(previousFontSize);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Should use the minFontSize property value if the specified font size is smaller', () => {
|
|
||||||
const minFontSize: number = ng2FittextDirective.minFontSize;
|
|
||||||
newFontSize = 5;
|
|
||||||
ng2FittextDirective.setFontSize(newFontSize);
|
|
||||||
const currentFontSize: number = ng2FittextDirective.getFontSize();
|
|
||||||
expect(currentFontSize).toEqual(minFontSize);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Should use the maxFontSize property value if the specified font size is bigger', () => {
|
|
||||||
const maxFontSize: number = ng2FittextDirective.maxFontSize;
|
|
||||||
newFontSize = 1001;
|
|
||||||
ng2FittextDirective.setFontSize(newFontSize);
|
|
||||||
const currentFontSize: number = ng2FittextDirective.getFontSize();
|
|
||||||
expect(currentFontSize).toEqual(maxFontSize);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Should set a new fontSize value', () => {
|
|
||||||
newFontSize = 500;
|
|
||||||
ng2FittextDirective.setFontSize(newFontSize);
|
|
||||||
const currentFontSize: number = ng2FittextDirective.getFontSize();
|
|
||||||
expect(currentFontSize).toEqual(newFontSize);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Should emit the font size change', () => {
|
|
||||||
newFontSize = 500;
|
|
||||||
spyOn(ng2FittextDirective.fontSizeChanged, 'emit');
|
|
||||||
ng2FittextDirective.setFontSize(newFontSize);
|
|
||||||
expect(ng2FittextDirective.fontSizeChanged.emit).toHaveBeenCalledWith(
|
|
||||||
newFontSize
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Should update the nativeElement with the new font size', () => {
|
|
||||||
newFontSize = 500;
|
|
||||||
spyOn(ng2FittextDirective.el.nativeElement.style, 'setProperty');
|
|
||||||
ng2FittextDirective.setFontSize(newFontSize);
|
|
||||||
expect(
|
|
||||||
ng2FittextDirective.el.nativeElement.style.setProperty
|
|
||||||
).toHaveBeenCalledWith('font-size', `${newFontSize}px`);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Method: getFontSize', () => {
|
|
||||||
it('Should return the current font size', () => {
|
|
||||||
expect(ng2FittextDirective.getFontSize()).toEqual(1000);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Method: calculateFontSize', () => {
|
|
||||||
it('Should return the font size rounded down', () => {
|
|
||||||
expect(ng2FittextDirective.calculateFontSize(10, 3)).toEqual(3);
|
|
||||||
expect(ng2FittextDirective.calculateFontSize(9, 3)).toEqual(3);
|
|
||||||
expect(ng2FittextDirective.calculateFontSize(8, 3)).toEqual(2);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Method: checkOverflow', () => {
|
|
||||||
let parentElementMock: HTMLElement;
|
|
||||||
let childrenElementMock: HTMLElement;
|
|
||||||
let hasXAxisOverflowSpy: jasmine.Spy;
|
|
||||||
let hasYAxisOverflowSpy: jasmine.Spy;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
parentElementMock = {} as HTMLElement;
|
|
||||||
childrenElementMock = {} as HTMLElement;
|
|
||||||
hasXAxisOverflowSpy = spyOn(
|
|
||||||
ng2FittextDirective,
|
|
||||||
'hasXAxisOverflow'
|
|
||||||
).and.returnValue(false);
|
|
||||||
hasYAxisOverflowSpy = spyOn(
|
|
||||||
ng2FittextDirective,
|
|
||||||
'hasYAxisOverflow'
|
|
||||||
).and.returnValue(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Should return false if no overflow is present', () => {
|
|
||||||
expect(
|
|
||||||
ng2FittextDirective.checkOverflow(
|
|
||||||
parentElementMock,
|
|
||||||
childrenElementMock
|
|
||||||
)
|
|
||||||
).toBe(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Should return true if x axis has overflow', () => {
|
|
||||||
hasXAxisOverflowSpy.and.returnValue(true);
|
|
||||||
expect(
|
|
||||||
ng2FittextDirective.checkOverflow(
|
|
||||||
parentElementMock,
|
|
||||||
childrenElementMock
|
|
||||||
)
|
|
||||||
).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Should return true if y axis has overflow', () => {
|
|
||||||
hasYAxisOverflowSpy.and.returnValue(true);
|
|
||||||
expect(
|
|
||||||
ng2FittextDirective.checkOverflow(
|
|
||||||
parentElementMock,
|
|
||||||
childrenElementMock
|
|
||||||
)
|
|
||||||
).toBe(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Method: getStartFontSizeFromHeight', () => {
|
|
||||||
it('Should return the container clientHeight value if the container is present', () => {
|
|
||||||
const containerClientHeight = 10;
|
|
||||||
ng2FittextDirective.container = {
|
|
||||||
clientHeight: containerClientHeight,
|
|
||||||
} as HTMLElement;
|
|
||||||
expect(ng2FittextDirective.getStartFontSizeFromHeight()).toEqual(
|
|
||||||
containerClientHeight
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Should return the parentElement clientHeight value if no container is present', () => {
|
|
||||||
const parentlientHeight = 11;
|
|
||||||
elMock.nativeElement = {
|
|
||||||
parentElement: {
|
|
||||||
clientHeight: parentlientHeight,
|
|
||||||
},
|
|
||||||
} as HTMLElement;
|
|
||||||
expect(ng2FittextDirective.getStartFontSizeFromHeight()).toEqual(
|
|
||||||
parentlientHeight
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Method: isDone', () => {
|
|
||||||
it('Should return the done property value', () => {
|
|
||||||
const defaultDoneValue = false;
|
|
||||||
expect(ng2FittextDirective.isDone()).toBe(defaultDoneValue);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Method: isVisible', () => {
|
|
||||||
it('Should return the true if getStartFontSizeFromHeight() is greater than zero', () => {
|
|
||||||
spyOn(ng2FittextDirective, 'getStartFontSizeFromHeight').and.returnValue(
|
|
||||||
1
|
|
||||||
);
|
|
||||||
expect(ng2FittextDirective.isVisible()).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Should return the false if getStartFontSizeFromHeight() is smaller or equal to zero', () => {
|
|
||||||
const spy = spyOn(
|
|
||||||
ng2FittextDirective,
|
|
||||||
'getStartFontSizeFromHeight'
|
|
||||||
).and.returnValue(0);
|
|
||||||
expect(ng2FittextDirective.isVisible()).toBe(false);
|
|
||||||
spy.and.returnValue(-1);
|
|
||||||
expect(ng2FittextDirective.isVisible()).toBe(false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Method: hasXAxisOverflow', () => {
|
|
||||||
let parentElementMock: HTMLElement;
|
|
||||||
let childrenElementMock: HTMLElement;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
parentElementMock = {
|
|
||||||
clientWidth: 0,
|
|
||||||
} as HTMLElement;
|
|
||||||
childrenElementMock = {
|
|
||||||
scrollWidth: 0,
|
|
||||||
} as HTMLElement;
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Should return false if no overflow is present on the x axis', () => {
|
|
||||||
expect(
|
|
||||||
ng2FittextDirective.hasXAxisOverflow(
|
|
||||||
parentElementMock,
|
|
||||||
childrenElementMock
|
|
||||||
)
|
|
||||||
).toBe(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Should return true if overflow is present on the x axis', () => {
|
|
||||||
childrenElementMock = {
|
|
||||||
scrollWidth: 2,
|
|
||||||
} as HTMLElement;
|
|
||||||
expect(
|
|
||||||
ng2FittextDirective.hasXAxisOverflow(
|
|
||||||
parentElementMock,
|
|
||||||
childrenElementMock
|
|
||||||
)
|
|
||||||
).toBe(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Method: hasYAxisOverflow', () => {
|
|
||||||
let parentElementMock: HTMLElement;
|
|
||||||
let childrenElementMock: HTMLElement;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
parentElementMock = {
|
|
||||||
clientHeight: 0,
|
|
||||||
} as HTMLElement;
|
|
||||||
childrenElementMock = {
|
|
||||||
clientHeight: 0,
|
|
||||||
} as HTMLElement;
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Should return false if no overflow is present on the x axis', () => {
|
|
||||||
expect(
|
|
||||||
ng2FittextDirective.hasYAxisOverflow(
|
|
||||||
parentElementMock,
|
|
||||||
childrenElementMock
|
|
||||||
)
|
|
||||||
).toBe(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Should return true if overflow is present on the x axis', () => {
|
|
||||||
childrenElementMock = {
|
|
||||||
clientHeight: 2,
|
|
||||||
} as HTMLElement;
|
|
||||||
expect(
|
|
||||||
ng2FittextDirective.hasYAxisOverflow(
|
|
||||||
parentElementMock,
|
|
||||||
childrenElementMock
|
|
||||||
)
|
|
||||||
).toBe(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Method: hasOverflow', () => {
|
|
||||||
let containerMock: any;
|
|
||||||
let parentElementMock: any;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
containerMock = {
|
|
||||||
isContainer: true,
|
|
||||||
};
|
|
||||||
parentElementMock = {
|
|
||||||
isParentElement: true,
|
|
||||||
};
|
|
||||||
ng2FittextDirective.container = { ...containerMock };
|
|
||||||
ng2FittextDirective.el.nativeElement = {
|
|
||||||
parentElement: { ...parentElementMock },
|
|
||||||
} as HTMLElement;
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Should calculate the overflow using the container if is present', () => {
|
|
||||||
spyOn(ng2FittextDirective, 'checkOverflow').and.callFake(
|
|
||||||
(parentElement: any, childrenElement: any) => {
|
|
||||||
expect(parentElement).toEqual(containerMock);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
expect(ng2FittextDirective.hasOverflow()).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Should calculate the overflow using the parent element if the container is not present', () => {
|
|
||||||
if(ng2FittextDirective) {
|
|
||||||
delete (ng2FittextDirective as any).container;
|
|
||||||
}
|
|
||||||
spyOn(ng2FittextDirective, 'checkOverflow').and.callFake(
|
|
||||||
(parentElement: any, childrenElement: any) => {
|
|
||||||
expect(parentElement).toEqual(parentElementMock);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
expect(ng2FittextDirective.hasOverflow()).toBe(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,170 +0,0 @@
|
||||||
import {
|
|
||||||
AfterViewChecked,
|
|
||||||
AfterViewInit,
|
|
||||||
Directive,
|
|
||||||
ElementRef,
|
|
||||||
HostListener,
|
|
||||||
Input,
|
|
||||||
Output,
|
|
||||||
EventEmitter,
|
|
||||||
OnChanges,
|
|
||||||
OnInit,
|
|
||||||
} from '@angular/core';
|
|
||||||
|
|
||||||
@Directive({
|
|
||||||
selector: '[fittext]',
|
|
||||||
})
|
|
||||||
export class Ng2FittextDirective
|
|
||||||
implements AfterViewInit, OnInit, OnChanges, AfterViewChecked {
|
|
||||||
@Input('fittext') fittext: any;
|
|
||||||
@Input('activateOnResize') activateOnResize: boolean = true;
|
|
||||||
@Input('container') container: HTMLElement | null = null;
|
|
||||||
@Input('activateOnInputEvents') activateOnInputEvents: boolean = false;
|
|
||||||
@Input('minFontSize') minFontSize = 7;
|
|
||||||
@Input('maxFontSize') maxFontSize = 1000;
|
|
||||||
|
|
||||||
/* Deprecated */
|
|
||||||
@Input('useMaxFontSize') useMaxFontSize = true;
|
|
||||||
|
|
||||||
@Input('modelToWatch') modelToWatch: any;
|
|
||||||
|
|
||||||
@Output() fontSizeChanged: EventEmitter<number> = new EventEmitter();
|
|
||||||
|
|
||||||
private fontSize = 1000;
|
|
||||||
private speed = 1.05;
|
|
||||||
private done = false;
|
|
||||||
|
|
||||||
constructor(public el: ElementRef<HTMLElement>) {}
|
|
||||||
|
|
||||||
setFontSize(fontSize: number): void {
|
|
||||||
if (this.isVisible() && !this.isDone()) {
|
|
||||||
if (fontSize < this.minFontSize) {
|
|
||||||
fontSize = this.minFontSize;
|
|
||||||
}
|
|
||||||
if (fontSize > this.maxFontSize) {
|
|
||||||
fontSize = this.maxFontSize;
|
|
||||||
}
|
|
||||||
this.fontSize = fontSize;
|
|
||||||
this.fontSizeChanged.emit(fontSize);
|
|
||||||
this.el.nativeElement.style.setProperty(
|
|
||||||
'font-size',
|
|
||||||
fontSize.toString() + 'px'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getFontSize(): number {
|
|
||||||
return this.fontSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
calculateFontSize(fontSize: number, speed: number): number {
|
|
||||||
return Math.floor(fontSize / speed);
|
|
||||||
}
|
|
||||||
|
|
||||||
checkOverflow(parent: HTMLElement, children: HTMLElement): boolean {
|
|
||||||
return (
|
|
||||||
this.hasXAxisOverflow(parent, children) ||
|
|
||||||
this.hasYAxisOverflow(parent, children)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
hasXAxisOverflow(parent: HTMLElement, children: HTMLElement): boolean {
|
|
||||||
return children.scrollWidth - parent.clientWidth > 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
hasYAxisOverflow(parent: HTMLElement, children: HTMLElement): boolean {
|
|
||||||
return children.clientHeight - parent.clientHeight > 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@HostListener('window:resize', ['$event'])
|
|
||||||
onResize(event: Event) {
|
|
||||||
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(event: Event) {
|
|
||||||
this.done = false;
|
|
||||||
if (this.activateOnInputEvents && this.fittext) {
|
|
||||||
this.setFontSize(this.getStartFontSizeFromHeight());
|
|
||||||
this.ngAfterViewInit();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit() {
|
|
||||||
this.done = false;
|
|
||||||
this.el.nativeElement.style.setProperty('will-change', 'content');
|
|
||||||
this.ngAfterViewInit();
|
|
||||||
}
|
|
||||||
|
|
||||||
ngAfterViewInit() {
|
|
||||||
if (this.isVisible() && !this.isDone()) {
|
|
||||||
if (this.fittext) {
|
|
||||||
if (this.hasOverflow()) {
|
|
||||||
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 {
|
|
||||||
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.done = false;
|
|
||||||
this.setFontSize(this.maxFontSize);
|
|
||||||
this.ngAfterViewInit();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ngAfterViewChecked() {
|
|
||||||
if (this.fontSize > this.minFontSize) {
|
|
||||||
this.setFontSize(this.getStartFontSizeFromHeight());
|
|
||||||
this.ngAfterViewInit();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
isDone(): boolean {
|
|
||||||
return this.done;
|
|
||||||
}
|
|
||||||
|
|
||||||
isVisible(): boolean {
|
|
||||||
return this.getStartFontSizeFromHeight() > 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
hasOverflow(): boolean {
|
|
||||||
return this.container
|
|
||||||
? this.checkOverflow(this.container, this.el.nativeElement)
|
|
||||||
: this.checkOverflow(
|
|
||||||
this.el.nativeElement.parentElement!,
|
|
||||||
this.el.nativeElement
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
import { Ng2FittextDirective } from './ng2-fittext.directive';
|
|
||||||
import { CommonModule } from '@angular/common';
|
|
||||||
import { NgModule } from '@angular/core';
|
|
||||||
|
|
||||||
export { Ng2FittextDirective } from './ng2-fittext.directive';
|
|
||||||
|
|
||||||
@NgModule({
|
|
||||||
declarations: [Ng2FittextDirective],
|
|
||||||
exports: [Ng2FittextDirective],
|
|
||||||
imports: [CommonModule],
|
|
||||||
})
|
|
||||||
export class Ng2FittextModule {
|
|
||||||
static forRoot() {
|
|
||||||
return {
|
|
||||||
ngModule: Ng2FittextModule,
|
|
||||||
providers: [],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
/*
|
|
||||||
* Public API Surface of lib
|
|
||||||
*/
|
|
||||||
|
|
||||||
export * from './ng2-fittext.directive';
|
|
||||||
export * from './ng2-fittext.module';
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
|
||||||
{
|
|
||||||
"extends": "../../tsconfig.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
"outDir": "../../out-tsc/lib",
|
|
||||||
"declaration": true,
|
|
||||||
"declarationMap": true,
|
|
||||||
"inlineSources": true,
|
|
||||||
"types": []
|
|
||||||
},
|
|
||||||
"exclude": [
|
|
||||||
"**/*.spec.ts"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
|
||||||
{
|
|
||||||
"extends": "./tsconfig.lib.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
"declarationMap": false
|
|
||||||
},
|
|
||||||
"angularCompilerOptions": {
|
|
||||||
"compilationMode": "partial"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
|
||||||
{
|
|
||||||
"extends": "../../tsconfig.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
"outDir": "../../out-tsc/spec",
|
|
||||||
"types": [
|
|
||||||
"jasmine"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"include": [
|
|
||||||
"**/*.spec.ts",
|
|
||||||
"**/*.d.ts"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
{
|
|
||||||
"trailingComma": "es5",
|
|
||||||
"tabWidth": 2,
|
|
||||||
"semi": true,
|
|
||||||
"singleQuote": true,
|
|
||||||
"arrowParens": "always"
|
|
||||||
}
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
<h2>Add text or remove text from div (max and min font size)</h2>
|
|
||||||
<div style="border: 2px solid; overflow:hidden; width:100%; height:300px; font-size:520px;">
|
|
||||||
<div [fittext]="true"
|
|
||||||
[modelToWatch]="title"
|
|
||||||
[maxFontSize]="50"
|
|
||||||
[minFontSize]="30"
|
|
||||||
[activateOnResize]="true">{{title}}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h2>Add text or remove text from div (no max and no min font size)</h2>
|
|
||||||
<div style="border: 2px solid; overflow:hidden; width:100%; height:300px; font-size:520px;">
|
|
||||||
<div [fittext]="true"
|
|
||||||
[modelToWatch]="title"
|
|
||||||
[activateOnResize]="true">{{title}}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button (click)="click('add')"> ADD text</button>
|
|
||||||
<button (click)="click('remove')"> REMOVE text</button>
|
|
||||||
|
|
||||||
<br/>
|
|
||||||
<br/>
|
|
||||||
<h2>Write text in input box (text fit inside without overflowing)</h2>
|
|
||||||
<div #cont2 style="border: 2px solid; height:101px; width:300px;">
|
|
||||||
<input [fittext]="true"
|
|
||||||
style="width:100%; height:100px"
|
|
||||||
[activateOnResize]="true"
|
|
||||||
[activateOnInputEvents]="true"
|
|
||||||
[container]="cont2">
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
import { Component } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-root',
|
|
||||||
templateUrl: './app.component.html',
|
|
||||||
styleUrls: ['./app.component.css']
|
|
||||||
})
|
|
||||||
export class AppComponent {
|
|
||||||
title = 'sdf fsd fsd fsdfsdfsdfsdfsfdf sdfsdf sdfs df fsdfsdfsdfsdfsfdf fsdfsdfsdfsdfsfdf fsdfsdfsdfsdfsfdf ' +
|
|
||||||
'fsdfsdfsdfsdfsfdf fsdfsdfsdfsdfsfdf';
|
|
||||||
|
|
||||||
click(par: string) {
|
|
||||||
this.title = par === 'add' ? (this.title + this.title) : (this.title.substring(0, this.title.length / 2 + 10));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
import { BrowserModule } from '@angular/platform-browser';
|
|
||||||
import { NgModule } from '@angular/core';
|
|
||||||
import { AppComponent } from './app.component';
|
|
||||||
import { Ng2FittextModule } from '../../projects/lib/src/ng2-fittext.module';
|
|
||||||
|
|
||||||
@NgModule({
|
|
||||||
declarations: [
|
|
||||||
AppComponent
|
|
||||||
],
|
|
||||||
imports: [
|
|
||||||
BrowserModule,
|
|
||||||
Ng2FittextModule
|
|
||||||
],
|
|
||||||
providers: [],
|
|
||||||
bootstrap: [AppComponent]
|
|
||||||
})
|
|
||||||
export class AppModule { }
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
export const environment = {
|
|
||||||
production: true
|
|
||||||
};
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
// This file can be replaced during build by using the `fileReplacements` array.
|
|
||||||
// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
|
|
||||||
// The list of file replacements can be found in `angular.json`.
|
|
||||||
|
|
||||||
export const environment = {
|
|
||||||
production: false
|
|
||||||
};
|
|
||||||
|
|
||||||
/*
|
|
||||||
* In development mode, to ignore zone related error stack frames such as
|
|
||||||
* `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
|
|
||||||
* import the following file, but please comment it out in production mode
|
|
||||||
* because it will have performance impact when throw error
|
|
||||||
*/
|
|
||||||
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
|
|
||||||
BIN
src/favicon.ico
BIN
src/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Dev</title>
|
|
||||||
<base href="/">
|
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<app-root></app-root>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
12
src/main.ts
12
src/main.ts
|
|
@ -1,12 +0,0 @@
|
||||||
import { enableProdMode } from '@angular/core';
|
|
||||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
||||||
|
|
||||||
import { AppModule } from './app/app.module';
|
|
||||||
import { environment } from './environments/environment';
|
|
||||||
|
|
||||||
if (environment.production) {
|
|
||||||
enableProdMode();
|
|
||||||
}
|
|
||||||
|
|
||||||
platformBrowserDynamic().bootstrapModule(AppModule)
|
|
||||||
.catch(err => console.log(err));
|
|
||||||
14
src/test.ts
14
src/test.ts
|
|
@ -1,14 +0,0 @@
|
||||||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
|
||||||
|
|
||||||
import 'zone.js/dist/zone-testing';
|
|
||||||
import { getTestBed } from '@angular/core/testing';
|
|
||||||
import {
|
|
||||||
BrowserDynamicTestingModule,
|
|
||||||
platformBrowserDynamicTesting
|
|
||||||
} from '@angular/platform-browser-dynamic/testing';
|
|
||||||
|
|
||||||
// First, initialize the Angular testing environment.
|
|
||||||
getTestBed().initTestEnvironment(
|
|
||||||
BrowserDynamicTestingModule,
|
|
||||||
platformBrowserDynamicTesting()
|
|
||||||
);
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
{
|
|
||||||
"extends": "./tsconfig.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
"outDir": "./out-tsc/app",
|
|
||||||
"types": [
|
|
||||||
"node"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"files": [
|
|
||||||
"src/main.ts"
|
|
||||||
],
|
|
||||||
"include": [
|
|
||||||
"src/**/*.d.ts"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,41 +1,19 @@
|
||||||
{
|
{
|
||||||
"compileOnSave": false,
|
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"baseUrl": "./",
|
"module": "commonjs",
|
||||||
"outDir": "./dist/out-tsc",
|
"moduleResolution": "node",
|
||||||
"forceConsistentCasingInFileNames": true,
|
"target": "es5",
|
||||||
"strict": true,
|
|
||||||
"noImplicitOverride": true,
|
|
||||||
"noPropertyAccessFromIndexSignature": true,
|
|
||||||
"paths": {
|
|
||||||
"lib": [
|
|
||||||
"./dist/lib"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"noImplicitReturns": true,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"sourceMap": true,
|
"sourceMap": true,
|
||||||
|
"inlineSources": false,
|
||||||
"declaration": false,
|
"declaration": false,
|
||||||
"experimentalDecorators": true,
|
"experimentalDecorators": true,
|
||||||
"moduleResolution": "node",
|
"emitDecoratorMetadata": true,
|
||||||
"importHelpers": true,
|
"stripInternal": true,
|
||||||
"target": "ES2022",
|
"skipLibCheck": true
|
||||||
"module": "ES2022",
|
|
||||||
"useDefineForClassFields": false,
|
|
||||||
"lib": [
|
|
||||||
"ES2022",
|
|
||||||
"dom"
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"./src/main.ts"
|
"ng2-fittext.ts",
|
||||||
],
|
"ng2-fittext.d.ts",
|
||||||
"angularCompilerOptions": {
|
"index.ts"
|
||||||
"enableI18nLegacyMessageIdFormat": false,
|
]
|
||||||
"strictInjectionParameters": true,
|
|
||||||
"strictInputAccessModifiers": true,
|
|
||||||
"strictTemplates": true
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
|
||||||
{
|
|
||||||
"extends": "./tsconfig.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
"outDir": "./out-tsc/spec",
|
|
||||||
"types": [
|
|
||||||
"jasmine"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"include": [
|
|
||||||
"src/**/*.spec.ts",
|
|
||||||
"src/**/*.d.ts"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue