Resize

Allows you to resize an element.

Usage #

new resize(resizeOptions);

Basic implementation #

const square = new resize({ element: '.square' });

resizeOptions #

element #

Type:

type element = string

The element selector.

edgeWidth #

Type:

type edgeWidth = number

default: 5

The width of the edge that you can grab.

widthMin #

Type:

type widthMin = number

default: 50

The minimum width that element can be resized to.

widthMax #

Type:

type widthMax = number

default: window.innerWidth

The maximum width that element can be resized to.

heightMin #

Type:

type heightMin = number

default: 50

The minimum height that element can be resized to.

heightMax #

Type:

type heightMax = number

default: window.innerHeight

The maximum height that element can be resized to.

onWidthChange #

Type:

type onWidthChange = (width) => {}

Executes when the element width changes

onHeightChange #

Type:

type onHeightChange = (height) => {}

Executes when the element height changes.

Actions #

You are able to resize elements using actions. Since every resize action is unique you can do the following:

const element = new resize({ element: '.square' });

actions.execute(element.heightAction, height);

actions.execute(element.widthAction, width);