CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Class

ResizeObserverPolyfill (utils/dom)

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

class private
See source

A polyfill class for the native ResizeObserver.

Filtering

Properties

  • _callback : function

    protected readonly

    A function called when any observed element was resized.

    See source

  • _elements : Set

    protected readonly

    DOM elements currently observed by the observer instance.

    See source

  • _periodicCheckTimeout : Map.<HTMLElement, Rect>

    protected readonly

    An UID of the current timeout upon which the observed elements rects will be compared to the previous rects from the past.

    See source

  • _previousRects : Map.<HTMLElement, Rect>

    protected readonly

    Cached DOM elements bounding rects to compare to upon the next check.

    See source

Methods

  • constructor( callback )

    Creates an instance of the ResizeObserverPolyfill class.

    See source

    It synchronously reacts to resize of the window to check if observed elements' geometry changed.

    Additionally, the polyfilled observer uses a timeout to check if observed elements' geometry has changed in some other way (dynamic layouts, scrollbars showing up, etc.), so its response can also be asynchronous.

    Parameters

    callback : function

    A function called when any observed element was resized. Refer to the native ResizeObserver API to learn more.

  • observe( element )

    Starts observing a DOM element.

    See source

    Learn more in the native method documentation.

    Parameters

    element : HTMLElement

  • unobserve( element )

    Stops observing a DOM element.

    See source

    Learn more in the native method documentation.

    Parameters

    element : HTMLElement

  • _checkElementRectsAndExecuteCallback()

    protected

    Checks if the geometry of any of the element has changed. If so, executes the resize callback with element geometry data.

    See source

  • _hasRectChanged( element ) → Boolean

    protected

    Compares the DOM element geometry to the cached geometry from the past. Returns true if geometry has changed or the element is checked for the first time.

    See source

    Parameters

    element : HTMLElement

    Returns

    Boolean

  • _startPeriodicCheck()

    protected

    When called, the observer calls the resize callback for all observed elements but also starts checking periodically for changes in the elements' geometry. If some are detected, resize callback is called for relevant elements that were resized.

    See source

  • _stopPeriodicCheck()

    protected

    Stops checking for changes in all observed elements geometry.

    See source