Route name

Give pages names and use them to style a visit or choose its animation.

Import it from pagefold/route-name (about 1.3 KB minified and compressed, shared code included).

import PagefoldRouteName from 'pagefold/route-name'

new Pagefold({
  plugins: [
    new PagefoldRouteName({
      routes: {
        home: '/',
        work: '/work',
        project: '/work/:slug',
      },
      animations: [
        { from: 'work', to: 'project', animation: 'expand' },
        { from: 'project', to: 'work', animation: 'collapse' },
      ],
    }),
  ],
})

What a visit gets

For a visit from /work to /work/hello with the configuration above:

• visit.from.route and visit.to.route, the names of the pages. A page with no route is unknown.
• Classes while it runs: from-route-home, to-route-project. They are removed at the end.
• If the visit has no animation name yet, the first matching entry in animations sets it, which also adds to-expand and works with the JS plugin.

html.from-route-home.to-route-project .transition-fade {
  transform: scale(0.9);
}

Details

Patterns match the way they do in the JS plugin, and matchOptions works the same: ignoreCase, strict and end.

Patterns use :name, optional parameters such as /:lang?, and * or (.*) (see JS). The first route that matches wins, so list specific routes before general ones. A name you set yourself (a link attribute or navigate(url, { animation })) is never overwritten.

Routes can also be a list, which keeps the order explicit:

new PagefoldRouteName({
  routes: [
    { name: 'project', path: '/:lang/project/:slug' },
    { name: 'projects', path: '/:lang/projects' },
    { name: 'home', path: '/:lang?' },
    { name: 'any', path: '(.*)' },
  ],
})

Pages without a route

A page that matches none gets the name unknown, so to-route-unknown is there to style. Change the name with unknownRoute, or set unknownRoute: false to leave such pages without a route and without the class.

Two pages of the same route

When the page you leave and the page you enter have the same route, the visit also gets to-same-route. It is handy for turning the transition off between pages with the same layout:

html.to-same-route .transition-fade {
  transition: none;
}

Classes named after the path

With paths: true a visit also gets from-<page> and to-<page>, named after the path in lower case: /about/ is about, /blog/hello is blog-hello and / is homepage. It is useful when you want to style one pair of pages without naming routes.

<!-- from /about/ to /team -->
<html class="is-animating from-about to-team">

Options