Resizable (ridimensionare finestre ed elementi)

Ridimensionare le finestre del nostro sistema operativo è un'operazione che compiamo spesso e che serve a gestire meglio la limitata dimensione del nostro monitor; al contrario, sul web l'esigenza di poter ridimensionare blocchi e finestre a comparsa è stata per molti anni poco sentita, viste le limitate interazioni disponibili per l'utente.

Con l'introduzione di finestre modali al posto dei pop-up e successivamente di layout "mobili" e personalizzabili, è stato necessario realizzare anche questo tipo di interazione.

jQuery UI mette a disposizione il metodo .resizable(), che permette di ridimensionare un elemento con lo stesso tipo di azioni ormai familiari nelle applicazioni desktop semplicemente richiamando su di esso il metodo:

$("#box").resizable();

In questo modo verranno aggiunte delle maniglie (di default sul lato destro, basso e nell'angolo inferiore destro del box) con le quali poter allargare o restringere un elemento (esempio).

L'utilizzo di questa interazione è molto delicato poiché il ridimensionamento di un elemento potrebbe causare problemi alla visualizzazione di quelli adiacenti o addirittura "scombinare" l'intero layout. Proprio per questo è importante personalizzarne il comportamento per adattarlo alle nostre esigenze.

Opzioni

Le opzioni di personalizzazione più importanti in questo caso sono:

• maxHeight / maxWidth / minHeight / minWidth : (intero - null)
  imposta dimensioni massime e minime per l'elemento ridimensionato. È un'impostazione importante per evitare che l'utente possa rimpicciolire troppo un box, perdendo la possibilità di interagirvi, oppure al contrario che possa ingrandirlo troppo oltre il layout o il viewport del browser tanto da oscurare altri elementi;
• containment : (stringa, selettore, elemento - false)
  indica un elemento che delimiti l'estendibilità dell'oggetto ridimensionabile. Anche in questo caso, se possibile, identificare un contenitore serve a limitare entro limiti ragionevoli le possibilità dell'utente;
• aspectRatio : (booleano, decimale - false)
  dà la possibilità di forzare una proporzione fra altezza e larghezza durante il ridimensionamento. Se impostato su true verranno mantenute le proporzioni originali altrimenti si possono impostare proporzioni personalizzate come 0.5 o 16/9;
• handles : (stringa,oggetto - 'e, s, se')
  indica quali maniglie devono essere create per il ridimensionamento. Le posizioni possibili sono identificate secondo le sigle dei punti cardinali, quindi quelle di default sono est, sud, sudest (destra, sotto, in basso a destra);

Fra le opzioni troviamo anche grid, delay e distance, che ricalcano quelle già trovate in .draggable(). Rispettivamente indicano una griglia di ridimensionamento fissa, dopo quanto tempo avviare l'interazione e dopo quanti pixel di trascinamento di una maniglia. La regolazione di questi parametri concorre alla sensazione di "appiccicosità" dell'elemento al layout sottostante.

Infine, due tipologie di opzioni contrastanti sono animate e ghost: la prima abilita il ridimensionamento con un'animazione (e specifici valori per andamento e durata), la seconda crea un helper semitrasparente che fa da traccia durante il ridimensionamento.

La differenza a livello di interfaccia è sostanziale: come succede nei sistemi desktop, un'animazione risulta senza dubbio più "spettacolare" tuttavia richiede più risorse rispetto ad un helper e soprattutto rallenta l'utente che deve aspettare la fine dell'effetto per continuare il suo lavoro.

In generale, se non strettamente necessario, l'animazione risulta superflua e controproducente.

Ecco alcuni esempi di personalizzazione del metodo.

Eventi

Chiudiamo questa lezione con la lista di eventi collegati a .resizable(), che sono start, stop e resize, lanciati all'inizio, alla fine e durante il ridimensionamento.

Tutti questi eventi accettano due argomenti: l'evento Javascript e un oggetto ui con le seguenti proprietà:

• .helper - un oggetto jQuery contenente l'helper
• .originalPosition - {top, left} posizione originale dell'elemento
• .originalSize - {width, height} dimensione originale
• .position - {top, left} posizione corrente
• .size - {width, height} dimensione corrente