From 2d0cd4dbedf0d729204d12f6043abd7423d41368 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Wed, 21 Mar 2018 23:18:08 +0100 Subject: [PATCH] Improved color filter --- mixins/AnimeGrid.pixy | 27 ++++++++------- pages/explore/explorecolor/explorecolor.go | 34 +++++++++++++++++-- pages/explore/explorecolor/explorecolor.pixy | 12 ++++--- .../explore/explorecolor/explorecolor.scarlet | 5 +-- pages/index.go | 1 + 5 files changed, 58 insertions(+), 21 deletions(-) diff --git a/mixins/AnimeGrid.pixy b/mixins/AnimeGrid.pixy index 1d2c5231..f47b8e83 100644 --- a/mixins/AnimeGrid.pixy +++ b/mixins/AnimeGrid.pixy @@ -1,12 +1,15 @@ -component AnimeGrid(animeList []*arn.Anime, user *arn.User) - .anime-grid - each anime in animeList - .anime-grid-cell(data-added=(user != nil && user.AnimeList().Contains(anime.ID))) - a.ajax(href="/anime/" + toString(anime.ID)) - img.anime-grid-image.lazy(data-src=anime.ImageLink("medium"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.Romaji) - .anime-grid-title - .anime-grid-title-text= anime.Title.ByUser(user) - - if user != nil && !user.AnimeList().Contains(anime.ID) - button.anime-grid-add-button.action(data-action="addAnimeToCollection", data-trigger="click", data-api="/api/animelist/" + user.ID, data-anime-id=anime.ID) - RawIcon("plus") \ No newline at end of file +component AnimeGrid(animes []*arn.Anime, user *arn.User) + #load-more-target.anime-grid + AnimeGridScrollable(animes, user) + +component AnimeGridScrollable(animes []*arn.Anime, user *arn.User) + each anime in animes + .anime-grid-cell(data-added=(user != nil && user.AnimeList().Contains(anime.ID))) + a.ajax(href="/anime/" + toString(anime.ID)) + img.anime-grid-image.lazy(data-src=anime.ImageLink("medium"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.Romaji) + .anime-grid-title + .anime-grid-title-text= anime.Title.ByUser(user) + + if user != nil && !user.AnimeList().Contains(anime.ID) + button.anime-grid-add-button.action(data-action="addAnimeToCollection", data-trigger="click", data-api="/api/animelist/" + user.ID, data-anime-id=anime.ID) + RawIcon("plus") \ No newline at end of file diff --git a/pages/explore/explorecolor/explorecolor.go b/pages/explore/explorecolor/explorecolor.go index ca2b7a70..facf85f1 100644 --- a/pages/explore/explorecolor/explorecolor.go +++ b/pages/explore/explorecolor/explorecolor.go @@ -9,17 +9,45 @@ import ( "github.com/animenotifier/arn" "github.com/animenotifier/notify.moe/components" "github.com/animenotifier/notify.moe/utils" + "github.com/animenotifier/notify.moe/utils/infinitescroll" +) + +const ( + animeFirstLoad = 50 + animePerScroll = 20 ) // AnimeByAverageColor returns all anime with an image in the given color. func AnimeByAverageColor(ctx *aero.Context) string { user := utils.GetUser(ctx) color := ctx.Get("color") - animes := filterAnimeByColor(color) + index, _ := ctx.GetInt("index") - arn.SortAnimeByQuality(animes) + allAnimes := filterAnimeByColor(color) + arn.SortAnimeByQuality(allAnimes) - return ctx.HTML(components.ExploreColor(animes, color, user)) + // Slice the part that we need + animes := allAnimes[index:] + maxLength := animeFirstLoad + + if index > 0 { + maxLength = animePerScroll + } + + if len(animes) > maxLength { + animes = animes[:maxLength] + } + + // Next index + nextIndex := infinitescroll.NextIndex(ctx, len(allAnimes), maxLength, index) + + // In case we're scrolling, send animes only (without the page frame) + if index > 0 { + return ctx.HTML(components.AnimeGridScrollable(animes, user)) + } + + // Otherwise, send the full page + return ctx.HTML(components.ExploreColor(animes, nextIndex, len(allAnimes), color, user)) } func filterAnimeByColor(colorText string) []*arn.Anime { diff --git a/pages/explore/explorecolor/explorecolor.pixy b/pages/explore/explorecolor/explorecolor.pixy index 9c50b19d..dfd2d16a 100644 --- a/pages/explore/explorecolor/explorecolor.pixy +++ b/pages/explore/explorecolor/explorecolor.pixy @@ -1,4 +1,4 @@ -component ExploreColor(animes []*arn.Anime, color string, user *arn.User) +component ExploreColor(animes []*arn.Anime, nextIndex int, totalCount int, color string, user *arn.User) h1.page-title Explore anime by color for saturation := 0.75; saturation >= 0.25; saturation -= 0.25 @@ -7,12 +7,16 @@ component ExploreColor(animes []*arn.Anime, color string, user *arn.User) a.tab.color-stripe.action(href=fmt.Sprintf("/explore/color/hsl:%.3f,%.2f,0.5/anime", hue, saturation), data-action="diff", data-trigger="click", data-color=fmt.Sprintf("hsl(%.0f, %.0f%%, 50%%)", hue * 360, saturation * 100)) .explore-anime - if len(animes) == 0 + if totalCount == 0 if color == "any" p.no-data.mountable Please choose a color. else p.no-data.mountable No anime found for the given color. else - p.text-center.mountable= strconv.Itoa(len(animes)) + " anime." + p.text-center.mountable= strconv.Itoa(totalCount) + " anime." - AnimeGrid(animes, user) \ No newline at end of file + AnimeGrid(animes, user) + + if nextIndex != -1 + .buttons + LoadMore(nextIndex) \ No newline at end of file diff --git a/pages/explore/explorecolor/explorecolor.scarlet b/pages/explore/explorecolor/explorecolor.scarlet index a40e320e..b191a231 100644 --- a/pages/explore/explorecolor/explorecolor.scarlet +++ b/pages/explore/explorecolor/explorecolor.scarlet @@ -4,8 +4,9 @@ margin-bottom 0 .color-stripe - width 2% - height 2rem + width 4% + max-width 3rem + height 3rem padding 0 border 1px solid transparent diff --git a/pages/index.go b/pages/index.go index 59340a6e..819a39fb 100644 --- a/pages/index.go +++ b/pages/index.go @@ -77,6 +77,7 @@ func Configure(app *aero.Application) { l.Page("/explore", explore.Get) l.Page("/explore/anime/:year/:status/:type", explore.Filter) l.Page("/explore/color/:color/anime", explorecolor.AnimeByAverageColor) + l.Page("/explore/color/:color/anime/from/:index", explorecolor.AnimeByAverageColor) l.Page("/login", login.Get) l.Page("/api", apiview.Get) // l.Ajax("/dashboard", dashboard.Get)