I'm writing a tree editor; initial HTML looks like this:
<ul class='treeroot'>
<li><img class='toggle' src="open.gif" border="0" id="folder1"
alt="">HTML
<ul id="branch1">
<li><img class='toggle' src="doc.gif" alt="">Tags, Tags,
Tags</li>
<li><img class='toggle' src="doc.gif" alt="">Hyperlinks</li>
<li><img class='toggle' src="doc.gif" alt="">Images</li>
<li><img class='toggle' src="doc.gif" alt="">Tables</li>
<li><img class='toggle' src="doc.gif" alt="">Forms</li>
</ul>
</li>
<li><img class='toggle' src="open.gif" border="0" id="folder2"
alt="">CSS
<ul id="branch2">
<li><img class='toggle' src="doc.gif" alt="">Inline Styles</li>
<li><img class='toggle' src="doc.gif" alt="">Document Wide
Styles</li>
<li><img class='toggle' src="doc.gif" alt="">External Style
Sheets</
li>
<li><img class='toggle' src="doc.gif" alt="">Formatting
Text</li>
<li><img class='toggle' src="doc.gif" alt="">Positioning</li>
</ul>
</li>
</ul>
... so the text of a list item is a sibling node to the image and the
subordinate list.
When the text of a list item is clicked on, the text node needs to be
replaced with a text input element, for which I have written the
following code (element is the element which receives the user's
click, which will usually be a list item element):
function startEditText(element) {
var text, ind, input;
text = $A(element.childNodes).find( function (node) {
return node.nodeType === Node.TEXT_NODE;
} );
input = document.createElement("input");
input.setAttribute("type", "text");
if (text) {
if (text.nodeValue) {
input.setAttribute("value", text.nodeValue.strip());
}
element.replaceChild(input, text);
} else {
element.appendChild(input);
}
input.focus();
}
This code works, but seems unduly complicated for what it does. Since
the Prototype DOM methods enumerate only over Elements, and not over
text nodes, I am wondering if the usual style is to wrap every text
node with an element, as in the following?
<ul class='treeroot'>
<li><img class='toggle' src="open.gif" border="0" id="folder1"
alt=""><span>HTML</span>
<ul id="branch1">
<li><img class='toggle' src="doc.gif" alt=""><span>Tags, Tags,
Tags</
span></li>
<li><img class='toggle' src="doc.gif" alt=""><span>Hyperlinks</
span></li>
<li><img class='toggle' src="doc.gif"
alt=""><span>Images</span></li>
<li><img class='toggle' src="doc.gif"
alt=""><span>Tables</span></li>
<li><img class='toggle' src="doc.gif"
alt=""><span>Forms</span></li>
</ul>
</li>
<li><img class='toggle' src="open.gif" border="0" id="folder2"
alt=""><span>CSS</span>
<ul id="branch2">
<li><img class='toggle' src="doc.gif" alt=""><span>Inline
Styles</
span></li>
<li><img class='toggle' src="doc.gif" alt=""><span>Document
Wide
Styles</span><img src="doc.gif" alt=""></li>
<li><img class='toggle' src="doc.gif" alt=""><span>External
Style
Sheets</span></li>
<li><img class='toggle' src="doc.gif" alt=""><span>Formatting
Text</
span></li>
<li><img class='toggle' src="doc.gif"
alt=""><span>Positioning</
span></li>
</ul>
</li>
</ul>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
