search

Hejtmus / svelte-fullpage

Lightweight fullpage component for Svelte.
https://hejtmus.github.io/svelte-fullpage/
MIT License
68 stars 8 forks source link

How would I get my current page somewhere in the app? #49

Open michaelcuneo opened 2 years ago

michaelcuneo commented 2 years ago

How would I get my current page somewhere in the app?

Hejtmus commented 2 years ago

Hello,

currently svelte-fullpage doesn't have programmatic navigation with navigation indicator. So for now I would use intersection observer. Next version of this lib will feature programmatic navigation with its indicator (#47). If you have any proposal for managing navigation, I would appreciate your comment on that. At least some description of expected navigation usage will help me better design navigation management, than just guessing potential navigation requirements.

Best regards, Filip.

Hejtmus commented 7 months ago

Any updates on this? @Hejtmus

@alexcloudstar, yes, use controller interface, you can see example code on demo page in this repo. I'll have to document that this issue is resolved.

alexcloudstar commented 7 months ago

Thank you!

alexcloudstar commented 7 months ago

Maybe is me.. but I still don't understand how to do this. I don't have any Svelte experience, I'm a React guys, but looking to gather some experience in Svelte as well @Hejtmus

alexcloudstar commented 7 months ago

Don't find any docs about indicators, programatic scroll etc.... can you help @Hejtmus ?

Hejtmus commented 7 months ago

Maybe is me.. but I still don't understand how to do this. I don't have any Svelte experience, I'm a React guys, but looking to gather some experience in Svelte as well @Hejtmus

Sorry for just throwing project specific term at you, controller is interface for programmatic navigation and getting navigation info, it is Svelte store, which is basically object observable pattern. Here you can see definition of controller, you can use these methods previousPage, nextPage, toPage, they do exactly what you think they do. If you want to get current section, you have to subscribe to that store.

But first of all, you need reference to controller:

<Fullpage bind:controller={fullpageController}>
    ...
</Fullpage>

https://github.com/Hejtmus/svelte-fullpage/blob/cc161689d4392e4df6e12eb1dd719e89a88f88be/src/routes/%2Bpage.svelte#L29

Then you can subscribe current position:

$: console.log(`Active section: ${$fullpageController}`)

https://github.com/Hejtmus/svelte-fullpage/blob/cc161689d4392e4df6e12eb1dd719e89a88f88be/src/routes/%2Bpage.svelte#L22

Or call methods I mentioned.

Hejtmus commented 7 months ago

Don't find any docs about indicators, programatic scroll etc.... can you help @Hejtmus ?

@alexcloudstar , to be fair, documentation of this project is poor, and I have to revamp it.

I think this issue could help you understand programmatic navigation.

You mentioned indicators, they are just simple buttons that observe current page, and if their index is equal to current page, they become filled, take a look. When they are clicked, they propagate event, which will end up be handled by scrolling to desired coordinates.

If you need more documentation, please create new issue as it could be unrelated to topic of this one. Feel free to give feedback to documentation, request certain things to be explained, my look at this project is biased by work on it, thus your opinion is valued.