＊＊まだ作成中＊＊

cheatSheet.js

// Cheat sheet generator command for Vimperator
plugins.cheat_sheet = (function () {

  commands.addUserCommand(
    ["cheat"],
    "Show cheat sheet",
    function(args) {
      showCheatSheet();
    },
    null,
    true  // for debug
  );

  var keybord = [
    {offset: 0, keys: "<F1> <F2> <F3> <F4> <F5> <F6> <F7> <F8> <F9> <F10> <F11> <F12> <Del>".split(/¥s/)},
    {offset: 0, keys: "1 2 3 4 5 6 7 8 9 0 - ^ ¥¥ <BS>".split(/¥s/)},
    {offset: 0, keys:  "q w e r t y u i o p @ [ <Return>".split(/¥s/)},
    {offset: 0, keys:   "a s d f g h j k l ; : ]".split(/¥s/)},
    {offset: 0, keys:    "z x c v b n m , . / _".split(/¥s/)},
    {offset: 0, keys:    "<Space>".split(/¥s/)},
  ]

  function getAllMappings (pre) {
    keys.map(function (key) {
      var map = mappings.get(modes.NORMAL, key);
      return key + ": " + (map ? map.description : "-");
    });
  }

  function showCheatSheet() {
    var modeName = modes.getMode(liberator.mode).name;
    var panel = xmlToDom(
      <panel noautofocus="true" width="300" style="background-color:transparent;border:none;" xmlns={xulNS}>
        <div style="position:absolute;background-color:rgba(0,0,0,.9);color:white;"
            xmlns={xhtmlNS}>
          <div id="keybord-inner" style="position:absolute;padding:10px;">
            <div id="caption">Cheat sheet: {modeName} mode</div><br/>
            <div id="row0" style="position:relative;left:25px">{getRow(liberator.mode, 0)}</div>
            <div id="row1" style="position:relative;">{getRow(liberator.mode, 1)}</div>
            <div id="row2" style="position:relative;left:25px">{getRow(liberator.mode, 2)}</div>
            <div id="row3" style="position:relative;left:50px">{getRow(liberator.mode, 3)}</div>
            <div id="row4" style="position:relative;left:75px">{getRow(liberator.mode, 4)}</div>
            <div id="row5" style="position:relative;left:100px">{getRow(liberator.mode, 5, "150px")}</div>
          </div>
        </div>
      </panel>
    );
    document.documentElement.appendChild(panel);
    panel.openPopup(getBrowser().mCurrentBrowser);
  }

  function getRow(mode, num, width) {
    var ret =<></>;
    for each (i in keybord[num].keys) {
      let map = mappings.get(mode, i);
      let hasCandidates = mappings.getCandidates(mode, i).length > 0;
      let color = map ? "#00ff00" : (hasCandidates ? "#ffff00" : "#dddddd");
      let style = "margin:2px 4px;overflow:hidden;width:" + (width || "50px") +
                  ";height:50px;-moz-border-radius:5px;border:2px solid " + color;
      let desc = map ? " " + map.description : (hasCandidates ? " ...": "");
      ret += <div style={style} title={desc}>
              <vbox xmlns={xulNS}>
                <label>{i}</label>
                <description style="width:50px">{desc}</description>
              </vbox>
             </div>;
    }
    return ret;
  }

  // from : http://gist.github.com/86748
  let xulNS = new Namespace("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
  let xhtmlNS = new Namespace("http://www.w3.org/1999/xhtml");

  function xmlToDom(xml, xmlns) {
    if (!xmlns) xmlns = xulNS;
    XML.ignoreWhitespace = true;
    XML.prettyPrinting = false;
    var doc = (new DOMParser).parseFromString('<box xmlns="' + xmlns + '">' + xml.toXMLString() + "</box>", "application/xml")
    var imported = document.importNode(doc.documentElement, true);
    var range = document.createRange();
    range.selectNodeContents(imported);
    var fragment = range.extractContents();
    range.detach();
    return fragment.childNodes.length > 1 ? fragment : fragment.firstChild;
  }

  liberator.echo("loading...");
  setTimeout(function() commandline.close(), 1500);

  return {
    //init: init,
    get: getAllMappings,
    open: showCheatSheet,
  };
})();