Resize

Allows you to resize an element.

Usage

new resize(resizeOptions);

Basic implementation

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

resizeOptions

interface ResizeOptions {
    element: string;
    edgeWidth?: number;
    onWidthChange?: (width: number) => void;
    onHeightChange?: (height: number) => void;
    widthMin?: number;
    widthMax?: number;
    heightMin?: number;
    heightMax?: number;
}

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: number) => void;

Executes when the element width changes

onHeightChange

Type:

type onHeightChange = (height: number) => void;

Executes when the element height changes.

Properties

heightAction readonly

Type:

type heightAction = string

The name of the action that can be used to programmatically change the height of the element.

widthAction readonly

Type:

type widthAction = string

The name of the action that can be used to programmatically change the width of the element.

touchEnabled

Type:

type touchEnabled = boolean

Enables or disables touch events. Default is false.

Methods

deinit()

Removes the event listeners and disables the resize functionality.

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, 200);

actions.execute(element.widthAction, 200);