Nice Formatting Option

[hexonaut]

Add an option in HtmlSerializer to produce easy to read output.

[axelhuizinga]

just tried an implementation which seems to work well regarding the formatting - however some strange result in the visible output when applied to the test there are parts missing and appear after using the buttons - any hints? this are my changes in the class: public static var prettyPrint:Bool = false; public static var iStr:String = '\t'; public static var eol:String = '\r\n'; var indent:Int; var actIndent:String;

public function new () {
    super();
    indent = 0;
    useCache = true;
    useEnumIndex = USE_ENUM_INDEX;
    attr = false;
}

function text (t:VirtualNode<hxdom.html.Text>):Void {
    if (prettyPrint)
    buf.add("".lpad(iStr, indent) + iStr + t.node.data + eol );
    else
    buf.add(t.node.data);
}

function element (e:VirtualNode<Element>):Void {
    openTag(e);
    indent++;
    children(e);
    indent--;
    closeTag(e);
}

function openTag (e:VirtualNode<Element>):Void {
    if(prettyPrint)
    buf.add("".lpad(iStr, indent) + "<" + e.node.tagName.toLowerCase());
    else
    buf.add("<" + e.node.tagName.toLowerCase());
    attrs(e);
    buf.add(prettyPrint && e.node.hasChildNodes() ? ">" + eol: ">");
}

function closeTag (e:VirtualNode<Element>):Void {
    if(prettyPrint)
    buf.add((e.node.hasChildNodes()? "".lpad(iStr, indent):'') + "</" + e.node.tagName.toLowerCase() + ">" + eol);
    else
    buf.add("</" + e.node.tagName.toLowerCase() + ">");
}

[hexonaut]

Adding formatting requires modification of the code that builds the text nodes. If you look at the output any element that contains text, you can see that the element stores the length of each section of the text to allow splitting the text during the js boot process. This is stored under the data-hxid attribute and is built by the elemIds() method in HtmlSerializer.

The extra formatting characters will break the length calculations because the text you supply via elem.addText() gets mixed in with those format characters.

It's this consideration that makes it not so straight forward to add formatting. I still think it can be done though.

Does that help?

[axelhuizinga]

yes that was the missing piece. looks like I got it working so far, just send you a pull request but be warned - git is pretty new for me

Am 06.01.2014 23:20, schrieb Sam:

Adding formatting requires modification of the code that builds the text nodes. If you look at the output any element that contains text, you can see that the element stores the length of each section of the text to allow splitting the text during the js boot process. This is stored under the data-hxid attribute and is built by the elemIds() method in HtmlSerializer.

The extra formatting characters will break the length calculations because the text you supply via elem.addText() gets mixed in with those format characters.

It's this consideration that makes it not so straight forward to add formatting. I still think it can be done though.

Does that help?

— Reply to this email directly or view it on GitHub https://github.com/Blank101/haxe-dom/issues/12#issuecomment-31693649.

[hexonaut]

Looks great at first glance! Could you clean up the pull request a bit though? There are a lot of collateral changes being applied with your pull request, and I'm having a hard time finding the actual changes you've made.

It may be easiest to start from a fresh clone of hxdom. IE delete your current repo, re-fork it then add just the format changes. Be sure to just add the files you modified (ie 'git add src/hxdom/HtmlSerializer.hx', etc).

I'm happy to help with git related questions as well.