nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2025-07-10 17:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

menu: rebuild collapsible expander

Browse source 
because sizing and positioning was a mess;
the follwing things are fixed with this:
- resizes and positions correctly according to html elements font-size
- IE11 compatiblity is now given
- a11y: expander is now correctly given a focus outline
- chevron is now coded into html instead of a css content value, which makes it easier to change (was an issue in the past)
- the visited checkmark now breaks correctly on long lines and hides behind the text if necessary
- some more css classes were introduced to make further extensions (eg. nested shortcut links) easier
This commit is contained in:
Sören Weber 2023-02-24 23:29:33 +01:00
parent cbe565db22
commit c0a1c9cbcb
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
8 changed files with 192 additions and 193 deletions
static/js
theme.js

12
static/js/theme.js
View file

@ -550,7 +550,7 @@ function initMenuScrollbar(){
});
// now that we may have collapsible menus, we need to call a resize
// for the menu scrollbar if sections are expanded/collapsed
document.querySelectorAll('#sidebar .collapsible-menu input.toggle').forEach( function(e){
document.querySelectorAll('#sidebar .collapsible-menu input').forEach( function(e){
e.addEventListener('change', function(){
psm && setTimeout( function(){ psm.update(); }, 10 );
});
@ -828,7 +828,7 @@ function initScrollPositionSaver(){
function scrollToPositions() {
// show active menu entry
window.setTimeout( function(){
var e = document.querySelector( '#sidebar ul.topics li.active a' );
var e = document.querySelector( '#sidebar li.active a' );
if( e && e.scrollIntoView ){
e.scrollIntoView({
block: 'center',
@ -910,8 +910,8 @@ function mark() {
expandInputs[0].checked = true;
}
}
if( parent.tagName.toLowerCase() === 'li' ){
var toggleInputs = parent.querySelectorAll( 'input.toggle:not(.menu-marked)' );
if( parent.tagName.toLowerCase() === 'li' && parent.parentNode && parent.parentNode.tagName.toLowerCase() === 'ul' && parent.parentNode.classList.contains( 'collapsible-menu' )){
var toggleInputs = parent.querySelectorAll( 'input:not(.menu-marked)' );
if( toggleInputs.length ){
toggleInputs[0].classList.add( 'menu-marked' );
toggleInputs[0].dataset.checked = toggleInputs[0].checked ? 'true' : 'false';
@ -987,8 +987,8 @@ function unmark() {
for( var i = 0; i < markedElements.length; i++ ){
var parent = markedElements[i].parentNode;
while( parent && parent.classList ){
if( parent.tagName.toLowerCase() === 'li' ){
var toggleInputs = parent.querySelectorAll( 'input.toggle.menu-marked' );
if( parent.tagName.toLowerCase() === 'li' && parent.parentNode && parent.parentNode.tagName.toLowerCase() === 'ul' && parent.parentNode.classList.contains( 'collapsible-menu' )){
var toggleInputs = parent.querySelectorAll( 'input.menu-marked' );
if( toggleInputs.length ){
toggleInputs[0].checked = toggleInputs[0].dataset.checked === 'true';
toggleInputs[0].dataset.checked = null;