npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ember-route-layers

v2.5.3

Published

Wire up your cancel buttons in easy mode.

Downloads

7

Readme

Ember-route-layers

Ember Observer Score Build Status Coverage Status

Ember Route Layers is used to group routes together and navigate back to past route groups. Its stack of route layers is like a dynamic breadcrumb trail to power your "back" function (e.g. link that says "back", escape key, close icon or cancel button).

For example, take a site where you can get to a set of account pages from anywhere on the site. Grouping these into an "account" route layer lets you click around within the account routes and still have a "back" link which takes you back to wherever you were before you went to your account.

Example: Hierarchical Store + Account and Cart sections

From anywhere on the site, I can go to my account. When I navigate around the account section and then click "back", I want to go wherever I was before I went to the account section: maybe the cart, the store index or a subsection.

From anywhere in the store, if I go to my cart and checkout, exiting takes me back to where I was in the store.

The above example also supports hierarchical navigation within the store: if I go Store > Comics > DC > Marvel, exiting route layers will take me back to Comics and then back to Store.

Ember Route Layers really shines when various different flows use the same route. If I edit billing from the account billing page, exit takes me back to my account page. But if I edit billing during the checkout process, exit will take me back to checkout.

Usage

  • Set the routeLayer property on your "escapable" routes.
  • As the user navigates, service:route-layers maintains a route layer stack.
  • The exitRouteLayer action takes you back to the previous level in the stack.

Install the addon and all your routes will get an exitRouteLayer action and routeLayer: 'default'.

  ember install ember-route-layers

Override the routeLayer property on leaf routes which are "escapable".

  routeLayer: 'edit-post',

Now we’re ready to go.

<button {{ action 'exitRouteLayer' }}>Cancel</button>

Using ember-responds-to for escape key support,

escKeypress: function () {
  this.send('exitRouteLayer');
}

Notes

In your routes, set routeLayer to a string identifying a group of related routes which form a navigational "layer" (i.e. the close button behavior is not affected by navigation between them). This often corresponds to what designers call a "flow", though it can be more of a "context" if the navigation is not linear. Leave all your "ground floor" pages (with no close icon or cancel button) with routeLayer: 'default' (which is set by default).

  • The leaf node sets the route layer.
  • We use the afterModel hook, so don’t forget to call this._super.
  • Aborted transitions are ignored.
  • The exitRouteLayerFallback action may be overridden to control what happens when a user directly loads and then exits a non-default route layer.
  • Navigating to a route layer which is already in the stack will take you back down to that layer.