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
Split 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; }
html {
scrollbar-width: none; }
html::-webkit-scrollbar {
display: none; }
body {
margin: 0; }
h1 {
font-size: 1rem; }
main.spinner, main.error, main.empty {
main.spinner {
margin-top: 5rem; }
main.error, main.empty {
margin: 2rem; }
main.empty {
text-align: center; }
nav {
display: flex;
overflow-x: auto;
scrollbar-width: none;
main.has-content {
position: fixed;
top: 0;
left: 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; }
nav div.sticker {
width: 12vw;
height: 12vw; }
div.pack-list {
overflow-y: auto; }
section.stickerpack {
padding-top: 12vw;
margin-top: -12vw; }
margin-top: .75rem; }
section.stickerpack > div.sticker-list {
display: flex;
flex-wrap: wrap; }
section.stickerpack > h1 {
margin: .75rem; }
margin: 0 0 0 .75rem; }
div.sticker {
display: flex;

97
web/index.js
View File

@ -23,23 +23,10 @@ class App extends Component {
loading: true,
error: null,
}
this.observer = null
this.imageObserver = 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() {
fetch(`${PACKS_BASE_URL}/index.json`).then(async indexRes => {
if (indexRes.status >= 400) {
@ -61,20 +48,50 @@ class App extends Component {
})
}
}, error => this.setState({ loading: false, error }))
this.observer = new IntersectionObserver(this.observeIntersection, {
this.imageObserver = new IntersectionObserver(this.observeImageIntersection, {
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() {
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() {
this.observer.disconnect()
this.imageObserver.disconnect()
this.sectionObserver.disconnect()
}
render() {
@ -86,9 +103,9 @@ class App extends Component {
<p>${this.state.error}</p>
</main>`
} 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>
${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack}/>`)}
</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)

67
web/index.sass
View File

@ -7,67 +7,80 @@
*
font-family: sans-serif
html
scrollbar-width: none
&::-webkit-scrollbar
display: none
body
margin: 0
h1
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
&.spinner, &.error, &.empty
&.spinner
margin-top: 5rem
&.error, &.empty
margin: 2rem
&.empty
text-align: center
&.has-content
position: fixed
top: 0
left: 0
right: 0
bottom: 0
display: grid
grid-template-rows: $nav-height auto
nav
display: flex
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
&::-webkit-scrollbar
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
// 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
display: flex
flex-wrap: wrap
> h1
margin: .75rem
margin: 0 0 0 .75rem
div.sticker
display: flex
padding: 4px
cursor: pointer
position: relative
width: 25vw
height: 25vw
width: $sticker-size
height: $sticker-size
box-sizing: border-box
&:hover

Write Preview
Loading…
Cancel
Save