import {htmlEscape} from 'escape-goat';
import * as LinkUtil from '../../utils/link-util';
import * as t from '../../utils/translation-util';
import BaseSection from './base-section';
interface ShortcutsSectionProps {
$root: Element;
}
export default class ShortcutsSection extends BaseSection {
props: ShortcutsSectionProps;
constructor(props: ShortcutsSectionProps) {
super();
this.props = props;
}
// TODO - Deduplicate templateMacHTML and templateWinLinHTML functions. In theory
// they both should be the same the only thing different should be the userOSKey
// variable but there seems to be inconsistences between both function, one has more
// lines though one may just be using more new lines and other thing is the use of +.
templateMacHTML(): string {
const userOSKey = '⌘';
return htmlEscape`
settings${t.__('Tip')}: ${t.__('These desktop app shortcuts extend the Zulip webapp\'s')} ${t.__('keyboard shortcuts')}.
${t.__('Application Shortcuts')}
| ${userOSKey}, |
${t.__('Settings')} |
| ${userOSKey}K |
${t.__('Keyboard Shortcuts')} |
| ${userOSKey} + Shift + M |
${t.__('Toggle Do Not Disturb')} |
| Shift${userOSKey}D |
${t.__('Reset App Settings')} |
| ${userOSKey}L |
${t.__('Log Out')} |
| ${userOSKey}H |
${t.__('Hide Zulip')} |
| Option${userOSKey}H |
${t.__('Hide Others')} |
| ${userOSKey}Q |
${t.__('Quit Zulip')} |
${t.__('Edit Shortcuts')}
| ${userOSKey}Z |
${t.__('Undo')} |
| Shift${userOSKey}Z |
${t.__('Redo')} |
| ${userOSKey}X |
${t.__('Cut')} |
| ${userOSKey}C |
${t.__('Copy')} |
| ${userOSKey}V |
${t.__('Paste')} |
| Shift${userOSKey}V |
${t.__('Paste and Match Style')} |
| ${userOSKey}A |
${t.__('Select All')} |
| Control${userOSKey}Space |
${t.__('Emoji & Symbols')} |
${t.__('View Shortcuts')}
| ${userOSKey}R |
${t.__('Reload')} |
| Shift${userOSKey}R |
${t.__('Hard Reload')} |
| Control${userOSKey}F |
${t.__('Enter Full Screen')} |
| ${userOSKey}+ |
${t.__('Zoom In')} |
| ${userOSKey}- |
${t.__('Zoom Out')} |
| ${userOSKey}0 |
${t.__('Actual Size')} |
| ${userOSKey} + Shift + S |
${t.__('Toggle Sidebar')} |
| Option${userOSKey}I |
${t.__('Toggle DevTools for Zulip App')} |
| Option${userOSKey}U |
${t.__('Toggle DevTools for Active Tab')} |
| Ctrl + Tab |
${t.__('Switch to Next Organization')} |
| Ctrl + Shift + Tab |
${t.__('Switch to Previous Organization')} |
${t.__('History Shortcuts')}
| ${userOSKey}← |
${t.__('Back')} |
| ${userOSKey}→ |
${t.__('Forward')} |
Window Shortcuts
| ${userOSKey}M |
${t.__('Minimize')} |
| ${userOSKey}W |
${t.__('Close')} |
`;
}
templateWinLinHTML(): string {
const userOSKey = 'Ctrl';
return htmlEscape`
settings${t.__('Tip')}: ${t.__('These desktop app shortcuts extend the Zulip webapp\'s')} ${t.__('keyboard shortcuts')}.
${t.__('Application Shortcuts')}
| ${userOSKey} + , |
${t.__('Settings')} |
| ${userOSKey} + K |
${t.__('Keyboard Shortcuts')} |
| ${userOSKey} + Shift + M |
${t.__('Toggle Do Not Disturb')} |
| ${userOSKey} + L |
${t.__('Log Out')} |
| ${userOSKey} + Q |
${t.__('Quit Zulip')} |
${t.__('Edit Shortcuts')}
| ${userOSKey} + Z |
${t.__('Undo')} |
| ${userOSKey} + Y |
${t.__('Redo')} |
| ${userOSKey} + X |
${t.__('Cut')} |
| ${userOSKey} + C |
${t.__('Copy')} |
| ${userOSKey} + V |
${t.__('Paste')} |
| ${userOSKey} + Shift + V |
${t.__('Paste and Match Style')} |
| ${userOSKey} + A |
${t.__('Select All')} |
${t.__('View Shortcuts')}
| ${userOSKey} + R |
${t.__('Reload')} |
| ${userOSKey} + Shift + R |
${t.__('Hard Reload')} |
| F11 |
${t.__('Toggle Full Screen')} |
| ${userOSKey} + = |
${t.__('Zoom In')} |
| ${userOSKey} + - |
${t.__('Zoom Out')} |
| ${userOSKey} + 0 |
${t.__('Actual Size')} |
| ${userOSKey} + Shift + S |
${t.__('Toggle Sidebar')} |
| ${userOSKey} + Shift + I |
${t.__('Toggle DevTools for Zulip App')} |
| ${userOSKey} + Shift + U |
${t.__('Toggle DevTools for Active Tab')} |
| ${userOSKey} + Tab |
${t.__('Switch to Next Organization')} |
| ${userOSKey} + Shift + Tab |
${t.__('Switch to Previous Organization')} |
${t.__('History Shortcuts')}
| Alt + ← |
${t.__('Back')} |
| Alt + → |
${t.__('Forward')} |
${t.__('Window Shortcuts')}
| ${userOSKey} + M |
${t.__('Minimize')} |
| ${userOSKey} + W |
${t.__('Close')} |
`;
}
openHotkeysExternalLink(): void {
const link = 'https://zulip.com/help/keyboard-shortcuts';
const externalCreateNewOrgElement = document.querySelector('#open-hotkeys-link');
externalCreateNewOrgElement.addEventListener('click', async () => {
await LinkUtil.openBrowser(new URL(link));
});
}
init(): void {
this.props.$root.innerHTML = (process.platform === 'darwin') ?
this.templateMacHTML() : this.templateWinLinHTML();
this.openHotkeysExternalLink();
}
}