Refactor of template demo instructions

Author: John Mulhausen

_data/support.yml

@@ -40,3 +40,5 @@ toc:
     path: https://github.com/kubernetes/kubernetes/milestones/
   - title: Contributing to Kubernetes Documentation
     path: /editdocs/
+  - title: New Template Instructions
+    path: /docs/templatedemos/

docs/sitemap.md

@@ -0,0 +1,114 @@
+---
+---
+<script language="JavaScript">
+var dropDownsPopulated = false;
+$( document ).ready(function() {
+  // When the document loads, get the metadata JSON, and kick off tbl render
+  $.get("/metadata.txt", function(data, status) {
+    metadata = $.parseJSON(data);
+    metadata.pages.sort(dynamicSort("t"));
+    mainLogic()
+    $(window).bind( 'hashchange', function(e) {
+      mainLogic();
+    });
+  });
+});
+function mainLogic()
+{
+  // If there's a tag filter, change the table/drop down output
+  if (!dropDownsPopulated) populateDropdowns();
+  var tag=window.location.hash.replace("#","");
+  if(tag) {
+    tag = $.trim(tag);
+    for (i=0;i<tagName.length;i++) {
+      querystringTag = tagName[i] + "=";
+      if (tag.indexOf(querystringTag) > -1)
+      {
+        console.log("in mainLog: querystringTag of " + querystringTag + " matches tag of " + tag);
+        tag = tag.replace(querystringTag,"");
+        selectDropDown(tagName[i],tag);
+        topicsFilter(tagName[i],tag,"output");
+      }
+    }
+  } else {
+    currentTopics = metadata.pages;
+  }
+  renderTable(currentTopics,"output");
+
+}
+function populateDropdowns()
+{
+  // Keeping mainLogic() brief by functionizing the initialization of the
+  // drop-down filter boxes
+
+  for(i=0;i<metadata.pages.length;i++)
+  {
+    var metadataArrays = [metadata.pages[i].cr,metadata.pages[i].or,metadata.pages[i].mr];
+    for(j=0;j<metadataArrays.length;j++)
+    {
+      if (metadataArrays[j]) {
+        for (k=0;k<metadataArrays[j].length;k++) {
+          if (typeof storedTagsArrays[j] == 'undefined') storedTagsArrays[j] = new Array();
+          storedTagsArrays[j][metadataArrays[j][k][tagName[j]]] = true;
+          // ^ conceptList[metadata.pages[i].cr[k].concept] = true; (if rolling through concepts)
+          // ^ conceptList['container'] = true; (ultimate result)
+          // ^ objectList[metadata.pages[i].or[k].object] = true; (if rolling through objects)
+          // ^ objectList['restartPolicy'] = true; (ultimate result)
+        }
+      }
+    }
+  }
+  var output = new Array();
+  for(i=0;i<tagName.length;i++)
+  {
+    // Phew! All tags in conceptList, objectList, and commandList!
+    // Loop through them and populate those drop-downs through html() injection
+    output = [];
+    output.push("<select id='" + tagName[i] + "' onchange='dropFilter(this)'>");
+    output.push("<option>---</option>");
+    Object.keys(storedTagsArrays[i]).sort().forEach(function (key) {
+      output.push("<option>" + key + "</option>");
+    });
+    output.push("</select>")
+    $(dropDowns[i]).html(output.join(""));
+  }
+  dropDownsPopulated = true;
+}
+function dropFilter(srcobj)
+{
+  // process the change of a drop-down value
+  // the ID of the drop down is either command, object, or concept
+  // these exact values are what topicsFilter() expects, plus a filter val
+  // which we get from .text() of :selected
+  console.log("dropFilter:" + $(srcobj).attr('id') + ":" + $(srcobj).find(":selected").text());
+  topicsFilter($(srcobj).attr('id').replace("#",""),$(srcobj).find(":selected").text(),"output");
+  for(i=0;i<tagName.length;i++)
+  {
+    if($(srcobj).attr('id')!=tagName[i]) selectDropDown(tagName[i],"---");
+  }
+}
+function selectDropDown(type,tag)
+{
+  // change drop-down selection w/o filtering
+  $("#" + type).val(tag);
+}
+</script>
+<style>
+#filters select{
+  font-size: 14px;
+  border: 1px #000 solid;
+}
+#filters {
+  padding-top: 20px;
+}
+</style>
+
+Click tags or use the drop downs to filter. Click table headers to sort or reverse sort.
+
+<p id="filters">
+Filter by Concept: <span id="conceptFilter" /><br/>
+Filter by Object: <span id="objectFilter" /><br/>
+Filter by Command: <span id="commandFilter" />
+</p>
+
+<div id="output" />