From f903b43e6e5995c8090327f07e67ef3de94d8930 Mon Sep 17 00:00:00 2001 From: Richard Lai Date: Mon, 27 Jul 2015 15:22:40 +0000 Subject: [PATCH] Router agnostification - POC --- components/ionBody/ionBody.js | 8 +++ components/ionItem/ionItem.js | 66 ++++++++++-------- .../ionNavBackButton/ionNavBackButton.js | 67 ++++++++++++++----- components/ionTab/ionTab.js | 41 +++++++++--- components/ionTabs/ionTabs.js | 12 +++- components/ionView/ionView.js | 11 ++- package.js | 5 +- 7 files changed, 153 insertions(+), 57 deletions(-) diff --git a/components/ionBody/ionBody.js b/components/ionBody/ionBody.js index 726f802..0fdff30 100644 --- a/components/ionBody/ionBody.js +++ b/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'](); + } } }; diff --git a/components/ionItem/ionItem.js b/components/ionItem/ionItem.js index f5af09d..26da281 100644 --- a/components/ionItem/ionItem.js +++ b/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) + }); } }); diff --git a/components/ionNavBackButton/ionNavBackButton.js b/components/ionNavBackButton/ionNavBackButton.js index 086b1a1..2ccf03c 100644 --- a/components/ionNavBackButton/ionNavBackButton.js +++ b/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'; } } diff --git a/components/ionTab/ionTab.js b/components/ionTab/ionTab.js index 2e80017..b4c74e7 100644 --- a/components/ionTab/ionTab.js +++ b/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'; } }); diff --git a/components/ionTabs/ionTabs.js b/components/ionTabs/ionTabs.js index 8407a58..00de6e1 100644 --- a/components/ionTabs/ionTabs.js +++ b/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); } }); diff --git a/components/ionView/ionView.js b/components/ionView/ionView.js index 0466a7a..ae4939f 100644 --- a/components/ionView/ionView.js +++ b/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]; diff --git a/package.js b/package.js index 50c91fa..7e1be0e 100644 --- a/package.js +++ b/package.js @@ -11,8 +11,9 @@ Cordova.depends({ Package.onUse(function(api) { api.versionsFrom("1.0"); - api.use(["templating", "underscore", "fastclick", "iron:router@1.0.0", "tracker", "session"], "client"); - + api.use(["templating", "underscore", "fastclick", "tracker", "session"], "client"); + api.use('iron:router@1.0.0', 'client', { weak: true }); + api.use('meteorhacks:flow-router@1.0.0 || 2.0.0', 'client', { weak: true }); api.addFiles([ "vendor/snap.js", "vendor/snap.css",