Resizer extends KompElement

An overlay element that provides resize handles around a target element, allowing the user to resize and optionally move it by dragging.

Example

const resizer = new Resizer({
    target: document.getElementById('box'),
    move: true,
    autohide: false,
    directions: ['right', 'bottom'],
    bounds: () => container.getBoundingClientRect()
})
container.append(resizer)

Constructor

new Resizer(options)
options : Object optional
target : HTMLElement optional

element to resize

autohide : boolean optional

show/hide handles on target hover

offset : string optional

CSS offset value for edge handles

directions : Array.<string> optional

which edges get resize handles

move : boolean optional

enable a move handle for dragging the element

container : HTMLElement optional

positioning container (defaults to document.body)

bounds : function optional

function returning an object with optional top, right, bottom, left properties to constrain resize/move operations

handles : Object optional

handle display options

autohide : boolean optional

show/hide edge handles until handle is hovered

hitBox : number optional

handle hit area in pixels

content : string | HTMLElement | Array | Object optional

content to append to element. Passed to Dolla's content

Static Properties

P   assignableAttributes: Object

Attributes settable via constructor options. Each key is the attribute name and the value is a schema object describing how to handle it.

Example

static assignableAttributes = {
    anchor: { type: 'HTMLElement', default: null, null: true },
    placement: { type: 'string', default: 'bottom', null: false },
    enabled: { type: 'boolean', default: true, null: false },
    data: { type: 'array', default: [], null: false }
}

Properties

type : string | Array.<string>

expected type(s): 'string', 'number', 'boolean', 'object', 'array', 'function', or a class/element name like 'HTMLElement'

default : *

default value when none is provided

null : boolean

whether null is an acceptable value

load : function optional

optional transform applied when reading the attribute value

P   assignableMethods: Array

Methods overridable via constructor options

P   bindMethods: Array

Methods to auto-bind to this

P   events: Array

Event names that can be bound via onEventName constructor options

P   style: string

CSS injected once per component via adoptedStyleSheets

P   styleLayer: string | false

CSS @layer name used to wrap the component's styles when injected via adoptedStyleSheets. Set to a falsy value to disable layering.

P   watch: Array

Attributes to observe for changes. Triggers changed(attribute, was, now) and [attribute]Changed(was, now) callbacks.

Instance Methods

F   addEventListenerFor(element, eventType, args)

Listen for events on another element, automatically cleaned up when this component disconnects

Parameters

element : HTMLElement

element to listen on

eventType : string

event type

args : *

additional arguments passed to addEventListener

F   changed(attribute, was, now)

Called every time an observed attribute changes. Attribute must be listed in static watch.

Parameters

attribute : string

the attribute that changed

was : *

previous value

now : *

new value

F   connected()

Called when element is connected to the DOM

F   disconnected()

Called when element is disconnected from the DOM

F   initialize()

Called once per instantiation, but only after element is connected to the DOM

F   onResize(el)

Called after a resize/move completes. Default syncs position/size back to the target element's inline styles. Override via constructor option to customize behavior.

Parameters

el : Resizer

this element

F   rect() → Object

Returns the current position and size of the overlay.

Returns

Object
F   remove(callback) → KompElement

Remove element. Fires beforeRemove, calls optional callback, removes from DOM, then fires afterRemove.

Parameters

callback : function optional

async callback called between beforeRemove and afterRemove

Returns

F   reposition()

Sync the overlay position/size to match the target element.

F   trigger(eventName, args)

Trigger an event on this element

Parameters

eventName : string

event name to trigger

args : *

additional arguments

Events

E   afterConnect

Fired after the element is connected to the DOM and initialized

E   afterDisconnect

Fired after the element is disconnected from the DOM

E   afterRemove

Fired after the element is removed

E   beforeConnect

Fired before the element is connected to the DOM

E   beforeDisconnect

Fired before the element is disconnected from the DOM

E   beforeRemove

Fired before the element is removed

E   resize

Fired after a resize or move operation completes