tinro
tinro copied to clipboard
AlexxNB
Could be a possible to add navigation/links toggle?
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]")
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>
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>
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.
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?
