Permalink
Browse files

Add hover anchor links for spec headers and sections

This adds anchors for each heading by changing the markdown renderer to
Kramdown. Unfortunately, Kramdown doesn't have an option to do the same
for list items. Instead, we do a tiny bit of JavaScript to add IDs to
each list item element in the specification section.

Then we use some JavaScript to insert a link with an embedded base64
background image that is displayed on hover for each element that has an
ID.

Fixes #27
Closes #128
  • Loading branch information...
Haacked committed Jan 20, 2016
1 parent 05a6704 commit 2af9fc3d40ac71cbb2c747d47241ccf46c8db9be
Showing with 69 additions and 0 deletions.
  1. +3 −0 _layouts/default.html
  2. +37 −0 css/main.css
  3. +29 −0 js/anchorli.js
View
@@ -4,6 +4,7 @@
<meta charset="utf-8">
<title>{{ page.title }}</title>
<meta name="author" content="Tom Preston-Werner">
<script src="js/anchorli.js"></script>
<link rel="stylesheet" href="/css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
</head>
@@ -33,6 +34,8 @@
<li><a href="/spec/v1.0.0.html">v1.0.0</a></li>
<li><a href="/spec/v1.0.0-beta.html">v1.0.0-beta</a></li>
</ol>
<div id="spec">
{{ content }}
</div>
</body>
</html>
View
@@ -55,3 +55,40 @@ ol.lang {
ol.lang li a {
color: black;
}
/* Anchor Link styling */
#spec a.anchor-link {
opacity: 0;
/* Got this background image from an AnchorJs example http://bryanbraun.github.io/anchorjs/ */
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjIwcHgiIGhlaWdodD0iMTBweCIgdmlld0JveD0iMCAwIDIwIDEwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9ImxpbmsiIGZpbGw9IiNGRjUyMzEiPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMCBMMTIuMzA0Njg3NSwwIEMxMy4yNDIxODc1LDAuNjI1IDE0LjEyMTA5MzgsMS43MzgyODEyNSAxNC4zOTQ1MzEyLDIuNSBMMTQuOTgwNDY4OCwyLjUgQzE2LjI1LDIuNSAxNy40ODA0Njg4LDMuNzUgMTcuNDgwNDY4OCw1IEMxNy40ODA0Njg4LDYuMjUgMTYuMjEwOTM3NSw3LjUgMTQuOTgwNDY4OCw3LjUgTDExLjIzMDQ2ODgsNy41IEMxMCw3LjUgOC43MzA0Njg3NSw2LjI1IDguNzMwNDY4NzUsNSBDOC43MzA0Njg3NSw0LjU1MDc4MTI1IDguODY3MTg3NSw0LjEyMTA5Mzc1IDkuMDgyMDMxMjUsMy43NSBMNi40MDYyNSwzLjc1IEM2LjMwODU5Mzc1LDQuMTYwMTU2MjUgNi4yNSw0LjU3MDMxMjUgNi4yNSw1IEM2LjI1LDcuNSA4LjczMDQ2ODc1LDEwIDExLjIzMDQ2ODgsMTAgTDE1LDEwIEMxNy41LDEwIDIwLDcuNSAyMCw1IEMyMCwyLjUgMTcuNSwwIDE1LDAgTDE1LDAgWiBNNS42MDU0Njg3NSw3LjUgTDUuMDE5NTMxMjUsNy41IEMzLjc1LDcuNSAyLjUxOTUzMTI1LDYuMjUgMi41MTk1MzEyNSw1IEMyLjUxOTUzMTI1LDMuNzUgMy43ODkwNjI1LDIuNSA1LjAxOTUzMTI1LDIuNSBMOC43Njk1MzEyNSwyLjUgQzEwLDIuNSAxMS4yNjk1MzEyLDMuNzUgMTEuMjY5NTMxMiw1IEMxMS4yNjk1MzEyLDUuNDQ5MjE4NzUgMTEuMTMyODEyNSw1Ljg3ODkwNjI1IDEwLjkxNzk2ODgsNi4yNSBMMTMuNTkzNzUsNi4yNSBDMTMuNjkxNDA2Miw1LjgzOTg0Mzc1IDEzLjc1LDUuNDI5Njg3NSAxMy43NSw1IEMxMy43NSwyLjUgMTEuMjY5NTMxMiwwIDguNzY5NTMxMjUsMCBMNSwwIEMyLjUsMCAwLDIuNSAwLDUgQzAsNy41IDIuNSwxMCA1LDEwIEw3LjY5NTMxMjUsMTAgQzYuNzU3ODEyNSw5LjM3NSA1Ljg3ODkwNjI1LDguMjYxNzE4NzUgNS42MDU0Njg3NSw3LjUgTDUuNjA1NDY4NzUsNy41IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") no-repeat;
position: absolute;
margin-top: 0.5em;
margin-left: -1em;
padding-right: 0.5em;
height: 16px;
width: 20px;
text-decoration: none;
}
#spec h1 a.anchor-link {
margin-left: -0.6em;
}
#spec h3 a.anchor-link {
margin-left: -1.5em;
margin-top: 0.4em;
}
#spec li a.anchor-link {
margin-top: 0.4em;
margin-left: -3em;
}
#spec [id] {
position: relative;
}
#spec [id]:hover > .anchor-link, .anchor-link:focus {
opacity: 1;
}
View
@@ -0,0 +1,29 @@
document.onreadystatechange = function () {
if (this.readyState === "complete") {
var createAnchorLink = function (id) {
var anchor = document.createElement("a");
anchor.className = "anchor-link";
anchor.href = "#" + id;
return anchor;
};
// Add IDs to all spec li elements
var specItems = document.querySelectorAll("#spec ol")[1]
.querySelectorAll('li');
for (var i = 0; i < specItems.length; i++)
{
var li = specItems[i];
li.id = 'spec-item-' + (i + 1);
}
// Add anchor link to all elemens with an ID in the spec
var headers = document.querySelectorAll('#spec [id]');
for (var i = 0; i < headers.length; i++)
{
var element = headers[i];
var anchorLink = createAnchorLink(element.id);
element.insertBefore(anchorLink, element.firstChild)
}
}
};

0 comments on commit 2af9fc3

Please sign in to comment.