added a collapsible list

static/js/CollapsibleLists.js

@@ -0,0 +1,2 @@
+//code.iamkate.com
+var CollapsibleLists=function(){function e(b,c){[].forEach.call(b.getElementsByTagName("li"),function(a){c&&b!==a.parentNode||(a.style.userSelect="none",a.style.MozUserSelect="none",a.style.msUserSelect="none",a.style.WebkitUserSelect="none",a.addEventListener("click",g.bind(null,a)),f(a))})}function g(b,c){for(var a=c.target;"LI"!==a.nodeName;)a=a.parentNode;a===b&&f(b)}function f(b){var c=b.classList.contains("collapsibleListClosed"),a=b.getElementsByTagName("ul");[].forEach.call(a,function(a){for(var d=a;"LI"!==d.nodeName;)d=d.parentNode;d===b&&(a.style.display=c?"block":"none")});b.classList.remove("collapsibleListOpen");b.classList.remove("collapsibleListClosed");0<a.length&&b.classList.add("collapsibleList"+(c?"Open":"Closed"))}return{apply:function(b){[].forEach.call(document.getElementsByTagName("ul"),function(c){c.classList.contains("collapsibleList")&&(e(c,!0),b||[].forEach.call(c.getElementsByTagName("ul"),function(a){a.classList.add("collapsibleList")}))})},applyTo:e}}();

static/js/CollapsibleLists.src.js

@@ -0,0 +1,116 @@
+/*
+
+CollapsibleLists.js
+
+An object allowing lists to dynamically expand and collapse
+
+Created by Kate Morley - http://code.iamkate.com/ - and released under the terms
+of the CC0 1.0 Universal legal code:
+
+http://creativecommons.org/publicdomain/zero/1.0/legalcode
+
+*/
+
+const CollapsibleLists = (function(){
+
+  // Makes all lists with the class 'collapsibleList' collapsible. The
+  // parameter is:
+  //
+  // doNotRecurse - true if sub-lists should not be made collapsible
+  function apply(doNotRecurse){
+
+    [].forEach.call(document.getElementsByTagName('ul'), node => {
+
+      if (node.classList.contains('collapsibleList')){
+
+        applyTo(node, true);
+
+        if (!doNotRecurse){
+
+          [].forEach.call(node.getElementsByTagName('ul'), subnode => {
+            subnode.classList.add('collapsibleList')
+          });
+
+        }
+
+      }
+
+    })
+
+  }
+
+  // Makes the specified list collapsible. The parameters are:
+  //
+  // node         - the list element
+  // doNotRecurse - true if sub-lists should not be made collapsible
+  function applyTo(node, doNotRecurse){
+
+    [].forEach.call(node.getElementsByTagName('li'), li => {
+
+      if (!doNotRecurse || node === li.parentNode){
+
+        li.style.userSelect       = 'none';
+        li.style.MozUserSelect    = 'none';
+        li.style.msUserSelect     = 'none';
+        li.style.WebkitUserSelect = 'none';
+
+        li.addEventListener('click', handleClick.bind(null, li));
+
+        toggle(li);
+
+      }
+
+    });
+
+  }
+
+  // Handles a click. The parameter is:
+  //
+  // node - the node for which clicks are being handled
+  function handleClick(node, e){
+
+    let li = e.target;
+    while (li.nodeName !== 'LI'){
+      li = li.parentNode;
+    }
+
+    if (li === node){
+      toggle(node);
+    }
+
+  }
+
+  // Opens or closes the unordered list elements directly within the
+  // specified node. The parameter is:
+  //
+  // node - the node containing the unordered list elements
+  function toggle(node){
+
+    const open = node.classList.contains('collapsibleListClosed');
+    const uls  = node.getElementsByTagName('ul');
+
+    [].forEach.call(uls, ul => {
+
+      let li = ul;
+      while (li.nodeName !== 'LI'){
+        li = li.parentNode;
+      }
+
+      if (li === node){
+        ul.style.display = (open ? 'block' : 'none');
+      }
+
+    });
+
+    node.classList.remove('collapsibleListOpen');
+    node.classList.remove('collapsibleListClosed');
+
+    if (uls.length > 0){
+      node.classList.add('collapsibleList' + (open ? 'Open' : 'Closed'));
+    }
+
+  }
+
+  return {apply, applyTo};
+
+})();

static/styles/main.css

@@ -175,3 +175,17 @@ ul#testlogs li a:hover {
     font-weight: bold;
     background-color: rgba(0,255,0,0.15);
 }
+.collapsibleList li{
+  list-style-image : url('/static/images/bg.png');
+  cursor           : auto;
+}
+
+li.collapsibleListOpen{
+  list-style-image : url('/static/images/button-open.png');
+  cursor           : pointer;
+}
+
+li.collapsibleListClosed{
+  list-style-image : url('/static/images/button-closed.png');
+  cursor           : pointer;
+}

templates/index.html

@@ -3,11 +3,12 @@
 
 <head>
 <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/main.css') }}">
+<script type="text/javascript" src="{{ url_for('static', filename='js/CollapsibleLists.js')}}"></script>
 </head>
 
 <body onload="javascript: reload()">
 <div id="main">
-<a href="https://firmware.ardupilot.org/">
+<a href="https://custom.ardupilot.org/">
 <div id="logo">
 </div>
 </a>
@@ -44,9 +45,9 @@
             </select>
             <p/>
             <label for="board">Select Features:</label>
-            <ul>
+            <ul class="collapsibleList">
               {% for c in get_build_categories() %}
-              <li>{{c}}</li>
+              <li>{{c}}
                 <ul>
                   {% for f in get_build_options(c) %}
                     <li>
@@ -59,6 +60,7 @@
                     </li>
                   {% endfor %}
                 </ul>
+               </li>
               {% endfor %}
             </ul>
             <br>
@@ -68,7 +70,8 @@
 <hr>
     <div id="build_status"></div>
 <br />
-      <script>
+       <script>
+      CollapsibleLists.apply();
       function reload() {
             var output = document.getElementById('build_status');
             var xhr = new XMLHttpRequest();