From 4000c990f0a8f874259197f38f92ba8f7ee87365 Mon Sep 17 00:00:00 2001 From: Philipp Oppermann Date: Sun, 17 Jul 2016 16:21:53 +0200 Subject: [PATCH 1/9] Add and initialize toc.js --- layouts/partials/head.html | 19 +++++++++++++++++++ static/js/toc.min.js | 9 +++++++++ 2 files changed, 28 insertions(+) create mode 100644 static/js/toc.min.js diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 6856076e..75e8cd70 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -30,6 +30,7 @@ + {{ partial "analytics.html" . }} @@ -37,5 +38,23 @@ if (window.location.hostname == "phil-opp.github.io") { window.location.href = "http://os.phil-opp.com/"; } + + window.onload = function() { + var container = document.querySelector('#toc'); + + var selector = "h2"; + if (container.className.split(" ").indexOf("coarse") == -1) { + selector += ",h3"; + } + + var toc = initTOC({ + selector: selector, + scope: '.post', + overwrite: false, + prefix: 'toc' + }); + + container.appendChild(toc); + } diff --git a/static/js/toc.min.js b/static/js/toc.min.js new file mode 100644 index 00000000..041ae4d8 --- /dev/null +++ b/static/js/toc.min.js @@ -0,0 +1,9 @@ +/*! + * jQuery-TOC + * Table of Contents Generator Plugin for (non-)jQuery + * + * @author Dolphin Wood + * @version 0.0.5 + * Copyright 2015. MIT licensed. + */ +!function(e){"use strict";var t=function(e,t){for(var n in t)t.hasOwnProperty(n)&&t[n]&&(e[n]=t[n]);return e},n=function(e,t){var n=[],r=document.querySelectorAll(t);return Array.prototype.forEach.call(r,function(t){var r=t.querySelectorAll(e);n=n.concat(Array.prototype.slice.call(r))}),n},r=function(e){if("string"!=typeof e)return 0;var t=e.match(/\d/g);return t?Math.min.apply(null,t):1},o=function(e,t){for(;t--;)e=e.appendChild(document.createElement("ol")),t&&(e=e.appendChild(document.createElement("li")));return e},c=function(e,t){for(;t--;)e=e.parentElement;return e},i=function(e,t){return function(n,r,o){var c=n.textContent,i=t+"-"+o;r.textContent=c;var a=e?i:n.id||i;a=encodeURIComponent(a),n.id=a,r.href="#"+a}},a=function(e){var t=e.selector,a=e.scope,u=document.createElement("ol"),l=u,f=null,h=i(e.overwrite,e.prefix);return n(t,a).reduce(function(e,t,n){var i=r(t.tagName),a=i-e;a>0&&(l=o(f,a)),0>a&&(l=c(l,2*-a)),l=l||u;var p=document.createElement("li"),d=document.createElement("a");return h(t,d,n),l.appendChild(p).appendChild(d),f=p,i},r(t)),u},u=function(e){var n={selector:"h1, h2, h3, h4, h5, h6",scope:"body",overwrite:!1,prefix:"toc"};e=t(n,e);var r=e.selector;if("string"!=typeof r)throw new TypeError("selector must be a string");if(!r.match(/^(?:h[1-6],?\s*)+$/g))throw new TypeError("selector must contains only h1-6");var o=location.hash;return o&&setTimeout(function(){location.hash="",location.hash=o},0),a(e)};"function"==typeof define&&define.amd?define(function(){return u}):e.initTOC=u}(window); From f4b84d55e2485bd875796b302bd281e1f4c93e3e Mon Sep 17 00:00:00 2001 From: Philipp Oppermann Date: Sun, 17 Jul 2016 16:22:31 +0200 Subject: [PATCH 2/9] Fixate the ToC on the left side and show only on wide screens --- static/css/main.css | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/static/css/main.css b/static/css/main.css index be51f807..4f6966dc 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -114,3 +114,43 @@ sup, sub { a.anchorjs-link:hover { text-decoration: none; } + +aside#toc { + display: none; +} + +@media (min-width: 80rem) { + aside#toc { + display: block; + width: 15em; + position: fixed; + left:1rem; + top: 4rem; + font-size: 90%; + line-height: 1.1; + } + + aside#toc:before { + content: "Table of Contents"; + font-weight: bold; + } + + aside#toc ol { + margin: 0 0 .2rem 0; + padding: 0 0 0 1rem; + list-style:none; + } + + aside#toc ol li:before { + content: ""; + border-color: transparent #008eef; + border-style: solid; + border-width: 0.35em 0 0.35em 0.45em; + display: block; + height: 0; + width: 0; + left: -1em; + top: 0.9em; + position: relative; + } +} From 0f72384ed90968ced26a4148cdca73af6a33a91b Mon Sep 17 00:00:00 2001 From: Philipp Oppermann Date: Sun, 17 Jul 2016 16:42:21 +0200 Subject: [PATCH 3/9] =?UTF-8?q?Create=20the=20=E2=80=9CTable=20of=20Conten?= =?UTF-8?q?ts=E2=80=9D=20heading=20in=20javascript?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- layouts/partials/head.html | 5 +++++ static/css/main.css | 6 +++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 75e8cd70..f217239d 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -54,6 +54,11 @@ prefix: 'toc' }); + var heading = document.createElement("H2"); + var heading_text = document.createTextNode("Table of Contents"); + heading.appendChild(heading_text); + + container.appendChild(heading); container.appendChild(toc); } diff --git a/static/css/main.css b/static/css/main.css index 4f6966dc..3a4ff255 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -130,9 +130,9 @@ aside#toc { line-height: 1.1; } - aside#toc:before { - content: "Table of Contents"; - font-weight: bold; + aside#toc h2 { + font-size: 110%; + margin-bottom: .2rem; } aside#toc ol { From 05d74786f937dfd3868d5ebb64baf97c29d78ccd Mon Sep 17 00:00:00 2001 From: Philipp Oppermann Date: Sun, 17 Jul 2016 16:44:45 +0200 Subject: [PATCH 4/9] Move ToC initialization code into own js file --- layouts/partials/head.html | 24 +----------------------- static/js/main.js | 22 ++++++++++++++++++++++ 2 files changed, 23 insertions(+), 23 deletions(-) create mode 100644 static/js/main.js diff --git a/layouts/partials/head.html b/layouts/partials/head.html index f217239d..41bc0b16 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -31,6 +31,7 @@ + {{ partial "analytics.html" . }} @@ -38,28 +39,5 @@ if (window.location.hostname == "phil-opp.github.io") { window.location.href = "http://os.phil-opp.com/"; } - - window.onload = function() { - var container = document.querySelector('#toc'); - - var selector = "h2"; - if (container.className.split(" ").indexOf("coarse") == -1) { - selector += ",h3"; - } - - var toc = initTOC({ - selector: selector, - scope: '.post', - overwrite: false, - prefix: 'toc' - }); - - var heading = document.createElement("H2"); - var heading_text = document.createTextNode("Table of Contents"); - heading.appendChild(heading_text); - - container.appendChild(heading); - container.appendChild(toc); - } diff --git a/static/js/main.js b/static/js/main.js new file mode 100644 index 00000000..80c79a20 --- /dev/null +++ b/static/js/main.js @@ -0,0 +1,22 @@ +window.onload = function() { + var container = document.querySelector('#toc'); + + var selector = "h2"; + if (container.className.split(" ").indexOf("coarse") == -1) { + selector += ",h3"; + } + + var toc = initTOC({ + selector: selector, + scope: '.post', + overwrite: false, + prefix: 'toc' + }); + + var heading = document.createElement("H2"); + var heading_text = document.createTextNode("Table of Contents"); + heading.appendChild(heading_text); + + container.appendChild(heading); + container.appendChild(toc); +} From 7e2878aba708f26701fc7694f9bd08faef05bc53 Mon Sep 17 00:00:00 2001 From: Philipp Oppermann Date: Thu, 28 Jul 2016 19:44:57 +0200 Subject: [PATCH 5/9] Reposition Toc and tweak width and line-height --- static/css/main.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index 3a4ff255..8f1fd406 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -122,12 +122,12 @@ aside#toc { @media (min-width: 80rem) { aside#toc { display: block; - width: 15em; + width: 12rem; position: fixed; - left:1rem; top: 4rem; + margin-left: -15rem; font-size: 90%; - line-height: 1.1; + line-height: 1.2; } aside#toc h2 { From fda5851e7c76853f29638eff9bb5c34a044b9cc5 Mon Sep 17 00:00:00 2001 From: Philipp Oppermann Date: Thu, 28 Jul 2016 19:45:35 +0200 Subject: [PATCH 6/9] Fade out ToC when it's not hovered --- static/css/main.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/static/css/main.css b/static/css/main.css index 8f1fd406..e554c124 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -128,6 +128,12 @@ aside#toc { margin-left: -15rem; font-size: 90%; line-height: 1.2; + opacity: .2; + transition: opacity .5s; + } + + aside#toc:hover { + opacity: 1; } aside#toc h2 { From 226c0ccdfc3e5b164e28c55a6ed2a593180e40a3 Mon Sep 17 00:00:00 2001 From: Philipp Oppermann Date: Thu, 28 Jul 2016 19:48:11 +0200 Subject: [PATCH 7/9] Hide sublists of `coarse` in CSS instead of JS --- static/css/main.css | 4 ++++ static/js/main.js | 7 +------ 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index e554c124..1a5e3a7c 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -159,4 +159,8 @@ aside#toc { top: 0.9em; position: relative; } + + aside#toc.coarse li ol { + display: none; + } } diff --git a/static/js/main.js b/static/js/main.js index 80c79a20..3565d348 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,13 +1,8 @@ window.onload = function() { var container = document.querySelector('#toc'); - var selector = "h2"; - if (container.className.split(" ").indexOf("coarse") == -1) { - selector += ",h3"; - } - var toc = initTOC({ - selector: selector, + selector: 'h2, h3', scope: '.post', overwrite: false, prefix: 'toc' From 46bb4856213b3e834b323c25d799acc0c58e923c Mon Sep 17 00:00:00 2001 From: Philipp Oppermann Date: Thu, 28 Jul 2016 19:49:59 +0200 Subject: [PATCH 8/9] Don't do anything if there's no #toc --- static/js/main.js | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/static/js/main.js b/static/js/main.js index 3565d348..81bc7233 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,17 +1,19 @@ window.onload = function() { var container = document.querySelector('#toc'); - var toc = initTOC({ - selector: 'h2, h3', - scope: '.post', - overwrite: false, - prefix: 'toc' - }); + if (container != null) { + var toc = initTOC({ + selector: 'h2, h3', + scope: '.post', + overwrite: false, + prefix: 'toc' + }); - var heading = document.createElement("H2"); - var heading_text = document.createTextNode("Table of Contents"); - heading.appendChild(heading_text); + var heading = document.createElement("H2"); + var heading_text = document.createTextNode("Table of Contents"); + heading.appendChild(heading_text); - container.appendChild(heading); - container.appendChild(toc); + container.appendChild(heading); + container.appendChild(toc); + } } From 35c083122ef678d4db4b71ced4985c73ac072abe Mon Sep 17 00:00:00 2001 From: Philipp Oppermann Date: Thu, 28 Jul 2016 19:51:36 +0200 Subject: [PATCH 9/9] Add function to automatically add/rm the coarse class Based on viewport height. Automatically adjusted onresize. --- static/js/main.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/static/js/main.js b/static/js/main.js index 81bc7233..a1c32e85 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -15,5 +15,26 @@ window.onload = function() { container.appendChild(heading); container.appendChild(toc); + + resize_toc(container); } } + +function resize_toc(container) { + var containerHeight = container.clientHeight; + + var resize = function() { + if (containerHeight > document.documentElement.clientHeight - 100) { + container.classList.add('coarse'); + } else { + container.classList.remove('coarse'); + } + }; + resize(); + + var resizeId; + window.onresize = function() { + clearTimeout(resizeId); + resizeId = setTimeout(resize, 300); + }; +}