diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/help_dialog.coffee | 83 | ||||
| -rw-r--r-- | pages/help_dialog.html | 23 | ||||
| -rw-r--r-- | pages/options.coffee | 4 |
3 files changed, 90 insertions, 20 deletions
diff --git a/pages/help_dialog.coffee b/pages/help_dialog.coffee index 28aafb4a..4ac9116b 100644 --- a/pages/help_dialog.coffee +++ b/pages/help_dialog.coffee @@ -1,3 +1,12 @@ +$ = (id) -> document.getElementById id +$$ = (element, selector) -> element.querySelector selector + +# The ordering we show key bindings is alphanumerical, except that special keys sort to the end. +compareKeys = (a,b) -> + a = a.replace "<","~" + b = b.replace "<", "~" + if a < b then -1 else if b < a then 1 else 0 + # This overrides the HelpDialog implementation in vimium_frontend.coffee. We provide aliases for the two # HelpDialog methods required by normalMode (isShowing() and toggle()). HelpDialog = @@ -20,30 +29,67 @@ HelpDialog = chrome.runtime.sendMessage({handler: "openOptionsPageInNewTab"}) false) document.getElementById("toggleAdvancedCommands").addEventListener("click", - HelpDialog.toggleAdvancedCommands, false) + HelpDialog.toggleAdvancedCommands.bind(HelpDialog), false) document.documentElement.addEventListener "click", (event) => @hide() unless @dialogElement.contains event.target , false - show: ({html}) -> - for own placeholder, htmlString of html - @dialogElement.querySelector("#help-dialog-#{placeholder}").innerHTML = htmlString + instantiateHtmlTemplate: (parentNode, templateId, callback) -> + templateContent = document.querySelector(templateId).content + node = document.importNode templateContent, true + parentNode.appendChild node + callback parentNode.lastElementChild + + show: ({showAllCommandDetails}) -> + $("help-dialog-title").textContent = if showAllCommandDetails then "Command Listing" else "Help" + $("help-dialog-version").textContent = Utils.getCurrentVersion() + + chrome.storage.local.get "helpPageData", ({helpPageData}) => + for own group, commands of helpPageData + container = @dialogElement.querySelector("#help-dialog-#{group}") + container.innerHTML = "" + for command in commands when showAllCommandDetails or 0 < command.keys.length + keysElement = null + descriptionElement = null + + useTwoRows = 12 <= command.keys.join(", ").length + unless useTwoRows + @instantiateHtmlTemplate container, "#helpDialogEntry", (element) -> + element.classList.add "advanced" if command.advanced + keysElement = descriptionElement = element + else + @instantiateHtmlTemplate container, "#helpDialogEntryBindingsOnly", (element) -> + element.classList.add "advanced" if command.advanced + keysElement = element + @instantiateHtmlTemplate container, "#helpDialogEntry", (element) -> + element.classList.add "advanced" if command.advanced + descriptionElement = element + + $$(descriptionElement, ".vimiumHelpDescription").textContent = command.description + + keysElement = $$(keysElement, ".vimiumKeyBindings") + lastElement = null + for key in command.keys.sort compareKeys + @instantiateHtmlTemplate keysElement, "#keysTemplate", (element) -> + lastElement = element + $$(element, ".vimiumHelpDialogKey").innerHTML = Utils.escapeHtml key + # And strip off the trailing ", ", if necessary. + lastElement.removeChild $$ lastElement, ".commaSeparator" if lastElement - @showAdvancedCommands(@getShowAdvancedCommands()) + if showAllCommandDetails + @instantiateHtmlTemplate $$(descriptionElement, ".vimiumHelpDescription"), "#commandNameTemplate", (element) -> + commandNameElement = $$ element, ".vimiumCopyCommandNameName" + commandNameElement.textContent = command.command + commandNameElement.title = "Click to copy \"#{command.command}\" to clipboard." + commandNameElement.addEventListener "click", -> + chrome.runtime.sendMessage handler: "copyToClipboard", data: commandNameElement.textContent + HUD.showForDuration("Yanked #{commandNameElement.textContent}.", 2000) - # When command names are shown, clicking on them copies their text to the clipboard (and they can be - # clicked with link hints). - for element in @dialogElement.getElementsByClassName "commandName" - do (element) -> - element.setAttribute "role", "link" - element.addEventListener "click", -> - commandName = element.textContent - chrome.runtime.sendMessage handler: "copyToClipboard", data: commandName - HUD.showForDuration("Yanked #{commandName}.", 2000) + @showAdvancedCommands(@getShowAdvancedCommands()) - # "Click" the dialog element (so that it becomes scrollable). - DomUtils.simulateClick @dialogElement + # "Click" the dialog element (so that it becomes scrollable). + DomUtils.simulateClick @dialogElement hide: -> UIComponentServer.hide() toggle: -> @hide() @@ -52,10 +98,15 @@ HelpDialog = # Advanced commands are hidden by default so they don't overwhelm new and casual users. # toggleAdvancedCommands: (event) -> + vimiumHelpDialogContainer = $ "vimiumHelpDialogContainer" + scrollHeightBefore = vimiumHelpDialogContainer.scrollHeight event.preventDefault() showAdvanced = HelpDialog.getShowAdvancedCommands() HelpDialog.showAdvancedCommands(!showAdvanced) Settings.set("helpDialog_showAdvancedCommands", !showAdvanced) + # Try to keep the "show advanced commands" button in the same scroll position. + scrollHeightDelta = vimiumHelpDialogContainer.scrollHeight - scrollHeightBefore + vimiumHelpDialogContainer.scrollTop += scrollHeightDelta if 0 < scrollHeightDelta showAdvancedCommands: (visible) -> document.getElementById("toggleAdvancedCommands").innerHTML = diff --git a/pages/help_dialog.html b/pages/help_dialog.html index c23b2ac1..7bc0d86c 100644 --- a/pages/help_dialog.html +++ b/pages/help_dialog.html @@ -66,7 +66,7 @@ </div> <div> - <table> + <table class="helpDialogBottom"> <tr> <td class="helpDialogBottomLeft"> <span id="help-dialog-tip"></span> @@ -96,5 +96,26 @@ </div> </div> </div> + + + <template id="helpDialogEntry"> + <tr class="vimiumReset"> + <td class="vimiumReset vimiumKeyBindings"></td> + <td class="vimiumReset"></td> + <td class="vimiumReset vimiumHelpDescription"></td> + </tr> + </template> + + <template id="helpDialogEntryBindingsOnly"> + <tr> + <td class="vimiumReset vimiumKeyBindings" colspan="3" style="text-align: left"></td> + </tr> + </template> + + <template id="keysTemplate"><span><span class="vimiumHelpDialogKey"></span><span class="commaSeparator">, </span></span></template> + + <template id="commandNameTemplate"> + <span class="vimiumReset vimiumCopyCommandName">(<span class="vimiumCopyCommandNameName" role="link"></span>)</span> + </template> </body> </html> diff --git a/pages/options.coffee b/pages/options.coffee index 883405e6..7021322a 100644 --- a/pages/options.coffee +++ b/pages/options.coffee @@ -234,9 +234,7 @@ initOptionsPage = -> event.preventDefault() activateHelpDialog = -> - request = showUnboundCommands: true, showCommandNames: true, customTitle: "Command Listing" - chrome.runtime.sendMessage extend(request, handler: "getHelpDialogHtml"), (response) -> - HelpDialog.toggle {html: response} + HelpDialog.toggle showAllCommandDetails: true saveOptions = -> Option.saveOptions() |