이 프로젝트의 목적은 웹 애플리케이션 내 다양한 요소의 포커스를 전역적으로 관리하는 스크립트를 만드는 것입니다. 이 스크립트는 tabindex 값을 설정하고, 포커스 이동을 제어하며, 포커스 상태를 효과적으로 관리합니다.
이 스크립트는 웹 애플리케이션에서 포커스를 관리하기 위한 종합적인 솔루션을 제공합니다. 주요 기능은 다음과 같습니다:
- 기본값 및 요소의 tabindex 초기 설정
- 가시성에 따라 요소에 포커스 설정
- 사용자 입력(왼쪽/오른쪽 탐색)에 따른 포커스 이동
- localStorage에서 포커스 데이터 저장 및 가져오기
- 초기화 (init):
- 기본 데이터 값을 설정합니다.
- 지정된 모든 요소 유형(menu, content, modal)에 대해 tabindex를 초기화합니다.
- 기본 데이터 설정 (setDefaultData):
- 다양한 포커스 관련 속성에 초기 값을 할당합니다(이미 정의되어 있지 않은 경우).
- 모든 요소에 tabindex 설정 (setTabindexAll):
- 지정된 모든 유형의 요소에 대해 tabindex를 설정합니다.
- tabindex 설정 (setTabindex):
- 요소의 유형(menu, content, modal) 및 가시성에 따라 tabindex를 할당합니다.
- 요소 가시성 확인 (isElementVisible):
- 요소의 크기를 기준으로 해당 요소가 가시적인지 여부를 확인합니다.
- 초기 포커스 설정 (setStartFocus):
- 요소의 유형에 따라 초기 포커스를 설정합니다.
- 포커스 다시 설정 (reFocus):
- 저장된 데이터를 기반으로 마지막 포커스된 요소에 다시 포커스를 맞춥니다.
- 포커스 이동 (move):
- 사용자 입력(왼쪽/오른쪽 탐색)에 따라 포커스를 이동시키고, 포커스가 적절한 범위 내에 유지되도록 합니다.
- 포커스 유형 확인 (getFocusType):
- 현재 포커스된 요소의 유형(menu, content, modal)을 확인합니다.
- localStorage에서 마지막 tabindex 가져오기 (getLastLocalStorageTabindex):
- 지정된 유형의 마지막 포커스된 tabindex를 localStorage에서 가져옵니다.
- 현재 tabindex 번호 가져오기 (getCurrentTabindexNo):
- 현재 포커스된 요소의 tabindex 번호를 가져옵니다.
- 현재 요소 가져오기 (getCurrentElement):
- 현재 포커스된 요소를 반환합니다.
- 현재 문서 가져오기 (getCurrentDocument):
- 현재 포커스된 문서를 반환합니다(예: iframe 내부의 문서 또는 최상위 문서).
- 현재 창(window) 객체 가져오기 (getCurrentWindow):
- 현재 포커스된 창(window) 객체를 반환합니다. (예: iframe 내부의 창 또는 최상위 창).
- tabindex를 이용해 요소 찾기 (findElement):
- 지정된 tabindex를 가진 요소를 찾습니다.
- 조상 요소 내에서 최대/최소 tabindex 찾기 (getTabindexMaxOrMin):
- 현재 포커스된 요소의 조상 요소 내에서 최대 또는 최소 tabindex 값을 찾습니다.
- 포커스 데이터 저장 (setFocusDataToTop):
- 현재 및 이전 tabindex와 포커스된 요소의 유형(menu, content, modal)을 저장합니다.
- 포커스 데이터 로컬 스토리지에 저장 (setFocusDataToLocalStorage):
- 포커스 데이터를 로컬 스토리지에 저장하여 페이지 새로고침 후에도 포커스 상태를 유지합니다.
- 클릭 이벤트 활성화 (activeOnClick):
- 현재 포커스된 요소를 클릭하고, 해당 클릭 동작을 저장합니다.
- 뎁스 설정 (setDepth):
- enter 키 또는 backspace 키를 누를 때마다 뎁스를 증가 또는 감소시킵니다.
- 현재 뎁스 가져오기 (getDepth):
- 현재 뎁스를 반환합니다.
- 기본 뎁스 설정 (setDefaultDepth):
- 초기 상태로 기본 뎁스를 설정합니다.
- iframe 포커스 설정 (setIframeFocus):
- 지정된 iframe에 포커스를 설정합니다.
- iframe 포커스 해제 (removeIframeFocus):
- iframe에서 포커스를 해제하고 상위 창에 포커스를 설정합니다.
- 현재 포커스된 유형 설정 (setCurrentType):
- 현재 포커스된 요소의 유형(menu, content, modal)을 설정합니다.
- 현재 포커스된 유형 가져오기 (getCurrentType):
- 현재 포커스된 요소의 유형(menu, content, modal)을 반환합니다.
- 현재 iframe 유형 설정 (setCurrentIframeType):
- 현재 포커스된 iframe의 유형을 설정합니다.
- 현재 iframe 유형 가져오기 (getCurrentIframeType):
- 현재 포커스된 iframe의 유형을 반환합니다.
- 초기화:
focusHandler.init();- 포커스 이동:
document.addEventListener('keydown', function(event) {
if(event.key === 'ArrowRight') {
focusHandler.move('right');
} else if(event.key === 'ArrowLeft') {
focusHandler.move('left');
}
});- 포커스 재설정:
focusHandler.reFocus();- top 객체는 상위 윈도우 객체를 참조합니다. 이 스크립트가 포함된 웹 페이지가 iframe 내부에 포함된 경우를 고려하여 설계되었습니다.
- 모든 tabindex 설정과 포커스 이동 로직은 data-tab- 속성이 있는 요소를 대상으로 합니다. 이 속성의 값은 menu, content, modal 중 하나여야 합니다.