blockly > FocusManager

Classe FocusManager

Un singleton per pagina che gestisce lo stato attivo di Blockly in uno o più IFocusableTree e sincronizza questo stato attivo in modo bidirezionale con il DOM.

I chiamanti che vogliono modificare esplicitamente lo stato attivo dell'input per selezionare i componenti Blockly sulla pagina devono utilizzare le funzioni di stato attivo in questo gestore.

Il gestore è responsabile della gestione degli eventi di messa a fuoco del DOM (che possono verificarsi quando gli utenti fanno clic sugli elementi della pagina) e di garantire che i nodi IFocusableNode corrispondenti siano chiaramente contrassegnati come attivi/passivi nello stesso modo in cui ciò verrebbe rappresentato con le chiamate a focusNode().

Firma:

export declare class FocusManager 

Costruttori

Costruttore Modificatori Descrizione
(constructor)(addGlobalEventListener) Crea una nuova istanza della classe FocusManager

Proprietà

Proprietà Modificatori Tipo Descrizione
ACTIVE_FOCUS_NODE_CSS_CLASS_NAME

static

readonly

(non dichiarato)

La classe CSS assegnata agli elementi IFocusableNode che attualmente hanno lo stato attivo DOM e Blockly.

Non deve mai essere utilizzato direttamente. Affidati invece a FocusManager per assicurarti che i nodi abbiano lo stato attivo (automaticamente tramite lo stato attivo DOM o manualmente tramite i vari metodi focus* forniti da questa classe).

Ti consigliamo di non eseguire query utilizzando questo nome di classe. Utilizza invece i metodi di FocusableTreeTraverser o IFocusableTree per trovare un nodo specifico.

PASSIVE_FOCUS_NODE_CSS_CLASS_NAME

static

readonly

(non dichiarato)

La classe CSS assegnata agli elementi IFocusableNode che attualmente hanno un focus passivo (ovvero sono stati l'ultimo nodo nel loro albero relativo ad avere un focus attivo, vedi ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, e riceveranno di nuovo un focus attivo se viene richiesto che l'albero circostante diventi attivo, ad esempio utilizzando focusTree di seguito).

Consulta ACTIVE_FOCUS_NODE_CSS_CLASS_NAME per avvertenze e limitazioni relative all'utilizzo diretto di questa costante (in genere non dovrebbe mai essere utilizzata).

Metodi

Metodo Modificatori Descrizione
ephemeralFocusTaken()
focusNode(focusableNode)

Concentra l'input DOM sul nodo specificato e lo contrassegna come attivo.

Qualsiasi nodo su cui è stato precedentemente messo a fuoco verrà aggiornato in modo da essere evidenziato passivamente (se si trova in un albero diverso su cui è possibile mettere a fuoco) o sfocato (se si trova nello stesso albero).

**Importante**: se non è possibile mettere a fuoco il nodo fornito (ad es. il metodo canBeFocused() restituisce false), questo verrà ignorato e lo stato attivo esistente rimarrà invariato.

Tieni presente che questa operazione potrebbe aggiornare l'attributo tabindex dell'elemento del nodo specificato per garantire che possa essere letto correttamente dagli screen reader quando è attivo.

focusTree(focusableTree)

Imposta lo stato attivo sull'IFocusableTree specifico. Ciò significa ripristinare lo stato attivo del nodo passivo dell'albero o attivare il nodo radice dell'albero.

Tieni presente che se l'albero specificato ha già un nodo attivo, lo stato attivo esistente non cambierà (a meno che il nodo non abbia lo stato attivo passivo, nel qual caso verrà ripristinato lo stato attivo).

Per informazioni dettagliate su come vengono interessati gli altri nodi, consulta getFocusedNode.

getFocusedNode()

Restituisce l'IFocusableNode corrente con lo stato attivo (sempre associato a un IFocusableTree attivo) o null se non è presente.

Tieni presente che questa funzione manterrà la parità con IFocusableTree.getFocusedNode(). Ciò significa che, se un albero stesso ha lo stato attivo, ma nessuno dei suoi elementi secondari non radice lo ha, questa funzione restituirà null, mentre getFocusedTree() no.

Tieni presente inoltre che se il focus effimero è attualmente acquisito (ad es. utilizzando takeEphemeralFocus), il nodo restituito qui potrebbe non avere attualmente il focus DOM.

getFocusedTree()

Restituisce l'IFocusableTree corrente che ha lo stato attivo o null se nessuno lo ha.

Tieni presente inoltre che se il focus effimero è attualmente acquisito (ad es. utilizzando takeEphemeralFocus), l'albero restituito qui potrebbe non avere attualmente il focus DOM.

getFocusManager() static

Restituisce FocusManager globale della pagina.

L'istanza restituita non cambia tra le chiamate di funzione, ma può cambiare tra i caricamenti di pagina.

isRegistered(tree) Restituisce un valore che indica se l'albero specificato è già stato registrato in questo gestore utilizzando registerTree e non è ancora stato annullato utilizzando unregisterTree.
registerTree(tree, rootShouldBeAutoTabbable)

Registra un nuovo IFocusableTree per la gestione automatica dello stato attivo.

Se l'albero ha attualmente un elemento con focus DOM, lo stato interno di questo gestore non verrà modificato finché il focus non passerà a un nuovo elemento/nodo ora monitorato.

Questa funzione genera un errore se l'albero fornito è già registrato in questo gestore. Utilizza isRegistered per eseguire il controllo nei casi in cui non è possibile stabilire con certezza se l'albero è stato registrato.

La registrazione dell'albero può essere personalizzata per configurare le tabulazioni automatiche. In particolare, consente all'utente di spostarsi con il tasto Tab fino alla radice dell'albero, ma solo quando l'albero non ha il focus attivo. Se questa funzionalità è disattivata, la radice dell'albero verrà resa automaticamente attivabile (ma non selezionabile con il tasto Tab) quando viene selezionata per la prima volta nello stesso modo di qualsiasi altro nodo attivabile.

takeEphemeralFocus(focusableElement)

Acquisisce temporaneamente lo stato attivo per un elemento specifico finché non viene chiamata la lambda restituita. Ciò dovrebbe essere particolarmente utile per i flussi UI effimeri come le finestre di dialogo.

IMPORTANTE: la funzione lambda restituita *deve* essere chiamata, altrimenti la messa a fuoco automatica non funzionerà più in nessuna parte della pagina. È consigliabile collegare la chiamata lambda alla chiusura della UI corrispondente in modo che, se l'input viene modificato manualmente in un elemento esterno alla UI effimera, la UI si chiuda e l'input automatico venga ripristinato. Tieni presente che questa lambda deve essere chiamata esattamente una volta e che le chiamate successive genereranno un errore.

Tieni presente che il gestore continuerà a monitorare i segnali di input DOM anche quando lo stato attivo temporaneo è attivo, ma non cambierà effettivamente lo stato del nodo finché non viene chiamata la lambda restituita. Inoltre, può essere attivo un solo contesto di messa a fuoco effimero alla volta (il tentativo di attivarne più di uno contemporaneamente genererà un errore).

unregisterTree(tree)

Annulla la registrazione di un IFocusableTree dalla gestione automatica dello stato attivo.

Se l'albero aveva un nodo precedentemente selezionato, la relativa evidenziazione verrà rimossa. Questa funzione NON modifica lo stato attivo del DOM.

Questa funzione genera un errore se l'albero fornito non è attualmente registrato in questo gestore.

Questa funzione reimposta l'indice di tabulazione dell'elemento radice dell'albero se l'albero è stato registrato con la gestione automatica delle schede.