observeResize

La funzione observeResize ti consente di osservare le dimensioni di un elemento ed eseguire un callback quando cambiano.

Questa funzione utilizza l'API ResizeObserver e segue un pattern singleton per migliori prestazioni.

Utilizzo

Importa la funzione:

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

Esempio:

// Ascolta le modifiche delle dimensioni su document.body
const observer = observeResize(document.body, function (entry, observer) {
  // A questo punto, le dimensioni di document.body sono cambiate. Puoi ottenere la nuova dimensione da entry.
  console.log(entry);

  // Chiama questo metodo per interrompere l'osservazione
  observer.unobserve();
});

// Puoi anche chiamare il metodo unobserve sul valore restituito dalla funzione per interrompere l'osservazione
observer.unobserve();

API

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

Il parametro target può essere un selettore CSS, un elemento DOM o un oggetto JQ.

Callback

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

In questa funzione, this si riferisce a ObserveResize.

ObserveResize

{
  unobserve: () => void;
}