kienan
/
hugo-theme-zzo
mirror of https://github.com/zzossig/hugo-theme-zzo.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

hide toc when no titles

This commit is contained in:
zzossig 2020-01-24 04:25:57 +09:00
parent d314aa4f85
commit f6c6469cd6
2 changed files with 136 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
layouts/partials/head/scripts.html
View File

@ -192,6 +192,8 @@
var toggleTocElem = document.getElementById('toggle-toc');
var singleContentsElem = document.querySelector('.single__contents');
var navbar = document.querySelector('.navbar');
var tocFlexbox = document.querySelector('.toc__flexbox');
var tocFlexboxOuter = document.querySelector('.toc__flexbox--outer');
window.onscroll = function () {
scrollFunction();
@ -214,39 +216,55 @@
navbar.classList.remove('navbar--show');
}
singleContentsElem ?
singleContentsElem.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(function(elem) {
if (toggleTocElem && !toggleTocElem.checked) {
return null;
}
if (document.documentElement.scrollTop >= elem.offsetTop) {
if (tableOfContentsElem) {
var id = elem.getAttribute('id');
tocElem.querySelectorAll('a').forEach(function (elem) {
elem.classList.remove('active');
});
tocElem.querySelector('a[href="#' + id + '"]') ?
tocElem.querySelector('a[href="#' + id + '"]').classList.add('active') : null;
tableOfContentsElem.querySelector('ul') ?
tableOfContentsElem.querySelector('ul').querySelectorAll('li').forEach(function (liElem) {
liElem.querySelectorAll('ul').forEach(function (ulElem) {
ulElem.style.display = 'none';
});
}) : null;
var curElem = tableOfContentsElem.querySelector("[href='#" + id + "']");
if (curElem && curElem.nextElementSibling) {
curElem.nextElementSibling.style.display = 'block';
if (singleContentsElem) {
if (singleContentsElem.querySelectorAll("h1, h2, h3, h4, h5, h6").length > 0) {
singleContentsElem.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(function (elem) {
if (toggleTocElem && !toggleTocElem.checked) {
return null;
}
if (document.documentElement.scrollTop >= elem.offsetTop) {
if (tableOfContentsElem) {
var id = elem.getAttribute('id');
tocElem.querySelectorAll('a').forEach(function (elem) {
elem.classList.remove('active');
});
tocElem.querySelector('a[href="#' + id + '"]') ?
tocElem.querySelector('a[href="#' + id + '"]').classList.add('active') : null;
tableOfContentsElem.querySelector('ul') ?
tableOfContentsElem.querySelector('ul').querySelectorAll('li').forEach(function (liElem) {
liElem.querySelectorAll('ul').forEach(function (ulElem) {
ulElem.style.display = 'none';
});
}) : null;
var curElem = tableOfContentsElem.querySelector("[href='#" + id + "']");
if (curElem && curElem.nextElementSibling) {
curElem.nextElementSibling.style.display = 'block';
}
getParents(curElem, 'ul') ?
getParents(curElem, 'ul').forEach(function (elem) {
elem.style.display = 'block';
}) : null;
}
}
});
} else {
if (tocFlexbox) {
tocFlexbox.setAttribute('data-position', '');
if (!tocFlexbox.classList.contains('hide')) {
tocFlexbox.classList.add('hide');
}
}
if (tocFlexboxOuter) {
tocFlexboxOuter.setAttribute('data-position', '');
if (!tocFlexboxOuter.classList.contains('hide')) {
tocFlexboxOuter.classList.add('hide');
}
getParents(curElem, 'ul') ?
getParents(curElem, 'ul').forEach(function (elem) {
elem.style.display = 'block';
}) : null;
}
}
}) : null;
}
} else { // scroll up
if (st < 250) {
gttBtn.style.display = "none";
@ -258,40 +276,51 @@
navbar.classList.add('navbar--show');
}
singleContentsElem ?
singleContentsElem.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(function(elem) {
if (toggleTocElem && !toggleTocElem.checked) {
return null;
}
if (document.documentElement.scrollTop >= elem.offsetTop) {
if (tableOfContentsElem) {
var id = elem.getAttribute('id');
tocElem.querySelectorAll('a').forEach(function (elem) {
elem.classList.remove('active');
});
tocElem.querySelector('a[href="#' + id + '"]') ?
tocElem.querySelector('a[href="#' + id + '"]').classList.add('active') : null;
tableOfContentsElem.querySelectorAll('ul').forEach(function (rootUl) {
rootUl.querySelectorAll('li').forEach(function (liElem) {
liElem.querySelectorAll('ul').forEach(function (ulElem) {
ulElem.style.display = 'none';
});
});
});
var curElem = tableOfContentsElem.querySelector("[href='#" + id + "']");
if (curElem && curElem.nextElementSibling) {
curElem.nextElementSibling.style.display = 'block';
if (singleContentsElem) {
if (singleContentsElem.querySelectorAll("h1, h2, h3, h4, h5, h6").length > 0) {
singleContentsElem.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(function (elem) {
if (toggleTocElem && !toggleTocElem.checked) {
return null;
}
getParents(curElem, 'ul') ?
getParents(curElem, 'ul').forEach(function (elem) {
elem.style.display = 'block';
}) : null;
if (document.documentElement.scrollTop >= elem.offsetTop) {
if (tableOfContentsElem) {
var id = elem.getAttribute('id');
tocElem.querySelectorAll('a').forEach(function (elem) {
elem.classList.remove('active');
});
tocElem.querySelector('a[href="#' + id + '"]') ?
tocElem.querySelector('a[href="#' + id + '"]').classList.add('active') : null;
tableOfContentsElem.querySelectorAll('ul').forEach(function (rootUl) {
rootUl.querySelectorAll('li').forEach(function (liElem) {
liElem.querySelectorAll('ul').forEach(function (ulElem) {
ulElem.style.display = 'none';
});
});
});
var curElem = tableOfContentsElem.querySelector("[href='#" + id + "']");
if (curElem && curElem.nextElementSibling) {
curElem.nextElementSibling.style.display = 'block';
}
getParents(curElem, 'ul') ?
getParents(curElem, 'ul').forEach(function (elem) {
elem.style.display = 'block';
}) : null;
}
}
});
} else {
if (tocFlexbox && !tocFlexbox.classList.contains('hide')) {
tocFlexbox.classList.add('hide');
}
if (tocFlexboxOuter && !tocFlexboxOuter.classList.contains('hide')) {
tocFlexboxOuter.classList.add('hide');
}
}
}) : null;
}
if (tableOfContentsElem && document.documentElement.scrollTop < 250) {
tableOfContentsElem.querySelector('ul') ?

71
layouts/partials/script/single-script.html
View File

@ -116,6 +116,8 @@
var enableToc = JSON.parse({{ $enableToc | jsonify }});
var toc = JSON.parse({{ $toc | jsonify }});
var hideToc = JSON.parse({{ $hideToc | jsonify }});
var tocFlexbox = document.querySelector('.toc__flexbox');
var tocFlexboxOuter = document.querySelector('.toc__flexbox--outer');
if ((enableToc || toc) && document.querySelector('.toc')) {
var tableOfContentsElem = document.querySelector('.toc').querySelector('#TableOfContents');
@ -126,37 +128,54 @@
});
}) : null;
tableOfContentsElem.querySelectorAll('a').forEach(function(elem) {
elem.addEventListener('click', function() {
var id = elem.getAttribute('id');
navbar.classList.remove('navbar--show');
navbar.classList.remove('navbar--hide');
navbar.classList.add('navbar--hide');
if (tableOfContentsElem) {
if (tableOfContentsElem.querySelectorAll('a').length > 0) {
tableOfContentsElem.querySelectorAll('a').forEach(function (elem) {
elem.addEventListener('click', function () {
var id = elem.getAttribute('id');
navbar.classList.remove('navbar--show');
navbar.classList.remove('navbar--hide');
navbar.classList.add('navbar--hide');
document.querySelector('.toc').querySelectorAll('a').forEach(function(elem) {
elem.classList.remove('active');
});
elem.classList.add('active');
document.querySelector('.toc').querySelectorAll('a').forEach(function (elem) {
elem.classList.remove('active');
});
elem.classList.add('active');
tableOfContentsElem.querySelector('ul') ?
tableOfContentsElem.querySelector('ul').querySelectorAll('li').forEach(function (liElem) {
liElem.querySelectorAll('ul').forEach(function (ulElem) {
ulElem.style.display = 'none';
tableOfContentsElem.querySelector('ul') ?
tableOfContentsElem.querySelector('ul').querySelectorAll('li').forEach(function (liElem) {
liElem.querySelectorAll('ul').forEach(function (ulElem) {
ulElem.style.display = 'none';
});
}) : null;
var curElem = tableOfContentsElem.querySelector('[href="#' + id + '"]');
if (curElem && curElem.nextElementSibling) {
curElem.nextElementSibling.style.display = 'block';
}
if (curElem) {
getParents(curElem, 'ul') ?
getParents(curElem, 'ul').forEach(function (elem) {
elem.style.display = 'block';
}) : null;
}
});
}) : null;
var curElem = tableOfContentsElem.querySelector('[href="#' + id + '"]');
if (curElem && curElem.nextElementSibling) {
curElem.nextElementSibling.style.display = 'block';
});
} else {
if (tocFlexbox) {
tocFlexbox.setAttribute('data-position', '');
if (!tocFlexbox.classList.contains('hide')) {
tocFlexbox.classList.add('hide');
}
}
if (curElem) {
getParents(curElem, 'ul') ?
getParents(curElem, 'ul').forEach(function (elem) {
elem.style.display = 'block';
}) : null;
if (tocFlexboxOuter) {
tocFlexboxOuter.setAttribute('data-position', '');
if (!tocFlexboxOuter.classList.contains('hide')) {
tocFlexboxOuter.classList.add('hide');
}
}
});
});
}
}
// toc visibility
var toggleTocElem = document.getElementById("toggle-toc");