Navbar with SubMenu

by Felipe Alfaro

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//vsn4ik.github.io/bootstrap-submenu/dist/js/bootstrap-submenu.js"></script>
<link rel="stylesheet" href="//vsn4ik.github.io/bootstrap-submenu/dist/css/bootstrap-submenu.min.css">
<script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js"></script>
<script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ext-language_tools.js"></script>
<nav class="navbar navbar-default navbar-xs">
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a tabindex="0" data-toggle="dropdown" data-submenu>
          Insert Code<span class="caret"></span>
        </a>

        <ul class="dropdown-menu">
          <li class="dropdown-submenu">
            <a tabindex="0">Read Input: #1</a>

            <ul class="dropdown-menu">
              <li><a tabindex="0" class='insert'>as Data Frame</a></li>
              <li><a tabindex="0">as Data Frame: Chunked</a></li>
              <li><a tabindex="0">as List</a></li>
              <li><a tabindex="0">as List: Chunked</a></li>
            </ul>
          </li>
          <li class="dropdown-submenu">
            <a tabindex="0">Set Progress</a>

            <ul class="dropdown-menu">
              <li><a tabindex="0">25%</a></li>
              <li><a tabindex="0">50%</a></li>
              <li><a tabindex="0">75%</a></li>
              <li><a tabindex="0">100%</a></li>
            </ul>
          </li>

          <li class="dropdown-submenu">
            <a tabindex="0">Write Output</a>

            <ul class="dropdown-menu">
              <li><a tabindex="0">Sub action</a></li>
              <li><a tabindex="0">Another sub action</a></li>
              <li><a tabindex="0">Something else here</a></li>
            </ul>
          </li>
          <li><a tabindex="0">Create...

CSS

a {
  cursor: pointer;
}

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li,
.navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

#editor {
  position: absolute;
  top: 38px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -999;
}

.navbar-xs { min-height:22px; border-radius:0} 
.navbar-xs .navbar-brand{ padding: 2px 8px;font-size: 14px;line-height: 14px; } 
.navbar-xs .navbar-nav > li > a { border-right:1px solid #ddd; padding-top: 2px; padding-bottom: 2px; line-height: 16px }

JavaScript

var mySnippets = [
   {
    name: "read.Alteryx",
    tabTrigger: "read",
    content: 'read.Alteryx(${1:"#1"}, mode = ${2: "data.frame"})'
  },
  {
    name: "write.Alteryx",
    tabTrigger: "write",
    content: 'write.Alteryx(${1:d}, ${2:1})'
  }
];

$(document).ready(function() {
  $('[data-submenu]').submenupicker();
  //ace.require("ace/ext/language_tools");
  var editor = ace.edit("editor");
  editor.setTheme("ace/theme/chrome");
  editor.getSession().setMode("ace/mode/r");
  editor.getSession().setUseWrapMode(true);
  editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: false
  });
  editor.$blockScrolling = Infinity
  $('a.insert').on('click', function() {
    editor.insert("d <- read.Alteryx('#1', mode = 'data.frame')\n")
    editor.setAutoScrollEditorIntoView(true)
  })
  $("a.theme").on('click', function(){
    console.log("clicked")
    editor.setTheme("ace/theme/" + $(this).data('theme'));
  })

  ace.config.loadModule('ace/ext/language_tools', function() {
    editor.setOptions({
      enableBasicAutocompletion: true,
      enableSnippets: true
    })

    var snippetManager = ace.require("ace/snippets").snippetManager;
    var config = ace.require("ace/config");

    ace.config.loadModule("ace/snippets/r", function(m) {
      if (m) {
        snippetManager.files.r = m;
        m.snippets = snippetManager.parseSnippetFile(m.snippetText);
        mySnippets.map(d => m.snippets.push(d))
        snippetManager.register(m.snippets, m.scope);
      }
    });

  });
})