Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Dynamic tree display; next up: property monitoring
- Loading branch information
julien@igel.co.jp
committed
Apr 11, 2012
1 parent
7a02928
commit 27b05c6
Showing
5 changed files
with
140 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<title>⚐ Bender tree view</title> | ||
<meta charset="UTF-8"> | ||
<meta http-equiv="cache-control" content="no-cache"> | ||
<style> | ||
body { | ||
font-family: Univers, "Helvetica Neue", Helvetica, sans-serif; | ||
padding: 0; | ||
margin: 0; | ||
} | ||
.app { padding: 4px 8px; } | ||
</style> | ||
<script src="../flexo.js"></script> | ||
<script src="../bender.js"></script> | ||
</head> | ||
<body> | ||
<script> | ||
|
||
var load = function() | ||
{ | ||
if (this.uses.app) { | ||
this.uses.tree.make_tree_from_node(this.uses.app.component); | ||
} | ||
}; | ||
|
||
var args = flexo.get_args(); | ||
args.id = "app"; | ||
var context = bender.create_context(document.body); | ||
if (args.href) { | ||
var use = context.$("use", args); | ||
context.appendChild( | ||
context.$("component", | ||
context.$("view", | ||
context.$("use", { href: "tree.xml", id: "tree" }), | ||
context.$("html:div.app", | ||
context.$("use", args))), | ||
context.$("watch", | ||
context.$get({ use: "$self", event: "@rendered" }, load)))); | ||
context.appendChild(context.$("use", { q: "component" })); | ||
} | ||
|
||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
<component xmlns="http://bender.igel.co.jp" | ||
xmlns:html="http://www.w3.org/1999/xhtml"> | ||
<title>Bender tree visualizer</title> | ||
|
||
<view> | ||
<target q="head" once="true"> | ||
<html:style> | ||
.bender_tree { border-bottom: dashed thin black; padding-bottom: 8px; | ||
background-color: white; margin-top: 0; padding-top: 8px; } | ||
ul.bender_tree, ul.bender_tree ul { list-style-type: none; } | ||
.bender_tree span.tag { font-weight: bold; } | ||
.bender_tree span.attr { font-style: italic; } | ||
.bender_tree span.attr-value { font-family: monospace; } | ||
.bender_tree li.text { font-family: monospace; white-space: pre } | ||
</html:style> | ||
</target> | ||
<html:ul id="ul" class="bender_tree"/> | ||
</view> | ||
|
||
<script><![CDATA[ | ||
this._prototype.make_tree_from_node = function(node) | ||
{ | ||
flexo.listen(node.ownerDocument, "@refresh", (function(e) { | ||
var component = e.instance.component; | ||
var li = component.__li; | ||
if (li) { | ||
var parent = li.parentNode; | ||
var ref = li.nextSibling; | ||
parent.removeChild(li); | ||
parent.insertBefore(this.li_for_node(component), ref); | ||
} | ||
}).bind(this)); | ||
this.views.ul.appendChild(this.li_for_node(node)); | ||
}; | ||
this._prototype.li_for_node = function(node) | ||
{ | ||
if (node.nodeType === 1) { | ||
var li = this.component.$("html:li.elem", | ||
this.component.$("html:span.tag", node.localName)); | ||
[].forEach.call(node.attributes, function(attr) { | ||
if (!/^xmlns:?/.test(attr.name)) { | ||
li.appendChild(this.component.ownerDocument.createTextNode(" ")); | ||
li.appendChild(this.component.$("html:span.attr", attr.name)); | ||
li.appendChild(this.component.ownerDocument.createTextNode("=")); | ||
li.appendChild(this.component.$("html:span.attr-value", | ||
attr.value)); | ||
} | ||
}, this); | ||
var ul = li.appendChild(this.component.$("html:ul")); | ||
[].forEach.call(node.childNodes, function(ch) { | ||
var new_li = this.li_for_node(ch); | ||
if (new_li) ul.appendChild(new_li); | ||
}, this); | ||
if (ul.childNodes.length === 0) li.removeChild(ul); | ||
node.__li = li; | ||
return li; | ||
} else if ((node.nodeType === 3 || node.nodeType === 4) && | ||
/\S/.test(node.textContent)) { | ||
return this.component.$("html:li.text", node.textContent); | ||
} | ||
}; | ||
]]></script> | ||
|
||
</component> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,7 @@ | ||
<component xmlns="http://bender.igel.co.jp"> | ||
<app xmlns="http://bender.igel.co.jp"> | ||
<view> | ||
<p xmlns="http://www.w3.org/1999/xhtml"> | ||
Hello, world! | ||
</p> | ||
</view> | ||
</component> | ||
</app> |