Skip to content

Commit

Permalink
updated module call behavior
Browse files Browse the repository at this point in the history
  • Loading branch information
pierredarrieutort committed May 4, 2020
1 parent 8e1793b commit 90e97e9
Show file tree
Hide file tree
Showing 5 changed files with 14 additions and 16 deletions.
11 changes: 5 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<h1 align="center">fitext</h1>

Fitext is a module which adapts the textual elements so that they are always contained in their parents without ever exceeding whatever the parent height and width. This [lightweight](#performance-tips) library using no-one dependency. **You can find a playable demo [here](https://pierredarrieutort.github.io/fitext/).**
___

<div align="center">
<img src="./src/img/fitext_logo.jpg" alt="Logo fitext">
Expand Down Expand Up @@ -32,7 +31,7 @@ $ yarn add fitext

ES6 Modules :
```js
import fitext from 'fitext/lib/fitext.min'
import fitext from 'fitext'

const fittables = document.getElementsByClassName('fit-this-text');
fitext(fittables, true);
Expand All @@ -51,7 +50,7 @@ No-module :
## Example

```js
import fitext from 'fitext/lib/fitext.min'
import fitext from 'fitext'


['DOMContentLoaded', 'resize'].forEach( e => window.addEventListener( e, adjustHeight ) )
Expand Down Expand Up @@ -101,9 +100,9 @@ The support is checked on [this range of browsers](https://browserl.ist/?q=defau

Type|Value|Why this weight ?
:----:|:-----:|---
**Original**|<span style="color:lightseagreen">1.81</span> <sup>kB</sup>| As developed, without any browser support and not as a module. [It's here](src/fitext.js, "Get the file").
**Minified**|<span style="color:mediumseagreen">2.79</span> <sup>kB</sup>| With all [Browser Support](#browser-suport), as a module and of course minified !
**Gzipped**|<span style="color:green">1.20</span> <sup>kB</sup>| Same as the minified version but you support gzip 🎉 !
**Original**|<span style="color:lightseagreen">2.16</span> <sup>kB</sup>| As developed, without any browser support and not as a module. [It's here](src/fitext.js, "Get the file").
**Minified**|<span style="color:mediumseagreen">2.83</span> <sup>kB</sup>| With all [Browser Support](#browser-suport), as a module and of course minified !
**Gzipped**|<span style="color:green">1.23</span> <sup>kB</sup>| Same as the minified version but you support gzip 🎉 !

- Try to use relative font-size wherever possible.
- If you targeting a parent element all child are already taken in account, don't execute a `fitext` function on them.
Expand Down
1 change: 1 addition & 0 deletions lib/fitext.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "fitext",
"version": "1.0.3",
"version": "1.0.4",
"description": "Resizes text elements proportionally to fit any element",
"main": "lib/fitext.js",
"main": "lib/fitext.min.js",
"scripts": {
"dev": "npx webpack-dev-server",
"build": "npx webpack --config webpack.config.prod.js",
Expand Down
12 changes: 5 additions & 7 deletions src/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,11 @@ function adjustHeight() {
ELEMENTS = document.getElementsByClassName( 'fit-this-text' ),
IS_WIDEABLE = true

fit( ELEMENTS, IS_WIDEABLE )
fitext( ELEMENTS, IS_WIDEABLE )
}





//** FOLLOWING CODE IS DEDICATED TO THE DEMO **//

window.addEventListener( 'DOMContentLoaded', demo )
Expand All @@ -41,23 +39,23 @@ function demo() {

function handleWidth() {
WIDTH_OUTPUT.value = HANDLEABLE.style.width = `${this.value}%`
fitext[HANDLEABLE], WIDEABLE.checked )
fitext( [HANDLEABLE], WIDEABLE.checked )
}

function handleHeight() {
HEIGHT_OUTPUT.value = HANDLEABLE.style.height = `${this.value}%`
fifitext( [HANDLEABLE], WIDEABLE.checked )
fitext( [HANDLEABLE], WIDEABLE.checked )
}

function reset() {
WIDTH_OUTPUT.value = HANDLEABLE.style.width = `${INITIAL_VALUES[0]}%`
HEIGHT_OUTPUT.value = HANDLEABLE.style.height = `${INITIAL_VALUES[1]}%`
WIDTH.value = INITIAL_VALUES[0]
HEIGHT.value = INITIAL_VALUES[1]
fitext[HANDLEABLE], WIDEABLE.checked )
fitext( [HANDLEABLE], WIDEABLE.checked )
}

function handleWideable() {
fitext[HANDLEABLE], WIDEABLE.checked )
fitext( [HANDLEABLE], WIDEABLE.checked )
}
}
2 changes: 1 addition & 1 deletion src/fitext.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export default function fit( fittables, wideable ) {
export default function fitext( fittables, wideable ) {
[...fittables].forEach( box => {

const WRAPPER_CLASSNAME = 'fitter'
Expand Down

0 comments on commit 90e97e9

Please sign in to comment.