A working prototype: rendering .leo files in a browser

[Edward K. Ream]

The attached file is a working prototype of a web page that shows .leo files in a browser.

Load the page, and click the "headlines".  They will expand and contract.  Also the body text gets loaded with dummy for each selected node.

This is only a prototype.  It assumes leo_to_html.xsl has produced nested <div class="node"> elements representing outline nodes. leo_to_html.xsl doesn't do this now, but it soon will.

The real work is the jQuery script embedded in the file::

    <script>
    $(document).ready(function(){
        $("h1").click(function(){
            var h = $(this).text();
            var children = $(this).parent().children("div.node");
            children.toggle();
            $("pre.body-text").text(h);
        });
    });
    </script>

This was my first jQuery script. It took a lot of work...

I finally saw that simplifying the html produced by leo_to_html.xsl would simplify the script.  The css takes care of the indentation::

    <style>
    div.node {
        position: relative;
        left: 20px;
        background:Khaki;
    }
    </style>

The post-script shows the <div> elements representing Leo nodes.  It also discusses how to further simplify the html generated by xslt.

Still to do:

- Update leo_to_html.xsl to produce the kind of elements shown in the Post Script.  Body text will contained in a "text" attribute of <div class="node"> elements.

- Update the jQuery script shown above to get body text from <div> elements.

- Add additional html elements and css selectors so that the outline and body panes have constant sizes.

- Clicking an unselected node should select it without expanding/contracting it.

- Additional refinements, such as keyboard navigation.

- Merge my brother's server-side work with this prototype.  Speed thinks he will be done soon.  I expect no serious problems.

===== Summary

The html elements and the corresponding jQuery script are dirt simple.  This will simplify the integration of this prototype with Speed's server-side work.

Edward

P.S. Given this outline::

  + test.leo
     - node 1
     + node 2
       - node 2.1
     - node 3

The resulting html is as follows (with debugging attributes removed)::

    <div class="node">
        <h1>test.leo</h1>
        <div class="node">
            <h1>node 1</h1>
        </div>
        <div class="node">
            <h1>node 2</h1>
            <div class="node">
                <h1>node 2-1</h1>
            </div>
        </div>
        <div class="node">
            <h1>node 3</h1>
        </div>
    </div>

The <h1> elements could be replaced by an attribute in the div.node class.  css tweaks would show the headlines as before.

In that case, the html could become::

   <div class="node" h="test.leo">
        <div class="node" h="node 1"/>
        <div class="node" h="node 2">
            <div class="node" h="node 2.1/>
        </div>
        <div class="node" h="node 3"/>
    </div>

Such a change would likely further simplify the jQuery script.

EKR