Convert to Drilldown

For use pasting into the Drupal WYSIWYG editor.

by abbylangner

HTML

<button>Run It</button><br>
<textarea>This will be filled with the result for an easy copy-paste.</textarea>
<ul id="ddwApp-data">
  <li>Data Types, Identifiers and associated concepts
    <ul>
      <li>Primitive types
        <ul>
          <li>Arithmetic types</li>
          <li>Character / String types</li>
          <li>Booleans</li>
          <li>Type conversion (casts / promotions / demotions)</li>
          <li>Bitwise operator</li>
          <li>Mutability</li>
        </ul>
      </li>
      <li>Indirect types
        <ul>
          <li>Pointers</li>
          <li>References</li>
          <li>Aliasing</li>
        </ul>
      </li>
      <li>Aggregate types
        <ul>
          <li>Tuples/Records/Structs</li>
          <li>Enumerations</li>
          <li>Tabular Data</li>
          <li>Data Frames</li>
        </ul>
      </li>
      <li>Scope</li>
    </ul>
  </li>
  <li>Expressions, Operators and I/O statements
    <ul>
      <li>Arithmetic operators</li>
      <li>Assignment statements</li>
      <li>Boolean expressions
        <ul>
          <li>Logical operators</li>
          <li>Relational operators</li>
          <li>Compound Boolean expressions</li>
        </ul>
      </li>
      <li>Notions of equality (point v. structural equivalence)</li>
      <li>Order of operations</li>
      <li>Input/Output
        <ul>
          <li>Console-based statements</li>
          <li>File-based statements</li>
          <li>Cleaning and processing data</li>
        </ul>
      </li>
      <li>Higher-order functions
        <ul>
          <li>Map / Apply</li>
          <li>Fold</li>
          <li>Filter / Reduce</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Control Structures and Control Flow
    <ul>
      <li>Sequential control flow</li>
      <li>Branching
        <ul>
          <li>If statements</li>
          <li>If-else statements</li>
          <li>Switch statements</li>
          <li>Nested selection statements</li>
        </ul>
     ...

CSS

textarea {
  width: 300px;
  height: 100px;
}

JavaScript

jQuery(document).ready(function(){
	//Use the indexing provided by jQuery so each node in the tree has a numeric id
    jQuery("#ddwApp-data").find("li").each(function(index){
      var that = jQuery(this);
      that.attr("data-nodeid", index);
      that.attr("id", "ddw-tree-"+index);
      //that.on("click", ddwApp.drillDown);
    });
    jQuery("button").on("click", function(){
    	jQuery("textarea").val(jQuery("#ddwApp-data").html());
    });
});