observeResize

Funkcja observeResize monitoruje zmiany rozmiaru elementu. Gdy rozmiar się zmieni, wykonywana jest podana funkcja zwrotna.

Funkcja korzysta z ResizeObserver, ale implementuje wzorzec singleton, dzięki czemu jest bardziej wydajna.

Sposób użycia

Zaimportuj funkcję:

import { observeResize } from 'mdui/functions/observeResize.js';

Przykład użycia:

// Nasłuchuj zmian rozmiaru document.body
const observer = observeResize(document.body, function (entry, observer) {
  // Rozmiar document.body uległ zmianie – możesz pobrać nowy rozmiar z entry
  console.log(entry);

  // Możesz wywołać tę metodę, aby zatrzymać nasłuchiwanie
  observer.unobserve();
});

// Możesz też zatrzymać nasłuchiwanie przez wywołanie metody unobserve na zwróconym obiekcie
observer.unobserve();

API

observeResize(target: string | HTMLElement | JQ<HTMLElement>, callback: Callback): ObserveResize

Parametr target może być selektorem CSS, elementem DOM lub obiektem JQ.

Callback

(entry: ResizeObserverEntry, observer: ObserveResize) => void

W funkcji zwrotnej this wskazuje na ObserveResize.

ObserveResize

{
  unobserve: () => void;
}