Navigation between pages/views

Using an array to keep track of where we came from

by Génesis García Morilla

HTML

<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div id="layout" class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <button id="backward" class="mdl-button mdl-js-button
            mdl-button--icon mdl-js-ripple-effect mdl-layout__drawer-button">
      <i class="material-icons">arrow_back</i>
    </button>
    <div class="mdl-layout__header-row">
      <span id="title" class="mdl-layout-title">Title</span>
      <div class="mdl-layout-spacer"></div>
      <button id="main" class="mdl-button mdl-js-button
                mdl-button--icon mdl-js-ripple-effect">
        <i class="material-icons">home</i>
      </button>
      <button id="profile" class="mdl-button mdl-js-button
                mdl-button--icon mdl-js-ripple-effect">
        <i class="material-icons">person</i>
      </button>
      <button id="help" class="mdl-button mdl-js-button
                mdl-button--icon mdl-js-ripple-effect">
        <i class="material-icons">help</i>
      </button>
    </div>
  </header>

  <main id="container" class="mdl-layout__content mdl-typography--text-center">
  </main>

  <button id="right-button" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect
    mdl-button--colored boss-button"><i class="material-icons">add</i></button>
</div>
<!-- #layout -->

CSS

main {
  margin-top: 5vh;
}

#right-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1;
}

.hide {
  display: none;
}

JavaScript

// All our different views
const views = (() => {
  let navigation_ = []; // navigation between views
  let current_page_; // where we are

  // Button to go backward
  const $backward_ = document.querySelector('#backward');
  $backward_.addEventListener("click", function() {
    navigation_.pop().load();
  });

  // Title
  const $title_ = document.querySelector('#title');
  
  // Buttons to go to different pages
  ['main', 'profile', 'help'].forEach(page => {
    document.querySelector('#' + page)
      .addEventListener('click', function() {
        views[page].load(current_page_);
      });
  });
  
  // This contains what will change within our layout
  const $container_ = document.querySelector('#container');

  document.querySelector('#right-button').addEventListener('click', function() {
    $container_.innerHTML = 'This can do what ever you want to!';
  });
  
  // Main view
  const main = (() => {
    function load(previous) {
      current_page_ = main;
      // Reset navigation
      navigation_ = [];
      $backward_.classList.add('hide');
      // Add specific content
      $title_.textContent = 'Main';
      $container_.innerHTML = 'Simplicity as Reliability';
    }
    return {
      load: load
    };
  })();

  // Profile view
  const profile = (() => {
    function load(previous) {
      current_page_ = profile;
      if (current_page_ != previous) {
        // We need to keep track of where we came from
        if (previous) navigation_.push(previous);
        $backward_.classList.remove('hide');
      }
      // Add specific content
      $title_.textContent = 'Profile';
      $container_.innerHTML =
        `<span class="mdl-chip mdl-chip--contact">
      <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">A</span>
      <span class="mdl-chip__text">Contact Chip</span>
      </span>`;
    }
    return {
      load: load
    };
  })();

  // Help view
  const help = (() => {
    function load(previous) {
      current_page_ =...