Left and right nav resizing w/footer scroll and window resize

This commit is contained in:
John Mulhausen 2017-03-01 20:18:19 -08:00
parent ef029a9436
commit 18a7003915
No known key found for this signature in database
GPG Key ID: 0FC599ECCDBFDE02
4 changed files with 59 additions and 51 deletions

View File

@ -149,40 +149,6 @@ else %}{% assign edit_url = "" %}{% endif %} {% break %} {% endif %} {% endfor %
{% endunless %}
</div>
</div>
<script language="javascript">
var x = document.links.length;
var baseHref = document.getElementsByTagName('base')[0].href
for (i = 0; i < x; i++) {
var munged = false;
var thisHREF = document.links[i].href;
var originalURL = "{{ page.url }}";
if (thisHREF.indexOf(baseHref + "#") > -1) {
// hash fix
//console.log('BEFORE: base:',baseHref,'thisHREF:',thisHREF,'originalURL:',originalURL);
thisHREF = originalURL + thisHREF.replace(baseHref, "");
//console.log('AFTER: base:',baseHref,'thisHREF:',thisHREF,'originalURL:',originalURL);
}
if ((thisHREF.indexOf(window.location.hostname) > -1 || thisHREF.indexOf('http') == -1) && document.links[i].className.indexOf("nomunge") < 0) {
munged = true;
thisHREF = thisHREF.replace(".md", "/").replace("/index/", "/");
document.links[i].setAttribute('href', thisHREF);
}
}
</script>
<script language="javascript">
// ensure that the left nav visibly displays the current topic
var current = document.getElementsByClassName("active currentPage");
if (current[0]) {
var container = document.getElementsByClassName("sidebar");
if (container[0]) {
current[0].scrollIntoView(true);
container[0].scrollTop -= 150;
}
}
</script>
</div>
</div>
</div>

View File

@ -1,14 +0,0 @@
---
hide_from_sitemap: true
layout: null
title: All site links for docs.docker.com
---
{% assign pages = site.pages | sort:"path" %}
{% for page in pages %}
{% unless page.layout == null %}
{% unless page.title == nil %}
- [{{page.title}}]({{page.url}})
{% endunless %}
{% endunless %}
{% endfor %}

View File

@ -3,6 +3,11 @@
* this css will be integrated into master. for now testing.......
*
*/
.toc-nav
{
padding-bottom: 50px !important;
}
.alert-info {
border: 0;
border-radius: 0;

View File

@ -1,9 +1,42 @@
// Right nav highlighting
var sidebarBottom = document.getElementsByClassName("sidebar")[0].getBoundingClientRect().bottom;
var footerTop = document.getElementsByClassName("footer")[0].getBoundingClientRect().top;
var headerOffset = document.getElementsByClassName("container-fluid")[0].getBoundingClientRect().bottom;
var x = document.links.length;
var baseHref = document.getElementsByTagName('base')[0].href
for (i = 0; i < x; i++) {
var munged = false;
var thisHREF = document.links[i].href;
var originalURL = "{{ page.url }}";
if (thisHREF.indexOf(baseHref + "#") > -1) {
// hash fix
//console.log('BEFORE: base:',baseHref,'thisHREF:',thisHREF,'originalURL:',originalURL);
thisHREF = originalURL + thisHREF.replace(baseHref, "");
//console.log('AFTER: base:',baseHref,'thisHREF:',thisHREF,'originalURL:',originalURL);
}
if ((thisHREF.indexOf(window.location.hostname) > -1 || thisHREF.indexOf('http') == -1) && document.links[i].className.indexOf("nomunge") < 0) {
munged = true;
thisHREF = thisHREF.replace(".md", "/").replace("/index/", "/");
document.links[i].setAttribute('href', thisHREF);
}
}
// ensure that the left nav visibly displays the current topic
var current = document.getElementsByClassName("active currentPage");
if (current[0]) {
var container = document.getElementsByClassName("sidebar");
if (container[0]) {
current[0].scrollIntoView(true);
container[0].scrollTop -= 150;
}
}
function highlightRightNav(heading)
{
if (heading == "title")
{
history.pushState({},"Top of page on " + document.location.pathname,document.location.protocol +"//"+ document.location.hostname + (location.port ? ':'+location.port: '') + document.location.pathname);
history.replaceState({},"Top of page on " + document.location.pathname,document.location.protocol +"//"+ document.location.hostname + (location.port ? ':'+location.port: '') + document.location.pathname);
$("#my_toc a").each(function(){
$(this).removeClass("active");
});
@ -26,10 +59,11 @@ function highlightRightNav(heading)
//console.log("right-nav",this.href);
if (this.href==targetAnchorHREF)
{
history.pushState({},this.innerText,targetAnchorHREF);
history.replaceState({},this.innerText,targetAnchorHREF);
$(this).addClass("active");
var sidebarOffset = (sidebarBottom > 200) ? 200 : headerOffset - 20;
$("#sidebar-wrapper").animate({
scrollTop: $("#sidebar-wrapper").scrollTop() + $(this).position().top - 200
scrollTop: $("#sidebar-wrapper").scrollTop() + $(this).position().top - sidebarOffset
},100);
//document.getElementById("sidebar-wrapper").scrollTop = this.getBoundingClientRect().top - 200;
} else {
@ -39,8 +73,25 @@ function highlightRightNav(heading)
}
}
}
function checkNavSizes()
{
sidebarBottom = document.getElementsByClassName("sidebar")[0].getBoundingClientRect().bottom;
footerTop = document.getElementsByClassName("footer")[0].getBoundingClientRect().top;
headerOffset = document.getElementsByClassName("container-fluid")[0].getBoundingClientRect().bottom;
if (footerTop < sidebarBottom || (sidebarBottom < footerTop && sidebarBottom < $(window).height()))
{
// the footer is overlapping the sidebar
document.getElementsByClassName("sidebar")[0].style.height = (footerTop - headerOffset) + "px";
document.getElementsByClassName("toc-nav")[0].style.height = (footerTop) + "px";
highlightRightNav(currentHeading);
}
}
$(window).resize(function() {
checkNavSizes();
});
var currentHeading = "";
$(window).scroll(function(){
checkNavSizes();
var headingPositions = new Array();
$("h1, h2, h3, h4, h5, h6").each(function(){
if (this.id == "") this.id="title";