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.
Properties
-
element : Elementreadonlymodule:utils/dom/resizeobserver~ResizeObserver#elementThe element observed by this observer.
-
_callback : ( entry: ResizeObserverEntry ) => voidprivatereadonlymodule:utils/dom/resizeobserver~ResizeObserver#_callbackThe callback executed each time
_elementis resized. -
_element : Elementprivatereadonlymodule:utils/dom/resizeobserver~ResizeObserver#_elementThe element observed by this observer.
Static properties
-
_elementCallbacks : null | Map<Element, Set<( entry: ResizeObserverEntry ) => void>>privatestaticmodule:utils/dom/resizeobserver~ResizeObserver._elementCallbacksA mapping of native DOM elements and their callbacks shared across all
ResizeObserverinstances. -
_observerInstance : null | ResizeObserverprivatestaticmodule: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 : ( entry: 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
-
_addElementCallback( element, callback ) → voidprivatestaticmodule:utils/dom/resizeobserver~ResizeObserver._addElementCallbackRegisters a new resize callback for the DOM element.
Parameters
element : Elementcallback : ( entry: ResizeObserverEntry ) => void
Returns
void
-
_createObserver() → voidprivatestaticmodule:utils/dom/resizeobserver~ResizeObserver._createObserverCreates the single native observer shared across all
ResizeObserverinstances.Returns
void
-
_deleteElementCallback( element, callback ) → voidprivatestaticmodule: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 : ( entry: ResizeObserverEntry ) => void
Returns
void
-
_getElementCallbacks( element ) → undefined | null | Set<( entry: ResizeObserverEntry ) => void>privatestaticmodule:utils/dom/resizeobserver~ResizeObserver._getElementCallbacksReturns are registered resize callbacks for the DOM element.
Parameters
element : Element
Returns
undefined | null | Set<( entry: ResizeObserverEntry ) => void>