# autofit.js

**Repository Path**: aorey/autofit.js

## Basic Information

- **Project Name**: autofit.js
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-06
- **Last Updated**: 2024-01-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

![autofitLogo](https://raw.githubusercontent.com/995231030/autofit.js/master/autofit.png)

<center><font face="黑体" size=26>autofit.js</font></center>

[简体中文](./readme.md) | English

autofit.js is a tool for making your PC projects responsive to the screen. Its principle is very simple: based on scaling with equal proportions, it increases the width or height to the right or bottom to achieve a full-screen effect. Using autofit.js does not compress or stretch elements; it simply sets the width and height of the container.

| Date       | Version | Description                                                  |
| ---------- | ------- | ------------------------------------------------------------ |
| 2023-04-16 | v1.0.0  | First version released 🥳                                     |
| 2023-04-23 | v1.0.9  | Fixed issue with invalidation after maximize/F11             |
| 2023-05-12 | v1.1.2  | Added ignore element feature (offset for map hotspots)👍      |
| 2023-05-22 | v2.0.0  | Added option to disable autofit's impact                     |
| 2023-05-30 | v2.0.2  | Improved compatibility, added error prompts                  |
| 2023-06-07 | v2.0.3  | Added delay, transition, and chart adaptation                |
| 2023-06-19 | v2.0.5  | Fixed issue with multiple ignores not working, delay and transition are disabled by default |
| 2023-07-04 | v2.0.6  | Unreleased - Fixed issue with abnormal off behavior, added undefined ts parameter |
| 2023-07-11 | v3.0.0  | Improved stability and usability                             |

### v3.0.0 New Version Introduction

Now, `ignore` can be passed as an Array\<string>:

```js
autofit.init({
	ignore: ['.leaflet', '.gaodemap']
})
```

Now, `ignore` supports width and height with other units:

```js
autofit.init({
	ignore: [{
    	el: '.gaodemap',
        width: "80%",
        height: '200px'
    }]
})
```

Starting from v3.0.0 (inclusive), the parameters `designWidth`, `designHeight`, and `renderDom` will no longer be compatible. For field changes, please see the following text. In `ignore`, both the `el` and `dom` parameters (as well as the string format) are still compatible.

Field changes: `designWidth` > `dw`, `designHeight` > `dh`, `renderDom` > `el`

Version 2.0.5 is the last compatible version; afterwards, only the new fields will be supported.

Install the old version:

```shell
npm i autofit.js@2.0.5
```

### autofit.js

autofit.js is a tool that allows your project to be responsive with just one click.

In theory, it can support resolutions lower than your design draft.

### Import

```js
import autofit from 'autofit.js'
```

### Quick Start

```js
autofit.init()
```

> The default parameters are 1920 * 929 (i.e., 1080 minus the browser header). Just call it directly.

### Usage

```js
export default {  
  mounted() {
	autofit.init({
        dh: 1080,
        dw: 1920,
        el: "#app",
        resize: true
    }, false) // You can disable console prompt output
  },
}
```

> The above example uses the default parameters, which can be adjusted according to the actual situation. The optional parameters are:
>
> ```js
>    * - el: The rendering DOM, default is "#app", must use an id selector 
>    * - dw: Design draft width, default is 1920 
>    * - dh: Design draft height, default is 929; if the project is displayed in fullscreen, it can be set to 1080
>    * - resize: Whether to listen for resize events, default is true
>    * - ignore: Elements to be ignored in scaling (these elements will be inversely scaled), parameters can be found in readme.md
>    * - transition: Transition time, default is 0
>    * - delay: Default is 0
> 
> ```

### Ignoring Certain Elements

```js
autofit.init({
  ignore: [
     { 
      el: ".gaodeMap",
     },
  ]
})
```

Pass in `ignore` to exclude elements from scaling.

More personalized settings:

```js
autofit.init({
  ignore: [
    {
      el: ".gaodeMap", // Required
      height: "300px", // Optional
      width: "80%", // Optional
      scale: 1.2, // Optional: playback degree, based on the size of the main element after scaling
      fontSize: 26 // Optional, if the custom scaled text size is not suitable, you can set the font size here
    },
    {
        //...
    }
  ]
})
```

If the size of the element after inverse scaling changes the structure, you can manually pass the width, height, and playback degree.

`ignore` also supports passing string arrays:

```js
autofit.init({
  ignore: ['.gaodeMap', '.leaflet', '#someElementClassOrId']
})
```

### elRectification

Some charts rendered using canvas may also have event offsets. Unlike maps, large charts may not be fully displayed when using `ignore`. In this case, you can use `elRectification` (not as efficient as `ignore`).

If `ignore` does not meet the requirements, you can use `autofit.elRectification(".classNameOrId")`.

```js
import { elRectification } from 'autofit.js'
```

```html
<div class="G2plot"></div>
<div class="G2plot"></div>
<div class="G2plot"></div>
```

```js
onMounted(() => {
  elRectification(".G2plot")
})
```

When using `elRectification`, the element to be rectified must already be mounted.

### Disabling the Impact of autofit.js

When autofit is not initialized, an error will occur if the element cannot be found. Before using `autofit.off()`, make sure it has been initialized.

```js
autofit.off()
```