Router agnostification - POC

components/ionBody/ionBody.js

@@ -7,6 +7,14 @@ Platform = {
   isAndroid: function () {
     return navigator.userAgent.indexOf('Android') > 0
            || Session.get('platformOverride') === 'Android';
+  },
+
+  withRouter: function (routerAction) {
+    if (Package['iron:router']) {
+      return routerAction['iron:router']();
+    } else if (Package['meteorhacks:flow-router']) {
+      return routerAction['meteorhacks:flow-router']();
+    }
   }
 };
 

components/ionItem/ionItem.js

@@ -37,7 +37,7 @@ Template.ionItem.helpers({
   },
 
   isAnchor: function () {
-    return _.some([this.href,this.path,this.url,this.route],function(path){return path != undefined});
+    return _.some([this.href, this.path, this.url, this.route], function (path) { return path != undefined });
   },
 
   target: function () {
@@ -48,32 +48,44 @@ Template.ionItem.helpers({
     if (this.href) {
       return this.href;
     }
-
-    if ( this.path || this.url || this.route ) {
-
-      var path = _.find([this.path,this.url,this.route],function(path){return path !=undefined});
-
-      if ( this.query || this.hash || this.data ){
-
-        var hash = {};
-        hash.route = path;
-        hash.query = this.query;
-        hash.hash = this.hash;
-        hash.data = this.data;
-        var options = new Spacebars.kw(hash);
-
-        // Devs may pass 'route=x' instead of 'path=' or 'url='
-        // Should doing that throw an error? Not sure but we decided to
-        // parse it as if the dev passed it as 'path='
-        if (this.url){
-          return Blaze._globalHelpers.urlFor(options)
-        } else if( this.path || this.route ) {
-          return Blaze._globalHelpers.pathFor(options)
+
+    var parentData = Template.parentData(1);
+
+    return Platform.withRouter({
+      'iron:router': function () {
+        if (this.path || this.url || this.route) {
+
+          var path = _.find([this.path, this.url, this.route], function (path) { return path != undefined });
+
+          if (this.query || this.hash || this.data) {
+
+            var hash = {};
+            hash.route = path;
+            hash.query = this.query;
+            hash.hash = this.hash;
+            hash.data = this.data;
+            var options = new Spacebars.kw(hash);
+
+            // Devs may pass 'route=x' instead of 'path=' or 'url='
+            // Should doing that throw an error? Not sure but we decided to
+            // parse it as if the dev passed it as 'path='
+            if (this.url) {
+              return Blaze._globalHelpers.urlFor(options);
+            } else if (this.path || this.route) {
+              return Blaze._globalHelpers.pathFor(options);
+            }
+
+          } else {
+            return Router.routes[path].path(parentData);
+          }
         }
-
-      } else {
-        return Router.routes[path].path(Template.parentData(1));
-      }
-    }
+      }.bind(this),
+
+      'meteorhacks:flow-router': function () {
+        if (this.path) {
+          return FlowRouter.path(this.path, this.params, this.query);
+        }
+      }.bind(this)
+    });
   }
 });

components/ionNavBackButton/ionNavBackButton.js

@@ -1,7 +1,21 @@
 IonScrollPositions = {};
 
-Router.onStop(function () {
-  IonScrollPositions[this.route.path(this.params)] = $('.overflow-scroll').scrollTop();
+Meteor.startup(function () {
+  Platform.withRouter({
+    'iron:router': function () {
+      Router.onStop(function () {
+        IonScrollPositions[this.route.path(this.params)] = $('.overflow-scroll').scrollTop();
+      });
+    },
+
+    'meteorhacks:flow-router': function () {
+      if (FlowRouter.triggers) {
+        FlowRouter.triggers.exit([function (context) {
+          IonScrollPositions[context.path] = $('.overflow-scroll').scrollTop();
+        }]);
+      }
+    }
+  });
 });
 
 Template.ionNavBackButton.events({
@@ -10,9 +24,18 @@ Template.ionNavBackButton.events({
     $('[data-navbar-container]').addClass('nav-bar-direction-back');
 
     //get most up-to-date url, if it exists
-    backUrl = template.getBackUrl()
+    var backUrl = template.getBackUrl();
+
     if (backUrl) {
-      Router.go(backUrl);
+      Platform.withRouter({
+        'iron:router': function () {
+          Router.go(backUrl);
+        },
+
+        'meteorhacks:flow-router': function () {
+          FlowRouter.go(backUrl);
+        }
+      });
     } else {
       window.history.back();
     }
@@ -24,26 +47,36 @@ Template.ionNavBackButton.created = function () {
 };
 
 Template.ionNavBackButton.rendered = function () {
-  var self = this;
   this.getBackUrl = function () {
     var backUrl = null;
 
-    self.data = self.data || {};
+    var data = this.data || {};
 
-    if (self.data.href) {
-      backUrl = self.data.href;
+    if (data.href) {
+      backUrl = data.href;
     }
 
-    if (self.data.path) {
-      backRoute = Router.routes[self.data.path]
-      if (!backRoute) {
-        console.warn("back to nonexistent route: ", self.data.path);
-        return;
-      }
-      backUrl = backRoute.path(Template.parentData(1));
+    if (data.path) {
+      var parentData = Template.parentData(1);
+
+      backUrl = Platform.withRouter({
+        'iron:router': function () {
+          var backRoute = Router.routes[data.path];
+          if (! backRoute) {
+            console.warn("Back to nonexistent route:", data.path);
+            return;
+          }
+          return backRoute.path(parentData);
+        }.bind(this),
+
+        'meteorhacks:flow-router': function () {
+          return FlowRouter.path(data.path, parentData.params, parentData.query);
+        }.bind(this)
+      });
     }
+
     return backUrl;
-  };
+  }.bind(this);
 };
 
 Template.ionNavBackButton.helpers({
@@ -72,7 +105,7 @@ Template.ionNavBackButton.helpers({
   text: function () {
     if (this.text) {
       return this.text;
-    } else if(this.text !== false) {
+    } else if (this.text !== false) {
       return 'Back';
     }
   }

components/ionTab/ionTab.js

@@ -26,10 +26,22 @@ Template.ionTab.helpers({
     if (this.href) {
       return this.href;
     }
+
+    var data = Template.currentData();
 
-    if (this.path && Router.routes[this.path]) {
-      return Router.routes[this.path].path(Template.currentData());
-    }
+    return Platform.withRouter({
+      'iron:router': function () {
+        if (this.path && Router.routes[this.path]) {
+          return Router.routes[this.path].path(data);
+        }
+      }.bind(this),
+
+      'meteorhacks:flow-router': function () {
+        if (this.path) {
+          return FlowRouter.path(this.path, data.params, data.query);
+        }
+      }.bind(this)
+    });
   },
 
   isActive: function () {
@@ -42,10 +54,23 @@ Template.ionTab.helpers({
     // The initial case where there is no localStorage value and
     // no session variable has been set, this attempts to set the correct tab
     // to active based on the router
-    var route = Router.routes[this.path];
-    if(route && route.path(Template.parentData(1)) === ionTabCurrent){
-      return 'active';
-    }
+    var parentData = Template.parentData(1);
+
+    return Platform.withRouter({
+      'iron:router': function () {
+        var route = Router.routes[this.path];
+        if (route && route.path(parentData) === ionTabCurrent) {
+          return 'active';
+        }
+      }.bind(this),
+
+      'meteorhacks:flow-router': function () {
+        var path = FlowRouter.path(this.path, parentData.params, parentData.query);
+        if (path === ionTabCurrent) {
+          return 'active';
+        }
+      }.bind(this)
+    });
   },
 
   activeIcon: function () {
@@ -69,6 +94,6 @@ Template.ionTab.helpers({
   },
 
   badgeColor: function () {
-    return this.badgeColor||'assertive';
+    return this.badgeColor || 'assertive';
   }
 });

components/ionTabs/ionTabs.js

@@ -11,8 +11,16 @@ Template.ionTabs.rendered = function () {
 
   this.$('.tabs').children().each(function() {
     var href = $(this).attr('href');
-    var current = Router.current().location.get().path;
-    if(href === current){
+    var current = Platform.withRouter({
+      'iron:router': function () {
+        return Router.current().location.get().path;
+      },
+
+      'meteorhacks:flow-router': function () {
+        return FlowRouter.current().path;
+      }
+    });
+    if (href === current){
       Session.set('ionTab.current', href);
     }
   });

components/ionView/ionView.js

@@ -3,7 +3,16 @@ Template.ionView.rendered = function () {
   IonNavigation.skipTransitions = false;
 
   // Reset our scroll position
-  var routePath = Router.current().route.path(Router.current().params);
+  var routePath = Platform.withRouter({
+    'iron:router': function () {
+      return Router.current().route.path(Router.current().params);
+    },
+
+    'meteorhacks:flow-router': function () {
+      return FlowRouter.current().path;
+    }
+  });
+
   if(IonScrollPositions[routePath]) {
     $('.overflow-scroll').not('.nav-view-leaving .overflow-scroll').scrollTop(IonScrollPositions[routePath]);
     delete IonScrollPositions[routePath];

package.js

@@ -11,8 +11,9 @@ Cordova.depends({
 
 Package.onUse(function(api) {
   api.versionsFrom("1.0");
-  api.use(["templating", "underscore", "fastclick", "iron:[email protected]", "tracker", "session"], "client");
-
+  api.use(["templating", "underscore", "fastclick", "tracker", "session"], "client");
+  api.use('iron:[email protected]', 'client', { weak: true });
+  api.use('meteorhacks:[email protected] || 2.0.0', 'client', { weak: true });
   api.addFiles([
     "vendor/snap.js",
     "vendor/snap.css",