extension/packages/help.coffee

   1 utils             = require 'utils'
   2
   3 CONTAINER_ID = 'VimFxHelpDialogContainer'
   4
   5 showHelp = (document, commandsHelp) ->
   6   if body = document.body
   7     if div = document.getElementById CONTAINER_ID
   8       div.parentNode.removeChild div
   9     div = document.createElement 'div'
  10     div.id = CONTAINER_ID
  11     div.className = 'VimFxReset'
  12
  13     div.innerHTML = helpDialogHtml(commandsHelp)
  14
  15     body.appendChild div
  16
  17     if button = document.getElementById('VimFxClose')
  18       clickHandler = (event) ->
  19         event.stopPropagation()
  20         event.preventDefault()
  21         hideHelp(document)
  22       button.addEventListener 'click', clickHandler, false
  23
  24 hideHelp = (document) ->
  25   if div = document.getElementById CONTAINER_ID
  26     div.parentNode.removeChild div
  27
  28 td = (text, klass='') ->
  29   console.log text
  30   """<td class="VimFxReset #{ klass }">#{ text }</td>"""
  31
  32 tr = (key, text) ->
  33   key = """#{ key } <span class="VimFxReset VimFxDot">&#8729;</span>"""
  34   """<tr class="VimFxReset">#{ td(key, 'VimFxSequence') }#{ td(text) }</tr>"""
  35
  36 table = (commands) ->
  37   """
  38   <table class="VimFxReset">
  39     #{ (tr(cmd, text) for cmd, text of commands).join('') }
  40   </table>
  41   """
  42
  43 section = (title, commands) ->
  44   """
  45   <div class="VimFxReset VimFxSectionTitle">#{ title }</div>
  46   #{ table(commands) }
  47   """
  48
  49 helpDialogHtml = (help) ->
  50   return """
  51
  52 <div id="VimFxHelpDialog" class="VimFxReset">
  53   <div class="VimFxReset VimFxHeader">
  54     <div class="VimFxReset VimFxTitle">
  55       <span class="VimFxReset VimFxTitleVim">Vim</span><span class="VimFxReset VimFxTitleFx">Fx</span>
  56       <span class="VimFxReset">#{ _('help') }</span>
  57     </div>
  58     <span class="VimFxReset VimFxVersion">#{ _('help_version') } #{ utils.getVersion() }</span>
  59     <a class="VimFxReset VimFxClose" id="VimFxClose" href="#">&#10006;</a>
  60     <div class="VimFxReset VimFxClearFix"></div>
  61   </div>
  62
  63   <div class="VimFxReset VimFxBody">
  64     <div class="VimFxReset VimFxColumn">
  65       #{ section(_('help_section_urls'),    help['urls']) }
  66       #{ section(_('help_section_nav'),     help['nav']) }
  67     </div>
  68     <div class="VimFxReset VimFxColumn">
  69       #{ section(_('help_section_tabs'),    help['tabs']) }
  70       #{ section(_('help_section_browse'),  help['browse']) }
  71       #{ section(_('help_section_misc'),    help['misc']) }
  72     </div>
  73     <div class="VimFxReset VimFxClearFix"></div>
  74   </div>
  75
  76   <div class="VimFxReset VimFxFooter">
  77     <div class="VimFxReset VimFxSocial">
  78       <p class="VimFxReset">
  79         #{ _('help_found_bug') }
  80         <a class="VimFxReset" target="_blank" href="https://github.com/akhodakivskiy/VimFx/issues">
  81           #{ _('help_report_bug') }
  82         </a>
  83       </p>
  84       <p class="VimFxReset">
  85         #{ _('help_enjoying') }
  86         <a class="VimFxReset" target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/vimfx/">
  87           #{ _('help_feedback') }
  88         </a>
  89       </p>
  90     </div>
  91   </div>
  92 </div>
  93
  94 """
  95
  96 exports.showHelp = showHelp
  97 exports.hideHelp = hideHelp