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, commandsHelp) ->
  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(commandsHelp)))
  20
  21     document.documentElement.appendChild(div)
  22
  23     installCheckboxHandlers(document)
  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 installCheckboxHandlers = (document) ->
  33   cbs = document.getElementsByClassName('VimFxKeyCheckbox')
  34   for cb in cbs
  35     cb.addEventListener 'change', (event)->
  36       key = event.target.getAttribute('data-key')
  37
  38       # Checkbox if checked => command is in use
  39       if event.target.checked
  40         prefs.enableCommand(key)
  41       else
  42         prefs.disableCommand(key)
  43
  44 td = (text, klass='') ->
  45   """<td class="VimFxReset #{ klass }">#{ text }</td>"""
  46
  47 tr = (key, text) ->
  48   disabled = prefs.isCommandDisabled(key)
  49   checked = if disabled then null else 'checked'
  50   key = """
  51     #{ key.replace(/,/g, '').replace('|', ', ') }
  52     <span class="VimFxReset VimFxDot">&#8729;</span>
  53     <input type="checkbox" class="VimFxReset VimFxKeyCheckbox" data-key="#{ key }" #{ checked }></input>
  54   """
  55
  56   return """<tr class="VimFxReset">#{ td(key, 'VimFxSequence') }#{ td(text) }</tr>"""
  57
  58 table = (commands) ->
  59   """
  60   <table class="VimFxReset">
  61     #{ (tr(cmd, text) for cmd, text of commands).join('') }
  62   </table>
  63   """
  64
  65 section = (title, commands) ->
  66   """
  67   <div class="VimFxReset VimFxSectionTitle">#{ title }</div>
  68   #{ table(commands) }
  69   """
  70
  71 helpDialogHtml = (help) ->
  72   return """
  73   <div id="VimFxHelpDialog" class="VimFxReset">
  74     <div class="VimFxReset VimFxHeader">
  75       <div class="VimFxReset VimFxTitle">
  76         <span class="VimFxReset VimFxTitleVim">Vim</span><span class="VimFxReset VimFxTitleFx">Fx</span>
  77         <span class="VimFxReset">#{ _('help') }</span>
  78       </div>
  79       <span class="VimFxReset VimFxVersion">#{ _('help_version') } #{ utils.getVersion() }</span>
  80       <a class="VimFxReset VimFxClose" id="VimFxClose" href="#">&#10006;</a>
  81       <div class="VimFxReset VimFxClearFix"></div>
  82     </div>
  83
  84     <div class="VimFxReset VimFxBody">
  85       <div class="VimFxReset VimFxColumn">
  86         #{ section(_('help_section_urls'),    help['urls']) }
  87         #{ section(_('help_section_nav'),     help['nav']) }
  88       </div>
  89       <div class="VimFxReset VimFxColumn">
  90         #{ section(_('help_section_tabs'),    help['tabs']) }
  91         #{ section(_('help_section_browse'),  help['browse']) }
  92         #{ section(_('help_section_misc'),    help['misc']) }
  93       </div>
  94       <div class="VimFxReset VimFxClearFix"></div>
  95     </div>
  96
  97     <div class="VimFxReset VimFxFooter">
  98       <div class="VimFxReset VimFxSocial">
  99         <p class="VimFxReset">
 100           #{ _('help_found_bug') }
 101           <a class="VimFxReset" target="_blank" href="https://github.com/akhodakivskiy/VimFx/issues">
 102             #{ _('help_report_bug') }
 103           </a>
 104         </p>
 105         <p class="VimFxReset">
 106           #{ _('help_enjoying') }
 107           <a class="VimFxReset" target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/vimfx/">
 108             #{ _('help_feedback') }
 109           </a>
 110         </p>
 111       </div>
 112     </div>
 113   </div>
 114   """
 115
 116 exports.injectHelp = injectHelp
 117 exports.removeHelp = removeHelp