Permalink
Browse files

Added bug #12 for tree component

  • Loading branch information...
1 parent 27b05c6 commit dda75cf130accc47900663ae2c89023bc0a892a8 julien@igel.co.jp committed Apr 11, 2012
Showing with 77 additions and 10 deletions.
  1. +9 −0 index.html
  2. +1 −1 lib/tree.html
  3. +67 −9 lib/tree.xml
View
@@ -662,6 +662,8 @@
<li id="bug.10" class="done">Placeholder nodes are not deleted.</li>
<li id="bug.11" class="done">Calculator: 1+2+3+= is 9, should be
6.</li>
+ <li id="bug.12">Tree: after re-rendering the tree component, it
+ moves to the bottom of the page instead of staying at the top.</li>
</ol>
</section>
@@ -709,6 +711,12 @@
declaratively.</li>
<li>Restrict value ranges for properties (min/max, choice,
etc.)</li>
+ <li>Track down additions of content to <code class="elem">use</code>
+ elements and reflect that in the corresponding <code
+ class="elem">content</code> node of the component. Add a <code
+ class="elem">empty</code> element to prevent default
+ content? (This may affect/be affected by <a href="bug.9">bug
+ #9</a>.)</li>
</ul>
</section>
@@ -717,6 +725,7 @@
<ul>
<li>Params bar should have an "about" button displaying the content
of the <code class="elem">desc</code> of the running app.</li>
+ <li>Splitters (vertical/horizontal)</li>
</ul>
</section>
View
@@ -21,7 +21,7 @@
var load = function()
{
if (this.uses.app) {
- this.uses.tree.make_tree_from_node(this.uses.app.component);
+ this.uses.tree.make_tree(this.uses.app);
}
};
View
@@ -1,27 +1,44 @@
<component xmlns="http://bender.igel.co.jp"
+ xmlns:e="http://bender.igel.co.jp/e"
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 {
+ border-bottom: dashed thin black;
+ border-top: dashed thin black;
+ padding-bottom: 8px;
+ background-color: white;
+ margin-top: 0;
+ padding-top: 8px;
+ }
+ .bender_tree, .bender_tree ul {
+ list-style-type: none;
+ padding-left: 16px; }
.bender_tree span.tag { font-weight: bold; }
+ .bender_tree .html { color: #f80; }
+ .bender_tree .svg { color: #f08; }
+ .bender_tree .xlink { color: #f88; }
+ .bender_tree .foreign { color: #f00; }
+ .bender_tree .bender { color: #08f; }
.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 }
+ .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)
+ this._prototype.make_tree = function(instance)
{
- flexo.listen(node.ownerDocument, "@refresh", (function(e) {
+ flexo.listen(instance.use.ownerDocument, "@refresh", (function(e) {
var component = e.instance.component;
var li = component.__li;
if (li) {
@@ -31,18 +48,33 @@
parent.insertBefore(this.li_for_node(component), ref);
}
}).bind(this));
- this.views.ul.appendChild(this.li_for_node(node));
+ var ul = this.component.querySelector("ul");
+ ul.appendChild(this.li_for_node(instance.use));
+ ul.appendChild(this.li_for_node(instance.component));
};
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));
+ this.component.$("html:span.tag{0}"
+ .fmt(node.namespaceURI === flexo.XHTML_NS ? ".html" :
+ node.namespaceURI === flexo.SVG_NS ? ".svg" : ""),
+ 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.$("html:span.attr{0}"
+ .fmt(attr.namspaceURI === flexo.XHTML_NS ? ".html" :
+ attr.namespaceURI === flexo.SVG_NS ? ".svg" :
+ attr.namespaceURI === flexo.XLINK_NS ? ".xlink" :
+ attr.namespaceURI === bender.NS_B ? ".bender" :
+ attr.namespaceURI === bender.NS_E ? ".bender" :
+ attr.namespaceURI === bender.NS_F ? ".bender" :
+ attr.namespaceURI === bender.NS_J ? ".bender" :
+ attr.namespaceURI ? ".foreign" : ""),
+ attr.name));
li.appendChild(this.component.ownerDocument.createTextNode("="));
li.appendChild(this.component.$("html:span.attr-value",
attr.value));
@@ -56,6 +88,9 @@
if (ul.childNodes.length === 0) li.removeChild(ul);
node.__li = li;
return li;
+ */
+ return this.component.$("use", { ref: "elem", "e:tag": node.localName,
+ "e:ns": node.namespaceURI });
} else if ((node.nodeType === 3 || node.nodeType === 4) &&
/\S/.test(node.textContent)) {
return this.component.$("html:li.text", node.textContent);
@@ -64,4 +99,27 @@
]]></script>
+ <component id="elem">
+ <view>
+ <html:li>
+ <html:span id="tag" class="tag"/>
+ </html:li>
+ </view>
+ <watch>
+ <get property="tag"/>
+ <set view="tag"/>
+ </watch>
+ <watch>
+ <get property="ns">
+ if (value === flexo.XHTML_NS) {
+ flexo.add_class(this.views.tag, "html");
+ } else if (value === flexo.SVG_NS) {
+ flexo.add_class(this.views.tag, "svg");
+ } else if (value !== bender.NS) {
+ flexo.add_class(this.views.tag, "foreign");
+ }
+ </get>
+ </watch>
+ </component>
+
</component>

0 comments on commit dda75cf

Please sign in to comment.