craftedbygc / taxi

Taxi is a 🤏 small and 🐊 snappy js library for adding slick PJAX navigation and beautiful transitions to your website.
https://taxi.js.org
565 stars 11 forks source link

Conditionally use removeOldContent #12

Closed jacob-rh closed 1 year ago

jacob-rh commented 1 year ago

Hey there, thanks so much for all your work on this library!

Just wondering the best approach to conditionally set removeOldContent as false?

The use case is wanting to load a target page's data-taxi-view content into a separate DOM element, rather than replace the existing pages data-taxi-view ...

Is this possible with a custom Renderer or is it just a bad idea in general? In my head it would be something like "if Renderer is 'modal', don't remove old content.

Or would we be better off keeping the dynamic modal component as a separate piece of functionality that's loaded in the route requited? Any advice would be greatly appreciated.

J

jakewhiteley commented 1 year ago

Hi,

I would set it to false and then just make the renderers you need - a specific one for your modal and a default one which effectively duplicated what would happen if removeOldContent was true.

I think the simplest way (not tested) is to call this.remove() in your default renderer's onLeaveCompleted method.

Let me know how you get on and if there are suggestions to make this easier.

jacob-rh commented 1 year ago

Heyy thanks for getting back to me!

Did you mean set removeOldContent as false then manually remove old content for the default renderer?

Just want to make sure I'm approaching it the right way.

Edit: to expand a bit, not sure this approach quite works. I kinda need to know when a page is navigating to data-taxi-view="modal" and then not remove content, but I also want to remove the modal content when it's navigated away from...

Tricky.

jakewhiteley commented 1 year ago

Derp - sorry that's exactly what I meant.

Don't remove any content by default, and then handle each request as you see fit - with some renderers removing content and some replacing modal content :)

jakewhiteley commented 1 year ago

@jacob-rh how are you getting on?

jacob-rh commented 1 year ago

Hey @jakewhiteley, so we ended up scrapping the modal idea, was proving a bit fiddly. Thanks for your assistance though.

While I have you, just wondering if there's a built-in way to track the progress of a renderer being loaded? Or would that need to be done separately with a Promise / window load event listener?

Ideally we want to show a % loading counter only for a specific view... Can create a separate issue if need be.

jakewhiteley commented 1 year ago

@jacob-rh nothing built-in no.

The reason is because all Taxi is doing is a HTTP GET request which is impossible to get a progress for - it's either in progress or it is done. I assume what you want it a loader which waits for assets (css/images/videos/webgl models etc), and for that you would need to implement your own system.

I could add one to Taxi, but it wouldn't be useful in every situation, and a proper asset loader is effectively a completely different library to maintain!

jacob-rh commented 1 year ago

Ta @jakewhiteley, thought that would be the case, all good!

Thanks again for all your work on this, your assistance and time.

jakewhiteley commented 1 year ago

No problem :) I'm gonna close this now 💪