I found your channel just in time, im back in learning web developement after a hiatus and i choosed Svelte so your channel is so useful, thanks for the hard work.
How can we continue where we are on the page after closing the modal? I mean, in 13:31, when we close the modal, it goes back but not where we were (because we scrolled down).
Looks like history api from browser supports scroll restoration. By default it's set to manual. We need to change it auto. Then scroll restoration works history.scrollRestoration = "auto"
Thank you for yet another great video! In this example project, unless I'm mistaken, closing the modal navigates back in history, but navigating back does not close the modal. How would you go about making the "close modal" and "history back" actions have the same effect, i.e. return to home page?
@@JoyofCodeDev I think it's akin to @W4nn3's suggestion in the comments, going back in history using the browser's back button. Right now clicking the back button does not close the modal.
If someone copies and pastes the new url, will it open directly to the page but with the modal already opened? Or would it not know where to navigate since the "link" is determined by the photos api, and nothing has been selected? What if it was loading resources saved locally? Would thar preserve the state?
How to declare the interface Pagestate when I can have multiple types of modals? Like two buttons login and register. they should trigger two different modals
This guy made me fall in love with coding, this channel truly stands its name ‘joy of code’. Please @joyofcode upload more frequently, i know you must have more things to share
I don't know if it's possible or not, but as I'm passing a page to the Modal, it would make more sense if that page handles the `load` function itself in it's +page.ts rather than me preloading the data and passing it to the page as an attribute.
its not opening the page, its just getting the data and passing it to the +page.svelte component as a prop. What this means is it's actually never navigating to the new URL, but it just appears that it is doing so
Your solution does not really work well when using the browser back/forward buttons. Using something like this: $: modal?.[$page.state.selected ? 'showModal' : 'close']() instead of modal.showModal(); in line 22 should work.
My biggest question is why does putting in a +page.svelte create an overflow error? Did this and saw the js run hundreds of times that was inside a click function. Putting the code in +layout.svelte solved the issue.
Yep, we're definitely so back 🚀
man I can't tell if the video is from you or from "Joy of Code", same thumbnails design + Svelte related content 😁
I tried out everything! 😂
How are you not verified yet?
@@jaideepshekhar4621 You need 100k subscribers to get verified.
Soon working on a new project, Svelte has been chosen... Your channel I think will be dominating my dreams.
This plus view transition should make seamless experiences.
How beautiful is this Friends ... )) Thanks for your content!
You're welcome! 😄
I found your channel just in time, im back in learning web developement after a hiatus and i choosed Svelte so your channel is so useful, thanks for the hard work.
How beautiful is this ? Very beautiful !
How can we continue where we are on the page after closing the modal? I mean, in 13:31, when we close the modal, it goes back but not where we were (because we scrolled down).
You can use kit.svelte.dev/docs/snapshots.
I've created an issue for this #11355
Looks like history api from browser supports scroll restoration. By default it's set to manual. We need to change it auto. Then scroll restoration works
history.scrollRestoration = "auto"
Amazing!!!
🇧🇷
Thank you for these Videos!
You're welcome! 😄
Almost 20k!
wow, they have a command to migrate! interesting!
They always make it easy to migrate.
How would you deal with the page navigating to the url if you reload the page while modal is oen?
Thank you for yet another great video!
In this example project, unless I'm mistaken, closing the modal navigates back in history, but navigating back does not close the modal. How would you go about making the "close modal" and "history back" actions have the same effect, i.e. return to home page?
Not sure I understand because it works as expected.
@@JoyofCodeDev I think it's akin to @W4nn3's suggestion in the comments, going back in history using the browser's back button. Right now clicking the back button does not close the modal.
If someone copies and pastes the new url, will it open directly to the page but with the modal already opened? Or would it not know where to navigate since the "link" is determined by the photos api, and nothing has been selected? What if it was loading resources saved locally? Would thar preserve the state?
You would get the route instead because there is no previous state.
Does the load function of the page component run twice?
Would enjoy seeing an Event Calendar done in Svelte.
Can form actions also be executed?
Out of curiosity, what VSCode extensions do you use for SvelteKit/javascript?
You can find what I use in the description.
How to declare the interface Pagestate when I can have multiple types of modals? Like two buttons login and register. they should trigger two different modals
Incredible!!!
Boom! lets go!
How do you stop the page from scrolling to the top when closing the modal?
You can use kit.svelte.dev/docs/snapshots.
🔥🔥🔥🔥 video as usual
Wow this is so much cleaner than the NextJS way. The syntax for intercepting routes in Next is so clunky
greatest teacher!
This guy made me fall in love with coding, this channel truly stands its name ‘joy of code’. Please @joyofcode upload more frequently, i know you must have more things to share
Will this work if the data is on streamed? If yes, how? Thank you very much
Wow. WOWWW
I don't know if it's possible or not, but as I'm passing a page to the Modal, it would make more sense if that page handles the `load` function itself in it's +page.ts rather than me preloading the data and passing it to the page as an attribute.
its not opening the page, its just getting the data and passing it to the +page.svelte component as a prop. What this means is it's actually never navigating to the new URL, but it just appears that it is doing so
i've never used pages as components, that's genius
I hope goto don't get deprecated because I really like it
It's safe.
wait over :)
how to prevent list scroll to top when close modal? like on twitter
You can use kit.svelte.dev/docs/snapshots.
Great video and nice content. Please can you share your vscode theme thanks
You can find what I use in the description.
@JoyofCodeDev Thanks including the vscode themes
Yes got it thanks
Wow.
Your solution does not really work well when using the browser back/forward buttons.
Using something like this:
$: modal?.[$page.state.selected ? 'showModal' : 'close']()
instead of
modal.showModal();
in line 22 should work.
Fine, I admit I don't actually know Ikea.
My biggest question is why does putting in a +page.svelte create an overflow error? Did this and saw the js run hundreds of times that was inside a click function. Putting the code in +layout.svelte solved the issue.