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   """<td class="VimFxReset #{ klass }">#{ text }</td>"""
  30
  31 tr = (key, text) ->
  32   key = """#{ key } <span class="VimFxReset VimFxDot">&#8729;"""
  33   """<tr class="VimFxReset">#{ td(key, 'VimFxSequence') }#{ td(text) }</tr>"""
  34
  35 table = (commands) ->
  36   """
  37   <table class="VimFxReset">
  38     #{ (tr(cmd, text) for cmd, text of commands).join('') }
  39   </table>
  40   """
  41
  42 section = (title, commands) ->
  43   """
  44   <div class="VimFxReset VimFxSectionTitle">#{ title }</div>
  45   #{ table(commands) }
  46   """
  47
  48 helpDialogHtml = (help) ->
  49
  50
  51   html = null
  52   if html == null
  53     html = """
  54
  55 <div id="VimFxHelpDialog" class="VimFxReset">
  56   <div class="VimFxReset VimFxHeader">
  57     <div class="VimFxReset VimFxTitle">
  58       <span class="VimFxReset VimFxTitleVim">Vim</span><span class="VimFxReset VimFxTitleFx">Fx</span>
  59       <span class="VimFxReset">Help</span>
  60     </div>
  61     <span class="VimFxReset VimFxVersion">Version #{ utils.getVersion() }</span>
  62     <a class="VimFxReset VimFxClose" id="VimFxClose" href="#">&#10006;</a>
  63     <div class="VimFxReset VimFxClearFix"></div>
  64   </div>
  65
  66   <div class="VimFxReset VimFxBody">
  67     <div class="VimFxReset VimFxColumn">
  68       #{ section('Dealing with URLs', help['urls']) }
  69       #{ section('Navigating the page', help['nav']) }
  70     </div>
  71     <div class="VimFxReset VimFxColumn">
  72       #{ section('Working with Tabs', help['tabs']) }
  73       #{ section('Browsing', help['browse']) }
  74       #{ section('Misc', help['misc']) }
  75     </div>
  76     <div class="VimFxReset VimFxClearFix"></div>
  77   </div>
  78
  79   <div class="VimFxReset VimFxFooter">
  80     <div class="VimFxReset VimFxSocial">
  81       <p class="VimFxReset">
  82         Found a bug?
  83         <a class="VimFxReset" target="_blank" href="https://github.com/akhodakivskiy/VimFx/issues">
  84           Report it Here!
  85         </a>
  86       </p>
  87       <p class="VimFxReset">
  88         Enjoying VimFx?
  89         <a class="VimFxReset" target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/vimfx/">
  90           Leave us Feedback!
  91         </a>
  92       </p>
  93     </div>
  94   </div>
  95 </div>
  96
  97 """
  98   return html
  99
 100 exports.showHelp = showHelp
 101 exports.hideHelp = hideHelp