Mirrors/blow
2
0
Fork 0
mirror of https://github.com/tchartron/blow synced 2025-01-29 04:35:03 +00:00
Code Issues Projects Releases Packages Wiki Activity

update

Browse source
This commit is contained in:
Thomas Chartron 2021-11-13 17:21:20 +01:00
parent 14f6e658f3
commit 77d97e8493
2 changed files with 23 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/js/page.js
View file

@ -11,7 +11,6 @@ document.addEventListener("DOMContentLoaded", function() {
let current_selected_toc = null let current_selected_toc = null
let current_intersectiong_entry = null let current_intersectiong_entry = null
const observer = new window.IntersectionObserver(entries => { const observer = new window.IntersectionObserver(entries => {
console.log(entries)
entries.some(entry => { entries.some(entry => {
// console.log('observe') // console.log('observe')
// Add 'active' class if observation target is inside viewport // Add 'active' class if observation target is inside viewport
@ -20,23 +19,32 @@ document.addEventListener("DOMContentLoaded", function() {
console.log('before') console.log('before')
console.log('entry', entry) console.log('entry', entry)
console.log('current', current_intersectiong_entry) console.log('current', current_intersectiong_entry)
if (current_intersectiong_entry === null && entry.isIntersecting) { if (entry.isIntersecting) {
let res = findCorrespondingTocTitle(entry.target) if (current_intersectiong_entry === null) { // first page load
res.parentElement.classList.add('bg-blue-800'); let res = findCorrespondingTocTitle(entry.target)
current_intersectiong_entry = entry res.parentElement.classList.add('bg-blue-800');
return true; current_intersectiong_entry = entry
return true;
}
if (current_intersectiong_entry.boundingClientRect.y < 0) { //previous selected is out of viewport
current_intersectiong_entry.target.classList.remove('bg-blue-800');
let res = findCorrespondingTocTitle(entry.target) //First intersection entry
res.parentElement.classList.add('bg-blue-800');
current_intersectiong_entry = entry
return true;
}
} }
console.log('after') console.log('after')
console.log('entry', entry) console.log('entry', entry)
console.log('current', current_intersectiong_entry) console.log('current', current_intersectiong_entry)
if (entry.isIntersecting === false) { //some section got out of viewport remove its active class and add to next sibling // if (entry.isIntersecting === false) { //some section got out of viewport remove its active class and add to next sibling
let res = findCorrespondingTocTitle(entry.target) //First intersection entry // let res = findCorrespondingTocTitle(entry.target) //First intersection entry
res.parentElement.classList.remove('bg-blue-800'); // res.parentElement.classList.remove('bg-blue-800');
res.parentElement.nextElementSibling.classList.add('bg-blue-800'); // res.parentElement.nextElementSibling.classList.add('bg-blue-800');
current_intersectiong_entry = entry // current_intersectiong_entry = entry
return true; // return true;
// current_intersectiong_entry = null // // current_intersectiong_entry = null
} // }
// current_intersectiong_entry = entry // current_intersectiong_entry = entry
// if (current_intersectiong_entry !== null && current_intersectiong_entry.target === entry.target && entry.isIntersecting === false) { // if (current_intersectiong_entry !== null && current_intersectiong_entry.target === entry.target && entry.isIntersecting === false) {

2
static/js/page.js
View file

@ -1 +1 @@
function findCorrespondingTocTitle(n){return[...document.querySelectorAll("#toc li a")].find(e=>e.href.substring(e.href.indexOf("#"))==="#"+n.id)}document.addEventListener("DOMContentLoaded",function(){document.getElementById("navbar").clientHeight,document.getElementById("toc");var e=document.querySelectorAll("#toc li a");document.getElementById("page-content");let t=null;const n=new window.IntersectionObserver(e=>{console.log(e),e.some(n=>{if(console.log("before"),console.log("entry",n),console.log("current",t),null===t&&n.isIntersecting){let e=findCorrespondingTocTitle(n.target);return e.parentElement.classList.add("bg-blue-800"),t=n,!0}if(console.log("after"),console.log("entry",n),console.log("current",t),!1===n.isIntersecting){let e=findCorrespondingTocTitle(n.target);return e.parentElement.classList.remove("bg-blue-800"),e.parentElement.nextElementSibling.classList.add("bg-blue-800"),t=n,!0}})},{root:null,threshold:.1});var o=[];[...e].forEach(e=>{o.push(e.href.substring(e.href.indexOf("#")))});const l=document.querySelectorAll(o.join(","));l.forEach(e=>{n.observe(e)})}); function findCorrespondingTocTitle(n){return[...document.querySelectorAll("#toc li a")].find(e=>e.href.substring(e.href.indexOf("#"))==="#"+n.id)}document.addEventListener("DOMContentLoaded",function(){document.getElementById("navbar").clientHeight,document.getElementById("toc");var e=document.querySelectorAll("#toc li a");document.getElementById("page-content");let t=null;const n=new window.IntersectionObserver(e=>{e.some(n=>{if(console.log("before"),console.log("entry",n),console.log("current",t),n.isIntersecting){if(null===t){let e=findCorrespondingTocTitle(n.target);return e.parentElement.classList.add("bg-blue-800"),t=n,!0}if(t.boundingClientRect.y<0){t.target.classList.remove("bg-blue-800");let e=findCorrespondingTocTitle(n.target);return e.parentElement.classList.add("bg-blue-800"),t=n,!0}}console.log("after"),console.log("entry",n),console.log("current",t)})},{root:null,threshold:.1});var o=[];[...e].forEach(e=>{o.push(e.href.substring(e.href.indexOf("#")))});const r=document.querySelectorAll(o.join(","));r.forEach(e=>{n.observe(e)})});