diff --git a/docs/_includes/components/anchors.html b/docs/_includes/components/anchors.html new file mode 100644 index 00000000..c66065c4 --- /dev/null +++ b/docs/_includes/components/anchors.html @@ -0,0 +1,8 @@ +
+ diff --git a/docs/_includes/elements/anchor.html b/docs/_includes/elements/anchor.html index 946f49ca..5ab9cf67 100644 --- a/docs/_includes/elements/anchor.html +++ b/docs/_includes/elements/anchor.html @@ -1,7 +1,9 @@

- {{ include.name }} + + {{ include.name }} + # diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index 67459d3b..7df0b12f 100644 --- a/docs/_javascript/main.js +++ b/docs/_javascript/main.js @@ -5,26 +5,6 @@ document.addEventListener('DOMContentLoaded', () => { const cookieBookModalName = 'bulma_closed_book_modal'; const cookieBookModal = Cookies.getJSON(cookieBookModalName) || false; - // Book modal - - // const $bookModal = document.getElementById('bookModal'); - // const $bookModalCloseButtons = getAll('.bd-book-modal-close'); - - // if (!cookieBookModal) { - // setTimeout(() => { - // openModal('bookModal'); - // }, 5000); - // } - - // if ($bookModalCloseButtons.length > 0) { - // $bookModalCloseButtons.forEach($el => { - // $el.addEventListener('click', event => { - // event.stopPropagation(); - // Cookies.set(cookieBookModalName, true, { expires: 30 }); - // }); - // }); - // } - // Sidebar links const $categories = getAll('#categories .bd-category'); @@ -49,6 +29,56 @@ document.addEventListener('DOMContentLoaded', () => { }); } + const anchors_ref_el = document.getElementById('anchorsReference'); + const anchors_el = document.getElementById('anchors'); + const anchor_links_el = getAll('.bd-anchor-link'); + + if (anchors_el && anchor_links_el.length > 0) { + const anchors_el_list = anchors_el.querySelector('.bd-anchors-list'); + + anchor_links_el.forEach(el => { + const link_target = el.getAttribute('href'); + const link_text = el.previousElementSibling.innerText; + + if (link_text != '') { + const item_el = createAnchorLink(link_text, link_target); + anchors_el_list.appendChild(item_el); + } + }); + + const back_to_top_el = createAnchorLink('Back to top', ''); + back_to_top_el.onclick = scrollToTop; + anchors_el_list.appendChild(back_to_top_el); + } + + function scrollToTop() { + window.scrollTo(0, 0); + } + + function createAnchorLink(text, target) { + const item_el = document.createElement('li'); + const link_el = document.createElement('a'); + const text_node = document.createTextNode(text); + + if (target) { + link_el.setAttribute('href', target); + } + + link_el.appendChild(text_node); + item_el.appendChild(link_el); + + return item_el; + } + + function closeCategories(current_el) { + $categories.forEach(el => { + if (current_el == el) { + return; + } + el.classList.remove('is-active'); + }); + } + // Meta links const $metalinks = getAll('#meta a'); @@ -220,6 +250,7 @@ document.addEventListener('DOMContentLoaded', () => { // Scrolling + const html_el = document.documentElement; const navbarEl = document.getElementById('navbar'); const navbarBurger = document.getElementById('navbarBurger'); const specialShadow = document.getElementById('specialShadow'); @@ -241,6 +272,18 @@ document.addEventListener('DOMContentLoaded', () => { } }); + function whenScrolling(lastY, currentY) { + if (anchors_ref_el) { + const bounds = anchors_ref_el.getBoundingClientRect(); + + if (bounds.top < 1) { + anchors_el.classList.add('is-pinned'); + } else { + anchors_el.classList.remove('is-pinned'); + } + } + } + function upOrDown(lastY, currentY) { if (currentY >= lastY) { return goingDown(currentY); @@ -310,23 +353,22 @@ document.addEventListener('DOMContentLoaded', () => { } } - // translateHeader(window.scrollY, false); + let ticking = false; + let lastY = 0; - // let ticking = false; - // let lastY = 0; + window.addEventListener('scroll', function() { + const currentY = window.scrollY; - // window.addEventListener('scroll', function() { - // const currentY = window.scrollY; + if (!ticking) { + window.requestAnimationFrame(function() { + // upOrDown(lastY, currentY); + whenScrolling(lastY, currentY); + ticking = false; + lastY = currentY; + }); + } - // if (!ticking) { - // window.requestAnimationFrame(function() { - // upOrDown(lastY, currentY); - // ticking = false; - // lastY = currentY; - // }); - // } - - // ticking = true; - // }); + ticking = true; + }); }); diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index d4c07c4b..a2eccb6f 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -85,6 +85,7 @@ route: documentation diff --git a/docs/_sass/main.sass b/docs/_sass/main.sass index 38cc1af6..53f2fb92 100644 --- a/docs/_sass/main.sass +++ b/docs/_sass/main.sass @@ -77,6 +77,19 @@ right: 0 top: 0 +%bd-list + font-size: 0.875rem + li + &:not(:last-child) + margin-bottom: 0.5em + &.is-current + a + color: $link + a + color: $text-light + &:hover + color: $link + .bd-category a &:hover @@ -110,17 +123,30 @@ position: relative .bd-category-list + @extend %bd-list display: none - font-size: 0.875rem padding: 0.5rem + +.bd-anchors-reference + height: 1px + +.bd-anchors + padding-top: calc(1.5rem - 1px) + &.is-pinned + position: fixed + top: 0 + +.bd-anchors-title + color: $grey-light + font-size: 0.875rem + font-weight: $weight-semibold + margin-bottom: 0.5rem + +.bd-anchors-list + @extend %bd-list li - &:not(:last-child) - margin-bottom: 0.5em - &.is-current - a - color: $link - a - color: $text-light + &:last-child + margin-top: 1em +touch .bd-lead, diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 068c01b2..975aec77 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -9604,6 +9604,26 @@ label.panel-block:hover { top: 0; } +.bd-category-list, .bd-anchors-list { + font-size: 0.875rem; +} + +.bd-category-list li:not(:last-child), .bd-anchors-list li:not(:last-child) { + margin-bottom: 0.5em; +} + +.bd-category-list li.is-current a, .bd-anchors-list li.is-current a { + color: #3273dc; +} + +.bd-category-list a, .bd-anchors-list a { + color: #7a7a7a; +} + +.bd-category-list a:hover, .bd-anchors-list a:hover { + color: #3273dc; +} + .bd-category a:hover { color: #3273dc; } @@ -9645,20 +9665,31 @@ label.panel-block:hover { .bd-category-list { display: none; - font-size: 0.875rem; padding: 0.5rem; } -.bd-category-list li:not(:last-child) { - margin-bottom: 0.5em; +.bd-anchors-reference { + height: 1px; } -.bd-category-list li.is-current a { - color: #3273dc; +.bd-anchors { + padding-top: calc(1.5rem - 1px); } -.bd-category-list a { - color: #7a7a7a; +.bd-anchors.is-pinned { + position: fixed; + top: 0; +} + +.bd-anchors-title { + color: #b5b5b5; + font-size: 0.875rem; + font-weight: 600; + margin-bottom: 0.5rem; +} + +.bd-anchors-list li:last-child { + margin-top: 1em; } @media screen and (max-width: 1087px) { diff --git a/docs/lib/main.js b/docs/lib/main.js index 7c526ee8..5ff21d05 100644 --- a/docs/lib/main.js +++ b/docs/lib/main.js @@ -7,26 +7,6 @@ document.addEventListener('DOMContentLoaded', function () { var cookieBookModalName = 'bulma_closed_book_modal'; var cookieBookModal = Cookies.getJSON(cookieBookModalName) || false; - // Book modal - - // const $bookModal = document.getElementById('bookModal'); - // const $bookModalCloseButtons = getAll('.bd-book-modal-close'); - - // if (!cookieBookModal) { - // setTimeout(() => { - // openModal('bookModal'); - // }, 5000); - // } - - // if ($bookModalCloseButtons.length > 0) { - // $bookModalCloseButtons.forEach($el => { - // $el.addEventListener('click', event => { - // event.stopPropagation(); - // Cookies.set(cookieBookModalName, true, { expires: 30 }); - // }); - // }); - // } - // Sidebar links var $categories = getAll('#categories .bd-category'); @@ -51,6 +31,56 @@ document.addEventListener('DOMContentLoaded', function () { }); } + var anchors_ref_el = document.getElementById('anchorsReference'); + var anchors_el = document.getElementById('anchors'); + var anchor_links_el = getAll('.bd-anchor-link'); + + if (anchors_el && anchor_links_el.length > 0) { + var anchors_el_list = anchors_el.querySelector('.bd-anchors-list'); + + anchor_links_el.forEach(function (el) { + var link_target = el.getAttribute('href'); + var link_text = el.previousElementSibling.innerText; + + if (link_text != '') { + var item_el = createAnchorLink(link_text, link_target); + anchors_el_list.appendChild(item_el); + } + }); + + var back_to_top_el = createAnchorLink('Back to top', ''); + back_to_top_el.onclick = scrollToTop; + anchors_el_list.appendChild(back_to_top_el); + } + + function scrollToTop() { + window.scrollTo(0, 0); + } + + function createAnchorLink(text, target) { + var item_el = document.createElement('li'); + var link_el = document.createElement('a'); + var text_node = document.createTextNode(text); + + if (target) { + link_el.setAttribute('href', target); + } + + link_el.appendChild(text_node); + item_el.appendChild(link_el); + + return item_el; + } + + function closeCategories(current_el) { + $categories.forEach(function (el) { + if (current_el == el) { + return; + } + el.classList.remove('is-active'); + }); + } + // Meta links var $metalinks = getAll('#meta a'); @@ -222,6 +252,7 @@ document.addEventListener('DOMContentLoaded', function () { // Scrolling + var html_el = document.documentElement; var navbarEl = document.getElementById('navbar'); var navbarBurger = document.getElementById('navbarBurger'); var specialShadow = document.getElementById('specialShadow'); @@ -243,6 +274,18 @@ document.addEventListener('DOMContentLoaded', function () { } }); + function whenScrolling(lastY, currentY) { + if (anchors_ref_el) { + var bounds = anchors_ref_el.getBoundingClientRect(); + + if (bounds.top < 1) { + anchors_el.classList.add('is-pinned'); + } else { + anchors_el.classList.remove('is-pinned'); + } + } + } + function upOrDown(lastY, currentY) { if (currentY >= lastY) { return goingDown(currentY); @@ -310,22 +353,21 @@ document.addEventListener('DOMContentLoaded', function () { } } - // translateHeader(window.scrollY, false); + var ticking = false; + var lastY = 0; - // let ticking = false; - // let lastY = 0; + window.addEventListener('scroll', function () { + var currentY = window.scrollY; - // window.addEventListener('scroll', function() { - // const currentY = window.scrollY; + if (!ticking) { + window.requestAnimationFrame(function () { + // upOrDown(lastY, currentY); + whenScrolling(lastY, currentY); + ticking = false; + lastY = currentY; + }); + } - // if (!ticking) { - // window.requestAnimationFrame(function() { - // upOrDown(lastY, currentY); - // ticking = false; - // lastY = currentY; - // }); - // } - - // ticking = true; - // }); + ticking = true; + }); }); \ No newline at end of file