extension/packages/help.coffee

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