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'
} );
By default, it uses the native DOM resize observer under the hood and in browsers that do not support the native API yet, a polyfilled observer is used instead.
Filtering
Properties
-
_callback : function
module:utils/dom/resizeobserver~ResizeObserver#_callback
private readonly
The callback executed each time
_element
is resized. -
_element : HTMLElement
module:utils/dom/resizeobserver~ResizeObserver#_element
private readonly
The element observer by this observer.
Static properties
-
_observerInstance
module:utils/dom/resizeobserver~ResizeObserver._observerInstance
protected readonly static
The single native observer instance (or polyfill in browsers that do not support the API) shared across all
ResizeObserver
instances. -
_elementCallbacks
module:utils/dom/resizeobserver~ResizeObserver._elementCallbacks
private readonly static
A mapping of native DOM elements and their callbacks shared across all
ResizeObserver
instances.
Methods
-
constructor( element, callback )
module:utils/dom/resizeobserver~ResizeObserver#constructor
Creates an instance of the
ResizeObserver
class.Parameters
element : HTMLElement
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 : function
A function called when the observed element was resized. It passes the
ResizeObserverEntry
object with information about the resize event.
-
destroy()
module:utils/dom/resizeobserver~ResizeObserver#destroy
Destroys the observer which disables the
callback
passed to theconstructor
.
Static methods
-
_addElementCallback( element, callback )
module:utils/dom/resizeobserver~ResizeObserver._addElementCallback
private static
Registers a new resize callback for the DOM element.
Parameters
element : HTMLElement
callback : function
-
_createObserver()
module:utils/dom/resizeobserver~ResizeObserver._createObserver
private static
Creates the single native observer shared across all
ResizeObserver
instances. If the browser does not support the native API, it creates a polyfill. -
_deleteElementCallback( element, callback )
module:utils/dom/resizeobserver~ResizeObserver._deleteElementCallback
private static
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 : HTMLElement
callback : function
-
_getElementCallbacks( element ) → Set.<HTMLElement> | null
module:utils/dom/resizeobserver~ResizeObserver._getElementCallbacks
private static
Returns are registered resize callbacks for the DOM element.
Parameters
element : HTMLElement
Returns
Set.<HTMLElement> | null
Every day, we work hard to keep our documentation complete. Have you spotted an outdated information? Is something missing? Please report it via our issue tracker.