Hide Onsen Toolbar

dustintinsley

I have ran into a somewhat interesting issue, I am sure I am just passing this incorrectly, but I have ran into an issue. I have a small app that uses Onsen Navigator. It consists on 3 pages, index.html, locate.html, and error.html. I am attempting to hide the toolbar on locate.html if the user has an iPhoneX. I had it working as long as the index.html DOES NOT have a Onset Toolbar itself. When I would push the locate.html, it would determine if the device was an iPhoneX and successfully hide the toolbar without issue. However, if the index.html has a Onset Toolbar, when I push the locate.html, the toolbar will no longer hide itself. It defiantly has something to do with the fact that there is now a toolbar in the index.html, if I remove that toolbar (which I actually need for the simple reason of having a toolbar-button), the hiding of the toolbar on locate.html again works as it should. I am baffled as to how to correct this issue. If anyone has any suggestions, I would appreciate it. Thanks in advance.

gobiyau

Hi,

This is a quite difficult question, I modify the onsenui example ‘Stack Navigation’ as follows.

<ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator>

<template id="page1.html">
  <ons-page id="page1">
    <ons-toolbar>
      <div class="center">Page 1</div>
    </ons-toolbar>
    <p>This is the first page.</p>
    <ons-button id="push-button">Push page</ons-button>
  </ons-page>
</template>

<template id="page2.html">
  <ons-page id="page2">
    <ons-toolbar modifier="transparent">
      <div class="left"><ons-back-button>Page 1</ons-back-button></div>
      <div class="center"></div>
    </ons-toolbar>

    <p>This is the second page.</p>
    <ons-button onclick="document.querySelector('#myNavigator').popPage()">Pop Page</ons-button>
  </ons-page>
</template>

document.addEventListener('init', function(event) {
  var page = event.target;

  if (page.id === 'page1') {
    document.querySelector('ons-toolbar').show();
    page.querySelector('#push-button').onclick = function() {
      document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}});
    };
  } else if (page.id === 'page2') {
    if (true) {
      page.querySelector('.toolbar').hide();     
    } else {
      page.querySelector('ons-toolbar').setAttribute('modifier', '')
    }
  }
});

You can set the condition from true to false, you will find the page 2 toolbar will display and not display accordingly.

if everything is fine, you now change if(true) to if (ons.platform.isIPhoneX()) as follows:

if (ons.platform.isIPhoneX()) { 
  page.querySelector('.toolbar').hide();     
} else {
  page.querySelector('ons-toolbar').setAttribute('modifier', '')
}

Best Regards
Gobi

gobiyau

Hi

document.querySelector(‘ons-toolbar’).show() is not necessary.

document.addEventListener('init', function(event) {
  var page = event.target;

  if (page.id === 'page1') {
    page.querySelector('#push-button').onclick = function() {
      document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}});
    };
  } else if (page.id === 'page2') {
    if (true) {
      page.querySelector('.toolbar').hide();     
    } else {
      page.querySelector('ons-toolbar').setAttribute('modifier', '')
    }
  }
});

Best Regards
Gobi