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 toggleTocElem = document.getElementById('toggle-toc');
var singleContentsElem = document.querySelector('.single__contents'); var singleContentsElem = document.querySelector('.single__contents');
var navbar = document.querySelector('.navbar'); var navbar = document.querySelector('.navbar');
var tocFlexbox = document.querySelector('.toc__flexbox');
var tocFlexboxOuter = document.querySelector('.toc__flexbox--outer');
window.onscroll = function () { window.onscroll = function () {
scrollFunction(); scrollFunction();
@ -213,40 +215,56 @@
} else if (navbar.classList.contains('navbar--show')) { } else if (navbar.classList.contains('navbar--show')) {
navbar.classList.remove('navbar--show'); 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') ? if (singleContentsElem) {
tableOfContentsElem.querySelector('ul').querySelectorAll('li').forEach(function (liElem) { if (singleContentsElem.querySelectorAll("h1, h2, h3, h4, h5, h6").length > 0) {
liElem.querySelectorAll('ul').forEach(function (ulElem) { singleContentsElem.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(function (elem) {
ulElem.style.display = 'none'; if (toggleTocElem && !toggleTocElem.checked) {
}); return null;
}) : null; }
var curElem = tableOfContentsElem.querySelector("[href='#" + id + "']"); if (document.documentElement.scrollTop >= elem.offsetTop) {
if (curElem && curElem.nextElementSibling) { if (tableOfContentsElem) {
curElem.nextElementSibling.style.display = 'block'; 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 } else { // scroll up
if (st < 250) { if (st < 250) {
gttBtn.style.display = "none"; gttBtn.style.display = "none";
@ -258,40 +276,51 @@
navbar.classList.add('navbar--show'); navbar.classList.add('navbar--show');
} }
singleContentsElem ? if (singleContentsElem) {
singleContentsElem.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(function(elem) { if (singleContentsElem.querySelectorAll("h1, h2, h3, h4, h5, h6").length > 0) {
if (toggleTocElem && !toggleTocElem.checked) { singleContentsElem.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(function (elem) {
return null; 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';
} }
getParents(curElem, 'ul') ?
getParents(curElem, 'ul').forEach(function (elem) { if (document.documentElement.scrollTop >= elem.offsetTop) {
elem.style.display = 'block'; if (tableOfContentsElem) {
}) : null; 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) { if (tableOfContentsElem && document.documentElement.scrollTop < 250) {
tableOfContentsElem.querySelector('ul') ? tableOfContentsElem.querySelector('ul') ?

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

@ -116,6 +116,8 @@
var enableToc = JSON.parse({{ $enableToc | jsonify }}); var enableToc = JSON.parse({{ $enableToc | jsonify }});
var toc = JSON.parse({{ $toc | jsonify }}); var toc = JSON.parse({{ $toc | jsonify }});
var hideToc = JSON.parse({{ $hideToc | 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')) { if ((enableToc || toc) && document.querySelector('.toc')) {
var tableOfContentsElem = document.querySelector('.toc').querySelector('#TableOfContents'); var tableOfContentsElem = document.querySelector('.toc').querySelector('#TableOfContents');
@ -126,37 +128,54 @@
}); });
}) : null; }) : null;
tableOfContentsElem.querySelectorAll('a').forEach(function(elem) { if (tableOfContentsElem) {
elem.addEventListener('click', function() { if (tableOfContentsElem.querySelectorAll('a').length > 0) {
var id = elem.getAttribute('id'); tableOfContentsElem.querySelectorAll('a').forEach(function (elem) {
navbar.classList.remove('navbar--show'); elem.addEventListener('click', function () {
navbar.classList.remove('navbar--hide'); var id = elem.getAttribute('id');
navbar.classList.add('navbar--hide'); navbar.classList.remove('navbar--show');
navbar.classList.remove('navbar--hide');
navbar.classList.add('navbar--hide');
document.querySelector('.toc').querySelectorAll('a').forEach(function(elem) { document.querySelector('.toc').querySelectorAll('a').forEach(function (elem) {
elem.classList.remove('active'); elem.classList.remove('active');
}); });
elem.classList.add('active'); elem.classList.add('active');
tableOfContentsElem.querySelector('ul') ? tableOfContentsElem.querySelector('ul') ?
tableOfContentsElem.querySelector('ul').querySelectorAll('li').forEach(function (liElem) { tableOfContentsElem.querySelector('ul').querySelectorAll('li').forEach(function (liElem) {
liElem.querySelectorAll('ul').forEach(function (ulElem) { liElem.querySelectorAll('ul').forEach(function (ulElem) {
ulElem.style.display = 'none'; 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; });
} else {
var curElem = tableOfContentsElem.querySelector('[href="#' + id + '"]'); if (tocFlexbox) {
if (curElem && curElem.nextElementSibling) { tocFlexbox.setAttribute('data-position', '');
curElem.nextElementSibling.style.display = 'block'; if (!tocFlexbox.classList.contains('hide')) {
tocFlexbox.classList.add('hide');
}
} }
if (curElem) { if (tocFlexboxOuter) {
getParents(curElem, 'ul') ? tocFlexboxOuter.setAttribute('data-position', '');
getParents(curElem, 'ul').forEach(function (elem) { if (!tocFlexboxOuter.classList.contains('hide')) {
elem.style.display = 'block'; tocFlexboxOuter.classList.add('hide');
}) : null; }
} }
}); }
}); }
// toc visibility // toc visibility
var toggleTocElem = document.getElementById("toggle-toc"); var toggleTocElem = document.getElementById("toggle-toc");
@ -234,7 +253,7 @@
// ==================== add links in all titles ==================== // ==================== add links in all titles ====================
var text, clip = new ClipboardJS('.anchor'); var text, clip = new ClipboardJS('.anchor');
var headers = singleContentsElem.querySelectorAll("h1, h2, h3, h4"); var headers = singleContentsElem.querySelectorAll("h1, h2, h3, h4");
headers ? headers ?
headers.forEach(function (elem) { headers.forEach(function (elem) {
var url = encodeURI(document.location.origin + document.location.pathname); var url = encodeURI(document.location.origin + document.location.pathname);