2 # Copyright Simon Lydell 2015.
4 # This file is part of VimFx.
6 # VimFx is free software: you can redistribute it and/or modify
7 # it under the terms of the GNU General Public License as published by
8 # the Free Software Foundation, either version 3 of the License, or
9 # (at your option) any later version.
11 # VimFx is distributed in the hope that it will be useful,
12 # but WITHOUT ANY WARRANTY; without even the implied warranty of
13 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14 # GNU General Public License for more details.
16 # You should have received a copy of the GNU General Public License
17 # along with VimFx. If not, see <http://www.gnu.org/licenses/>.
20 # This file creates VimFx’s Keyboard Shortcuts help screen.
22 translate = require('./l10n')
23 utils = require('./utils')
25 CONTAINER_ID = 'VimFxHelpDialogContainer'
28 injectHelp = (window, vimfx) ->
33 container = document.createElement('box')
34 container.id = CONTAINER_ID
36 wrapper = document.createElement('box')
37 container.appendChild(wrapper)
39 header = createHeader(document, vimfx)
40 wrapper.appendChild(header)
42 content = createContent(document, vimfx)
43 wrapper.appendChild(content)
45 window.gBrowser.mCurrentBrowser.parentNode.appendChild(container)
47 # The font size of menu items is used by default, which is usually quite
48 # small. Try to increase it without causing a scrollbar.
49 computedStyle = window.getComputedStyle(container)
50 fontSize = originalFontSize =
51 parseFloat(computedStyle.getPropertyValue('font-size'))
52 while wrapper.clientHeight < container.clientHeight and
53 fontSize <= MAX_FONT_SIZE
55 container.style.fontSize = "#{ fontSize }px"
56 container.style.fontSize = "#{ Math.max(fontSize - 1, originalFontSize) }px"
58 # Uncomment this line if you want to use `gulp help.html`!
59 # utils.writeToClipboard(container.outerHTML)
61 removeHelp = (window) ->
62 window.document.getElementById(CONTAINER_ID)?.remove()
64 createHeader = (document, vimfx) ->
65 $ = utils.createBox.bind(null, document)
69 mainHeading = $('heading-main', header)
70 $('logo', mainHeading) # Content is added by CSS.
71 $('title', mainHeading, translate('help.title'))
73 closeButton = $('close-button', header, '×')
74 closeButton.onclick = removeHelp.bind(null, document.defaultView)
78 createContent = (document, vimfx) ->
79 $ = utils.createBox.bind(null, document)
81 content = $('content')
83 for mode in vimfx.getGroupedCommands({enabledOnly: true})
84 modeHeading = $('heading-mode', null, mode.name)
86 for category, index in mode.categories
87 categoryContainer = $('category', content)
88 # `data-` attributes are currently unused by VimFx, but provide a great
89 # way to customize the help dialog with custom CSS.
90 utils.setAttributes(categoryContainer, {
91 'data-mode': mode._name
92 'data-category': category._name
95 # Append the mode heading inside the first category container, rather than
96 # before it, for layout purposes.
98 categoryContainer.appendChild(modeHeading)
99 categoryContainer.classList.add('first')
101 $('heading-category', categoryContainer, category.name) if category.name
103 for { command, name, enabledSequences } in category.commands
104 commandContainer = $('command', categoryContainer)
105 utils.setAttributes(commandContainer, {'data-command': command.name})
106 commandContainer.setAttribute('data-command', name)
107 for sequence in enabledSequences
108 keySequence = $('key-sequence', commandContainer)
109 [specialKeys, rest] = splitSequence(sequence, vimfx.SPECIAL_KEYS)
110 $('key-sequence-special-keys', keySequence, specialKeys)
111 $('key-sequence-rest', keySequence, rest)
112 $('description', commandContainer, command.description())
116 splitSequence = (sequence, specialKeys) ->
117 specialKeyEnds = specialKeys.map((key) ->
118 pos = sequence.lastIndexOf(key)
119 return if pos == -1 then 0 else pos + key.length
121 splitPos = Math.max(specialKeyEnds...)
122 return [sequence[0...splitPos], sequence[splitPos..]]