From 5f5694f5ce202f21afbc91add598b21dc884fcdd Mon Sep 17 00:00:00 2001 From: Rowan Hogan Date: Tue, 30 Jun 2015 22:35:58 +1000 Subject: [PATCH] Adds API page TOC menu. --- _layouts/v2.html | 2 + docs/css/main.css | 238 ++++++++++++++++++++++++++++++++++++++++++++++ docs/js/docs.js | 52 ++++++++++ 3 files changed, 292 insertions(+) create mode 100644 docs/js/docs.js diff --git a/_layouts/v2.html b/_layouts/v2.html index b206ae9b..415dbad4 100644 --- a/_layouts/v2.html +++ b/_layouts/v2.html @@ -169,5 +169,7 @@ s.parentNode.insertBefore(ga, s); })(); + + diff --git a/docs/css/main.css b/docs/css/main.css index 3f2f2e4c..6851bf20 100644 --- a/docs/css/main.css +++ b/docs/css/main.css @@ -356,6 +356,7 @@ table.plugins td:first-child a { float: left; width: 160px; } + .map-col { width: 180px; border-right: 1px solid #ddd; @@ -373,6 +374,243 @@ table.plugins td:first-child a { margin-bottom: 25px; } +#toc .colborder { + padding-right: 14px; +} + +#toc .span-3 { + margin: 0; + padding-right: 3em; + width: 16.825%; + box-sizing: border-box; +} + +#toc .span-3.last { + padding-right: 0; +} + +#toc-copy { + display: none; +} + +#toc-copy div { + border: 0; + margin: 0; + padding: 0; + width: auto; + float: none; +} + +#toc-copy h4 { + margin: 0; + padding-bottom: .333em; +} + +#toc-copy ul { + display: none; + list-style: none; +} + +#toc-copy ul li { + white-space: nowrap; +} + +#toc-copy ul li a { + position: relative; + padding: .25em .5em 0; + z-index: 10; +} + +@media screen and (max-width: 1350px) { + #toc-copy { + display: block; + position: fixed; + top: 0.1em; + left: 0.25em; + width: 32px; + height: 32px; + opacity: 0; + cursor: pointer; + -webkit-transition: opacity .2s ease; + transition: opacity .2s ease; + } + + #toc-copy > div { display: none; } + + .scrolled #toc-copy { + opacity: 1; + background: white; + } + + #toc-copy.active { + background-color: white; + background-color: rgba(255, 255, 255, 0.9); + padding: 2em; + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: scroll; + cursor: default; + box-sizing: border-box; + } + + #toc-copy:before, + #toc-copy:after { + content: ''; + position: absolute; + left: 5px; + width: 22px; + height: 14px; + border-top: 2px solid black; + cursor: pointer; + box-sizing: border-box; + -webkit-transition: -webkit-transform .25s ease; + transition: transform .25s ease; + } + + #toc-copy:before { + top: 9px; + border-bottom: 2px solid black; + } + + #toc-copy:after { + top: 15px; + } + + #toc-copy.active:before { + top: 5px; + left: 9px; + border-bottom: 0; + -webkit-transform: rotate(-135deg); + transform: rotate(-135deg); + } + + #toc-copy.active:after { + top: 13px; + left: 9px; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + } + + #toc-copy.active div { display: block; } + + #toc-copy h4.active, #toc-copy h4:hover { + color: black; + cursor: pointer; + } + + #toc-copy h4.active + ul { + display: block; + padding: 0; + margin: 0 0 .5em; + } + + #toc-copy ul li a { padding: .25em 0; } +} + +@media screen and (min-width: 900px) and (max-width: 1350px) { + #toc-copy { + width: 40px; + height: 40px; + } + + #toc-copy.active { + padding: 2.5em; + } + + #toc-copy:before, + #toc-copy:after { + left: 8px; + } + + #toc-copy:before { top: 13px; } + + #toc-copy:after { top: 19px; } + + #toc-copy.active:before { + top: 7px; + left: 10px; + } + + #toc-copy.active:after { + top: 15px; + left: 10px; + } +} + +@media screen and (min-width: 1350px) and (min-height: 600px) { + #toc-copy { + display: block; + position: fixed; + top: 0; + left: 0; + width: auto; + height: auto; + padding: 2em; + opacity: 0; + transition: opacity .25s ease; + -webkit-transition: opacity .25s ease; + } + + #toc-copy:before { + content: 'Table of contents'; + display: block; + margin: -.25em 0 1em; + font-size: 75%; + font-weight: 300; + text-transform: uppercase; + } + + .scrolled #toc-copy { opacity: 1; } + + #toc-copy h4 { padding-right: 5em; } + + #toc-copy ul { + position: absolute; + left: 100%; + margin: -4.9em 0 0 -4.5em; + padding: 3em 6em 3em 0; + } + + #toc-copy h4:hover + ul, + #toc-copy ul:hover { + display: block; + } + + #toc-copy h4:hover + ul:before, + #toc-copy ul:hover:before { + content: ''; + position: absolute; + top: 3.775em; + right: 100%; + margin-right: .25em; + width: 1em; + height: 1em; + border-top: 2px solid #eee; + } + + #toc-copy h4:hover + ul:after, + #toc-copy ul:hover:after { + content: ''; + position: absolute; + z-index: -1; + top: -1000px; + bottom: -1000px; + left: 0; + right: 3em; + background: white; + background: rgba(255,255,255,0.9); + display: block; + } + + #toc-copy h4:hover, #toc-copy h4.hover { + color: black; + cursor: pointer; + } +} + +/* API docs - tables */ + .api-page table td { color: #666; } diff --git a/docs/js/docs.js b/docs/js/docs.js new file mode 100644 index 00000000..7cfde99a --- /dev/null +++ b/docs/js/docs.js @@ -0,0 +1,52 @@ + +var tocCopy = document.createElement('div'); +tocCopy.id = 'toc-copy'; + +var toc = document.querySelector('.api-page #toc'); + +if (toc) { + tocCopy.innerHTML = toc.innerHTML; + document.getElementsByClassName('container')[0].appendChild(tocCopy); + + var menus = document.querySelectorAll('#toc-copy ul'); + + for (var i = 0; i < menus.length; i++) { + menus[i].addEventListener('mouseover', function() { + this.previousElementSibling.classList.add('hover') + }); + + menus[i].addEventListener('mouseout', function() { + this.previousElementSibling.classList.remove('hover') + }); + } + + var labels = document.querySelectorAll('#toc-copy h4'); + + for (var i = 0; i < labels.length; i++) { + labels[i].addEventListener('click', function() { + this.classList.toggle('active') + }); + } + + tocCopy.addEventListener('click', function(e) { + if (e.target.nodeName != 'H4') { + this.classList.toggle('active'); + } + }); + + var scrollPos = function scrollPos () { + var scroll = window.scrollY; + + if (scroll >= (toc.offsetHeight + toc.offsetTop)) { + document.body.classList.add('scrolled'); + } else { + document.body.classList.remove('scrolled'); + } + } + + scrollPos(); + + window.addEventListener('scroll', function(e) { + scrollPos(); + }); +}