Skip to content

Commit 8e9bdce

Browse files
committed
added docinfo for dynamic table of contents
Signed-off-by: Jeen Broekstra <jeen.broekstra@gmail.com>
1 parent 12b60d3 commit 8e9bdce

4 files changed

Lines changed: 296 additions & 0 deletions

File tree

doc/getting-started/docinfo.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!-- Generate a nice TOC -->
2+
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
3+
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
4+
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script>
5+
<!-- We do not need the tocify CSS because the asciidoc CSS already provides most of what we neeed -->
6+
7+
<style>
8+
.tocify-header {
9+
font-style: italic;
10+
}
11+
.tocify-subheader {
12+
font-style: normal;
13+
font-size: 90%;
14+
}
15+
.tocify ul {
16+
margin: 0;
17+
}
18+
.tocify-focus {
19+
color: #7a2518;
20+
background-color: rgba(0, 0, 0, 0.1);
21+
}
22+
.tocify-focus > a {
23+
color: #7a2518;
24+
}
25+
</style>
26+
27+
<script type="text/javascript">
28+
$( document ).ready(function() {
29+
$('#project-bar').insertBefore('#header');
30+
});
31+
$(function () {
32+
// Add a new container for the tocify toc into the existing toc so we can re-use its
33+
// styling
34+
$("#toc").append("<div id='generated-toc'></div>");
35+
$("#generated-toc").tocify({
36+
extendPage: true,
37+
context: "#content",
38+
highlightOnScroll: true,
39+
showAndHide: true,
40+
hideEffect: "slideUp",
41+
showEffect: "slideDown",
42+
// Use the IDs that asciidoc already provides so that TOC links and intra-document
43+
// links are the same. Anything else might confuse users when they create bookmarks.
44+
hashGenerator: function(text, element) {
45+
return $(element).attr("id");
46+
},
47+
// Smooth scrolling doesn't work properly if we use the asciidoc IDs
48+
smoothScroll: false,
49+
// Set to 'none' to use the tocify classes
50+
theme: "none",
51+
// Handle book (may contain h1) and article (only h2 deeper)
52+
selectors: $( "#content" ).has( "h1" ).size() > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5",
53+
ignoreSelector: ".discrete"
54+
});
55+
// Switch between static asciidoc toc and dynamic tocify toc based on browser size
56+
// This is set to match the media selectors in the asciidoc CSS
57+
// Without this, we keep the dynamic toc even if it is moved from the side to preamble
58+
// position which will cause odd scrolling behavior
59+
var handleTocOnResize = function() {
60+
if ($(document).width() < 768) {
61+
$("#generated-toc").hide();
62+
$(".sectlevel0").show();
63+
$(".sectlevel1").show();
64+
}
65+
else {
66+
$("#generated-toc").show();
67+
$(".sectlevel0").hide();
68+
$(".sectlevel1").hide();
69+
}
70+
}
71+
$(window).resize(handleTocOnResize);
72+
handleTocOnResize();
73+
});
74+
</script>

doc/migration/docinfo.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!-- Generate a nice TOC -->
2+
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
3+
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
4+
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script>
5+
<!-- We do not need the tocify CSS because the asciidoc CSS already provides most of what we neeed -->
6+
7+
<style>
8+
.tocify-header {
9+
font-style: italic;
10+
}
11+
.tocify-subheader {
12+
font-style: normal;
13+
font-size: 90%;
14+
}
15+
.tocify ul {
16+
margin: 0;
17+
}
18+
.tocify-focus {
19+
color: #7a2518;
20+
background-color: rgba(0, 0, 0, 0.1);
21+
}
22+
.tocify-focus > a {
23+
color: #7a2518;
24+
}
25+
</style>
26+
27+
<script type="text/javascript">
28+
$( document ).ready(function() {
29+
$('#project-bar').insertBefore('#header');
30+
});
31+
$(function () {
32+
// Add a new container for the tocify toc into the existing toc so we can re-use its
33+
// styling
34+
$("#toc").append("<div id='generated-toc'></div>");
35+
$("#generated-toc").tocify({
36+
extendPage: true,
37+
context: "#content",
38+
highlightOnScroll: true,
39+
showAndHide: true,
40+
hideEffect: "slideUp",
41+
showEffect: "slideDown",
42+
// Use the IDs that asciidoc already provides so that TOC links and intra-document
43+
// links are the same. Anything else might confuse users when they create bookmarks.
44+
hashGenerator: function(text, element) {
45+
return $(element).attr("id");
46+
},
47+
// Smooth scrolling doesn't work properly if we use the asciidoc IDs
48+
smoothScroll: false,
49+
// Set to 'none' to use the tocify classes
50+
theme: "none",
51+
// Handle book (may contain h1) and article (only h2 deeper)
52+
selectors: $( "#content" ).has( "h1" ).size() > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5",
53+
ignoreSelector: ".discrete"
54+
});
55+
// Switch between static asciidoc toc and dynamic tocify toc based on browser size
56+
// This is set to match the media selectors in the asciidoc CSS
57+
// Without this, we keep the dynamic toc even if it is moved from the side to preamble
58+
// position which will cause odd scrolling behavior
59+
var handleTocOnResize = function() {
60+
if ($(document).width() < 768) {
61+
$("#generated-toc").hide();
62+
$(".sectlevel0").show();
63+
$(".sectlevel1").show();
64+
}
65+
else {
66+
$("#generated-toc").show();
67+
$(".sectlevel0").hide();
68+
$(".sectlevel1").hide();
69+
}
70+
}
71+
$(window).resize(handleTocOnResize);
72+
handleTocOnResize();
73+
});
74+
</script>

doc/programming/docinfo.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!-- Generate a nice TOC -->
2+
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
3+
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
4+
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script>
5+
<!-- We do not need the tocify CSS because the asciidoc CSS already provides most of what we neeed -->
6+
7+
<style>
8+
.tocify-header {
9+
font-style: italic;
10+
}
11+
.tocify-subheader {
12+
font-style: normal;
13+
font-size: 90%;
14+
}
15+
.tocify ul {
16+
margin: 0;
17+
}
18+
.tocify-focus {
19+
color: #7a2518;
20+
background-color: rgba(0, 0, 0, 0.1);
21+
}
22+
.tocify-focus > a {
23+
color: #7a2518;
24+
}
25+
</style>
26+
27+
<script type="text/javascript">
28+
$( document ).ready(function() {
29+
$('#project-bar').insertBefore('#header');
30+
});
31+
$(function () {
32+
// Add a new container for the tocify toc into the existing toc so we can re-use its
33+
// styling
34+
$("#toc").append("<div id='generated-toc'></div>");
35+
$("#generated-toc").tocify({
36+
extendPage: true,
37+
context: "#content",
38+
highlightOnScroll: true,
39+
showAndHide: true,
40+
hideEffect: "slideUp",
41+
showEffect: "slideDown",
42+
// Use the IDs that asciidoc already provides so that TOC links and intra-document
43+
// links are the same. Anything else might confuse users when they create bookmarks.
44+
hashGenerator: function(text, element) {
45+
return $(element).attr("id");
46+
},
47+
// Smooth scrolling doesn't work properly if we use the asciidoc IDs
48+
smoothScroll: false,
49+
// Set to 'none' to use the tocify classes
50+
theme: "none",
51+
// Handle book (may contain h1) and article (only h2 deeper)
52+
selectors: $( "#content" ).has( "h1" ).size() > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5",
53+
ignoreSelector: ".discrete"
54+
});
55+
// Switch between static asciidoc toc and dynamic tocify toc based on browser size
56+
// This is set to match the media selectors in the asciidoc CSS
57+
// Without this, we keep the dynamic toc even if it is moved from the side to preamble
58+
// position which will cause odd scrolling behavior
59+
var handleTocOnResize = function() {
60+
if ($(document).width() < 768) {
61+
$("#generated-toc").hide();
62+
$(".sectlevel0").show();
63+
$(".sectlevel1").show();
64+
}
65+
else {
66+
$("#generated-toc").show();
67+
$(".sectlevel0").hide();
68+
$(".sectlevel1").hide();
69+
}
70+
}
71+
$(window).resize(handleTocOnResize);
72+
handleTocOnResize();
73+
});
74+
</script>
Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!-- Generate a nice TOC -->
2+
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
3+
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
4+
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script>
5+
<!-- We do not need the tocify CSS because the asciidoc CSS already provides most of what we neeed -->
6+
7+
<style>
8+
.tocify-header {
9+
font-style: italic;
10+
}
11+
.tocify-subheader {
12+
font-style: normal;
13+
font-size: 90%;
14+
}
15+
.tocify ul {
16+
margin: 0;
17+
}
18+
.tocify-focus {
19+
color: #7a2518;
20+
background-color: rgba(0, 0, 0, 0.1);
21+
}
22+
.tocify-focus > a {
23+
color: #7a2518;
24+
}
25+
</style>
26+
27+
<script type="text/javascript">
28+
$( document ).ready(function() {
29+
$('#project-bar').insertBefore('#header');
30+
});
31+
$(function () {
32+
// Add a new container for the tocify toc into the existing toc so we can re-use its
33+
// styling
34+
$("#toc").append("<div id='generated-toc'></div>");
35+
$("#generated-toc").tocify({
36+
extendPage: true,
37+
context: "#content",
38+
highlightOnScroll: true,
39+
showAndHide: true,
40+
hideEffect: "slideUp",
41+
showEffect: "slideDown",
42+
// Use the IDs that asciidoc already provides so that TOC links and intra-document
43+
// links are the same. Anything else might confuse users when they create bookmarks.
44+
hashGenerator: function(text, element) {
45+
return $(element).attr("id");
46+
},
47+
// Smooth scrolling doesn't work properly if we use the asciidoc IDs
48+
smoothScroll: false,
49+
// Set to 'none' to use the tocify classes
50+
theme: "none",
51+
// Handle book (may contain h1) and article (only h2 deeper)
52+
selectors: $( "#content" ).has( "h1" ).size() > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5",
53+
ignoreSelector: ".discrete"
54+
});
55+
// Switch between static asciidoc toc and dynamic tocify toc based on browser size
56+
// This is set to match the media selectors in the asciidoc CSS
57+
// Without this, we keep the dynamic toc even if it is moved from the side to preamble
58+
// position which will cause odd scrolling behavior
59+
var handleTocOnResize = function() {
60+
if ($(document).width() < 768) {
61+
$("#generated-toc").hide();
62+
$(".sectlevel0").show();
63+
$(".sectlevel1").show();
64+
}
65+
else {
66+
$("#generated-toc").show();
67+
$(".sectlevel0").hide();
68+
$(".sectlevel1").hide();
69+
}
70+
}
71+
$(window).resize(handleTocOnResize);
72+
handleTocOnResize();
73+
});
74+
</script>

0 commit comments

Comments
 (0)