Photo by Juan Gomez on Unsplash
У цьому блозі я поділюсь реалізацією класу менеджера для гарячих клавіш на TypeScript. Він дозволяє реєструвати та скасовувати реєстрацію гарячих клавіш для всього додатку глобально. Реалізація була натхненна чудовою статтею: "Створення гарячих клавіш з RxJS", але я значно покращив запропоновану реалізацію, додавши виправлення помилок та кілька розширень. Як і в оригінальній статті, ми використовуємо RxJS. Давайте створимо клас, який називатимемо ShortcutManager. Яка мета цього класу? Цей клас надає один публічний метод shortcut$, який реалізований таким чином:
Ця функція для гарячих клавіш може бути використана для створення потоку Observable для будь-якої гарячої клавіші. Гаряча клавіша — це послідовність кодів клавіш, кожна з яких представляє клавішу на клавіатурі. Приклад використання для Ctrl+F:
Повернений потік подій з клавіатури описує кожну натиснуту клавішу. undefined у поверненому потоці подій означає, що всі клавіші були відпущені. Це зручно для деяких сценаріїв, де потрібно відслідковувати події keyup — і це є розширенням оригінальної реалізації з вищезгаданого блогу. Інші приклади з мого поточного проекту:
Звісно, ми можемо конструювати будь-яку довільну послідовність гарячих клавіш, наприклад, shortcut$(ShortcutKey.Alt, ShortcutKey.F1, ShortcutKey.Digit0) для трьох натиснутих клавіш "Alt+F1+0". Більшість часу порядок натискання клавіш важливий, тому реалізація враховує порядок. В останньому прикладі спочатку має бути натиснута клавіша "Alt", потім "F1", а на останок — цифра "0".
Давайте поговоримо про ShortcutKey і детально розглянемо кожен приватний метод у класі ShortcutManager. Клас ShortcutKey представляє одну гарячу клавішу. Я покажу лише витяг. Для більш детальної інформації щодо визначених констант, дивіться офіційну документацію "Кодові значення для подій клавіатури" і властивість “code” там.
Будь ласка, зверніть увагу на коментарі — для зручності нам не потрібно перераховувати різні фізичні клавіші, такі як "AltLeft" і "AltRight" для однієї логічної клавіші. Ми можемо використовувати логічну клавішу "Alt" і скоротити синтаксис для реєстрації клавіші. Це зручне розширення в порівнянні з оригінальною статтею. Для досягнення цієї мети я додав метод, який генерує картезіанський добуток (див. виклик методу в публічному shortcut$).
Ще два приватних методи наведено нижче:
Як ви бачите, ми буферизуємо натиснуті клавіші, щоб пізніше перевірити, чи всі з них були відпущені. Це виправлення помилки, яке я згадував вище. Оператор combineLatest RxJS чекає на всі введення (= натиснуті клавіші) і видає останні значення всіх введень. Реєстрація подій клавіатури keydown і keyup здійснюється на об'єкті document за допомогою оператора RxJS fromEvent.
Останній залишковий приватний метод checkPressedKey (який використовується в filter) перевіряє точну кількість натиснутих клавіш. Як ви бачите, як тільки всі клавіші відпускаються, підписники на shortcut$ отримають повідомлення. Він також перевіряє послідовність клавіш, тобто порядок натискання клавіш. Це вимога тут, але була необов'язковим доповненням в оригінальній реалізації.
Ось і все. Спробуйте це!
Перекладено з: Keyboard shortcuts with RxJS