Sidebar.html

<!--Begin HTML-->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<div style="padding: 5px;">
  <form id="inputForm">
  
    <!--Select Sheet Dropdown-->
    <div class="block form-group">
      <label for="sourceSheet"><b>Quick Select Sheet</b></label>
      <select id="sourceSheet" title="The selected sheet's Table of Contents will be used to fill the Quick Select dropdown with sections you can quickly jump between." onchange="refreshQuickSelect();"></select>
    </div>
    
    <!--Table of Contents Quick Select Dropdown-->
    <div class="block form-group">
      <label for="tocQuickSelect"><b>Table of Contents Quick Select</b></label>
      <select id="tocQuickSelect" title="If the Table of Contents for the selected sheet has been generated, you can use this dropdown to quickly jump to its various sections." onclick="quickSelect();"></select>
    </div>
    
    <!--Refresh Button-->
    <div class="block form-group">
      <button type="submit" class="action" id="generateButton" title="Generate a new Table of Contents sheet from the currently active sheet.">Generate Table of Contents</button>
    </div>
  </form>
  
  <!--Refresh Button-->
  <br><br>
  <button class="action" id="refresh" title="Refresh this sidebar and update the sheets in the dropdown menus." onclick="google.script.run.NOKORIWARETableOfContentsGenerator()">Refresh</button>
  
  <!--Sort Button-->
  <br><br><br><br>
  <button class="action" id="sort" title="Make a copy of the selected sheet and sort it alphabetically by TOC section." onclick="google.script.run.sortSheet()">Sort Sheet</button>
  
  <!--Instructions Button-->
  <br><br>
  <button class="action" id="intructions" title="Read instructions on how to use this tool." onclick="google.script.run.showManual()">Instruction Manual</button>
</div>
<!--End HTML-->

<!--Begin Scripting-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script>
/*
* This function is called when the document is initialized
*/ 
$(document).ready(function() {

  //add the available sheets to the Source Sheet dropdown
  google.script.run.withSuccessHandler(function(sourceSheet) {
    
      //Fill the source sheet drop-down
      $.each(sourceSheet, function(key, val) {
        $('#sourceSheet').append('<option value="' + key + '">' + val + '</option>');
      });
      
      //Fill quick-select after the sheet drop-down is filled
      refreshQuickSelect();
    
    })
  .getSheets();
    
  //This function is called when the generate button is pressed
  $('form').submit(function() {
    var sourceSheetIndex = $('#sourceSheet').val();
    
    google.script.run.generateTableOfContents(sourceSheetIndex);
      
    return false; //prevent the default form submit
  });
});

/*
* Fill quick-select after the sheet drop-down is filled
*/
function refreshQuickSelect() {
  //console.log("Refresh Quick Select");

  google.script.run.withSuccessHandler(function(tocQuickSelect) {
    $('#tocQuickSelect').empty();
    $.each(tocQuickSelect, function(key, val) {
	$('#tocQuickSelect').append('<option value="' + key + '">' + val + '</option>');
	  });
  }).getTableOfContentsSectionNames($('#sourceSheet').val());
}

/*
* Called when an entry in the quick select dropdown is selected
*/
function quickSelect() {
  var sourceSheetIndex = $('#sourceSheet').val();
  var sectionIndex = $('#tocQuickSelect').val();
  google.script.run.quickSelect(sourceSheetIndex, sectionIndex);
}
</script>
<!--End Scripting-->