Added infinite scrolling

This commit is contained in:
Eduard Urbach 2017-10-16 12:56:46 +02:00
parent 8fdeb97de9
commit 555582836c
7 changed files with 93 additions and 18 deletions

View File

@ -1,4 +1,4 @@
component LoadMore component LoadMore(index int)
button.action(data-action="loadMore", data-trigger="click") button#load-more-button.action(data-action="loadMore", data-trigger="click", data-index=index)
Icon("refresh") Icon("refresh")
span Load more span Load more

View File

@ -8,8 +8,8 @@ component Forum(tag string, threads []*arn.Thread, threadsPerPage int)
button#new-thread.action(data-action="load", data-trigger="click", data-url="/new/thread") button#new-thread.action(data-action="load", data-trigger="click", data-url="/new/thread")
Icon("plus") Icon("plus")
span New thread span New thread
if len(threads) == threadsPerPage //- if len(threads) == threadsPerPage
LoadMore //- LoadMore
component ThreadList(threads []*arn.Thread) component ThreadList(threads []*arn.Thread)
if len(threads) == 0 if len(threads) == 0

View File

@ -10,7 +10,7 @@ import (
"github.com/animenotifier/notify.moe/utils" "github.com/animenotifier/notify.moe/utils"
) )
const maxTracks = 9 const maxTracks = 12
// Get renders the soundtracks page. // Get renders the soundtracks page.
func Get(ctx *aero.Context) string { func Get(ctx *aero.Context) string {
@ -30,7 +30,7 @@ func Get(ctx *aero.Context) string {
tracks = tracks[:maxTracks] tracks = tracks[:maxTracks]
} }
return ctx.HTML(components.SoundTracks(tracks, user)) return ctx.HTML(components.SoundTracks(tracks, maxTracks, user))
} }
// From renders the soundtracks from the given index. // From renders the soundtracks from the given index.
@ -42,7 +42,7 @@ func From(ctx *aero.Context) string {
return ctx.Error(http.StatusBadRequest, "Invalid start index", err) return ctx.Error(http.StatusBadRequest, "Invalid start index", err)
} }
tracks, err := arn.FilterSoundTracks(func(track *arn.SoundTrack) bool { allTracks, err := arn.FilterSoundTracks(func(track *arn.SoundTrack) bool {
return !track.IsDraft && len(track.Media) > 0 return !track.IsDraft && len(track.Media) > 0
}) })
@ -50,17 +50,27 @@ func From(ctx *aero.Context) string {
return ctx.Error(http.StatusInternalServerError, "Error fetching soundtracks", err) return ctx.Error(http.StatusInternalServerError, "Error fetching soundtracks", err)
} }
if index < 0 || index >= len(tracks) { if index < 0 || index >= len(allTracks) {
return ctx.Error(http.StatusBadRequest, "Invalid start index (maximum is "+strconv.Itoa(len(tracks))+")", nil) return ctx.Error(http.StatusBadRequest, "Invalid start index (maximum is "+strconv.Itoa(len(allTracks))+")", nil)
} }
arn.SortSoundTracksLatestFirst(tracks) arn.SortSoundTracksLatestFirst(allTracks)
tracks = tracks[index:] tracks := allTracks[index:]
if len(tracks) > maxTracks { if len(tracks) > maxTracks {
tracks = tracks[:maxTracks] tracks = tracks[:maxTracks]
} }
nextIndex := index + maxTracks
if nextIndex >= len(allTracks) {
// End of data - no more scrolling
ctx.Response().Header().Set("X-LoadMore-Index", "-1")
} else {
// Send the index for the next request
ctx.Response().Header().Set("X-LoadMore-Index", strconv.Itoa(nextIndex))
}
return ctx.HTML(components.SoundTracksScrollable(tracks, user)) return ctx.HTML(components.SoundTracksScrollable(tracks, user))
} }

View File

@ -1,4 +1,4 @@
component SoundTracks(tracks []*arn.SoundTrack, user *arn.User) component SoundTracks(tracks []*arn.SoundTrack, tracksPerPage int, user *arn.User)
h1 Soundtracks h1 Soundtracks
.music-buttons .music-buttons
@ -15,8 +15,9 @@ component SoundTracks(tracks []*arn.SoundTrack, user *arn.User)
#load-more-target.sound-tracks #load-more-target.sound-tracks
SoundTracksScrollable(tracks, user) SoundTracksScrollable(tracks, user)
//- .buttons if len(tracks) == tracksPerPage
//- LoadMore .buttons
LoadMore(tracksPerPage)
component SoundTracksScrollable(tracks []*arn.SoundTrack, user *arn.User) component SoundTracksScrollable(tracks []*arn.SoundTrack, user *arn.User)
each track in tracks each track in tracks

View File

@ -370,17 +370,51 @@ export function arrayRemove(arn: AnimeNotifier, element: HTMLElement) {
} }
// Load more // Load more
export function loadMore(arn: AnimeNotifier, element: HTMLElement) { export function loadMore(arn: AnimeNotifier, button: HTMLButtonElement) {
// Prevent firing this event multiple times
if(arn.isLoading || button.disabled) {
return
}
arn.loading(true)
button.disabled = true
let target = arn.app.find("load-more-target") let target = arn.app.find("load-more-target")
let index = "9" let index = button.dataset.index
fetch("/_" + arn.app.currentPath + "/from/" + index) fetch("/_" + arn.app.currentPath + "/from/" + index)
.then(response => {
let newIndex = response.headers.get("X-LoadMore-Index")
// End of data?
if(newIndex === "-1") {
button.classList.add("hidden")
} else {
button.dataset.index = newIndex
}
return response
})
.then(response => response.text()) .then(response => response.text())
.then(body => { .then(body => {
target.innerHTML += body let tmp = document.createElement(target.tagName)
tmp.innerHTML = body
let children = [...tmp.childNodes]
window.requestAnimationFrame(() => {
for(let child of children) {
target.appendChild(child)
}
arn.app.emit("DOMContentLoaded") arn.app.emit("DOMContentLoaded")
}) })
})
.catch(err => arn.statusMessage.showError(err)) .catch(err => arn.statusMessage.showError(err))
.then(() => {
arn.loading(false)
button.disabled = false
})
} }
// Chrome extension installation // Chrome extension installation

View File

@ -9,6 +9,7 @@ import { PushManager } from "./PushManager"
import { TouchController } from "./TouchController" import { TouchController } from "./TouchController"
import { Analytics } from "./Analytics" import { Analytics } from "./Analytics"
import { SideBar } from "./SideBar" import { SideBar } from "./SideBar"
import { InfiniteScroller } from "./InfiniteScroller"
export class AnimeNotifier { export class AnimeNotifier {
app: Application app: Application
@ -22,6 +23,7 @@ export class AnimeNotifier {
pushManager: PushManager pushManager: PushManager
touchController: TouchController touchController: TouchController
sideBar: SideBar sideBar: SideBar
infiniteScroller: InfiniteScroller
mainPageLoaded: boolean mainPageLoaded: boolean
isLoading: boolean isLoading: boolean
lastReloadContentPath: string lastReloadContentPath: string
@ -126,6 +128,9 @@ export class AnimeNotifier {
// Sidebar control // Sidebar control
this.sideBar = new SideBar(this.app.find("sidebar")) this.sideBar = new SideBar(this.app.find("sidebar"))
// Infinite scrolling
this.infiniteScroller = new InfiniteScroller(this.app.content.parentElement, 100)
// Loading // Loading
this.loading(false) this.loading(false)
} }

View File

@ -0,0 +1,25 @@
export class InfiniteScroller {
container: HTMLElement
threshold: number
constructor(container, threshold) {
this.container = container
this.threshold = threshold
this.container.addEventListener("scroll", e => {
if(this.container.scrollTop + this.container.clientHeight >= this.container.scrollHeight - threshold) {
this.loadMore()
}
})
}
loadMore() {
let button = document.getElementById("load-more-button")
if(!button) {
return
}
button.click()
}
}