ResizeObserver (utils/dom)
@ckeditor/ckeditor5-utils/src/dom/resizeobserver
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
-
The element observed by this observer.
-
private readonly
_callback : ( ResizeObserverEntry ) => voidmodule:utils/dom/resizeobserver~ResizeObserver#_callbackThe callback executed each time
_elementis resized. -
The element observed by this observer.
Static properties
-
private static
_elementCallbacks : null | Map<Element, Set<( ResizeObserverEntry ) => void>>module:utils/dom/resizeobserver~ResizeObserver._elementCallbacksA mapping of native DOM elements and their callbacks shared across all
ResizeObserverinstances. -
private static
_observerInstance : null | ResizeObservermodule:utils/dom/resizeobserver~ResizeObserver._observerInstanceThe single native observer instance shared across all
ResizeObserverinstances.
Methods
-
constructor( element, callback )module:utils/dom/resizeobserver~ResizeObserver#constructorCreates an instance of the
ResizeObserverclass.Parameters
element : ElementA 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 ) => voidA function called when the observed element was resized. It passes the
ResizeObserverEntryobject with information about the resize event.
-
destroy() → voidmodule:utils/dom/resizeobserver~ResizeObserver#destroy
Static methods
-
private static
_addElementCallback( element, callback ) → voidmodule:utils/dom/resizeobserver~ResizeObserver._addElementCallbackRegisters a new resize callback for the DOM element.
Parameters
element : Elementcallback : ( ResizeObserverEntry ) => void
Returns
void
-
private static
_createObserver() → voidmodule:utils/dom/resizeobserver~ResizeObserver._createObserverCreates the single native observer shared across all
ResizeObserverinstances.Returns
void
-
private static
_deleteElementCallback( element, callback ) → voidmodule:utils/dom/resizeobserver~ResizeObserver._deleteElementCallbackRemoves 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 : Elementcallback : ( ResizeObserverEntry ) => void
Returns
void
-
private static
_getElementCallbacks( element ) → undefined | null | Set<( ResizeObserverEntry ) => void>module:utils/dom/resizeobserver~ResizeObserver._getElementCallbacksReturns are registered resize callbacks for the DOM element.
Parameters
element : Element
Returns
undefined | null | Set<( ResizeObserverEntry ) => void>
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.
With the release of version 42.0.0, we have rewritten much of our documentation to reflect the new import paths and features. We appreciate your feedback to help us ensure its accuracy and completeness.