Getting Started

Install Package

$ npm install @striven-erp/striven-fullscreen

Initialize Instance

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

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.

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 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|