resizable-elm

0.0.10 • Public • Published

License: MIT Build Status

resizable-elm

Makes elements resizable. Vanilla style.

const resizable = require('resizable-elm');

const myElm = document.getElementById('target');

resizable(myElm, {options});

Options

  • classname - String. A replacement for the resizable classname.
  • minWidth - Number. Limits the element minimum width.
  • minHeight - Number. Limits the element minimum height.
  • gripSize - Number. Sets the resizing grips size.
  • direction - String. Restricts resizing toward a single direction. Could be one of:
    • 'top'
    • 'right'
    • 'bottom'
    • 'left'

API

Calling the resizable() function returns a Resizable instance:

const r = resizable(elm);

It has the following methods:

.enable() / .disable()

Toggle resizability. When disabled, the main element gets a 'resize-disabled' classname.

.on(eventName, callback)

Listen to drag and drop events:

  • 'resize-start' - resizing started, on mouse down.
  • 'resizing' - moving around, on mouse move (with mouse down)
  • 'resize-end' - resizing stopped, on mouse up.

Callbacks' first argument is the event object.

The resizing event has a second argument: a size object, {width, height}.

The resize-end event has a second argument: the new bounding client rect of the target element (i.e. elm.getBoundingClientRect())

Event Aliases
For extra convenience, anything that contains start, stop/end or ing will match its respective event.

.showGrips() / .hideGrips()

Toggle grips opacity. You will still need to style them in order to see them.
All grips have a resize-grip classname.

.destroy()

Kills the Resizable instance for good, unbinds events, releases element references.

ClassNames

For styling, the main element will be given the following classes:

  • 'resizable' - from initialization until destruction.
  • 'resizing' - on mouse down on a resize grip, until mouse up.

 

Position:

On initialization, the target element will be placed inside the <body> element and will be given an inline style of position: absolute.

Package Sidebar

Install

npm i resizable-elm

Weekly Downloads

9

Version

0.0.10

License

MIT

Unpacked Size

25.9 kB

Total Files

5

Last publish

Collaborators

  • taitulism