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'
27 SEARCH_MATCH_CLASS = 'search-match'
28 SEARCH_NON_MATCH_CLASS = 'search-non-match'
29 SEARCH_HIGHLIGHT_CLASS = 'search-highlight'
31 injectHelp = (window, vimfx) ->
36 container = utils.createBox(document)
37 container.id = CONTAINER_ID
39 wrapper = utils.createBox(document, 'wrapper', container)
41 header = createHeader(document, vimfx)
43 wrapper.appendChild(header)
45 content = createContent(document, vimfx)
46 wrapper.appendChild(content)
48 searchInput = document.createElement('textbox')
49 utils.setAttributes(searchInput, {
51 placeholder: translate('help.search')
53 searchInput.oninput = -> search(content, searchInput.value.trim())
54 container.appendChild(searchInput)
56 window.gBrowser.mCurrentBrowser.parentNode.appendChild(container)
59 # The font size of menu items is used by default, which is usually quite
60 # small. Try to increase it without causing a scrollbar.
61 computedStyle = window.getComputedStyle(container)
62 fontSize = originalFontSize =
63 parseFloat(computedStyle.getPropertyValue('font-size'))
64 while wrapper.clientHeight < container.clientHeight and
65 fontSize <= MAX_FONT_SIZE
67 container.style.fontSize = "#{fontSize}px"
68 container.style.fontSize = "#{Math.max(fontSize - 1, originalFontSize)}px"
70 # Uncomment this line if you want to use `gulp help.html`!
71 # utils.writeToClipboard(container.outerHTML)
73 removeHelp = (window) ->
74 window.document.getElementById(CONTAINER_ID)?.remove()
76 createHeader = (document, vimfx) ->
77 $ = utils.createBox.bind(null, document)
81 mainHeading = $('heading-main', header)
82 $('logo', mainHeading) # Content is added by CSS.
83 $('title', mainHeading, translate('help.title'))
85 closeButton = $('close-button', header, '×')
86 closeButton.onclick = removeHelp.bind(null, document.ownerGlobal)
90 createContent = (document, vimfx) ->
91 $ = utils.createBox.bind(null, document)
93 content = $('content')
95 for mode in vimfx.getGroupedCommands({enabledOnly: true})
96 modeHeading = $('heading-mode search-item', null, mode.name)
98 for category, index in mode.categories
99 categoryContainer = $('category', content)
100 # `data-` attributes are currently unused by VimFx, but provide a great
101 # way to customize the help dialog with custom CSS.
102 utils.setAttributes(categoryContainer, {
103 'data-mode': mode._name
104 'data-category': category._name
107 # Append the mode heading inside the first category container, rather than
108 # before it, for layout purposes.
110 categoryContainer.appendChild(modeHeading)
111 categoryContainer.classList.add('first')
114 $('heading-category search-item', categoryContainer, category.name)
116 for {command, name, enabledSequences} in category.commands
117 commandContainer = $('command search-item', categoryContainer)
118 utils.setAttributes(commandContainer, {'data-command': command.name})
119 commandContainer.setAttribute('data-command', name)
120 for sequence in enabledSequences
121 keySequence = $('key-sequence', commandContainer)
122 [specialKeys, rest] = splitSequence(sequence, vimfx.SPECIAL_KEYS)
123 $('key-sequence-special-keys', keySequence, specialKeys)
124 $('key-sequence-rest search-text', keySequence, rest)
125 $('description search-text', commandContainer, command.description())
129 splitSequence = (sequence, specialKeys) ->
130 specialKeyEnds = specialKeys.map((key) ->
131 pos = sequence.lastIndexOf(key)
132 return if pos == -1 then 0 else pos + key.length
134 splitPos = Math.max(specialKeyEnds...)
135 return [sequence[0...splitPos], sequence[splitPos..]]
137 search = (content, term) ->
138 document = content.ownerDocument
139 ignoreCase = (term == term.toLowerCase())
140 regex = RegExp("(#{utils.regexEscape(term)})", if ignoreCase then 'i' else '')
143 for item in content.querySelectorAll('.search-item')
144 texts = item.querySelectorAll('.search-text')
145 texts = [item] if texts.length == 0
146 className = SEARCH_NON_MATCH_CLASS
149 {textContent} = element
150 # Clear the previous highlighting. This is possible to do for non-matches
151 # as well, but too slow.
152 if item.classList.contains(SEARCH_MATCH_CLASS)
153 element.textContent = textContent
155 continue if clear or not regex.test(textContent)
157 className = SEARCH_MATCH_CLASS
158 element.textContent = '' # Empty the element.
159 for part, index in textContent.split(regex)
160 # Even indices are surrounding text, odd ones are matches.
162 element.appendChild(document.createTextNode(part))
164 utils.createBox(document, SEARCH_HIGHLIGHT_CLASS, element, part)
166 item.classList.remove(SEARCH_MATCH_CLASS, SEARCH_NON_MATCH_CLASS)
167 item.classList.add(className) unless clear