extension/packages/help.coffee

   1 utils        = require 'utils'
   2 prefs        = require 'prefs'
   3 { _ }        = require 'l10n'
   4
   5 { classes: Cc, interfaces: Ci, utils: Cu } = Components
   6
   7 XULDocument  = Ci.nsIDOMXULDocument
   8
   9 CONTAINER_ID = 'VimFxHelpDialogContainer'
  10
  11 removeHelp = (document) ->
  12   document.getElementById(CONTAINER_ID)?.remove()
  13
  14 injectHelp = (document, commands) ->
  15   if document.documentElement
  16     removeHelp(document)
  17
  18     if document instanceof XULDocument
  19       container = utils.createElement(document, 'box')
  20       # The `.VimFxReset` class is not needed in XUL documents. Instead it actullay causes layout
  21       # problems there!
  22       container.classList.remove('VimFxReset')
  23     else
  24       container = utils.createElement(document, 'div')
  25     container.id = CONTAINER_ID
  26
  27     container.appendChild(utils.parseHTML(document, helpDialogHtml(commands)))
  28     for element in container.getElementsByTagName('*')
  29       element.classList.add('VimFxReset')
  30
  31     document.documentElement.appendChild(container)
  32
  33     container.addEventListener('click', removeHandler.bind(undefined, document, commands), false)
  34     container.addEventListener('click', addHandler.bind(undefined, document, commands), false)
  35
  36     if button = document.getElementById('VimFxClose')
  37       clickHandler = (event) ->
  38         event.stopPropagation()
  39         event.preventDefault()
  40         removeHelp(document)
  41       button.addEventListener('click', clickHandler, false)
  42
  43 promptService = Cc["@mozilla.org/embedcomp/prompt-service;1"].getService(Ci.nsIPromptService)
  44 removeHandler = (document, commands, event) ->
  45   return unless event.target.classList.contains('VimFxKeyLink')
  46   event.preventDefault()
  47   event.stopPropagation()
  48   key = event.target.getAttribute('data-key')
  49   name = event.target.getAttribute('data-command')
  50   if cmd = commands.reduce(((m, v) -> if (v.name == name) then v else m), null)
  51     title = _('help_remove_shortcut_title')
  52     text = _('help_remove_shortcut_text')
  53     if promptService.confirm(document.defaultView, title, text)
  54       cmd.keys(cmd.keys().filter((a) -> a != key))
  55       event.target.remove()
  56
  57 addHandler = (document, commands, event) ->
  58   return unless event.target.classList.contains('VimFxAddShortcutLink')
  59   event.preventDefault()
  60   event.stopPropagation()
  61   name = event.target.getAttribute('data-command')
  62   if cmd = commands.reduce(((m, v) -> if (v.name == name) then v else m), null)
  63     title = _('help_add_shortcut_title')
  64     text = _('help_add_shortcut_text')
  65     value = { value: null }
  66     check = { value: null }
  67     if promptService.prompt(document.defaultView, title, text, value, null, check)
  68       conflict_cmd = commands.filter((c) => c.keys().indexOf(value.value) != -1)
  69       if conflict_cmd.length < 1 || overwriteCmd(conflict_cmd[0], value.value)
  70         cmd.keys(cmd.keys().concat(value.value))
  71         for div in document.getElementsByClassName('VimFxKeySequence')
  72           if div.getAttribute('data-command') == cmd.name
  73             div.insertAdjacentHTML('beforeend', hint(cmd, value.value))
  74   return
  75
  76 overwriteCmd = (cmd, key) ->
  77   title = _('help_add_shortcut_title')
  78   text = _('help_add_shortcut_text_overwrite', null, key, cmd.help())
  79   if promptService.confirm(document.defaultView, title, text)
  80     cmd.keys(cmd.keys().filter((a) -> a != key))
  81     dom = document.querySelectorAll("a[data-key='#{key}']")
  82     dom[0].remove() if dom.length > 0
  83     return true
  84   else
  85     return false
  86
  87 td = (text, klass='') ->
  88   """<td class="#{ klass }">#{ text }</td>"""
  89
  90 hint = (cmd, key) ->
  91   keyDisplay = key.replace(/,/g, '')
  92   """<a href="#" class="VimFxReset VimFxKeyLink" title="#{ _('help_remove_shortcut') }"
  93           data-command="#{ cmd.name }" data-key="#{ key }">#{ keyDisplay }</a>"""
  94
  95 tr = (cmd) ->
  96   hints = """
  97     <div class="VimFxKeySequence" data-command="#{ cmd.name }">
  98       #{ (hint(cmd, key) for key in cmd.keys()).join('\n') }
  99     </div>
 100   """
 101   dot = """<span class="VimFxDot">&#8729;</span>"""
 102   a = """#{ cmd.help() }"""
 103   add = """
 104     <a href="#" data-command="#{ cmd.name }"
 105         class="VimFxAddShortcutLink" title="#{ _('help_add_shortcut') }">&#8862;</a>
 106   """
 107
 108   return """
 109     <tr>
 110         #{ td(hints) }
 111         #{ td(add) }
 112         #{ td(dot) }
 113         #{ td(a) }
 114     </tr>
 115   """
 116
 117 table = (commands) ->
 118   """
 119   <table>
 120     #{ (tr(cmd) for cmd in commands).join('') }
 121   </table>
 122   """
 123
 124 section = (title, commands) ->
 125   """
 126   <div class="VimFxSectionTitle">#{ title }</div>
 127   #{ table(commands) }
 128   """
 129
 130 helpDialogHtml = (commands) ->
 131   return """
 132   <div id="VimFxHelpDialog">
 133     <div class="VimFxHeader">
 134       <div class="VimFxTitle">
 135         <span class="VimFxTitleVim">Vim</span><span class="VimFxTitleFx">Fx</span>
 136         <span>#{ _('help_title') }</span>
 137       </div>
 138       <span class="VimFxVersion">#{ _('help_version') } #{ utils.getVersion() }</span>
 139       <a class="VimFxClose" id="VimFxClose" href="#">&#10006;</a>
 140       <div class="VimFxClearFix"></div>
 141       <p>Did you know that you can add/remove shortucts in this dialog?</p>
 142       <div class="VimFxClearFix"></div>
 143       <p>Click the shortcut to remove it, and click &#8862; to add new shortcut!</p>
 144     </div>
 145
 146     <div class="VimFxBody">
 147       <div class="VimFxColumn">
 148         #{ section(_('help_section_urls'),    commands.filter((a) -> a.group == 'urls')) }
 149         #{ section(_('help_section_nav'),     commands.filter((a) -> a.group == 'nav')) }
 150       </div>
 151       <div class="VimFxColumn">
 152         #{ section(_('help_section_tabs'),    commands.filter((a) -> a.group == 'tabs')) }
 153         #{ section(_('help_section_browse'),  commands.filter((a) -> a.group == 'browse')) }
 154         #{ section(_('help_section_misc'),    commands.filter((a) -> a.group == 'misc')) }
 155       </div>
 156       <div class="VimFxClearFix"></div>
 157     </div>
 158
 159     <div class="VimFxFooter">
 160       <p>#{ _('help_overlapping_hints') }</p>
 161       <p>
 162         #{ _('help_found_bug') }
 163         <a target="_blank" href="https://github.com/akhodakivskiy/VimFx/issues">
 164           #{ _('help_report_bug') }
 165         </a>
 166       </p>
 167       <p>
 168         #{ _('help_enjoying') }
 169         <a target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/vimfx/">
 170           #{ _('help_feedback') }
 171         </a>
 172       </p>
 173     </div>
 174   </div>
 175   """
 176
 177 exports.injectHelp = injectHelp
 178 exports.removeHelp = removeHelp