Browse Source

Detect key from keyboard event by key property

master
morethanwords 3 years ago
parent
commit
7497f9366f
  1. 11
      src/components/appMediaViewerBase.ts
  2. 3
      src/components/appNavigationController.ts
  3. 43
      src/components/chat/input.ts
  4. 3
      src/components/chat/markupTooltip.ts
  5. 3
      src/components/popups/index.ts
  6. 3
      src/components/sidebarLeft/tabs/2fa/email.ts
  7. 3
      src/components/sidebarLeft/tabs/2fa/enterPassword.ts
  8. 3
      src/components/sidebarLeft/tabs/2fa/hint.ts
  9. 3
      src/components/sidebarLeft/tabs/2fa/reEnterPassword.ts
  10. 4
      src/components/telInputField.ts
  11. 10
      src/helpers/dom/attachListNavigation.ts
  12. 21
      src/helpers/dom/getKeyFromEvent.ts
  13. 12
      src/helpers/dom/getKeyFromEventCaseInsensitive.ts
  14. 3
      src/helpers/dom/isSendShortcutPressed.ts
  15. 16
      src/lib/appManagers/appImManager.ts
  16. 17
      src/lib/mediaPlayer.ts
  17. 3
      src/pages/pagePassword.ts
  18. 8
      src/pages/pageSignIn.ts

11
src/components/appMediaViewerBase.ts

@ -42,6 +42,7 @@ import EventListenerBase from "../helpers/eventListenerBase";
import { MyMessage } from "../lib/appManagers/appMessagesManager"; import { MyMessage } from "../lib/appManagers/appMessagesManager";
import RichTextProcessor from "../lib/richtextprocessor"; import RichTextProcessor from "../lib/richtextprocessor";
import { NULL_PEER_ID } from "../lib/mtproto/mtproto_config"; import { NULL_PEER_ID } from "../lib/mtproto/mtproto_config";
import getKeyFromEventCaseInsensitive from "../helpers/dom/getKeyFromEventCaseInsensitive";
const ZOOM_STEP = 0.5; const ZOOM_STEP = 0.5;
const ZOOM_INITIAL_VALUE = 1; const ZOOM_INITIAL_VALUE = 1;
@ -492,14 +493,16 @@ export default class AppMediaViewerBase<
return; return;
} }
const key = getKeyFromEventCaseInsensitive(e);
let good = true; let good = true;
if(e.key === 'ArrowRight') { if(key === 'ArrowRight') {
this.buttons.next.click(); this.buttons.next.click();
} else if(e.key === 'ArrowLeft') { } else if(key === 'ArrowLeft') {
this.buttons.prev.click(); this.buttons.prev.click();
} else if(e.key === '-' || e.key === '=') { } else if(key === '-' || key === '=') {
if(this.ctrlKeyDown) { if(this.ctrlKeyDown) {
this.changeZoom(e.key === '='); this.changeZoom(key === '=');
} }
} else { } else {
good = false; good = false;

3
src/components/appNavigationController.ts

@ -12,6 +12,7 @@ import blurActiveElement from "../helpers/dom/blurActiveElement";
import { cancelEvent } from "../helpers/dom/cancelEvent"; import { cancelEvent } from "../helpers/dom/cancelEvent";
import { indexOfAndSplice } from "../helpers/array"; import { indexOfAndSplice } from "../helpers/array";
import isSwipingBackSafari from "../helpers/dom/isSwipingBackSafari"; import isSwipingBackSafari from "../helpers/dom/isSwipingBackSafari";
import getKeyFromEvent from "../helpers/dom/getKeyFromEvent";
export type NavigationItem = { export type NavigationItem = {
type: 'left' | 'right' | 'im' | 'chat' | 'popup' | 'media' | 'menu' | type: 'left' | 'right' | 'im' | 'chat' | 'popup' | 'media' | 'menu' |
@ -63,7 +64,7 @@ export class AppNavigationController {
window.addEventListener('keydown', (e) => { window.addEventListener('keydown', (e) => {
const item = this.navigations[this.navigations.length - 1]; const item = this.navigations[this.navigations.length - 1];
if(!item) return; if(!item) return;
if(e.key === 'Escape' && (item.onEscape ? item.onEscape() : true)) { if(getKeyFromEvent(e) === 'Escape' && (item.onEscape ? item.onEscape() : true)) {
cancelEvent(e); cancelEvent(e);
this.back(item.type); this.back(item.type);
} }

43
src/components/chat/input.ts

@ -82,6 +82,8 @@ import MEDIA_MIME_TYPES_SUPPORTED from '../../environment/mediaMimeTypesSupport'
import appMediaPlaybackController from '../appMediaPlaybackController'; import appMediaPlaybackController from '../appMediaPlaybackController';
import { NULL_PEER_ID } from '../../lib/mtproto/mtproto_config'; import { NULL_PEER_ID } from '../../lib/mtproto/mtproto_config';
import setCaretAt from '../../helpers/dom/setCaretAt'; import setCaretAt from '../../helpers/dom/setCaretAt';
import getKeyFromEvent from '../../helpers/dom/getKeyFromEvent';
import getKeyFromEventCaseInsensitive from '../../helpers/dom/getKeyFromEventCaseInsensitive';
const RECORD_MIN_TIME = 500; const RECORD_MIN_TIME = 500;
const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.'; const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.';
@ -947,15 +949,16 @@ export default class ChatInput {
private attachMessageInputListeners() { private attachMessageInputListeners() {
this.listenerSetter.add(this.messageInput)('keydown', (e: KeyboardEvent) => { this.listenerSetter.add(this.messageInput)('keydown', (e: KeyboardEvent) => {
const key = getKeyFromEvent(e);
if(isSendShortcutPressed(e)) { if(isSendShortcutPressed(e)) {
cancelEvent(e); cancelEvent(e);
this.sendMessage(); this.sendMessage();
} else if(e.ctrlKey || e.metaKey) { } else if(e.ctrlKey || e.metaKey) {
this.handleMarkdownShortcut(e); this.handleMarkdownShortcut(e);
} else if((e.key === 'PageUp' || e.key === 'PageDown') && !e.shiftKey) { // * fix pushing page to left (Chrome Windows) } else if((key === 'PageUp' || key === 'PageDown') && !e.shiftKey) { // * fix pushing page to left (Chrome Windows)
e.preventDefault(); e.preventDefault();
if(e.key === 'PageUp') { if(key === 'PageUp') {
const range = document.createRange(); const range = document.createRange();
const sel = window.getSelection(); const sel = window.getSelection();
@ -1152,32 +1155,30 @@ export default class ChatInput {
'I': 'italic', 'I': 'italic',
'U': 'underline', 'U': 'underline',
'S': 'strikethrough', 'S': 'strikethrough',
'M': 'monospace', 'M': 'monospace'
'K': 'link'
}; };
const selection = document.getSelection(); if(this.appImManager.markupTooltip) {
if(selection.toString().trim().length) { formatKeys['K'] = 'link';
for(const key in formatKeys) { }
const good = e.code === ('Key' + key);
if(good) {
// * костыльчик
if(key === 'K' && this.appImManager.markupTooltip) {
this.appImManager.markupTooltip.showLinkEditor();
cancelEvent(e);
break;
}
this.applyMarkdown(formatKeys[key]); const key = getKeyFromEventCaseInsensitive(e);
cancelEvent(e); // cancel legacy event const applyMarkdown = formatKeys[key];
break;
} const selection = document.getSelection();
if(selection.toString().trim().length && applyMarkdown) {
// * костыльчик
if(key === 'K') {
this.appImManager.markupTooltip.showLinkEditor();
} else {
this.applyMarkdown(applyMarkdown);
} }
cancelEvent(e); // cancel legacy event
} }
//return; //return;
if(e.code === 'KeyZ') { if(key === 'Z') {
let html = this.messageInput.innerHTML; let html = this.messageInput.innerHTML;
if(e.shiftKey) { if(e.shiftKey) {

3
src/components/chat/markupTooltip.ts

@ -17,6 +17,7 @@ import { attachClickEvent } from "../../helpers/dom/clickEvent";
import getSelectedNodes from "../../helpers/dom/getSelectedNodes"; import getSelectedNodes from "../../helpers/dom/getSelectedNodes";
import isSelectionEmpty from "../../helpers/dom/isSelectionEmpty"; import isSelectionEmpty from "../../helpers/dom/isSelectionEmpty";
import { MarkdownType, markdownTags } from "../../helpers/dom/getRichElementValue"; import { MarkdownType, markdownTags } from "../../helpers/dom/getRichElementValue";
import getKeyFromEvent from "../../helpers/dom/getKeyFromEvent";
//import { logger } from "../../lib/logger"; //import { logger } from "../../lib/logger";
export default class MarkupTooltip { export default class MarkupTooltip {
@ -80,7 +81,7 @@ export default class MarkupTooltip {
this.linkInput.addEventListener('keydown', (e) => { this.linkInput.addEventListener('keydown', (e) => {
const valid = !this.linkInput.value.length || !!RichTextProcessor.matchUrl(this.linkInput.value);///^(http)|(https):\/\//i.test(this.linkInput.value); const valid = !this.linkInput.value.length || !!RichTextProcessor.matchUrl(this.linkInput.value);///^(http)|(https):\/\//i.test(this.linkInput.value);
if(e.code === 'Enter') { if(getKeyFromEvent(e) === 'Enter') {
if(!valid) { if(!valid) {
if(this.linkInput.classList.contains('error')) { if(this.linkInput.classList.contains('error')) {
this.linkInput.classList.remove('error'); this.linkInput.classList.remove('error');

3
src/components/popups/index.ts

@ -15,6 +15,7 @@ import ListenerSetter from "../../helpers/listenerSetter";
import { attachClickEvent, simulateClickEvent } from "../../helpers/dom/clickEvent"; import { attachClickEvent, simulateClickEvent } from "../../helpers/dom/clickEvent";
import isSendShortcutPressed from "../../helpers/dom/isSendShortcutPressed"; import isSendShortcutPressed from "../../helpers/dom/isSendShortcutPressed";
import { cancelEvent } from "../../helpers/dom/cancelEvent"; import { cancelEvent } from "../../helpers/dom/cancelEvent";
import getKeyFromEvent from "../../helpers/dom/getKeyFromEvent";
export type PopupButton = { export type PopupButton = {
text?: string, text?: string,
@ -167,7 +168,7 @@ export default class PopupElement {
// cannot add event instantly because keydown propagation will fire it // cannot add event instantly because keydown propagation will fire it
setTimeout(() => { setTimeout(() => {
this.listenerSetter.add(document.body)('keydown', (e) => { this.listenerSetter.add(document.body)('keydown', (e) => {
if(this.confirmShortcutIsSendShortcut ? isSendShortcutPressed(e) : e.key === 'Enter') { if(this.confirmShortcutIsSendShortcut ? isSendShortcutPressed(e) : getKeyFromEvent(e) === 'Enter') {
simulateClickEvent(this.btnConfirmOnEnter); simulateClickEvent(this.btnConfirmOnEnter);
cancelEvent(e); cancelEvent(e);
} }

3
src/components/sidebarLeft/tabs/2fa/email.ts

@ -20,6 +20,7 @@ import PopupPeer from "../../../popups/peer";
import { cancelEvent } from "../../../../helpers/dom/cancelEvent"; import { cancelEvent } from "../../../../helpers/dom/cancelEvent";
import { canFocus } from "../../../../helpers/dom/canFocus"; import { canFocus } from "../../../../helpers/dom/canFocus";
import { attachClickEvent } from "../../../../helpers/dom/clickEvent"; import { attachClickEvent } from "../../../../helpers/dom/clickEvent";
import getKeyFromEvent from "../../../../helpers/dom/getKeyFromEvent";
export default class AppTwoStepVerificationEmailTab extends SliderSuperTab { export default class AppTwoStepVerificationEmailTab extends SliderSuperTab {
public inputField: InputField; public inputField: InputField;
@ -72,7 +73,7 @@ export default class AppTwoStepVerificationEmailTab extends SliderSuperTab {
}); });
inputField.input.addEventListener('keypress', (e) => { inputField.input.addEventListener('keypress', (e) => {
if(e.key === 'Enter') { if(getKeyFromEvent(e) === 'Enter') {
cancelEvent(e); cancelEvent(e);
return onContinueClick(); return onContinueClick();
} }

3
src/components/sidebarLeft/tabs/2fa/enterPassword.ts

@ -10,6 +10,7 @@ import { cancelEvent } from "../../../../helpers/dom/cancelEvent";
import { canFocus } from "../../../../helpers/dom/canFocus"; import { canFocus } from "../../../../helpers/dom/canFocus";
import { attachClickEvent } from "../../../../helpers/dom/clickEvent"; import { attachClickEvent } from "../../../../helpers/dom/clickEvent";
import replaceContent from "../../../../helpers/dom/replaceContent"; import replaceContent from "../../../../helpers/dom/replaceContent";
import getKeyFromEvent from "../../../../helpers/dom/getKeyFromEvent";
import { AccountPassword } from "../../../../layer"; import { AccountPassword } from "../../../../layer";
import I18n, { i18n } from "../../../../lib/langPack"; import I18n, { i18n } from "../../../../lib/langPack";
import passwordManager from "../../../../lib/mtproto/passwordManager"; import passwordManager from "../../../../lib/mtproto/passwordManager";
@ -64,7 +65,7 @@ export default class AppTwoStepVerificationEnterPasswordTab extends SliderSuperT
textEl.update(); textEl.update();
} }
if(e.key === 'Enter') { if(getKeyFromEvent(e) === 'Enter') {
return onContinueClick(); return onContinueClick();
} }
}); });

3
src/components/sidebarLeft/tabs/2fa/hint.ts

@ -16,6 +16,7 @@ import { toast } from "../../../toast";
import I18n from "../../../../lib/langPack"; import I18n from "../../../../lib/langPack";
import { cancelEvent } from "../../../../helpers/dom/cancelEvent"; import { cancelEvent } from "../../../../helpers/dom/cancelEvent";
import { attachClickEvent } from "../../../../helpers/dom/clickEvent"; import { attachClickEvent } from "../../../../helpers/dom/clickEvent";
import getKeyFromEvent from "../../../../helpers/dom/getKeyFromEvent";
export default class AppTwoStepVerificationHintTab extends SliderSuperTab { export default class AppTwoStepVerificationHintTab extends SliderSuperTab {
public inputField: InputField; public inputField: InputField;
@ -62,7 +63,7 @@ export default class AppTwoStepVerificationHintTab extends SliderSuperTab {
}); });
inputField.input.addEventListener('keypress', (e) => { inputField.input.addEventListener('keypress', (e) => {
if(e.key === 'Enter') { if(getKeyFromEvent(e) === 'Enter') {
cancelEvent(e); cancelEvent(e);
return inputField.value ? onContinueClick() : onSkipClick(); return inputField.value ? onContinueClick() : onSkipClick();
} }

3
src/components/sidebarLeft/tabs/2fa/reEnterPassword.ts

@ -14,6 +14,7 @@ import AppTwoStepVerificationHintTab from "./hint";
import { InputState } from "../../../inputField"; import { InputState } from "../../../inputField";
import { cancelEvent } from "../../../../helpers/dom/cancelEvent"; import { cancelEvent } from "../../../../helpers/dom/cancelEvent";
import { attachClickEvent } from "../../../../helpers/dom/clickEvent"; import { attachClickEvent } from "../../../../helpers/dom/clickEvent";
import getKeyFromEvent from "../../../../helpers/dom/getKeyFromEvent";
export default class AppTwoStepVerificationReEnterPasswordTab extends SliderSuperTab { export default class AppTwoStepVerificationReEnterPasswordTab extends SliderSuperTab {
public state: AccountPassword; public state: AccountPassword;
@ -51,7 +52,7 @@ export default class AppTwoStepVerificationReEnterPasswordTab extends SliderSupe
passwordInputField.setState(InputState.Neutral); passwordInputField.setState(InputState.Neutral);
} }
if(e.key === 'Enter') { if(getKeyFromEvent(e) === 'Enter') {
return onContinueClick(); return onContinueClick();
} }
}); });

4
src/components/telInputField.ts

@ -9,6 +9,7 @@ import { formatPhoneNumber } from "../helpers/formatPhoneNumber";
import { IS_APPLE, IS_ANDROID, IS_APPLE_MOBILE } from "../environment/userAgent"; import { IS_APPLE, IS_ANDROID, IS_APPLE_MOBILE } from "../environment/userAgent";
import { HelpCountry, HelpCountryCode } from "../layer"; import { HelpCountry, HelpCountryCode } from "../layer";
import InputField, { InputFieldOptions } from "./inputField"; import InputField, { InputFieldOptions } from "./inputField";
import getKeyFromEvent from "../helpers/dom/getKeyFromEvent";
export default class TelInputField extends InputField { export default class TelInputField extends InputField {
private pasted = false; private pasted = false;
@ -97,7 +98,8 @@ export default class TelInputField extends InputField {
telEl.addEventListener('keypress', (e) => { telEl.addEventListener('keypress', (e) => {
//console.log('keypress', this.value); //console.log('keypress', this.value);
if(/\D/.test(e.key) && !(e.metaKey || e.ctrlKey) && e.key !== 'Backspace' && !(e.key === '+' && e.shiftKey/* && !this.value */)) { const key = getKeyFromEvent(e);
if(/\D/.test(key) && !(e.metaKey || e.ctrlKey) && key !== 'Backspace' && !(key === '+' && e.shiftKey/* && !this.value */)) {
e.preventDefault(); e.preventDefault();
return false; return false;
} }

10
src/helpers/dom/attachListNavigation.ts

@ -5,6 +5,7 @@
*/ */
import fastSmoothScroll from "../fastSmoothScroll"; import fastSmoothScroll from "../fastSmoothScroll";
import getKeyFromEventCaseInsensitive from "./getKeyFromEventCaseInsensitive";
import { cancelEvent } from "./cancelEvent"; import { cancelEvent } from "./cancelEvent";
import { attachClickEvent, detachClickEvent } from "./clickEvent"; import { attachClickEvent, detachClickEvent } from "./clickEvent";
import findUpAsChild from "./findUpAsChild"; import findUpAsChild from "./findUpAsChild";
@ -88,8 +89,9 @@ export default function attachListNavigation({list, type, onSelect, once, waitFo
} }
let onKeyDown = (e: KeyboardEvent) => { let onKeyDown = (e: KeyboardEvent) => {
if(!keyNames.has(e.key as any)) { const key = getKeyFromEventCaseInsensitive(e);
if(e.key === 'Enter' || (type !== 'xy' && e.key === 'Tab')) { if(!keyNames.has(key as any)) {
if(key === 'Enter' || (type !== 'xy' && key === 'Tab')) {
cancelEvent(e); cancelEvent(e);
fireSelect(getCurrentTarget()); fireSelect(getCurrentTarget());
} }
@ -101,7 +103,7 @@ export default function attachListNavigation({list, type, onSelect, once, waitFo
if(list.childElementCount > 1) { if(list.childElementCount > 1) {
let currentTarget = getCurrentTarget(); let currentTarget = getCurrentTarget();
currentTarget = handleArrowKey(currentTarget, e.key as any); currentTarget = handleArrowKey(currentTarget, key as any);
setCurrentTarget(currentTarget, true); setCurrentTarget(currentTarget, true);
} }
}; };
@ -152,7 +154,7 @@ export default function attachListNavigation({list, type, onSelect, once, waitFo
if(waitForKey) { if(waitForKey) {
const _onKeyDown = onKeyDown; const _onKeyDown = onKeyDown;
onKeyDown = (e) => { onKeyDown = (e) => {
if(e.key === waitForKey) { if(getKeyFromEventCaseInsensitive(e) === waitForKey) {
cancelEvent(e); cancelEvent(e);
document.removeEventListener(HANDLE_EVENT, onKeyDown, {capture: true}); document.removeEventListener(HANDLE_EVENT, onKeyDown, {capture: true});

21
src/helpers/dom/getKeyFromEvent.ts

@ -0,0 +1,21 @@
/*
* https://github.com/morethanwords/tweb
* Copyright (C) 2019-2021 Eduard Kuzmenko
* https://github.com/morethanwords/tweb/blob/master/LICENSE
*/
export default function getKeyFromEvent(e: KeyboardEvent) {
let key = e.key;
if(!key) {
key = e.code;
if(key.startsWith('Key')) {
key = e.code.slice(3);
if(!e.shiftKey && key.length < 2) {
key = key.toLowerCase();
}
}
}
return key;
}

12
src/helpers/dom/getKeyFromEventCaseInsensitive.ts

@ -0,0 +1,12 @@
/*
* https://github.com/morethanwords/tweb
* Copyright (C) 2019-2021 Eduard Kuzmenko
* https://github.com/morethanwords/tweb/blob/master/LICENSE
*/
import getKeyFromEvent from "./getKeyFromEvent";
import { capitalizeFirstLetter } from "../string";
export default function getKeyFromEventCaseInsensitive(e: KeyboardEvent) {
return capitalizeFirstLetter(getKeyFromEvent(e));
}

3
src/helpers/dom/isSendShortcutPressed.ts

@ -6,9 +6,10 @@
import rootScope from "../../lib/rootScope"; import rootScope from "../../lib/rootScope";
import { IS_MOBILE, IS_APPLE } from "../../environment/userAgent"; import { IS_MOBILE, IS_APPLE } from "../../environment/userAgent";
import getKeyFromEvent from "./getKeyFromEvent";
export default function isSendShortcutPressed(e: KeyboardEvent) { export default function isSendShortcutPressed(e: KeyboardEvent) {
if(e.key === 'Enter' && !IS_MOBILE && !e.isComposing) { if(getKeyFromEvent(e) === 'Enter' && !IS_MOBILE && !e.isComposing) {
/* if(e.ctrlKey || e.metaKey) { /* if(e.ctrlKey || e.metaKey) {
this.messageInput.innerHTML += '<br>'; this.messageInput.innerHTML += '<br>';
placeCaretAtEnd(this.message) placeCaretAtEnd(this.message)

16
src/lib/appManagers/appImManager.ts

@ -72,6 +72,7 @@ import { NULL_PEER_ID } from '../mtproto/mtproto_config';
import telegramMeWebManager from '../mtproto/telegramMeWebManager'; import telegramMeWebManager from '../mtproto/telegramMeWebManager';
import { ONE_DAY } from '../../helpers/date'; import { ONE_DAY } from '../../helpers/date';
import { numberThousandSplitter } from '../../helpers/number'; import { numberThousandSplitter } from '../../helpers/number';
import getKeyFromEventCaseInsensitive from '../../helpers/dom/getKeyFromEventCaseInsensitive';
//console.log('appImManager included33!'); //console.log('appImManager included33!');
@ -440,7 +441,8 @@ export class AppImManager {
private attachKeydownListener() { private attachKeydownListener() {
const IGNORE_KEYS = new Set(['PageUp', 'PageDown', 'Meta', 'Control']); const IGNORE_KEYS = new Set(['PageUp', 'PageDown', 'Meta', 'Control']);
const onKeyDown = (e: KeyboardEvent) => { const onKeyDown = (e: KeyboardEvent) => {
if(rootScope.isOverlayActive || IGNORE_KEYS.has(e.key)) return; const key = getKeyFromEventCaseInsensitive(e);
if(rootScope.isOverlayActive || IGNORE_KEYS.has(key)) return;
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
@ -450,19 +452,19 @@ export class AppImManager {
const chat = this.chat; const chat = this.chat;
if(e.code === 'KeyC' && (e.ctrlKey || e.metaKey) && target.tagName !== 'INPUT') { if(key === 'C' && (e.ctrlKey || e.metaKey) && target.tagName !== 'INPUT') {
return; return;
} else if(e.altKey && (e.code === 'ArrowUp' || e.code === 'ArrowDown')) { } else if(e.altKey && (key === 'ArrowUp' || key === 'ArrowDown')) {
const folder = appMessagesManager.dialogsStorage.getFolderDialogs(rootScope.filterId, true); const folder = appMessagesManager.dialogsStorage.getFolderDialogs(rootScope.filterId, true);
let nextDialog: Dialog.dialog; let nextDialog: Dialog.dialog;
if(!rootScope.peerId) { if(!rootScope.peerId) {
if(e.code === 'ArrowDown') { if(key === 'ArrowDown') {
nextDialog = folder[0]; nextDialog = folder[0];
} }
} else { } else {
const idx = folder.findIndex(dialog => dialog.peerId === rootScope.peerId); const idx = folder.findIndex(dialog => dialog.peerId === rootScope.peerId);
if(idx !== -1) { if(idx !== -1) {
const nextIndex = e.code === 'ArrowUp' ? idx - 1 : idx + 1; const nextIndex = key === 'ArrowUp' ? idx - 1 : idx + 1;
nextDialog = folder[nextIndex]; nextDialog = folder[nextIndex];
} }
} }
@ -470,7 +472,7 @@ export class AppImManager {
if(nextDialog) { if(nextDialog) {
this.setPeer(nextDialog.peerId); this.setPeer(nextDialog.peerId);
} }
} else if(e.code === 'ArrowUp') { } else if(key === 'ArrowUp') {
if(!chat.input.editMsgId && chat.input.isInputEmpty()) { if(!chat.input.editMsgId && chat.input.isInputEmpty()) {
const historyStorage = appMessagesManager.getHistoryStorage(chat.peerId, chat.threadId); const historyStorage = appMessagesManager.getHistoryStorage(chat.peerId, chat.threadId);
const slice = historyStorage.history.slice; const slice = historyStorage.history.slice;
@ -499,7 +501,7 @@ export class AppImManager {
} else { } else {
return; return;
} }
} else if(e.code === 'ArrowDown') { } else if(key === 'ArrowDown') {
return; return;
} }

17
src/lib/mediaPlayer.ts

@ -18,6 +18,7 @@ import rootScope from "./rootScope";
import findUpClassName from "../helpers/dom/findUpClassName"; import findUpClassName from "../helpers/dom/findUpClassName";
import { GrabEvent } from "../helpers/dom/attachGrabListeners"; import { GrabEvent } from "../helpers/dom/attachGrabListeners";
import { attachClickEvent } from "../helpers/dom/clickEvent"; import { attachClickEvent } from "../helpers/dom/clickEvent";
import getKeyFromEventCaseInsensitive from "../helpers/dom/getKeyFromEventCaseInsensitive";
export class MediaProgressLine extends RangeSelector { export class MediaProgressLine extends RangeSelector {
protected filledLoad: HTMLDivElement; protected filledLoad: HTMLDivElement;
@ -386,19 +387,21 @@ export default class VideoPlayer extends EventListenerBase<{
return; return;
} }
const key = getKeyFromEventCaseInsensitive(e);
let good = true; let good = true;
if(e.code === 'KeyF') { if(key === 'F') {
this.toggleFullScreen(fullScreenButton); this.toggleFullScreen(fullScreenButton);
} else if(e.code === 'KeyM') { } else if(key === 'M') {
appMediaPlaybackController.muted = !appMediaPlaybackController.muted; appMediaPlaybackController.muted = !appMediaPlaybackController.muted;
} else if(e.code === 'Space') { } else if(key === ' ') {
this.togglePlay(); this.togglePlay();
} else if(e.altKey && e.code === 'Equal') { } else if(e.altKey && key === '=') {
appMediaPlaybackController.playbackRate += .25; appMediaPlaybackController.playbackRate += .25;
} else if(e.altKey && e.code === 'Minus') { } else if(e.altKey && key === '-') {
appMediaPlaybackController.playbackRate -= .25; appMediaPlaybackController.playbackRate -= .25;
} else if(this.wrapper.classList.contains('ckin__fullscreen') && (e.code === 'ArrowLeft' || e.code === 'ArrowRight')) { } else if(this.wrapper.classList.contains('ckin__fullscreen') && (key === 'ArrowLeft' || key === 'ArrowRight')) {
if(e.code === 'ArrowLeft') appMediaPlaybackController.seekBackward({action: 'seekbackward'}); if(key === 'ArrowLeft') appMediaPlaybackController.seekBackward({action: 'seekbackward'});
else appMediaPlaybackController.seekForward({action: 'seekforward'}); else appMediaPlaybackController.seekForward({action: 'seekforward'});
} else { } else {
good = false; good = false;

3
src/pages/pagePassword.ts

@ -21,6 +21,7 @@ import { attachClickEvent } from '../helpers/dom/clickEvent';
import htmlToSpan from '../helpers/dom/htmlToSpan'; import htmlToSpan from '../helpers/dom/htmlToSpan';
import replaceContent from '../helpers/dom/replaceContent'; import replaceContent from '../helpers/dom/replaceContent';
import toggleDisability from '../helpers/dom/toggleDisability'; import toggleDisability from '../helpers/dom/toggleDisability';
import getKeyFromEvent from '../helpers/dom/getKeyFromEvent';
const TEST = false; const TEST = false;
let passwordInput: HTMLInputElement; let passwordInput: HTMLInputElement;
@ -125,7 +126,7 @@ let onFirstMount = (): Promise<any> => {
this.classList.remove('error'); this.classList.remove('error');
btnNextI18n.update({key: 'Login.Next'}); btnNextI18n.update({key: 'Login.Next'});
if(e.key === 'Enter') { if(getKeyFromEvent(e) === 'Enter') {
return onSubmit(); return onSubmit();
} }
}); });

8
src/pages/pageSignIn.ts

@ -40,6 +40,7 @@ import stateStorage from "../lib/stateStorage";
import rootScope from "../lib/rootScope"; import rootScope from "../lib/rootScope";
import TelInputField from "../components/telInputField"; import TelInputField from "../components/telInputField";
import IS_EMOJI_SUPPORTED from "../environment/emojiSupport"; import IS_EMOJI_SUPPORTED from "../environment/emojiSupport";
import getKeyFromEvent from "../helpers/dom/getKeyFromEvent";
//import _countries from '../countries_pretty.json'; //import _countries from '../countries_pretty.json';
let btnNext: HTMLButtonElement = null, btnQr: HTMLButtonElement; let btnNext: HTMLButtonElement = null, btnQr: HTMLButtonElement;
@ -232,7 +233,8 @@ let onFirstMount = () => {
}, {capture: true}); */ }, {capture: true}); */
countryInput.addEventListener('keyup', (e) => { countryInput.addEventListener('keyup', (e) => {
if(e.ctrlKey || e.key === 'Control') return false; const key = getKeyFromEvent(e);
if(e.ctrlKey || key === 'Control') return false;
//let i = new RegExp('^' + this.value, 'i'); //let i = new RegExp('^' + this.value, 'i');
let _value = countryInputField.value.toLowerCase(); let _value = countryInputField.value.toLowerCase();
@ -257,7 +259,7 @@ let onFirstMount = () => {
countries.forEach((c) => { countries.forEach((c) => {
liMap.get(c.iso2).forEach(li => li.style.display = ''); liMap.get(c.iso2).forEach(li => li.style.display = '');
}); });
} else if(matches.length === 1 && e.key === 'Enter') { } else if(matches.length === 1 && key === 'Enter') {
selectCountryByTarget(liMap.get(matches[0].iso2)[0]); selectCountryByTarget(liMap.get(matches[0].iso2)[0]);
} }
}); });
@ -302,7 +304,7 @@ let onFirstMount = () => {
telEl.addEventListener('keypress', (e) => { telEl.addEventListener('keypress', (e) => {
//console.log('keypress', this.value); //console.log('keypress', this.value);
if(!btnNext.style.visibility &&/* this.value.length >= 9 && */ e.key === 'Enter') { if(!btnNext.style.visibility &&/* this.value.length >= 9 && */ getKeyFromEvent(e) === 'Enter') {
return onSubmit(); return onSubmit();
} }
}); });

Loading…
Cancel
Save