Ignore links

I’m trying to use a third party library with choo. I’ve actually done it before with choo v3, and now I’m passing it to choo v6. Now this library defines image links like this:

<a href="/link/to/image.jpg">
  <img src="/link/to/image.jpg"/>
</a>

So, my problem is that choo try to handle the image route and throws route not found. Now, in choo docs it says that links are ignored when:

• the click event had .preventDefault() called on it
• the link has a target=“_blank” attribute with rel=“noopener noreferrer”
• a modifier key is enabled (e.g. ctrl, alt, shift or meta)
• the link’s href starts with protocol handler such as mailto: or dat:
• the link points to a different host
• the link has a download attribute

So, my question is is there an easier way to ignore links? without having to use preventDefault and programatic navigation? I remember that before there was a noroute data attribute or similar (maybe in sheet-router times?) is there still something like that?

[tornqvist]

Glad to hear. If you don’t want to fiddle with the source of nanohref, you could just extend choo with this functionality.

var Choo = require('choo')
var nanohref = require('nanohref')

function MyApp(opts) {
  Choo.call(this, Object.assign({}, opts, { href: false }))
}

MyApp.prototype = Object.create(Choo.prototype)

MyApp.prototype.start = function () {
  Choo.prototype.start.call(this)

  var self = this
  nanohref(function (anchor) {
    var href = anchor.href
    var currHref = window.location.href
    if (href === currHref || anchor.dataset.noroute) return
    self.emitter.emit(self._events.PUSHSTATE, href)
  })
}

[yoshuawuyts]

Oh right, i see what you’re doing. What you’re doing is a bit of an edge case, as you’re linking to a route on the same host that the router is not supposed to handle.

Ideally in cases like these the image would be served from a different host, which allows it to continue as intended.

Perhaps you could instead define a view that all it does is render the image? Or perhaps a view that all it does is redirect to the requested resource?

Not sure if any of these cut it tho; maybe you’re right and we should indeed allow for a custom way to flag a link that it shouldn’t be handled. But could you perhaps give any of the above a shot before we get into how these could be handled? Thanks!

On Tue, Aug 15, 2017, 11:11 Brecht Savelkoul [e-mail] wrote:

If I remember correctly, in earlier versions you had to use event.preventDefault() as well as event.stopPropagation() to stop choo from handling links. Can’t confirm if that’s still the case now, but could be worth trying.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/choojs/choo/issues/546#issuecomment-322419325, or mute the thread https://github.com/notifications/unsubscribe-auth/ACWlei9IMuxt8gUJM0_yAr7oQekCJijSks5sYWCqgaJpZM4O2Xz7 .