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
..
37
38
39
40
41
42
43
44
45
46
47
48
49
50
...
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
local ct = require 'cortav'
local ss = require 'sirsem'
local css_toc = [[
]]
local css_toc_fixed = [[
@media (min-width: calc(@[width]:[100vw] + 20em)) {
ol.toc {
position: fixed;
padding-top: 1em; padding-bottom: 1em;
padding-right: 1em;
margin-top: 0; margin-bottom: 0;
right: 0; top: 0; bottom: 0;
max-width: calc(50vw - ((@[width]:[0]) / 2) - 3.5em);
overflow-y: auto;
}
@media (max-width: calc(@[width]:[100vw] + 30em)) {
ol.toc {
max-width: calc(100vw - ((@[width]:[0])) - 9.5em);
}
body {
margin-left: 5em;
}
}
}
]]
ct.ext.install {
id = 'toc';
desc = 'provides a table of contents for HTML renderer plus generic fallback';
version = ss.version {0,1; 'devel'};
................................................................................
doc_init = function(job)
job.state.toc_custom_position = false
end;
render_html_init = function(job, render)
render.stylesets.toc = css_toc
render.stylesets.tocFixed = css_toc_fixed
end;
render_html_ir_assemble = function(job, render, ir)
-- the custom position state is part of the document job,
-- but rendering is a separate job, so we need to get the
-- state of this extension in the parent job, which is
-- done with the job:unwind(depth) call. unwind is a method
................................................................................
-- toplevel HTML IR
local lst = {tag = 'ol', attrs={class='toc'}, nodes={}}
-- "renderer.state" contains the stateglob of the renderer
-- itself, not to be confused with the "state" parameter
-- which contains this extension's share of the job state
-- we use it to activate the stylesets we injected earlier
renderer.state.stylesets_active.toc = true
if renderer.state.opts['width'] then
renderer.state.stylesets_active.tocFixed = true
end
-- assemble a tree of links from the document section
-- structure. this is tricky, because we need a tree, but
-- all we have is a flat list with depth values attached to
-- each node.
local stack = {lst}
|
>
>
>
>
>
>
|
>
>
>
>
>
>
>
>
>
>
>
>
|
<
<
<
>
>
>
>
>
|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
|
|
|
>
>
>
|
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
..
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
...
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
local ct = require 'cortav'
local ss = require 'sirsem'
local css_toc = [[
@media screen and (max-width: calc(@[width]:[100vw] * 2)) {
ol.toc {
float: right;
background: @bg;
padding: 0 2em;
margin-right: -4em;
}
}
]]
local css_toc_fixed_lod = [[
@media (min-width: calc(@[width]:[100vw] * 2)) {
ol.toc {
background: linear-gradient(to right, transparent 25%, @tone(0.1 50)),
@tone/0.4(-0.1 50);
}
ol.toc > li > ol li {
background: linear-gradient(to right, transparent, rgba(0,0,0,0.4));
}
}
]]
local css_toc_fixed = [[
@media screen and (min-width: calc(@[width]:[100vw] * 2)) {
ol.toc {
position: fixed;
right: 0; top: 0; bottom: 0;
max-width: calc(50vw - ((@[width]:[0]) / 2) - 3.5em);
overflow-y: auto;
background: @tone/0.4(-0.1 50);
padding: 1em 1em;
padding-right: 0;
border-left: 1px solid @tone(-2 50);
margin: 0;
}
@media (max-width: calc(@[width]:[100vw] * 2.5)) {
ol.toc {
max-width: calc(100vw - ((@[width]:[0])) - 9.5em);
}
body {
margin-left: 5em;
}
}
ol.toc li {
padding: 0;
margin-left: 1em;
}
ol.toc a[href] {
display: block;
padding: 0.15em 0;
color: @tone(0.8 50);
background: linear-gradient(to right, transparent, @tone(0.3 50));
background-position-x: 10em;
background-repeat: no-repeat;
transition: 0.25s;
}
ol.toc a[href]:not(:hover) {
text-decoration-color: transparent;
}
@supports not (text-decoration-color: transparent) {
ol.toc a[href]:not(:hover) {
text-decoration: none;
}
}
ol.toc a[href]:hover {
color: @tone(1.3 50);
background-position-x: 0%;
}
ol.toc ol {
font-size: 95%;
width: 100%;
padding-left: 0;
}
ol.toc > li {
list-style: upper-roman;
}
ol.toc > li > a {
font-weight: bold;
}
ol.toc > ol > li {
list-style: decimal;
}
ol.toc > li > ol > li > ol > li {
list-style: enclosed;
}
}
]]
ct.ext.install {
id = 'toc';
desc = 'provides a table of contents for HTML renderer plus generic fallback';
version = ss.version {0,1; 'devel'};
................................................................................
doc_init = function(job)
job.state.toc_custom_position = false
end;
render_html_init = function(job, render)
render.stylesets.toc = css_toc
render.stylesets.tocFixed = css_toc_fixed
render.stylesets.tocFixedLOD = css_toc_fixed_lod
end;
render_html_ir_assemble = function(job, render, ir)
-- the custom position state is part of the document job,
-- but rendering is a separate job, so we need to get the
-- state of this extension in the parent job, which is
-- done with the job:unwind(depth) call. unwind is a method
................................................................................
-- toplevel HTML IR
local lst = {tag = 'ol', attrs={class='toc'}, nodes={}}
-- "renderer.state" contains the stateglob of the renderer
-- itself, not to be confused with the "state" parameter
-- which contains this extension's share of the job state
-- we use it to activate the stylesets we injected earlier
renderer.state.style_add'toc'
if renderer.state.opts.width then
renderer.state.style_add'tocFixed'
end
if not renderer.state.opts['dark-on-light'] then
renderer.state.style_add'tocFixedLOD'
end
-- assemble a tree of links from the document section
-- structure. this is tricky, because we need a tree, but
-- all we have is a flat list with depth values attached to
-- each node.
local stack = {lst}
|