Polymer + page.js flash notifications with paper-toast

Question

I'm building a mid sized app with Polymer and used the Polymer Starter Kit to kick things off which uses page.js for routing.

I want to implement flash message functionality using the paper-toast element.

In other technologies/frameworks this is implemented by checking to see if a property exists when the route is changed.. if it does, it shoes the relevant flash/toast message.

How... with Polymer & Page.js is it possible to replicate this type of functionality? Page.js doesn't seem to have any events for changed routes.

The only way I can think is to create a proxy function for the page('/route') function that I have to call every time I want to go to a new page which then calls the actual page function. Is there a better way?

markstewie markstewie · Accepted Answer · 2015-10-14T23:14:25

I've implemented this like follows for the time being... seems to be ok but if anyone can suggest improvements let me know.

In routing.html

window.addEventListener('WebComponentsReady', function() {
    // Assign page to another global object
    LC.page = page;

    // Define all routes through this new object
    LC.page('/login', function () {
      app.route = 'login';
      app.scrollPageToTop();
    });

  ....
   //implement remaining routes

   // page proxy... to intercept calls
    page = function(path) {
      // dispatch event
      document.dispatchEvent(new Event('LC.pageChange', {path: path}));
      // call the real page
      LC.page(path);
    }; 
});

Then where you want to listen.. in my case in a lc-paper-toast element added to the index.html file of the app I can now listen to when the page is changed...

 ready: function() {
      document.addEventListener('LC.pageChange', function(e){
        console.log('page change' , e);
      }, false);
    }

Only thing to be aware of is that all page changes must be called with page('/route') otherwise it won't go through the proxy.

Polymer + page.js flash notifications with paper-toast

1 Answers