examples.html

<html>
  <head>
    <title>JS-Tree Examples</title>
    <style type="text/css">
      body {font-family: sans-serif;}
    </style>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/treeflex@2.0.1/dist/css/treeflex.css" />
    <script type="text/javascript" src="./Tree.js"></script>
    <script type="text/javascript">
      var store = [
                    {
                      'id'       : 1,
                      'parentId' : 0,
                      'uri'      : '#',
                      'text'     : 'HTML Tutorials'
                    },
                    {
                      'id'       : 2,
                      'parentId' : 1,
                      'uri'      : 'https://html.com/',
                      'text'     : 'HTML.com: Study HTML and Learn to Code With Our Step-By-Step Guide'
                    },
                    {
                      'id'       : 3,
                      'parentId' : 1,
                      'uri'      : 'https://www.w3schools.com/html/',
                      'text'     : 'HTML5 Tutorial'
                    },
                    {
                      'id'       : 4,
                      'parentId' : 1,
                      'uri'      : 'https://www.htmldog.com/guides/html/beginner/',
                      'text'     : 'HTML Beginner Tutorial'
                    },
                    {
                      'id'       : 5,
                      'parentId' : 0,
                      'uri'      : '#',
                      'text'     : 'CSS Tutorials'
                    },
                    {
                      'id'       : 6,
                      'parentId' : 5,
                      'uri'      : 'https://www.w3schools.com/Css/',
                      'text'     : 'CSS Tutorial'
                    },
                    {
                      'id'       : 7,
                      'parentId' : 5,
                      'uri'      : 'https://www.tutorialspoint.com/css/css3_tutorial.htm',
                      'text'     : 'CSS3 - Tutorial'
                    },
                    {
                      'id'       : 8,
                      'parentId' : 5,
                      'uri'      : 'https://www.lynda.com/CSS-training-tutorials/447-0.html',
                      'text'     : 'CSS Training and Tutorials'
                    },
                    {
                      'id'       : 9,
                      'parentId' : 0,
                      'uri'      : '#',
                      'text'     : 'JavaScript Tutorials'
                    },
                    {
                      'id'       : 10,
                      'parentId' : 9,
                      'uri'      : 'https://javascript.info/',
                      'text'     : 'The Modern Javascript Tutorial'
                    },
                    {
                      'id'       : 11,
                      'parentId' : 9,
                      'uri'      : 'https://www.codecademy.com/learn/introduction-to-javascript',
                      'text'     : 'Introduction To JavaScript'
                    },
                    {
                      'id'       : 12,
                      'parentId' : 9,
                      'uri'      : 'https://www.javascript.com/try',
                      'text'     : 'Start learning JavaScript with our free real time tutorial'
                    },
                    {
                      'id'       : 13,
                      'parentId' : 0,
                      'uri'      : '#',
                      'text'     : 'PHP Tutorials'
                    },
                    {
                      'id'       : 14,
                      'parentId' : 13,
                      'uri'      : 'https://www.tutorialrepublic.com/php-tutorial/',
                      'text'     : 'PHP Tutorial - An Ultimate Guide for Beginners'
                    },
                    {
                      'id'       : 15,
                      'parentId' : 13,
                      'uri'      : 'https://www.guru99.com/php-tutorials.html',
                      'text'     : 'PHP Tutorial for Beginners: Learn in 7 Days'
                    },
                    {
                      'id'       : 16,
                      'parentId' : 13,
                      'uri'      : 'https://www.sololearn.com/Course/PHP/',
                      'text'     : 'PHP Tutorial | SoloLearn: Learn to code for FREE!'
                    }
                  ];

      // Create new Tree from store data
      var tree = new Tree(store);
      var template = "<a href=\"<%uri%>\" target=\"_blank\"><%text%></a>";
      var view1 = tree.graph(template);

      // Find all Nodes whose link text contain "Beginner" and graph the search results
      var results = tree.search('text', Tree.OP_CONTAINS_SUBSTR, 'Beginner', template);

      // Get the branch of the Tree containing Node with nodeId of 15
      var branch = tree.getNodeById(15).getBranch();
      var view2 = branch.graph(template);

      // Get the limb of the Tree containing Node with nodeId of 10
      var limb = tree.getNodeById(10).getLimb();
      var view3 = limb.graph(template);

      // Get the stem based on Node with nodeId of 13
      var stem = tree.getNodeById(13).getStem();
      var view4 = stem.graph(template);
    </script>
  </head>
  <body>
    <h1>JS-Tree Examples</h1>
    <h2>Example 1: Full Tree</h2>
    <p>Create a new Tree:</p>
    <div id="view-1"></div>
    <script type="text/javascript">document.getElementById('view-1').innerHTML = view1;</script>
    <h2>Example 2: Search Results</h2>
    <p>Search the Tree for Nodes having "Beginner" in their link text:</p>
    <div id="results"></div>
    <script type="text/javascript">document.getElementById('results').innerHTML = results;</script>
    <h2>Example 3: Branch</h2>
    <p>Get the branch of the Tree containing Node with nodeId of 15:</p>
    <div id="view-2"></div>
    <script type="text/javascript">document.getElementById('view-2').innerHTML = view2;</script>
    <h2>Example 4: Limb</h2>
    <p>Get the limb of the Tree containing Node with nodeId of 10:</p>
    <div id="view-3"></div>
    <script type="text/javascript">document.getElementById('view-3').innerHTML = view3;</script>
    <h2>Example 5: Stem</h2>
    <p>Get the stem based on Node with nodeId of 13:</p>
    <div id="view-4"></div>
    <script type="text/javascript">document.getElementById('view-4').innerHTML = view4;</script>
    <h2>Example 6: Modify the Tree</h2>
    <p>Add a top-level Node and re-parent the existing top-level Nodes:</p>
    <div id="view-5"></div>
    <script type="text/javascript">
      var foo = tree.createNode(
                 {
                   'id'       : 17,
                   'parentId' : 0,
                   'uri'      : '#',
                   'text'     : 'Tutorials'
                  }
                );
      tree.appendChild(foo);
      while (tree.root.childNodes.length > 1) {
        child = tree.removeChild(0);
        foo.appendChild(child);
      }
      document.getElementById('view-5').innerHTML = tree.graph(template);
    </script>
    <h2>Example 7: Fun with Templates!</h2>
    <p>While this isn't a "TreeView" script <span style="font-style: italic;">per se</span>,
       you can use CSS to style it so it'll work with some TreeView scripts. Here, we use
       <a href="https://www.cssscript.com/semantic-hierarchy-tree-treeflex/" target="_blank">Treeflex</a>
       to turn Example 6 into an organizational chart. (This also works with the PHP version
       of this script.)
    </p>
    <div class="tf-tree" id="view-6"></div>
    <script type="text/javascript">
      template = "<span class=\"tf-nc\"><a href=\"<%uri%>\" target=\"_blank\"><%text%></a></span>";
      document.getElementById('view-6').innerHTML = tree.graph(template);
    </script>
  </body>
</html>