search

AlexxNB / tinro

Highly declarative, tiny, dependency free router for Svelte's web applications.
MIT License
669 stars 30 forks source link

Could be a possible to add navigation/links toggle? #90

Open croban opened 2 years ago

croban commented 2 years ago

Basically at the moment all click events will be intercepted by tinro, except those with ignore attr. It would be great if this could be turned off or defined only for links below an css selectors (e.g. id, class etc.) e.g. closest(".app-widget a[href]")

AlexxNB commented 2 years ago

Globally turn off links handling except marked ones? Something like this:

<script>
   import {router} from 'tinro';
   router.handleLinks(false);
</script>

<a href="/foo/bar">Won't be handled by tinro</a>
<a href="/bar/foo" tinro>Will be handled by tinro</a>
croban commented 2 years ago

I was thinking more something like this snippet bellow, because widget is injected inside external pages and I don't have any access to those.

<html ...>
<body>
...
<a href="/foo/bar">Won't be handled by tinro</a>
<a href="/bar/foo2">Won't be handled by tinro</a>
...
<div id="#sveltewidget"><!-- container for widget  --></div>
<script href=sveltewidgetapp.js" />
... 
</body>
//widgetapp.svelte

<script>
   import {router} from 'tinro';
   router.handleLinks("#sveltewidget"); <- handle only links below this node
</script>

<a href="/widget/bar">Will be handled by tinro</a>
<a href="/widget/foo">Will be handled by tinro</a>
AlexxNB commented 2 years ago

I got this idea but it doesn't solve a problem in all cases. Creator of widget may not know which id will have a container for widget. Or there may be two or more widgets on a page with independent links and routes.

Best solution is to have a reference for the root element(to check if the link is its child) right in Svelte context, but I don't know a way to get it.

Right now, best solution seems to turn off handling of all links on a page, except ones marked by creator in the widget.

mgrubinger commented 1 year ago

Are there plans to implement .handleLinks() in one way or another? The fact that tinro listens to all clicks, even on links outside of the svelte apps root is a deal-breaker for us, as we try to embed a tinro-routed svelte app into a much larger application.

I'm happy to draft a PR if you want. It seems the (window.)addEventListener in https://github.com/AlexxNB/tinro/blob/master/src/router.js#L79 would be a good starting point?