Class

ResizeObserver (utils/dom)

@ckeditor/ckeditor5-utils/src/dom/resizeobserver

class

A helper class which instances allow performing custom actions when native DOM elements are resized.

const editableElement = editor.editing.view.getDomRoot();

const observer = new ResizeObserver( editableElement, entry => {
	console.log( 'The editable element has been resized in DOM.' );
	console.log( entry.target ); // -> editableElement
	console.log( entry.contentRect.width ); // -> e.g. '423px'
} );

It uses the native DOM resize observer under the hood.

Filtering

Properties

  • readonly

    element : Element

    The element observed by this observer.

  • private readonly

    _callback : ( ResizeObserverEntry ) => void

    The callback executed each time _element is resized.

  • private readonly

    _element : Element

    The element observed by this observer.

Static properties

  • private static

    _elementCallbacks : null | Map<Element, Set<( ResizeObserverEntry ) => void>>

    A mapping of native DOM elements and their callbacks shared across all ResizeObserver instances.

  • private static

    _observerInstance : null | ResizeObserver

    The single native observer instance shared across all ResizeObserver instances.

Methods

  • constructor( element, callback )

    Creates an instance of the ResizeObserver class.

    Parameters

    element : Element

    A DOM element that is to be observed for resizing. Note that the element must be visible (i.e. not detached from DOM) for the observer to work.

    callback : ( ResizeObserverEntry ) => void

    A function called when the observed element was resized. It passes the ResizeObserverEntry object with information about the resize event.

  • destroy() → void

    Destroys the observer which disables the callback passed to the constructor.

    Returns

    void

Static methods

  • private static

    _addElementCallback( element, callback ) → void

    Registers a new resize callback for the DOM element.

    Parameters

    element : Element
    callback : ( ResizeObserverEntry ) => void

    Returns

    void
  • private static

    _createObserver() → void

    Creates the single native observer shared across all ResizeObserver instances.

    Returns

    void
  • private static

    _deleteElementCallback( element, callback ) → void

    Removes a resize callback from the DOM element. If no callbacks are left for the element, it removes the element from the native observer.

    Parameters

    element : Element
    callback : ( ResizeObserverEntry ) => void

    Returns

    void
  • private static

    _getElementCallbacks( element ) → undefined | null | Set<( ResizeObserverEntry ) => void>

    Returns are registered resize callbacks for the DOM element.

    Parameters

    element : Element

    Returns

    undefined | null | Set<( ResizeObserverEntry ) => void>