@striven-erp/striven-fullscreen/README.md

Take any element and make it full screen

<h1 align="center">Striven Fullscreen</h1>

<p align="center">
    <img src="./striven-fullscreen.gif" alt="striven-fullscreen" />
</p>

<p align="center">
    <img alt="npm" src="https://img.shields.io/npm/v/@striven-erp/striven-fullscreen">
    <img alt="GitHub issues" src="https://img.shields.io/github/issues-raw/striven-erp/striven-fullscreen">
    <img src="https://img.shields.io/github/languages/top/striven-erp/striven-fullscreen" alt="GitHub top language">
</p>

<p align="center">
    <strong>Supports Firefox, Edge, Safari, and Chrome</strong>
</p>

## Getting Started

### Install Package

```sh
$ npm install @striven-erp/striven-fullscreen
```

### Initialize Instance

```js
import { StrivenFullscreen } from '@striven-erp/striven-editor';

const sfs = new StrivenFullScreen(blowThisUpElement);

sfs.expand();
```

**Note:** When initializing this class, the browser will begin to convert the target elements computed styles to inline styles. The larger the node tree is for that element will affect performance. Consider lazily initializing this class for more complex elements.

### Passing Options to the Class

```js
import StrivenFullScreen from '@striven-erp/striven-fullscreen';

const sfs = new StrivenFullScreen(blowThisUpElement, { backgroundColor: '#fff' });
```

### Helper Utilities

You may want to use these for lightweight and ease-of-use features that you wouldn't need by instantiating the fullscreen class.

#### blowUpElement

This helper function is useful for when you need to maintain computed styles and just want to make an element on the page front and center.

```js
import { blowUpElement } from '@striven-erp/striven-fullscreen';

blowUpElement(blowThisElementUp, '#fff', (e) => e.setAttibute('style', 'overflow: hidden;'));
```

|Option|Type|Description|
|:-:|:-:|:-:|
|elementToBlowUp|HTMLElement|Element to blow up|
|backgroundColor|String|Background color to set the element with <br /> Defaults to ```'#fff'```|
|onExpand|Function|Callback function that passes the element after being blown up|

## Properties

|Option|Type|Default|Description|
|:-:|:-:|:-:|:-:|
|backgroundColor|String|```'rgba(0, 0, 0, .6)'```|Background color to set the lightbox to|

## Methods

|Method|Return Type|Description|
|:-:|:-:|:-:|
|expand|None|Triggers the fullscreen feature|
|collapse|None|Exits the fullscreen feature|