Class

ResizeObserverPolyfill (utils/dom)

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

class private

A polyfill class for the native ResizeObserver.

Filtering

Properties

  • _callback : function

    protected readonly

    A function called when any observed element was resized.

  • _elements : Set

    protected readonly

    DOM elements currently observed by the observer instance.

  • _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.

  • _previousRects : Map.<HTMLElement, Rect>

    protected readonly

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

Methods

  • constructor( callback )

    Creates an instance of the ResizeObserverPolyfill class.

    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.

    Learn more in the native method documentation.

    Parameters

    element : HTMLElement
  • unobserve( element )

    Stops observing a DOM element.

    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.

  • _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.

    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.

  • _stopPeriodicCheck()

    protected

    Stops checking for changes in all observed elements geometry.