-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7278d6a
commit 8aa2e01
Showing
3 changed files
with
118 additions
and
109 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import Component from '@glimmer/component'; | ||
| import { get } from '@ember/helper'; | ||
| import type PokemonModel from 'ember-polaris-pokedex/models/pokemon'; | ||
| import type RouterService from '@ember/routing/router-service'; | ||
| import { service } from '@ember/service'; | ||
| import { fn } from '@ember/helper'; | ||
| import { on } from '@ember/modifier'; | ||
| import { preloadImage } from 'ember-polaris-pokedex/components/pokemon-grid-item'; | ||
| import { type RouterScrollService } from 'ember-polaris-pokedex/utils/router-scroll-service'; | ||
|
|
||
| export function getPokemonById(pokemons: PokemonModel[], id: string) { | ||
| return pokemons.find((pokemon) => pokemon.id!.toString() === id); | ||
| } | ||
|
|
||
| export default class PokemonEvolutionNav extends Component<{ | ||
| Args: { pokemon: PokemonModel; allPokemon: PokemonModel[] }; | ||
| }> { | ||
| @service declare router: RouterService; | ||
|
|
||
| @service declare routerScroll: RouterScrollService; | ||
|
|
||
| transitionToPokemonDetails = ( | ||
| pokemonId: string, | ||
| direction: 'forwards' | 'backwards', | ||
| ) => { | ||
| this.routerScroll.preserveScrollPosition = true; | ||
| // Fallback for browsers that don't support this API: | ||
| if (!document.startViewTransition) { | ||
| this.router.transitionTo('pokemon.pokemon', pokemonId.toString()); | ||
| return; | ||
| } | ||
|
|
||
| // With a transition: | ||
| document.startViewTransition({ | ||
| // @ts-expect-error: No types for these options yet | ||
| update: () => { | ||
| this.router.transitionTo('pokemon.pokemon', pokemonId.toString()); | ||
| }, | ||
| types: ['slide', direction], | ||
| }); | ||
| }; | ||
|
|
||
| preloadImageForPokemonId = (pokemonId: string) => { | ||
| const pokemon = getPokemonById(this.args.allPokemon, pokemonId); | ||
| if (pokemon) { | ||
| preloadImage(pokemon.image.hires); | ||
| } | ||
| }; | ||
|
|
||
| <template> | ||
| <section class='m-auto max-w-3xl'> | ||
| <h3 class='mt-12 text-2xl'>Evolutions</h3> | ||
|
|
||
| <div class='grid grid-cols-2 gap-8'> | ||
| <div> | ||
| {{#if @pokemon.evolution.prev}} | ||
| <button | ||
| type='button' | ||
| class='flex w-full cursor-pointer flex-col items-center rounded-xl bg-gradient-to-br from-pink-100 to-yellow-100 p-4 shadow transition-shadow hover:shadow-md' | ||
| {{on | ||
| 'click' | ||
| (fn | ||
| this.transitionToPokemonDetails | ||
| (get @pokemon.evolution.prev 0) | ||
| 'backwards' | ||
| ) | ||
| }} | ||
| {{on | ||
| 'pointerenter' | ||
| (fn | ||
| this.preloadImageForPokemonId (get @pokemon.evolution.prev 0) | ||
| ) | ||
| }} | ||
| > | ||
| ⏪ Previous | ||
| </button> | ||
| {{else}} | ||
| <button | ||
| type='button' | ||
| class='flex w-full cursor-not-allowed flex-col items-center rounded-xl bg-gradient-to-br from-gray-100 to-slate-100 p-4 opacity-50 shadow' | ||
| > | ||
| ⏪ Previous | ||
| </button> | ||
| {{/if}} | ||
| </div> | ||
| <div class='flex flex-col gap-2'> | ||
| {{#each @pokemon.evolution.next as |next|}} | ||
| <button | ||
| type='button' | ||
| class='flex w-full cursor-pointer flex-col items-center rounded-xl bg-gradient-to-br from-pink-100 to-yellow-100 p-4 shadow transition-shadow hover:shadow-md' | ||
| {{on | ||
| 'click' | ||
| (fn this.transitionToPokemonDetails (get next 0) 'forwards') | ||
| }} | ||
| {{on | ||
| 'pointerenter' | ||
| (fn this.preloadImageForPokemonId (get next 0)) | ||
| }} | ||
| > | ||
| Next ⏩ | ||
| </button> | ||
| {{else}} | ||
| <button | ||
| type='button' | ||
| class='flex w-full cursor-not-allowed flex-col items-center rounded-xl bg-gradient-to-br from-gray-100 to-slate-100 p-4 opacity-50 shadow' | ||
| > | ||
| Next ⏩ | ||
| </button> | ||
| {{/each}} | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </template> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters