forked from leo-editor/leo-editor
-
Notifications
You must be signed in to change notification settings - Fork 0
/
leo_to_html.xsl
147 lines (137 loc) · 4.26 KB
/
leo_to_html.xsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
<!-- The default setting. Not needed unless there is a strip-space element. -->
<!-- <xsl:preserve-space elements='leo_file nodes t'/> -->
<xsl:template match ='leo_file'>
<html>
<head>
<!--
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
-->
<style>
/* pre { background:#FFE7C6; } */
/* Must use h1 for nodes: see below. */
h1 {
font-size: 12pt;
font-style: normal;
font-weight: normal;
}
div.outlinepane {
position: absolute;
background: #ffffec; /* Leo yellow */
top: 10px;
height: 300px;
width: 700px;
overflow: scroll;
line-height: 0.8;
}
div.bodypane {
position: absolute;
top: 310px;
height: 300px;
width: 700px;
overflow: scroll;
}
div.tnode {
visibility: hidden;
height: 0;
}
div.node {
position: relative;
left: 20px;
}
div.node[has-children] > h1 {
<!-- works -->
<!-- background: red; -->
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
if (true) {
// Toggle all but top-level nodes.
// This requires an indication
$(".node").toggle()
$(".outlinepane").children(".node").toggle()
} else {
// Toggle all second-level nodes.
// Safer, until we can see which nodes have children.
$(".outlinepane").children(".node").children(".node").toggle()
}
$("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());
$("code").text($(this).text());
};
}); // end .each.
};
});
});
</script>
</head>
<body>
<xsl:apply-templates select='tnodes'/>
<div class="outlinepane">
<!-- <h4>Outline Pane</h4> -->
<xsl:apply-templates select='vnodes'/>
</div>
<div class="bodypane">
<!-- <h4>Body Pane</h4> -->
<pre class="body-text"><code></code></pre>
</div>
</body>
</html>
</xsl:template>
<xsl:template match = 'tnodes'>
<div class="tnodes">
<xsl:for-each select = 't'>
<div class="tnode">
<xsl:attribute name="id"><xsl:value-of select='@tx'/></xsl:attribute>
<xsl:value-of select='.'/>
</div>
</xsl:for-each>
</div>
</xsl:template>
<xsl:template match = 'vnodes'>
<xsl:for-each select = 'v'>
<xsl:apply-templates select ='.'/>
</xsl:for-each>
</xsl:template>
<xsl:template match='v'>
<div class="node">
<xsl:attribute name="id"><xsl:value-of select='@t'/></xsl:attribute>
<xsl:choose>
<xsl:when test ='./v' >
<xsl:attribute name="has-children">1</xsl:attribute>
<h1>+ <xsl:value-of select='vh'/></h1>
<xsl:apply-templates select = 'v'/>
</xsl:when>
<xsl:when test ='vh' >
<h1>- <xsl:value-of select='vh'/></h1>
</xsl:when>
<!--
<xsl:otherwise>
<h1>- <xsl:value-of select='vh'/></h1>
</xsl:otherwise>
-->
</xsl:choose>
</div>
</xsl:template>
</xsl:stylesheet>