Mirror
/
stickerpicker
mirror of https://github.com/maunium/stickerpicker.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Make scrolling less hacky

pull/26/head
Tulir Asokan 4 years ago
parent
9a06d63ee9
commit
d698f058b5
3 changed files with 130 additions and 84 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 50
      web/index.css
  2. 97
      web/index.js
  3. 67
      web/index.sass

50
web/index.css
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 {
display: flex;
overflow-x: auto;
scrollbar-width: none;
main.has-content {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 12vw;
background-color: white;
z-index: 10; }
nav::-webkit-scrollbar {
bottom: 0;
display: grid;
grid-template-rows: calc(12vw + 2px) auto; }
nav {
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;
height: 12vw; }
div.pack-list, nav {
scrollbar-width: none; }
div.pack-list::-webkit-scrollbar, nav::-webkit-scrollbar {
display: none; } display: none; }
nav div.sticker {
width: 12vw;
height: 12vw; }
div.pack-list {
overflow-y: auto; }
section.stickerpack { section.stickerpack {
padding-top: 12vw;
margin-top: -12vw; }
margin-top: .75rem; }
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;

97
web/index.js
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}>
<div class="sticker">
<img src=${makeThumbnailURL(pack.stickers[0].url)}
alt=${pack.stickers[0].body} class="visible" />
</div>
</a>`
const NavBarItem = ({ pack }) => html`
<a href="#pack-${pack.id}" id="nav-${pack.id}" data-pack-id=${pack.id} title=${pack.title}>
<div class="sticker">
<img src=${makeThumbnailURL(pack.stickers[0].url)}
alt=${pack.stickers[0].body} class="visible" />
</div>
</a>
`
const Pack = ({ pack }) => html`<section class="stickerpack" id=${`pack-${pack.id}`}>
<h1>${pack.title}</h1>
<div class="sticker-list">
${pack.stickers.map(sticker => html`
<${Sticker} key=${sticker["net.maunium.telegram.sticker"].id} content=${sticker}/>
`)}
</div>
</section>`
const Pack = ({ pack }) => html`
<section class="stickerpack" id="pack-${pack.id}" data-pack-id=${pack.id}>
<h1>${pack.title}</h1>
<div class="sticker-list">
${pack.stickers.map(sticker => html`
<${Sticker} key=${sticker["net.maunium.telegram.sticker"].id} content=${sticker}/>
`)}
</div>
</section>
`
const Sticker = ({ content }) => html`<div class="sticker" onClick=${() => sendSticker(content)}>
<img data-src=${makeThumbnailURL(content.url)} alt=${content.body} />
</div>`
const Sticker = ({ content }) => html`
<div class="sticker" onClick=${() => sendSticker(content)}>
<img data-src=${makeThumbnailURL(content.url)} alt=${content.body} />
</div>
`
render(html`<${App} />`, document.body) render(html`<${App} />`, document.body)

67
web/index.sass
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
top: 0
left: 0
right: 0
height: 12vw
background-color: white
z-index: 10
div.sticker
width: 12vw
height: 12vw
div.pack-list
overflow-y: auto
section.stickerpack section.stickerpack
// This is a slightly hacky hack so that we can simultaneously have:
// * Anchor URLs scroll so the header is visible
// * The scroll area is the whole document
padding-top: 12vw
margin-top: -12vw
margin-top: .75rem
> 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
height: 25vw
width: $sticker-size
height: $sticker-size
box-sizing: border-box box-sizing: border-box
&:hover &:hover

Write Preview
Loading…
Cancel
Save