http://leoeditor.com/load-leo.html is a .leo file reader
77 views
Skip to first unread message
Edward K. Ream
Feb 25, 2015, 5:20:23 PM2/25/15
to leo-e...@googlegroups.com
http://leoeditor.com/load-leo.html is a web page that will show you the contents of a .leo file.
This is a beta page, but it is usable. The page works for Mozilla. Not sure about other browsers. My brother Speed assures me there are no security holes.
Speed will be working on server-side stuff from 8pm to midnight eastern time. The page may not work during those hours.
===== Using this page
The "Upload from your hard drive" button loads a .leo file from you hard drive. Alternatively, you can paste a url into the text box and click the "Upload from the internet" button. If you want to view a .leo file on github, be sure to use the "raw" url. For example, use::
https://raw.githubusercontent.com/leo-editor/leo-editor/master/leo/test/test.leo
*not*::
https://github.com/leo-editor/leo-editor/blob/master/leo/test/test.leo
Either way, the leoeditor.com server will replace the page by the .leo file as rendered by Ville's leo_to_html.xsl file. The new page will be called something like::
http://leoeditor.com/show-leo-0004.leo
There can be up to 1000 such pages open at once.
**Important**: At present, there must be *some* kind of <?xml-stylesheet> element in the .leo file. Many leo files have the following do-nothing line near the start::
<?xml-stylesheet ekr_test?>
That's fine. If there is *any* such line, Speed's server-side stuff will replace it with::
<?xml-stylesheet type="text/xsl" href="leo_to_html.xsl"?>
Speed will soon add the above line even if there is no stylesheet element.
I am working on improving leo_to_html.xsl so that nodes can be expanded and contracted. This will happen soon(TM).
Edward
This is a beta page, but it is usable. The page works for Mozilla. Not sure about other browsers. My brother Speed assures me there are no security holes.
Speed will be working on server-side stuff from 8pm to midnight eastern time. The page may not work during those hours.
===== Using this page
The "Upload from your hard drive" button loads a .leo file from you hard drive. Alternatively, you can paste a url into the text box and click the "Upload from the internet" button. If you want to view a .leo file on github, be sure to use the "raw" url. For example, use::
https://raw.githubusercontent.com/leo-editor/leo-editor/master/leo/test/test.leo
*not*::
https://github.com/leo-editor/leo-editor/blob/master/leo/test/test.leo
Either way, the leoeditor.com server will replace the page by the .leo file as rendered by Ville's leo_to_html.xsl file. The new page will be called something like::
http://leoeditor.com/show-leo-0004.leo
There can be up to 1000 such pages open at once.
**Important**: At present, there must be *some* kind of <?xml-stylesheet> element in the .leo file. Many leo files have the following do-nothing line near the start::
<?xml-stylesheet ekr_test?>
That's fine. If there is *any* such line, Speed's server-side stuff will replace it with::
<?xml-stylesheet type="text/xsl" href="leo_to_html.xsl"?>
Speed will soon add the above line even if there is no stylesheet element.
I am working on improving leo_to_html.xsl so that nodes can be expanded and contracted. This will happen soon(TM).
Edward
Matt Wilkie
Feb 26, 2015, 10:19:45 PM2/26/15
to leo-e...@googlegroups.com
Oh this is neat, thank you Edward and Speed!
Matt--
You received this message because you are subscribed to the Google Groups "leo-editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leo-editor+...@googlegroups.com.
To post to this group, send email to leo-e...@googlegroups.com.
Visit this group at http://groups.google.com/group/leo-editor.
For more options, visit https://groups.google.com/d/optout.
Edward K. Ream
Mar 3, 2015, 3:46:11 PM3/3/15
to leo-e...@googlegroups.com
On Wednesday, February 25, 2015 at 4:20:23 PM UTC-6, Edward K. Ream wrote:
This page is now uses a rewritten version of leo_to_html.xsl, committed at 68f4e32 and just uploaded to leoeditor.com. To test this out, just visit http://leoeditor.com/load-leo.html upload a file and see what happens.
Edward
P.S. Here are some technical details. The xslt code in leo_to_html.xsl is essentially complete. Given test.leo as follows::
<?xml version="1.0" encoding="utf-8"?>
<!-- Created by Leo: http://leoeditor.com/leo_toc.html -->
<?xml-stylesheet type="text/xsl" href="leo_to_html.xsl"?>
<leo_file xmlns:leo="http://leoeditor.com/namespaces/leo-python-editor/1.1" >
<leo_header file_format="2" tnodes="0" max_tnode_index="0" clone_windows="0"/>
<globals body_outline_ratio="0.50" body_secondary_ratio="0.50">
<global_window_position top="50" left="50" height="832" width="1308"/>
<global_log_window_position top="0" left="0" height="0" width="0"/>
</globals>
<preferences/>
<find_panel_settings/>
<vnodes>
<v t="ekr.20150217160307.26"><vh>test.leo</vh>
<v t="ekr.20150217160307.27"><vh>node 1</vh></v>
<v t="ekr.20150217160307.28"><vh>node 2</vh>
<v t="ekr.20150303091549.1"><vh>node 2-1</vh></v>
</v>
<v t="ekr.20150303091549.2"><vh>node 3</vh></v>
</v>
</vnodes>
<tnodes>
<t tx="ekr.20150217160307.26">This is a test</t>
<t tx="ekr.20150217160307.27">Node 1 text.</t>
<t tx="ekr.20150217160307.28">Node 2 text.</t>
<t tx="ekr.20150303091549.1">node 2-1 text.</t>
<t tx="ekr.20150303091549.2">Node 3 text.</t>
</tnodes>
</leo_file>
the transform creates something like the following web page::
@tabwidth -2
<html>
<head>
<style>
pre { background:#FFE7C6; }
div.outlinepane {
height: 3.0in;
}
div.bodypane,div.body-text {
height: 2.0in;
}
div.tnode {
visibility: hidden;
height: 0;
}
div.node {
position: relative;
left: 20px;
background:Khaki;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h1").click(function(){
$(this).parent().children("div.node").toggle();
// The parent div's id is v.x.
// Find the tnode div whose id is t.x.
console.clear();
parent_id=$(this).parent().attr("id");
if (parent_id) {
target=$(this).parent().attr("id").substring(2);
console.log("clicked:"+$(this).text())
// console.log("parent:"+$(this).parent())
// console.log("target:"+target)
$(".tnode").each(function(){
console.log($(this).attr("id"))
target2=$(this).attr("id").substring(2);
if (target === target2) {
console.log("found:"+target2)
$("pre.body-text").text($(this).text());
};
}); // end .each.
};
});
});
</script>
</head>
<body>
<div class="tnodes">
<div class="tnode" id="ekr.20150217160307.26">This is a test</div>
<div class="tnode" id="ekr.20150217160307.27">Node 1 text.</div>
<div class="tnode" id="ekr.20150217160307.28">Node 2 text.</div>
<div class="tnode" id="ekr.20150303091549.1">node 2-1 text.</div>
<div class="tnode" id="ekr.20150303091549.2">Node 3 text.</div>
</div>
<div class="outlinepane">
<div class="node" id="ekr.20150217160307.26">
<h1>test.leo</h1>
<div class="node" id="ekr.20150217160307.27">
<h1>node 1</h1>
</div>
<div class="node" id="ekr.20150217160307.28">
<h1>node 2</h1>
<div class="node" id="ekr.20150303091549.1">
<h1>node 2-1</h1>
</div>
</div>
<div class="node" id="ekr.20150303091549.2">
<h1>node 3</h1>
</div>
</div>
</div>
<div class="bodypane"><h1>Body Pane
</h1><pre class="body-text">body</pre>
</div>
</body>
</html>
The tnodes div is essentially a lookup table. It could be converted to a proper javascript dict on entry for greater speed.
The jQuery script above is functional when the transformed page sent back to the browser. This script expands and contracts nodes, and also puts the proper body text in the body pane.
Edward
<leo_header file_format="2" tnodes="0" max_tnode_index="0" clone_windows="0"/>
<globals body_outline_ratio="0.50" body_secondary_ratio="0.50">
<global_window_position top="50" left="50" height="832" width="1308"/>
<global_log_window_position top="0" left="0" height="0" width="0"/>
</globals>
<preferences/>
<find_panel_settings/>
<vnodes>
<v t="ekr.20150217160307.26"><vh>test.leo</vh>
<v t="ekr.20150217160307.27"><vh>node 1</vh></v>
<v t="ekr.20150217160307.28"><vh>node 2</vh>
<v t="ekr.20150303091549.1"><vh>node 2-1</vh></v>
</v>
<v t="ekr.20150303091549.2"><vh>node 3</vh></v>
</v>
</vnodes>
<tnodes>
<t tx="ekr.20150217160307.26">This is a test</t>
<t tx="ekr.20150217160307.27">Node 1 text.</t>
<t tx="ekr.20150217160307.28">Node 2 text.</t>
<t tx="ekr.20150303091549.1">node 2-1 text.</t>
<t tx="ekr.20150303091549.2">Node 3 text.</t>
</tnodes>
</leo_file>
the transform creates something like the following web page::
@tabwidth -2
<html>
<head>
<style>
pre { background:#FFE7C6; }
div.outlinepane {
height: 3.0in;
}
div.bodypane,div.body-text {
height: 2.0in;
}
div.tnode {
visibility: hidden;
height: 0;
}
div.node {
position: relative;
left: 20px;
background:Khaki;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h1").click(function(){
$(this).parent().children("div.node").toggle();
// The parent div's id is v.x.
// Find the tnode div whose id is t.x.
console.clear();
parent_id=$(this).parent().attr("id");
if (parent_id) {
target=$(this).parent().attr("id").substring(2);
console.log("clicked:"+$(this).text())
// console.log("parent:"+$(this).parent())
// console.log("target:"+target)
$(".tnode").each(function(){
console.log($(this).attr("id"))
target2=$(this).attr("id").substring(2);
if (target === target2) {
console.log("found:"+target2)
$("pre.body-text").text($(this).text());
};
}); // end .each.
};
});
});
</script>
</head>
<body>
<div class="tnodes">
<div class="tnode" id="ekr.20150217160307.26">This is a test</div>
<div class="tnode" id="ekr.20150217160307.27">Node 1 text.</div>
<div class="tnode" id="ekr.20150217160307.28">Node 2 text.</div>
<div class="tnode" id="ekr.20150303091549.1">node 2-1 text.</div>
<div class="tnode" id="ekr.20150303091549.2">Node 3 text.</div>
</div>
<div class="outlinepane">
<div class="node" id="ekr.20150217160307.26">
<h1>test.leo</h1>
<div class="node" id="ekr.20150217160307.27">
<h1>node 1</h1>
</div>
<div class="node" id="ekr.20150217160307.28">
<h1>node 2</h1>
<div class="node" id="ekr.20150303091549.1">
<h1>node 2-1</h1>
</div>
</div>
<div class="node" id="ekr.20150303091549.2">
<h1>node 3</h1>
</div>
</div>
</div>
<div class="bodypane"><h1>Body Pane
</h1><pre class="body-text">body</pre>
</div>
</body>
</html>
The tnodes div is essentially a lookup table. It could be converted to a proper javascript dict on entry for greater speed.
The jQuery script above is functional when the transformed page sent back to the browser. This script expands and contracts nodes, and also puts the proper body text in the body pane.
Edward
Edward K. Ream
Mar 3, 2015, 3:58:38 PM3/3/15
to leo-e...@googlegroups.com
On Tuesday, March 3, 2015 at 2:46:11 PM UTC-6, Edward K. Ream wrote:
On Wednesday, February 25, 2015 at 4:20:23 PM UTC-6, Edward K. Ream wrote:
This page is now uses a rewritten version of leo_to_html.xsl, committed at 68f4e32 and just uploaded to leoeditor.com. To test this out, just visit http://leoeditor.com/load-leo.html upload a file and see what happens.
My test files were too small. For larger outlines the outline pane covers the body pane. Instead, each pane should fill about 50% of the screen and each should be scrollable. This is just a matter of tweaking the css...Anyone have any suggestions in this area?
Edward
Terry Brown
Mar 3, 2015, 4:06:52 PM3/3/15
to leo-e...@googlegroups.com
On Tue, 3 Mar 2015 12:58:38 -0800 (PST)
div.outlinepane {
height: 50%;
overflow: auto;
}
div.bodypane {
height: 50%;
overflow: auto;
}
Cheers -Terry
> Edward
>
> >
>
height: 50%;
overflow: auto;
}
div.bodypane {
height: 50%;
overflow: auto;
}
Cheers -Terry
> Edward
>
> >
>
Edward K. Ream
Mar 3, 2015, 8:35:58 PM3/3/15
to leo-editor
On Tue, Mar 3, 2015 at 3:06 PM, 'Terry Brown' via leo-editor <leo-e...@googlegroups.com> wrote:
div.outlinepane{
height: 50%;
overflow: auto;
}
div.bodypane {
height: 50%;
overflow: auto;
}
Thanks Terry. Much better. Now the outline pane scrolls and the body pane is always visible. Using a fixed height may simulate Leo's panes more accurately, but that's a nit for now.
Speed and I are working on last details. At present, the correct xsl transform will be applied as long as there is *any* <?xml-stylesheet> element in the file. For example::
<?xml-stylesheet type="text/xsl" href="ekr_test"?>
<?xml-stylesheet type="text/xsl" href="ekr_test"?>
This is ridiculous value arises from the default value of the following setting:
@string stylesheet = ekr_test
@string stylesheet = ekr_test
Speed's client side code translates this to::
<?xml-stylesheet type="text/xsl" href="/leo_to_html.xsl"?>
Note the leading slash in the href.
However, the transform is not applied properly if there is no stylesheet element. Speed will likely fix this tomorrow.
**Important**: There are probably bugs in how Leo handles the @string stylesheet setting. For now, though, Speed's switcharoo the the stylesheet element makes this moot.
Edward
Edward K. Ream
Mar 4, 2015, 5:56:35 AM3/4/15
to leo-e...@googlegroups.com
On Tuesday, March 3, 2015 at 2:46:11 PM UTC-6, Edward K. Ream wrote:
On Wednesday, February 25, 2015 at 4:20:23 PM UTC-6, Edward K. Ream wrote:
This page is now uses a rewritten version of leo_to_html.xsl, committed at 68f4e32 and just uploaded to leoeditor.com.
I'll mention one stumbling block that took me days to figure out. And the stack overflow answers are misleading, or just wrong.
It is either a very bad idea, or just plain impossible, to generate an attribute field using something like::
id='<xsl:value-of select="@tx"/>
Instead, the proper way is::
<xsl:attribute name="id"><xsl:value-of select='@tx'/></xsl:attribute>
This injects an "id" attribute in the enclosing element, and (presumably) handles all quote-related issues properly, something that is possible, but *very* difficult to do without <xsl:attribute>. This is documented inadequately at http://www.w3schools.com/xsl/el_attribute.asp, a rare miss. Imo, <xsl:attribute> should be mentioned prominently.
Edward
Edward K. Ream
Mar 4, 2015, 4:22:05 PM3/4/15
to leo-e...@googlegroups.com
On Wednesday, February 25, 2015 at 4:20:23 PM UTC-6, Edward K. Ream wrote:
http://leoeditor.com/load-leo.html is a web page that will show you the contents of a .leo file.
Rev c55709b revised leo_to_html.xsl as follows:
- On load, the jQuery script now collapse all nodes except the top-level nodes.
- Sets has-children attribute for nodes with child <v> elements.
- Inserts + at start of <h1> elements for nodes containing children.
- Inserts - at other <h1> elements.
This completes the minimum requirements for the page. It should be intuitive. Please let me know what you think.
Edward
P.S. There is one bug: cloned nodes do not display properly, perhaps such nodes have duplicate id attributes. Not a big deal, imo.
EKR
Reply all
Reply to author
Forward
0 new messages