Show component hierarchy.

mutantzombie · mutantzombie · commit 9c7bcf6cce87 · 2013-12-27T09:04:16.000-08:00
diff --git a/viewstate.html b/viewstate.html
@@ -2,27 +2,23 @@
 <html>
 <head>
 <meta charset="UTF-8">
-<!-- Copyright 2011-2013, Mike Shema <mike@deadliestwebattacks.com> -->
-<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
-<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/treeview/assets/skins/sam/treeview.css" />
-<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
-<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/treeview/treeview-min.js"></script>
-<script src="Editor.js"></script>
+<!--
+  Copyright 2011-2013, Mike Shema <mike@deadliestwebattacks.com>
+  Source code at https://github.com/mutantzombie/JavaScript-ViewState-Parser
+-->
+<script src="http://yui.yahooapis.com/3.14.1/build/yui/yui-min.js"></script>
+<!-- <script src="Editor.js"></script> -->
 <script src="Parser.js"></script>
 <script src="viewstate.js"></script>
 </head>
 <body>
-<form action="javascript:void(0)" onSubmit="deserialize(this.vs.value); return false;">
-<textarea name="vs" cols="80" rows="7"></textarea>
-<br><input type="submit"><input type="reset" onclick="c()">
+<form action="javascript:void(0)" onSubmit="return false;">
+<textarea id="vs" name="vs" cols="80" rows="7">/wEPDwUENTM4MWRkhsjF+62gWnhYUcEyuRwTHxGDVzA=</textarea>
+<div id="decode">Decode</div>
 </form>
-<pre>
 <div id="results"></div>
-<div id="expandcontractdiv"><a id="expand" href="#">Expand all</a>&nbsp;<a id="collapse" href="#">Collapse all</a></div>
+<pre>
 <div id="resultTree"></div>
 </pre>
-<script>
-//test2()
-</script>
 </body>
 </html>
diff --git a/viewstate.js b/viewstate.js
@@ -8,11 +8,12 @@ YUI().use('event', 'node', 'tree', function (Y) {
     var div = Y.one('#resultTree'),
         item = null,
         tree = new Y.Tree(),
-        node = tree.rootNode;
+        node = tree.rootNode,
+        spaces = '....................';
 
     data.forEach(function(d) {
       node.append({id: d.str()});
-      item = Y.Node.create(d.str() + '<br>');
+      item = Y.Node.create(spaces.substring(0, d.depth()) + ' ' + d.str() + '<br>');
       div.append(item);
     });
 //    console.log(tree);
@@ -35,77 +36,3 @@ YUI().use('event', 'node', 'tree', function (Y) {
   Y.one('#decode').on('click', decode);
 
 });
-
-function c() {
-  document.getElementById("results").innerHTML = "";
-}
-
-function deserialize(o) {
-  var e = document.getElementById("results");
-  var s = "invalid";
-
-  if(!capabilityChecks()) {
-    s = "browser does not support Typed Array Specification (http://www.khronos.org/registry/typedarray/specs/latest/)";
-  }
-  else if(undefined != o && "" !== o) {
-    var vs = new ViewState(o);
-    if(vs.isValid()) {
-      vs.consume();
-      var c = vs.components();
-      populateTree(c);
-      s = "";
-    }
-  }
-  e.innerHTML = s;
-}
-
-function populateTree(c) {
-  var tree = new YAHOO.widget.TreeView("resultTree");
-  var rootNode = tree.getRoot();
-
-  var node = rootNode;
-  var parentNode = rootNode;
-  var nodes = [];
-  nodes[0] = rootNode;
-  nodes[1] = rootNode;
-
-  var e = c[0];
-  var prevDepth = 0;
-  var i = 0;
-  while(i < c.length) {
-    e = c[i];
-
-    if(e.depth() > prevDepth) {
-      parentNode = nodes[prevDepth];
-    }
-    else if(e.depth() < prevDepth) {
-      if(undefined == nodes[e.depth()])
-        nodes[e.depth()] = rootNode;
-
-      parentNode = nodes[e.depth()].parent;
-    }
-
-    if(undefined == parentNode)
-      parentNode = rootNode;
-  
-    node = new YAHOO.widget.TextNode(e.str(), parentNode, false);
-
-    nodes[e.depth()] = node;
-    prevDepth = e.depth();
-    ++i;
-  }
-
-  YAHOO.util.Event.on("expand", "click", function(e) {
-      YAHOO.log("Expanding all TreeView  nodes.", "info", "example");
-      tree.expandAll();
-      YAHOO.util.Event.preventDefault(e);
-    });
-    
-    YAHOO.util.Event.on("collapse", "click", function(e) {
-      YAHOO.log("Collapsing all TreeView  nodes.", "info", "example");
-      tree.collapseAll();
-      YAHOO.util.Event.preventDefault(e);
-    });
-
-  tree.draw();
-}
