How to perform navigational link hijacking?

[devnook]

Scenario: We want the shop to work fully server side, with traditional links causing a reload of the whole page. It lowers the amount of js we need to send to the page, and works even with js disabled.

As a progressive enhancement, we can offer partial loading with page transitions - user clicks a navigational link, optionally an animation is played, new content is fetched in js and replaced on the page.

We can do this by: Approach 1: Adding a global click listener to body - if it detects a navigational link click, it runs the transition.

PROS:

• Pure progressive enhancement, no need to edit the template in template code. Can be used to enhance links on existing template, e.g. from Wordpress or Magento etc.
• One listener only
• Newly added links work out of the box

CONS:

• If you add a non-navigational link for other purposes, you need to be aware of side effects (However, why would you add a link that does not lead anywhere?)
• If the click happens not on link and the DOM tree is very deep in that place, listener must traverse whole tree before it gets cancelled, which can be slow.

Approach 2: Tagging each navigational link with attribute, e.d. data-navigation, attaching listener to each of such links.

PROS: More intentional. You need to tag a link to add the behaviour. Declarative is fashionable these days;)

CONS: More chances for error/omission: You have to edit the template and remember to add this behaviour to each new link. More listeners in memory.

Wdyt?