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(); } }