Best way to access to access the custom element inside core-animated-pages

[robdodson]

Really digging app-router. On my current project I need to call measureHeaderHeight on an element during core-animated-pages's core-animated-pages-transition-prepare event. I do this by having each element implement a willPrepare method that gets called by the application every time the transition-prepare event fires.

Im curious how I could go about doing something similar with app-router. Looking through the docs, I didn't see a way to actually get at the element itself when a route is changing. I realize this is not an ideal use case (it would be awesome if the element could handle this itself) but at the moment, I'm not sure of any way for the element to know when it is about to be transitioned in.

[erikringsmuth]

Hey Rob, This sounds like an additional lifecycle event. I have the current ones documented at the bottom of the API page https://erikringsmuth.github.io/app-router/#/api. When I first created these I wasn't dealing with core-animated-pages at all and there was never more than 1 page in the DOM at a time. Now I think I'll need to add one more event.

The current events in order:

1. state-change when it sees the URL change https://github.com/erikringsmuth/app-router/blob/master/src/app-router.js#L141

2. activate-route-start when it finds a matching route https://github.com/erikringsmuth/app-router/blob/master/src/app-router.js#L173

3. activate-route-end when everything has completed https://github.com/erikringsmuth/app-router/blob/master/src/app-router.js#L291

Now with core-animated-pages there's a temporary overlap where both the previous route and new route are both in the DOM.

New route added https://github.com/erikringsmuth/app-router/blob/master/src/app-router.js#L277

core-animated-pages does the transition https://github.com/erikringsmuth/app-router/blob/master/src/app-router.js#L281

Then core-animated-pages calls transitionAnimationEnd() when core-animated-pages-transition-end is fired. https://github.com/erikringsmuth/app-router/blob/master/src/app-router.js#L73 https://github.com/erikringsmuth/app-router/blob/master/src/app-router.js#L296

I could add an event right here before core-animated-pages.selected is changed. https://github.com/erikringsmuth/app-router/blob/master/src/app-router.js#L281

This point in the code would have access to the old and new app-route and the new route's element. Otherwise I could do something to expose core-animated-pages-transition-prepare if that's a better way to hook into it.

[erikringsmuth]

Here's a concept. I created a route-events branch with this addition.

You can pull it through Bower:

"app-router": "erikringsmuth/app-router#route-events"

This adds a new activate-route-content-loaded event that gets fired on the app-router and the app-route that is being loaded. Here's a mock-up of how you can bind to it.

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/app-router/app-router.html">
<link rel="import" href="/bower_components/core-animated-pages/core-animated-pages.html">

<polymer-element name="demo-app">
  <template>
    <app-router core-animated-pages transitions="cross-fade" on-activate-route-content-loaded="{{routeContentLoaded}}">
      <app-route path="/" import="/pages/home-page.html"></app-route>
      <app-route path="/demo/:pathArg1" import="/pages/demo-page.html" on-activate-route-content-loaded="{{demoPageLoaded}}"></app-route>
      <app-route path="*" import="/pages/not-found-page.html"></app-route>
    </app-router>
  </template>
  <script>
    Polymer('demo-app', {
      routeContentLoaded: function(event) {
        // called when every page is loaded
        event.detail.content.willPrepare();
      },
      demoPageLoaded: function(event) {
        // only called when the demo-page is loaded
        event.detail.content.willPrepare();
      }
    });
  </script>
</polymer-element>

<demo-app></demo-app>

event.detail has the same properties as all of the other lifecycle events plus a new content property which is the new element or template that was just added to the DOM.

{
  path: '/new-path',
  route: newRoute,
  oldRoute: oldRoute,
  content: newElementOrTemplate
}

The order of events is then:

1. state-change
2. activate-route-start
3. activate-route-content-loaded
4. activate-route-end

[erikringsmuth]

That name may be a little misleading. It's really a core-animated-pages pre-transition event. If you don't use core-animated-pages nothing happens between activate-route-content-loaded and activate-route-end.

I should also probably write up more details on binding to lifecycle events from Polymer.

[erikringsmuth]

I made a few changes to the lifecycle event documentation http://erikringsmuth.github.io/app-router/#/events. I threw a Polymer example in there too since that's how most people will probably use it.

[robdodson]

Awesome thanks! I'll see if I can add this to my example sometime this week.

On Mon, Nov 10, 2014 at 8:47 PM, Erik Ringsmuth [email protected] wrote:

I made a few changes to the lifecycle event documentation http://erikringsmuth.github.io/app-router/#/events. I threw a Polymer example in there too since that's how most people will probably use it.

— Reply to this email directly or view it on GitHub https://github.com/erikringsmuth/app-router/issues/35#issuecomment-62501678 .

[erikringsmuth]

I forked your contacts-app and created a version using app-router https://github.com/erikringsmuth/contacts-app/tree/app-router. You can check out the diff here https://github.com/erikringsmuth/contacts-app/compare/app-router.

Biggest changes:

• app.js is way smaller since all of the routing logic is in app-router
• index.html doesn't pass data to pages. Each page makes it's own AJAX requests which moves the business logic away from the routing.
• The base-page doesn't really do anything at this point. I didn't remove that code because I wanted to change as few things as possible.
• I think everything's working even without calling willPrepare(). I'm not sure what broken things I'm looking for though. I'm pointing at the main release of app-router rather than the route-events branch I created for this issue.
• The SASS sourcemap option was breaking grunt locally so I removed it to get it running.