extension/packages/help.coffee

   1 utils = require 'utils'
   2 prefs = require 'prefs'
   3 { _ } = require 'l10n'
   4
   5 CONTAINER_ID = 'VimFxHelpDialogContainer'
   6
   7 removeHelp = (document) ->
   8   if div = document.getElementById(CONTAINER_ID)
   9     div.parentNode.removeChild(div)
  10
  11 injectHelp = (document, commands) ->
  12   if document.documentElement
  13     if div = document.getElementById(CONTAINER_ID)
  14       div.parentNode.removeChild(div)
  15     div = document.createElement 'div'
  16     div.id = CONTAINER_ID
  17     div.className = 'VimFxReset'
  18
  19     div.appendChild(utils.parseHTML(document, helpDialogHtml(commands)))
  20
  21     document.documentElement.appendChild(div)
  22
  23     installHandlers(document, commands)
  24
  25     if button = document.getElementById('VimFxClose')
  26       clickHandler = (event) ->
  27         event.stopPropagation()
  28         event.preventDefault()
  29         removeHelp(document)
  30       button.addEventListener('click', clickHandler, false)
  31
  32 installHandlers = (document, commands) ->
  33   changeHandler = (event) ->
  34     name = event.target.getAttribute('data-name')
  35     cmd = commands.reduce(((m, v) -> if (v.name == name) then v else m), null)
  36     cmd.enabled(event.target.checked)
  37
  38   for cb in document.getElementsByClassName('VimFxKeyCheckbox')
  39     cb.addEventListener('change', changeHandler, false)
  40
  41   clickHandler = (event) ->
  42     event.preventDefault()
  43     event.stopPropagation()
  44     name = event.target.getAttribute('data-name')
  45     cmd = commands.reduce(((m, v) -> if (v.name == name) then v else m), null)
  46     console.log cmd.name
  47
  48   for a in document.getElementsByClassName('VimFxKeyLink')
  49     a.addEventListener('click', clickHandler, false)
  50
  51
  52 td = (text, klass='') ->
  53   """<td class="VimFxReset #{ klass }">#{ text }</td>"""
  54
  55 hint = (cmd, key) ->
  56   keyDisplay = key.replace(/,/g, '')
  57   """
  58   <a href="#" class="VimFxReset VimFxKeyLink" data-command="#{ cmd.name }" data-key="#{ key }">#{ keyDisplay }</a>
  59   """
  60
  61 tr = (cmd) ->
  62   checked = if cmd.enabled() then 'checked' else null
  63   keyData = cmd.defaultKeys.join('|')
  64   hints = (hint(cmd, key) for key in cmd.keys).join('')
  65   key = """
  66     #{ hints }
  67     <span class="VimFxReset VimFxDot">&#8729;</span>
  68     <input type="checkbox" class="VimFxReset VimFxKeyCheckbox" data-name="#{ cmd.name }" #{ checked }></input>
  69   """
  70
  71   return """<tr class="VimFxReset">#{ td(key, 'VimFxSequence') }#{ td(cmd.help()) }</tr>"""
  72
  73 table = (commands) ->
  74   """
  75   <table class="VimFxReset">
  76     #{ (tr(cmd) for cmd in commands).join('') }
  77   </table>
  78   """
  79
  80 section = (title, commands) ->
  81   """
  82   <div class="VimFxReset VimFxSectionTitle">#{ title }</div>
  83   #{ table(commands) }
  84   """
  85
  86 helpDialogHtml = (commands) ->
  87   return """
  88   <div id="VimFxHelpDialog" class="VimFxReset">
  89     <div class="VimFxReset VimFxHeader">
  90       <div class="VimFxReset VimFxTitle">
  91         <span class="VimFxReset VimFxTitleVim">Vim</span><span class="VimFxReset VimFxTitleFx">Fx</span>
  92         <span class="VimFxReset">#{ _('help') }</span>
  93       </div>
  94       <span class="VimFxReset VimFxVersion">#{ _('help_version') } #{ utils.getVersion() }</span>
  95       <a class="VimFxReset VimFxClose" id="VimFxClose" href="#">&#10006;</a>
  96       <div class="VimFxReset VimFxClearFix"></div>
  97     </div>
  98
  99     <div class="VimFxReset VimFxBody">
 100       <div class="VimFxReset VimFxColumn">
 101         #{ section(_('help_section_urls'),    commands.filter((a) -> a.group == 'urls')) }
 102         #{ section(_('help_section_nav'),     commands.filter((a) -> a.group == 'nav')) }
 103       </div>
 104       <div class="VimFxReset VimFxColumn">
 105         #{ section(_('help_section_tabs'),    commands.filter((a) -> a.group == 'tabs')) }
 106         #{ section(_('help_section_browse'),  commands.filter((a) -> a.group == 'browse')) }
 107         #{ section(_('help_section_misc'),    commands.filter((a) -> a.group == 'misc')) }
 108       </div>
 109       <div class="VimFxReset VimFxClearFix"></div>
 110     </div>
 111
 112     <div class="VimFxReset VimFxFooter">
 113       <div class="VimFxReset VimFxSocial">
 114         <p class="VimFxReset">
 115           #{ _('help_found_bug') }
 116           <a class="VimFxReset" target="_blank" href="https://github.com/akhodakivskiy/VimFx/issues">
 117             #{ _('help_report_bug') }
 118           </a>
 119         </p>
 120         <p class="VimFxReset">
 121           #{ _('help_enjoying') }
 122           <a class="VimFxReset" target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/vimfx/">
 123             #{ _('help_feedback') }
 124           </a>
 125         </p>
 126       </div>
 127     </div>
 128   </div>
 129   """
 130
 131 exports.injectHelp = injectHelp
 132 exports.removeHelp = removeHelp