키보드 단축키 구현
우리는 GitLab에서 키보드 단축키를 구현하기 위해 Mousetrap을 사용합니다.
Mousetrap은 JavaScript 핸들러에 바인딩되는 키보드 단축키 문자열(예: mod+shift+p 또는 p b)을 제공하는 API를 제공합니다.
// 이렇게 하지 마십시오. 아래의 참고 사항을 참조하십시오
Mousetrap.bind('p b', togglePerformanceBar)
그러나 위의 예시와 같이 하드코딩된 키 시퀀스를 핸들러에 연결하는 것은 사용자가 이러한 키보드 단축키를 사용자 정의하거나 비활성화하는 것을 방해합니다.
키보드 단축키를 사용자 정의할 수 있게 하려면 명령은 ~/behaviors/shortcuts/keybindings.js에서 정의됩니다. keysFor 메서드는 제공된 명령에 대한 올바른 키 시퀀스를 반환하는 역할을 합니다.
import { keysFor, TOGGLE_PERFORMANCE_BAR } from '~/behaviors/shortcuts/keybindings'
Mousetrap.bind(keysFor(TOGGLE_PERFORMANCE_BAR), togglePerformanceBar);
단축키 사용자 정의
keybindings.js는 키보드 단축키 사용자 정의를 localStorage의 JSON 문자열로 저장합니다. keysFor가 호출될 때, 명령 객체의 id를 사용하여 localStorage에서 찾은 사용자 정의를 조회하고 명령이 사용자 정의되지 않은 경우 기본 키 바인딩을 반환합니다. 이를 편집 할 수 있는 UI는 없습니다.
새로운 단축키 추가
키보드 단축키를 최종 사용자가 사용자 정의하거나 비활성화할 수 있기 때문에, 개발자들은 GitLab에 많은 수의 키보드 단축키를 빌드할 것을 권장받습니다. 사용 가능성이 낮은 단축키는 기본적으로 비활성화되어야 합니다.
새로운 단축키를 추가하려면 keybindings.js에 새로운 명령 객체를 정의하고 내보내십시오.
export const MAKE_COFFEE = {
id: 'foodAndBeverage.makeCoffee',
description: s__('KeyboardShortcuts|커피 만들기'),
defaultKeys: ['mod+shift+c'],
};
다음으로, 적절한 키바인딩 그룹 객체에 새로운 명령을 추가하십시오.
const COFFEE_GROUP = {
id: 'foodAndBeverage',
name: s__('KeyboardShortcuts|음식 및 음료'),
keybindings: [
MAKE_ESPRESSO,
MAKE_LATTE,
MAKE_COFFEE
];
}
마지막으로, 어플리케이션 코드에서 keysFor 함수와 새로운 명령 객체를 import하고 Mousetrap을 사용하여 단축키를 핸들러에 바인딩하십시오.
import { keysFor, MAKE_COFFEE } from '~/behaviors/shortcuts/keybindings'
Mousetrap.bind(keysFor(MAKE_COFFEE), makeCoffee);
더 많은 예제는 keybindings.js에서 기존 명령 정의를 참조하십시오.
단축키 비활성화
단축키는 빈 배열 []에 할당하여 비활성화(또는 할당 해제)될 수 있습니다. 예를 들어, 기본적으로 비활성화된 새로운 단축키를 소개하려면 다음과 같이 명령을 정의할 수 있습니다.
export const MAKE_MOCHA = {
id: 'foodAndBeverage.makeMocha',
description: s__('KeyboardShortcuts|모카 만들기'),
defaultKeys: [],
};
사용자 정의할 수 없는 단축키 만들기
가끔, 키보드 단축키가 사용자 정의되지 않는 것이 중요할 수 있습니다(비록 이러한 경우가 드뭅니다).
이 경우, customizable: false로 단축키를 정의하여 키바인딩의 사용자 정의를 비활성화할 수 있습니다.
export const MAKE_AMERICANO = {
id: 'foodAndBeverage.makeAmericano',
description: s__('KeyboardShortcuts|아메리카노 만들기'),
defaultKeys: ['mod+shift+a'],
// 이것은 이 단축키의 사용자 정의를 비활성화합니다
customizable: false
};
이 단축키는 항상 defaultKeys에 바인딩될 것입니다.
크로스 플랫폼 단축키 만들기
모든 플랫폼과 브라우저에서 잘 작동하는 단축키를 만드는 것은 어려울 수 있습니다. 이는 단축키를 사용자 정의하고 비활성화할 수 있는 것이 중요한 이유 중 하나입니다.
키보드 단축키를 더 이식 가능하게 만드는 중요한 방법 중 하나는 mod 단축키 문자열을 사용하는 것입니다. 이는 Mac에서 command로 해석되고 그 외의 경우에는 ctrl로 해석됩니다.
자세한 내용은 Mousetrap의 문서를 참조하십시오.
도움말