valvin
/
ttrss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sticky header: better positioning strategy

This commit is contained in:
Andrew Dolgov 2021-03-12 11:59:26 +03:00
parent 52d1a5c96d
commit e85cba5958
1 changed files with 24 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
js/Headlines.js
View File

@ -17,17 +17,27 @@ const Headlines = {
sticky_header_observer: new IntersectionObserver( sticky_header_observer: new IntersectionObserver(
(entries, observer) => { (entries, observer) => {
entries.forEach((entry) => { entries.forEach((entry) => {
const header = entry.target.nextElementSibling; const header = entry.target.closest('.cdm').querySelector(".header");
if (entry.intersectionRatio == 0) { if (entry.isIntersecting) {
header.setAttribute("data-is-stuck", "true");
} else if (entry.intersectionRatio == 1) {
header.removeAttribute("data-is-stuck"); header.removeAttribute("data-is-stuck");
} else {
header.setAttribute("data-is-stuck", "true");
} }
//console.log(entry.target, header, entry.intersectionRatio); //console.log(entry.target, entry.intersectionRatio, entry.isIntersecting, entry.boundingClientRect.top);
});
},
{threshold: [0, 1], root: document.querySelector("#headlines-frame")}
),
sticky_content_observer: new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry) => {
const header = entry.target.closest('.cdm').querySelector(".header");
header.style.position = entry.isIntersecting ? "sticky" : "unset";
//console.log(entry.target, entry.intersectionRatio, entry.isIntersecting, entry.boundingClientRect.top);
}); });
}, },
{threshold: [0, 1], root: document.querySelector("#headlines-frame")} {threshold: [0, 1], root: document.querySelector("#headlines-frame")}
@ -429,6 +439,10 @@ const Headlines = {
this.sticky_header_observer.observe(e) this.sticky_header_observer.observe(e)
}); });
App.findAll(".cdm .content").forEach((e) => {
this.sticky_content_observer.observe(e)
});
if (App.getInitParam("cdm_expanded")) if (App.getInitParam("cdm_expanded"))
App.findAll("#headlines-frame > div[id*=RROW].cdm").forEach((e) => { App.findAll("#headlines-frame > div[id*=RROW].cdm").forEach((e) => {
this.unpack_observer.observe(e) this.unpack_observer.observe(e)
@ -814,6 +828,10 @@ const Headlines = {
this.sticky_header_observer.observe(e) this.sticky_header_observer.observe(e)
}); });
App.findAll(".cdm .content").forEach((e) => {
this.sticky_content_observer.observe(e)
});
if (App.getInitParam("cdm_expanded")) if (App.getInitParam("cdm_expanded"))
App.findAll("#headlines-frame > div[id*=RROW].cdm").forEach((e) => { App.findAll("#headlines-frame > div[id*=RROW].cdm").forEach((e) => {
this.unpack_observer.observe(e) this.unpack_observer.observe(e)