Cannot load pages outside of tabbar and navigator

[phyllito]

Hi, I am using the onsen UI kitchen sink application as the basis of my application.
I am having trouble with loading a page before the tabbar. What I want to achieve is when the app starts up, a loading page(splash screen) pops up instead with a loading wheel, after whatever logic, redirect the user to a sign in page or the home screen(the tab bar). So far I have only been able to load the start up page by adding a second navigator (I have tried other ways, this is the only way it worked). When I do this though, I face another issue which is I can’t navigate off that start up page even when I add a button to manually.

Most of my pages are in their own separate files but for the purpose of this I have moved the start up page to the same index file.

Please see the code below, as you can see I’ve commented out the second navigator, which if I uncomment works but can’t navigate off it. I have tried adding page="startup2.html" to the appNavigator and that doesn’t work.

I have also tried the loadView and pushPage for the button none of which worked.

Thank you and apologies if this is basic but I have stuck on this for a couple of days.

Index

  <!--Tabbar navigation-->
  <ons-navigator id="appNavigator">
    <ons-page>
      <ons-splitter id="appSplitter">
        <ons-splitter-side id="moremenu" page="moremenu.html" swipeable side="right" collapse="" width="260px"></ons-splitter-side>
        <ons-splitter-content>
          <ons-page>
            <ons-toolbar>
              <div class="center">FACT</div>
              <div class="right">
                <ons-toolbar-button onclick="fn.toggleMenu()">
                  <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
                </ons-toolbar-button>
              </div>
            </ons-toolbar>
            <ons-tabbar id="appTabbar" position="auto">
              <ons-tab label="Home" icon="ion-home" page="view/home.html" active></ons-tab>
              <ons-tab label="Charts" icon="ion-arrow-graph-down-right" page="view/charts.html"></ons-tab>
              <ons-tab label="Animations" icon="ion-film-marker" page="view/preview.html"></ons-tab>
              <ons-tab label="More" icon="ion-more" onclick="fn.toggleMenu()"></ons-tab>
            </ons-tabbar>
          </ons-page>
        </ons-splitter-content>
      </ons-splitter>
    </ons-page>
  </ons-navigator>

  <!--<ons-navigator id="myNavigator" page="startup2.html"></ons-navigator>-->

<template id="startup2.html">
<ons-page id="startup2">
    <div style="text-align: center; margin: 40px; color: #666">
        <p>
          <ons-progress-circular class="progressStyle" indeterminate></ons-progress-circular>
        </p>
        <ons-list>
        <ons-list-item onclick="fn.load('homepage.html')" tappable>
          <div class="left">
            <ons-icon fixed-width class="list-item__icon" icon="ion-home, material:md-home"></ons-icon>
          </div>
          <div class="center">
            Home
          </div>
          <div class="right">
            <ons-icon icon="fa-link"></ons-icon>
          </div>
        </ons-list-item>
        </ons-list>
    </div>
</ons-page>
</template>

Navigation

// Navigation for the application

window.fn = {};

window.fn.toggleMenu = function () {
  document.getElementById('appSplitter').right.toggle();
};

window.fn.loadView = function (index) {
  document.getElementById('appTabbar').setActiveTab(index);
  document.getElementById('moremenu').close();
};

window.fn.loadLink = function (url) {
  window.open(url, '_blank');
};

window.fn.pushPage = function (page, anim) {
  if (anim) {
    document.getElementById('appNavigator').pushPage(page.id, { data: { title: page.title }, animation: anim });
  } else {
    document.getElementById('appNavigator').pushPage(page.id, { data: { title: page.title } });
  }
};

window.fn.load = function (page) {
  // var menu = document.getElementById('menu');
  var navi = document.getElementById('myNavigator');

  // menu.close();
  var currentPage = navi.getAttribute('page');
  if (currentPage != page) {
    navi.setAttribute('page', page);
    navi.resetToPage(page, {
      animation: 'fade'
    });
  }
};

ons.ready(function () {
  const moremenu = document.getElementById('appSplitter');
  ons.platform.isAndroid() ? moremenu.right.setAttribute('animation', 'overlay') : moremenu.right.setAttribute('animation', 'reveal');
})

[Fran Diox]

@phyllito You can never have 2 components like that at the same level. You can, however, nest a navigator inside another. In any case, here you don’t need two navigators, just the main one you are currently using. Simply move its content to a template and use page="startup2.html" attribute (or move that template’s content inside the navigator). When you are done in that page, you can call navigator.resetToPage or navigator.replacePage with the login/home pages.

Otherwise, you can also display an ons-modal and even have an extra navigator inside that modal if necessary. Just close the modal when you are done with the loading and login.

[phyllito]

@Fran-Diox Thanks, i’ve gone with removing the page from the navigator and it works as expected. However I lose the nice effect of the menu moving the current page as it slides from the right instead of it sliding on top of the current page. If you have a solution to that it would be awesome however the main issue is solved.

[Fran Diox]

@phyllito Do you mean that the splitter side animation is changed? It shouldn’t, so I guess there is something else to fix. Can you describe more that issue? I’m not sure if I understood it well.

Commonly, the splitter is the parent of the navigator so you can get it for every navigator’s page. It can also be a child if you only want it in 1 page.

[phyllito]

@Fran-Diox if you look at the kitchensink example: http://tutorial.onsen.io/?framework=vanilla&category=common patterns&module=kitchensink

When you open the menu, the page slide to the left to reveal the menu on the right (kind of popping from underneath the page.

But now it’s like this: http://tutorial.onsen.io/?framework=vanilla&category=reference&module=splitter
where the page doesn’t move but the side menu just slides in in front of the page.

I preferred the first one and I don’t know why it changed by just moving the page out of the navigator.

[munsterlander]

@phyllito In that tutorial you linked, you can update the code to look like this:

<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable animation="push">

And then click Run to see if this is what you want.

Per the documents here:

https://onsen.io/v2/api/js/ons-splitter-side.html

The splitter side now has 3 animations:

• animation - Specify the animation. Use one of overlay, push, reveal or default.

Try those options to get what you want for your project.