Make scrolling less hacky

This commit is contained in:
Tulir Asokan 2020-09-05 14:34:43 +03:00
parent 9a06d63ee9
commit d698f058b5
3 changed files with 130 additions and 84 deletions

View File

@ -1,48 +1,58 @@
* { * {
font-family: sans-serif; } font-family: sans-serif; }
html {
scrollbar-width: none; }
html::-webkit-scrollbar {
display: none; }
body { body {
margin: 0; } margin: 0; }
h1 { h1 {
font-size: 1rem; } font-size: 1rem; }
main.spinner, main.error, main.empty { main.spinner {
margin-top: 5rem; }
main.error, main.empty {
margin: 2rem; } margin: 2rem; }
main.empty { main.empty {
text-align: center; } text-align: center; }
nav { main.has-content {
display: flex;
overflow-x: auto;
scrollbar-width: none;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 12vw; bottom: 0;
background-color: white; display: grid;
z-index: 10; } grid-template-rows: calc(12vw + 2px) auto; }
nav::-webkit-scrollbar {
display: none; } nav {
nav div.sticker { display: flex;
overflow-x: auto;
height: calc(12vw + 2px);
background-color: white; }
nav > a {
border-bottom: 2px solid transparent; }
nav > a.visible {
border-bottom-color: green; }
nav > a > div.sticker {
width: 12vw; width: 12vw;
height: 12vw; } height: 12vw; }
div.pack-list, nav {
scrollbar-width: none; }
div.pack-list::-webkit-scrollbar, nav::-webkit-scrollbar {
display: none; }
div.pack-list {
overflow-y: auto; }
section.stickerpack { section.stickerpack {
padding-top: 12vw; margin-top: .75rem; }
margin-top: -12vw; }
section.stickerpack > div.sticker-list { section.stickerpack > div.sticker-list {
display: flex; display: flex;
flex-wrap: wrap; } flex-wrap: wrap; }
section.stickerpack > h1 { section.stickerpack > h1 {
margin: .75rem; } margin: 0 0 0 .75rem; }
div.sticker { div.sticker {
display: flex; display: flex;

View File

@ -23,23 +23,10 @@ class App extends Component {
loading: true, loading: true,
error: null, error: null,
} }
this.observer = null this.imageObserver = null
this.packListRef = null this.packListRef = null
} }
observeIntersection = intersections => {
for (const entry of intersections) {
const img = entry.target.children.item(0)
if (entry.isIntersecting) {
img.setAttribute("src", img.getAttribute("data-src"))
img.classList.add("visible")
} else {
img.removeAttribute("src")
img.classList.remove("visible")
}
}
}
componentDidMount() { componentDidMount() {
fetch(`${PACKS_BASE_URL}/index.json`).then(async indexRes => { fetch(`${PACKS_BASE_URL}/index.json`).then(async indexRes => {
if (indexRes.status >= 400) { if (indexRes.status >= 400) {
@ -61,20 +48,50 @@ class App extends Component {
}) })
} }
}, error => this.setState({ loading: false, error })) }, error => this.setState({ loading: false, error }))
this.observer = new IntersectionObserver(this.observeIntersection, {
this.imageObserver = new IntersectionObserver(this.observeImageIntersection, {
rootMargin: "100px", rootMargin: "100px",
threshold: 0,
}) })
this.sectionObserver = new IntersectionObserver(this.observeSectionIntersection, {})
}
observeImageIntersection = intersections => {
for (const entry of intersections) {
const img = entry.target.children.item(0)
if (entry.isIntersecting) {
img.setAttribute("src", img.getAttribute("data-src"))
img.classList.add("visible")
} else {
img.removeAttribute("src")
img.classList.remove("visible")
}
}
}
observeSectionIntersection = intersections => {
for (const entry of intersections) {
const packID = entry.target.getAttribute("data-pack-id")
const navElement = document.getElementById(`nav-${packID}`)
if (entry.isIntersecting) {
navElement.classList.add("visible")
} else {
navElement.classList.remove("visible")
}
}
} }
componentDidUpdate() { componentDidUpdate() {
for (const elem of this.packListRef.getElementsByClassName("sticker")) { for (const elem of this.packListRef.getElementsByClassName("sticker")) {
this.observer.observe(elem) this.imageObserver.observe(elem)
}
for (const elem of this.packListRef.children) {
this.sectionObserver.observe(elem)
} }
} }
componentWillUnmount() { componentWillUnmount() {
this.observer.disconnect() this.imageObserver.disconnect()
this.sectionObserver.disconnect()
} }
render() { render() {
@ -86,9 +103,9 @@ class App extends Component {
<p>${this.state.error}</p> <p>${this.state.error}</p>
</main>` </main>`
} else if (this.state.packs.length === 0) { } else if (this.state.packs.length === 0) {
return html`<main class="empty"><h1>No packs found :(</h1></main>` return html`<main class="empty"><h1>No packs found 😿</h1></main>`
} }
return html`<main> return html`<main class="has-content">
<nav> <nav>
${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack}/>`)} ${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack}/>`)}
</nav> </nav>
@ -99,24 +116,30 @@ class App extends Component {
} }
} }
const NavBarItem = ({ pack }) => html`<a href="#pack-${pack.id}" title=${pack.title}> const NavBarItem = ({ pack }) => html`
<a href="#pack-${pack.id}" id="nav-${pack.id}" data-pack-id=${pack.id} title=${pack.title}>
<div class="sticker"> <div class="sticker">
<img src=${makeThumbnailURL(pack.stickers[0].url)} <img src=${makeThumbnailURL(pack.stickers[0].url)}
alt=${pack.stickers[0].body} class="visible" /> alt=${pack.stickers[0].body} class="visible" />
</div> </div>
</a>` </a>
`
const Pack = ({ pack }) => html`<section class="stickerpack" id=${`pack-${pack.id}`}> const Pack = ({ pack }) => html`
<section class="stickerpack" id="pack-${pack.id}" data-pack-id=${pack.id}>
<h1>${pack.title}</h1> <h1>${pack.title}</h1>
<div class="sticker-list"> <div class="sticker-list">
${pack.stickers.map(sticker => html` ${pack.stickers.map(sticker => html`
<${Sticker} key=${sticker["net.maunium.telegram.sticker"].id} content=${sticker}/> <${Sticker} key=${sticker["net.maunium.telegram.sticker"].id} content=${sticker}/>
`)} `)}
</div> </div>
</section>` </section>
`
const Sticker = ({ content }) => html`<div class="sticker" onClick=${() => sendSticker(content)}> const Sticker = ({ content }) => html`
<div class="sticker" onClick=${() => sendSticker(content)}>
<img data-src=${makeThumbnailURL(content.url)} alt=${content.body} /> <img data-src=${makeThumbnailURL(content.url)} alt=${content.body} />
</div>` </div>
`
render(html`<${App} />`, document.body) render(html`<${App} />`, document.body)

View File

@ -7,67 +7,80 @@
* *
font-family: sans-serif font-family: sans-serif
html
scrollbar-width: none
&::-webkit-scrollbar
display: none
body body
margin: 0 margin: 0
h1 h1
font-size: 1rem font-size: 1rem
$sticker-size: 25vw
$nav-sticker-size: 12vw
$nav-bottom-highlight: 2px
$nav-height: calc(#{$nav-sticker-size} + #{$nav-bottom-highlight})
$nav-height-inverse: calc(-#{$nav-sticker-size} - #{$nav-bottom-highlight})
main main
&.spinner, &.error, &.empty &.spinner
margin-top: 5rem
&.error, &.empty
margin: 2rem margin: 2rem
&.empty &.empty
text-align: center text-align: center
&.has-content
position: fixed
top: 0
left: 0
right: 0
bottom: 0
display: grid
grid-template-rows: $nav-height auto
nav nav
display: flex display: flex
overflow-x: auto overflow-x: auto
height: $nav-height
background-color: white
> a
border-bottom: $nav-bottom-highlight solid transparent
&.visible
border-bottom-color: green
> div.sticker
width: $nav-sticker-size
height: $nav-sticker-size
div.pack-list, nav
scrollbar-width: none scrollbar-width: none
&::-webkit-scrollbar &::-webkit-scrollbar
display: none display: none
position: fixed div.pack-list
top: 0 overflow-y: auto
left: 0
right: 0
height: 12vw
background-color: white
z-index: 10
div.sticker
width: 12vw
height: 12vw
section.stickerpack section.stickerpack
// This is a slightly hacky hack so that we can simultaneously have: margin-top: .75rem
// * Anchor URLs scroll so the header is visible
// * The scroll area is the whole document
padding-top: 12vw
margin-top: -12vw
> div.sticker-list > div.sticker-list
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
> h1 > h1
margin: .75rem margin: 0 0 0 .75rem
div.sticker div.sticker
display: flex display: flex
padding: 4px padding: 4px
cursor: pointer cursor: pointer
position: relative position: relative
width: 25vw width: $sticker-size
height: 25vw height: $sticker-size
box-sizing: border-box box-sizing: border-box
&:hover &:hover