blockly > FocusManager

FocusManager 클래스

하나 이상의 IFocusableTree에서 Blockly 포커스를 관리하고 이 포커스를 DOM과 양방향으로 동기화하는 페이지별 싱글톤입니다.

페이지에서 선택한 Blockly 구성요소의 입력 포커스를 명시적으로 변경하려는 호출자는 이 관리자의 포커스 함수를 사용해야 합니다.

관리자는 DOM의 포커스 이벤트 (사용자가 페이지 요소를 클릭하여 발생할 수 있음)를 처리하고 focusNode() 호출로 표시되는 것과 동일한 방식으로 해당 IFocusableNode가 활성/수동으로 강조 표시되도록 합니다.

서명:

export declare class FocusManager 

생성자

생성자	수정자	설명
(생성자)(addGlobalEventListener)		FocusManager 클래스의 새 인스턴스를 생성합니다.

속성

속성	수정자	유형	설명
ACTIVE_FOCUS_NODE_CSS_CLASS_NAME	static readonly	(선언되지 않음)	현재 활성 DOM 및 Blockly 포커스가 있는 IFocusableNode 요소에 할당된 CSS 클래스입니다. 이 값은 직접 사용해서는 안 됩니다. 대신 FocusManager를 사용하여 노드에 활성 포커스가 있는지 확인하세요 (DOM 포커스를 통해 자동으로 또는 이 클래스에서 제공하는 다양한 focus* 메서드를 통해 수동으로). 이 클래스 이름을 사용하여 쿼리하지 않는 것이 좋습니다. 대신 FocusableTreeTraverser 또는 IFocusableTree의 메서드를 사용하여 특정 노드를 찾으세요.
PASSIVE_FOCUS_NODE_CSS_CLASS_NAME	static readonly	(선언되지 않음)	현재 수동 포커스가 있는 IFocusableNode 요소에 할당된 CSS 클래스입니다. 즉, 상대 트리에서 활성 포커스가 있는 가장 최근 노드였으며(ACTIVE_FOCUS_NODE_CSS_CLASS_NAME 참고) 주변 트리가 포커스를 받도록 요청되면(예: 아래의 focusTree 사용) 다시 활성 포커스를 받습니다. 이 상수를 직접 사용하는 것과 관련된 주의사항과 제한사항은 ACTIVE_FOCUS_NODE_CSS_CLASS_NAME을 참고하세요 (일반적으로 사용할 필요가 없음).

메서드

메서드	수정자	설명
ephemeralFocusTaken()
focusNode(focusableNode)		지정된 노드에 DOM 입력을 포커스하고 활성 포커스로 표시합니다. 이전에 포커스가 있었던 노드는 다른 포커스 가능 트리인 경우 수동으로 강조 표시되도록 업데이트되고 동일한 트리인 경우 흐리게 표시되도록 업데이트됩니다. **중요**: 제공된 노드에 포커스를 둘 수 없는 경우 (예: canBeFocused() 메서드가 false를 반환하는 경우) 무시되며 기존 포커스 상태는 변경되지 않습니다. 이렇게 하면 포커스가 있는 동안 스크린 리더에서 올바르게 읽을 수 있도록 지정된 노드의 요소의 tabindex가 업데이트될 수 있습니다.
focusTree(focusableTree)		특정 IFocusableTree에 포커스를 설정합니다. 이는 수동적으로 포커스가 맞춰진 노드에 활성 포커스를 복원하거나 트리의 루트 노드에 포커스를 맞추는 것을 의미합니다. 지정된 트리에 이미 포커스가 있는 노드가 있는 경우 기존 포커스는 변경되지 않습니다 (해당 노드에 수동 포커스가 있는 경우 활성 포커스로 복원됨). 다른 노드가 영향을 받는 방식에 관한 자세한 내용은 getFocusedNode를 참고하세요.
getFocusedNode()		포커스가 있는 현재 IFocusableNode (항상 포커스가 있는 IFocusableTree에 연결됨)를 반환하거나, 없는 경우 null을 반환합니다. 이 함수는 IFocusableTree.getFocusedNode()와 패리티를 유지합니다. 즉, 트리 자체에 포커스가 있지만 비루트 하위 요소에는 포커스가 없는 경우 이 함수는 null을 반환하지만 getFocusedTree()는 null을 반환하지 않습니다. 또한 임시 포커스가 현재 캡처된 경우 (예: takeEphemeralFocus 사용) 여기에서 반환된 노드에 현재 DOM 포커스가 없을 수 있습니다.
getFocusedTree()		포커스가 있는 현재 IFocusableTree를 반환합니다. 현재 포커스가 있는 항목이 없으면 null을 반환합니다. 또한 임시 포커스가 현재 캡처된 경우 (예: takeEphemeralFocus 사용) 여기에서 반환된 트리에는 현재 DOM 포커스가 없을 수 있습니다.
getFocusManager()	static	페이지 전역 FocusManager를 반환합니다. 반환된 인스턴스는 함수 호출 간에 변경되지 않지만 페이지 로드 간에 변경될 수 있습니다.
isRegistered(tree)		지정된 트리가 registerTree를 사용하여 이 관리자에 이미 등록되었고 unregisterTree를 사용하여 아직 등록 해제되지 않았는지 여부를 반환합니다.
registerTree(tree, rootShouldBeAutoTabbable)		자동 포커스 관리를 위해 새로운 IFocusableTree를 등록합니다. 트리에 현재 DOM 포커스가 있는 요소가 있는 경우 포커스가 이제 모니터링되는 새 요소/노드로 변경될 때까지 이 관리자의 내부 상태에 영향을 미치지 않습니다. 제공된 트리가 이미 이 관리자에 등록되어 있으면 이 함수는 예외를 발생시킵니다. 트리가 등록되었는지 확실하지 않은 경우 isRegistered를 사용하여 확인합니다. 트리의 등록을 맞춤설정하여 자동 탭 정지를 구성할 수 있습니다. 이는 특히 사용자가 트리로 탭 탐색할 수 있는 기능을 제공하지만 트리가 활성 포커스를 보유하지 않는 경우에만 가능합니다. 이 기능을 사용 중지하면 다른 포커스 가능한 노드와 마찬가지로 처음 포커스가 지정될 때 트리의 루트가 자동으로 포커스 가능 (탭 가능은 아님)하게 됩니다.
takeEphemeralFocus(focusableElement)		반환된 람다가 호출될 때까지 특정 요소의 포커스를 일시적으로 캡처합니다. 이는 대화상자와 같은 일시적인 UI 흐름에 특히 유용할 것으로 예상됩니다. 중요: 반환된 람다를 호출해야 합니다. 그렇지 않으면 페이지의 어느 곳에서도 자동 포커스가 더 이상 작동하지 않습니다. 입력이 임시 UI 외부의 요소로 수동으로 변경되는 경우 UI가 닫히고 자동 입력이 복원되도록 람다 호출을 해당 UI의 닫힘에 연결하는 것이 좋습니다. 이 람다는 정확히 한 번 호출해야 하며 후속 호출은 오류를 발생시킵니다. 관리자는 임시 포커스가 활성 상태일 때도 DOM 입력 신호를 계속 추적하지만 반환된 람다가 호출될 때까지는 실제로 노드 상태를 변경하지 않습니다. 또한 언제든지 하나의 임시 포커스 컨텍스트만 활성화할 수 있습니다. 동시에 두 개 이상을 활성화하려고 하면 오류가 발생합니다.
unregisterTree(tree)		자동 포커스 관리에서 IFocusableTree를 등록 취소합니다. 트리에 이전에 포커스가 맞춰진 노드가 있었다면 강조 표시가 삭제됩니다. 이 함수는 DOM 포커스를 변경하지 않습니다. 제공된 트리가 현재 이 관리자에 등록되어 있지 않으면 이 함수는 예외를 발생시킵니다. 이 함수는 자동 탭 관리로 트리가 등록된 경우 트리의 루트 요소 tabindex를 재설정합니다.