extension/packages/help.coffee

   1 utils        = require 'utils'
   2 prefs        = require 'prefs'
   3 { _ }        = require 'l10n'
   4
   5 { classes: Cc, interfaces: Ci, utils: Cu } = Components
   6
   7 XULDocument  = Ci.nsIDOMXULDocument
   8
   9 CONTAINER_ID = 'VimFxHelpDialogContainer'
  10
  11 removeHelp = (document) ->
  12   document.getElementById(CONTAINER_ID)?.remove()
  13
  14 injectHelp = (document, commands) ->
  15   if document.documentElement
  16     removeHelp(document)
  17
  18     if document instanceof XULDocument
  19       container = document.createElement('box')
  20       # The `.VimFxReset` class is not needed in XUL documents. Instead it actullay causes layout
  21       # problems there!
  22     else
  23       container = document.createElement('div')
  24       container.className = 'VimFxReset'
  25     container.id = CONTAINER_ID
  26
  27     container.appendChild(utils.parseHTML(document, helpDialogHtml(commands)))
  28
  29     document.documentElement.appendChild(container)
  30
  31     installHandlers(document, commands)
  32
  33     if button = document.getElementById('VimFxClose')
  34       clickHandler = (event) ->
  35         event.stopPropagation()
  36         event.preventDefault()
  37         removeHelp(document)
  38       button.addEventListener('click', clickHandler, false)
  39
  40 installHandlers = (document, commands) ->
  41   promptService = Cc["@mozilla.org/embedcomp/prompt-service;1"].getService(Ci.nsIPromptService)
  42
  43   removeHandler = (event) ->
  44     event.preventDefault()
  45     event.stopPropagation()
  46     key = event.target.getAttribute('data-key')
  47     name = event.target.getAttribute('data-command')
  48     if cmd = commands.reduce(((m, v) -> if (v.name == name) then v else m), null)
  49       title = _('help_remove_shortcut_title')
  50       text = _('help_remove_shortcut_text')
  51       if promptService.confirm(document.defaultView, title, text)
  52         cmd.keys(cmd.keys().filter((a) -> a != key))
  53         event.target.parentNode.removeChild(event.target)
  54
  55   for a in document.getElementsByClassName('VimFxKeyLink')
  56     a.addEventListener('click', removeHandler)
  57
  58   addHandler = (event) ->
  59     event.preventDefault()
  60     event.stopPropagation()
  61     name = event.target.getAttribute('data-command')
  62     if cmd = commands.reduce(((m, v) -> if (v.name == name) then v else m), null)
  63       title = _('help_add_shortcut_title')
  64       text = _('help_add_shortcut_text')
  65       value = { value: null }
  66       check = { value: null }
  67       if promptService.prompt(document.defaultView, title, text, value, null, check)
  68         conflict_cmd = commands.filter((c) => c.keys().indexOf(value.value) != -1)
  69         if conflict_cmd.length < 1 || overwriteCmd(conflict_cmd[0], value.value)
  70           cmd.keys(cmd.keys().concat(value.value))
  71           for div in document.getElementsByClassName('VimFxKeySequence')
  72             if div.getAttribute('data-command') == cmd.name
  73               node = utils.parseHTML(document, hint(cmd, value.value))
  74               node.querySelector('a').addEventListener('click', removeHandler)
  75               div.appendChild(node)
  76
  77   overwriteCmd = (cmd, key) ->
  78     title = _('help_add_shortcut_title')
  79     text = _('help_add_shortcut_text_overwrite', null, key, cmd.help())
  80     if promptService.confirm(document.defaultView, title, text)
  81       cmd.keys(cmd.keys().filter((a) -> a != key))
  82       dom = document.querySelectorAll("a[data-key='#{key}']")
  83       dom[0].parentNode.removeChild(dom[0]) if dom.length > 0
  84       return true
  85     else
  86       return false
  87
  88   for a in document.getElementsByClassName('VimFxAddShortcutLink')
  89     a.addEventListener('click', addHandler, false)
  90
  91 td = (text, klass='') ->
  92   """<td class="VimFxReset #{ klass }">#{ text }</td>"""
  93
  94 hint = (cmd, key) ->
  95   keyDisplay = key.replace(/,/g, '')
  96   """<a href="#" class="VimFxReset VimFxKeyLink" title="#{ _('help_remove_shortcut') }"
  97           data-command="#{ cmd.name }" data-key="#{ key }">#{ keyDisplay }</a>"""
  98
  99 tr = (cmd) ->
 100   hints = """
 101     <div class="VimFxKeySequence" data-command="#{ cmd.name }">
 102       #{ (hint(cmd, key) for key in cmd.keys()).join('\n') }
 103     </div>
 104   """
 105   dot = """<span class="VimFxReset VimFxDot">&#8729;</span>"""
 106   a = """#{ cmd.help() }"""
 107   add = """
 108     <a href="#" data-command="#{ cmd.name }"
 109         class="VimFxReset VimFxAddShortcutLink" title="#{ _('help_add_shortcut') }">&#8862;</a>
 110   """
 111
 112   return """
 113     <tr class="VimFxReset">
 114         #{ td(hints) }
 115         #{ td(add) }
 116         #{ td(dot) }
 117         #{ td(a) }
 118     </tr>
 119   """
 120
 121 table = (commands) ->
 122   """
 123   <table class="VimFxReset">
 124     #{ (tr(cmd) for cmd in commands).join('') }
 125   </table>
 126   """
 127
 128 section = (title, commands) ->
 129   """
 130   <div class="VimFxReset VimFxSectionTitle">#{ title }</div>
 131   #{ table(commands) }
 132   """
 133
 134 helpDialogHtml = (commands) ->
 135   return """
 136   <div id="VimFxHelpDialog" class="VimFxReset">
 137     <div class="VimFxReset VimFxHeader">
 138       <div class="VimFxReset VimFxTitle">
 139         <span class="VimFxReset VimFxTitleVim">Vim</span><span class="VimFxReset VimFxTitleFx">Fx</span>
 140         <span class="VimFxReset">#{ _('help_title') }</span>
 141       </div>
 142       <span class="VimFxReset VimFxVersion">#{ _('help_version') } #{ utils.getVersion() }</span>
 143       <a class="VimFxReset VimFxClose" id="VimFxClose" href="#">&#10006;</a>
 144       <div class="VimFxReset VimFxClearFix"></div>
 145       <p class="VimFxReset">Did you know that you can add/remove shortucts in this dialog?</p>
 146       <div class="VimFxReset VimFxClearFix"></div>
 147       <p class="VimFxReset">Click the shortcut to remove it, and click &#8862; to add new shortcut!</p>
 148     </div>
 149
 150     <div class="VimFxReset VimFxBody">
 151       <div class="VimFxReset VimFxColumn">
 152         #{ section(_('help_section_urls'),    commands.filter((a) -> a.group == 'urls')) }
 153         #{ section(_('help_section_nav'),     commands.filter((a) -> a.group == 'nav')) }
 154       </div>
 155       <div class="VimFxReset VimFxColumn">
 156         #{ section(_('help_section_tabs'),    commands.filter((a) -> a.group == 'tabs')) }
 157         #{ section(_('help_section_browse'),  commands.filter((a) -> a.group == 'browse')) }
 158         #{ section(_('help_section_misc'),    commands.filter((a) -> a.group == 'misc')) }
 159       </div>
 160       <div class="VimFxReset VimFxClearFix"></div>
 161     </div>
 162
 163     <div class="VimFxReset VimFxFooter">
 164       <p class="VimFxReset">#{ _('help_overlapping_hints') }</p>
 165       <p class="VimFxReset">
 166         #{ _('help_found_bug') }
 167         <a class="VimFxReset" target="_blank" href="https://github.com/akhodakivskiy/VimFx/issues">
 168           #{ _('help_report_bug') }
 169         </a>
 170       </p>
 171       <p class="VimFxReset">
 172         #{ _('help_enjoying') }
 173         <a class="VimFxReset" target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/vimfx/">
 174           #{ _('help_feedback') }
 175         </a>
 176       </p>
 177     </div>
 178   </div>
 179   """
 180
 181 exports.injectHelp = injectHelp
 182 exports.removeHelp = removeHelp