코드 가이드 ‐ Flicking

Flicking

• 인스턴스 및 플러그인 초기화, 옵션 처리, 이벤트 바인딩을 담당합니다.
• getter, setter, 메서드 등 주요 동작도 정의되어 있습니다.

Flicking.prev

• 현재 활성 Panel의 이전 Panel로 이동합니다.
  • moveTo 메서드를 사용하여 현재 활성 Panel 인덱스에서 -1 한 Panel로 이동합니다.
  • 이전 Panel이 없으면 동작하지 않으며, circular 모드일 경우 마지막 Panel로 이동합니다.
  • 이동 중 moveStart, move, moveEnd 이벤트가 발생합니다.

Flicking.next

• 현재 활성 Panel의 다음 Panel로 이동합니다.
  • moveTo 메서드를 사용하여 현재 활성 Panel 인덱스에서 +1 한 Panel로 이동합니다.
  • 다음 Panel이 없으면 동작하지 않으며, circular 모드일 경우 첫 번째 Panel로 이동합니다.

Flicking.moveTo

• 특정 Panel 인덱스나 위치로 이동합니다.
  • 이동할 Panel 인덱스와 함께 옵션으로 애니메이션 지속 시간, 애니메이션 효과 등을 설정할 수 있습니다.
  • 대상 Panel이 유효하지 않으면 오류가 발생하지 않고 이동하지 않습니다.
  • Camera의 lookAt 메서드를 호출하여 위치를 업데이트하며, 필요 시 moveStart, move, moveEnd 이벤트를 발생시킵니다.

Flicking.updateAnimation

• 진행 중인 애니메이션의 상태를 업데이트합니다.
  • updateAnimation 메서드는 내부적으로 AnimationManager를 사용하여 Camera의 위치를 계산하고, DOM 변화를 반영합니다.
  • Flicking이 초기화되거나, 사용자 입력 중에 호출됩니다.

Flicking.stopAnimation

• 진행 중인 애니메이션을 즉시 중지합니다.
  • 현재 Camera의 위치를 즉시 애니메이션 대상 위치로 고정하고, AnimationManager 상태를 초기화합니다.

Flicking.getPanel

• 주어진 인덱스에 해당하는 Panel 객체를 반환합니다.
  • 내부적으로 Panel 배열을 참조하여 유효한 인덱스인지 확인 후 반환하며, 범위를 벗어난 경우 null을 반환합니다.

Flicking.enableInput

• 사용자 입력(터치, 마우스 드래그 등)을 활성화합니다.
  • InputController의 활성화 상태를 true로 설정하여 사용자의 입력을 다시 허용합니다.

Flicking.disableInput

• 사용자 입력을 비활성화합니다.
  • InputController의 활성화 상태를 false로 설정하여 Flicking이 사용자 입력을 무시하도록 만듭니다.

Flicking.getStatus

• Flicking의 현재 상태를 JSON 형식으로 반환합니다.
  • 반환되는 상태에는 Camera의 위치, 활성 Panel의 인덱스, Panel 배열 등이 포함되며, 상태 복원이나 동기화에 사용됩니다.

Flicking.setStatus

• getStatus로 얻은 상태를 Flicking에 적용합니다.
  • JSON 상태 데이터를 분석하여 Camera 위치와 Panel 배열을 복원하며, 이벤트를 발생시키지 않고 빠르게 상태를 동기화합니다.

Flicking.addPlugins

• Flicking에 플러그인을 추가하여 기능을 확장합니다.
  • 플러그인의 init 메서드를 호출하여 Flicking과의 연결을 설정하며, 기존 플러그인과 충돌 여부를 확인합니다.

Flicking.removePlugins

• Flicking에서 특정 플러그인을 제거합니다.
  • 제거할 플러그인의 destroy 메서드를 호출하여 Flicking과의 연결을 해제합니다.

Flicking.resize

• Flicking의 크기와 관련된 상태를 업데이트합니다.
  • Viewport, Panel 크기 등을 재계산하며, Camera와 Anchor 위치도 갱신됩니다.
  • 브라우저 크기 변경, DOM 구조 변경 후 호출이 필요합니다.

Flicking.append

• 새로운 Panel을 Viewport의 끝에 추가합니다.
  • 새로운 DOM 요소를 Flicking의 Panel 배열에 추가하고, Camera와 Anchor 위치를 갱신합니다.

Flicking.prepend

• 새로운 Panel을 Viewport의 시작에 추가합니다.
  • 새로운 DOM 요소를 가장 앞에 추가하고, 모든 Panel과 Camera의 오프셋을 조정하여 올바른 정렬을 유지합니다.

Flicking.insert

• 특정 위치에 새로운 Panel을 추가합니다.
  • Panel 배열의 지정된 인덱스에 DOM 요소를 삽입하고, 이후의 Panel 위치와 Camera 정보를 갱신합니다.

Flicking.remove

• 특정 Panel을 Flicking에서 제거합니다.
  • Panel 배열에서 제거된 Panel을 삭제하고, Camera와 Anchor 정보를 다시 계산하여 정렬을 유지합니다.