Differences From
Artifact [1a479a26d4]:
1 1 local ct = require 'cortav'
2 2 local ss = require 'sirsem'
3 3
4 4 local css_toc = [[
5 -
5 + @media screen and (max-width: calc(@[width]:[100vw] * 2)) {
6 + ol.toc {
7 + float: right;
8 + background: @bg;
9 + padding: 0 2em;
10 + margin-right: -4em;
11 + }
12 + }
6 13 ]]
7 14
15 +local css_toc_fixed_lod = [[
16 + @media (min-width: calc(@[width]:[100vw] * 2)) {
17 + ol.toc {
18 + background: linear-gradient(to right, transparent 25%, @tone(0.1 50)),
19 + @tone/0.4(-0.1 50);
20 + }
21 + ol.toc > li > ol li {
22 + background: linear-gradient(to right, transparent, rgba(0,0,0,0.4));
23 + }
24 + }
25 +]]
8 26 local css_toc_fixed = [[
9 - @media (min-width: calc(@[width]:[100vw] + 20em)) {
27 + @media screen and (min-width: calc(@[width]:[100vw] * 2)) {
10 28 ol.toc {
11 29 position: fixed;
12 - padding-top: 1em; padding-bottom: 1em;
13 - padding-right: 1em;
14 - margin-top: 0; margin-bottom: 0;
15 30 right: 0; top: 0; bottom: 0;
16 31 max-width: calc(50vw - ((@[width]:[0]) / 2) - 3.5em);
17 32 overflow-y: auto;
33 + background: @tone/0.4(-0.1 50);
34 + padding: 1em 1em;
35 + padding-right: 0;
36 + border-left: 1px solid @tone(-2 50);
37 + margin: 0;
18 38 }
19 - @media (max-width: calc(@[width]:[100vw] + 30em)) {
39 + @media (max-width: calc(@[width]:[100vw] * 2.5)) {
20 40 ol.toc {
21 41 max-width: calc(100vw - ((@[width]:[0])) - 9.5em);
22 42 }
23 43 body {
24 44 margin-left: 5em;
25 45 }
26 46 }
47 + ol.toc li {
48 + padding: 0;
49 + margin-left: 1em;
50 + }
51 + ol.toc a[href] {
52 + display: block;
53 + padding: 0.15em 0;
54 + color: @tone(0.8 50);
55 + background: linear-gradient(to right, transparent, @tone(0.3 50));
56 + background-position-x: 10em;
57 + background-repeat: no-repeat;
58 + transition: 0.25s;
59 + }
60 + ol.toc a[href]:not(:hover) {
61 + text-decoration-color: transparent;
62 + }
63 + @supports not (text-decoration-color: transparent) {
64 + ol.toc a[href]:not(:hover) {
65 + text-decoration: none;
66 + }
67 + }
68 + ol.toc a[href]:hover {
69 + color: @tone(1.3 50);
70 + background-position-x: 0%;
71 + }
72 + ol.toc ol {
73 + font-size: 95%;
74 + width: 100%;
75 + padding-left: 0;
76 + }
77 + ol.toc > li {
78 + list-style: upper-roman;
79 + }
80 + ol.toc > li > a {
81 + font-weight: bold;
82 + }
83 + ol.toc > ol > li {
84 + list-style: decimal;
85 + }
86 + ol.toc > li > ol > li > ol > li {
87 + list-style: enclosed;
88 + }
27 89 }
28 90 ]]
29 91
30 92 ct.ext.install {
31 93 id = 'toc';
32 94 desc = 'provides a table of contents for HTML renderer plus generic fallback';
33 95 version = ss.version {0,1; 'devel'};
................................................................................
37 99 doc_init = function(job)
38 100 job.state.toc_custom_position = false
39 101 end;
40 102
41 103 render_html_init = function(job, render)
42 104 render.stylesets.toc = css_toc
43 105 render.stylesets.tocFixed = css_toc_fixed
106 + render.stylesets.tocFixedLOD = css_toc_fixed_lod
44 107 end;
45 108
46 109 render_html_ir_assemble = function(job, render, ir)
47 110 -- the custom position state is part of the document job,
48 111 -- but rendering is a separate job, so we need to get the
49 112 -- state of this extension in the parent job, which is
50 113 -- done with the job:unwind(depth) call. unwind is a method
................................................................................
104 167 -- toplevel HTML IR
105 168 local lst = {tag = 'ol', attrs={class='toc'}, nodes={}}
106 169
107 170 -- "renderer.state" contains the stateglob of the renderer
108 171 -- itself, not to be confused with the "state" parameter
109 172 -- which contains this extension's share of the job state
110 173 -- we use it to activate the stylesets we injected earlier
111 - renderer.state.stylesets_active.toc = true
112 - if renderer.state.opts['width'] then
113 - renderer.state.stylesets_active.tocFixed = true
174 + renderer.state.style_add'toc'
175 + if renderer.state.opts.width then
176 + renderer.state.style_add'tocFixed'
177 + end
178 + if not renderer.state.opts['dark-on-light'] then
179 + renderer.state.style_add'tocFixedLOD'
114 180 end
115 181
116 182 -- assemble a tree of links from the document section
117 183 -- structure. this is tricky, because we need a tree, but
118 184 -- all we have is a flat list with depth values attached to
119 185 -- each node.
120 186 local stack = {lst}