polyfora-app.html

<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../iron-selector/iron-selector.html">
<link rel="import" href="../../paper-styles/typography.html">

<link rel="import" href="../more-route-selector.html">

<link rel="import" href="polyfora-data.html">
<link rel="import" href="polyfora-forum-index.html">
<link rel="import" href="polyfora-forum.html">
<link rel="import" href="polyfora-thread.html">
<link rel="import" href="polyfora-user.html">

<!--
The top level element for Polyfora.
-->
<dom-module id="polyfora-app">

  <style>

    iron-selector > * {
      display: none;
    }
    iron-selector > .iron-selected {
      display: block;
    }

    header {
      @apply(--paper-font-display2);
      background-color: var(--theme-primary);
      color: white;
      padding: 16px;
      cursor: pointer;
    }

  </style>

  <template>
    <header on-tap="_onTapHome">Polyfora</header>

    <!--
    For the purposes of this demo, we generate all of its data via this element.
    -->
    <polyfora-data data="{{_demoData}}"></polyfora-data>

    <!--
    `more-route-selector` manages any element that extends `core-selector`,
    allowing you to associate each with a route. By default, it looks for
    the `route` attribute on each item in the `core-selector`. You can see
    an example of that default behavior in `polyfora-user.html`.

    In this example, we have opted to construct our base pages such that
    they declare _routing contexts_. Each element declares the route that it
    represents, and `more-route-selector` uses this to select the correct
    route to display.

    See each page's `<more-route context ...>`.
    -->
    <more-route-selector>
      <iron-selector>
        <polyfora-forum-index data="[[_demoData]]"></polyfora-forum-index>
        <polyfora-user        data="[[_demoData]]"></polyfora-user>
        <polyfora-forum       data="[[_demoData]]"></polyfora-forum>
        <polyfora-thread      data="[[_demoData]]"></polyfora-thread>
      </iron-selector>
    </more-route-selector>

  </template>

  <script>

    Polymer({

      is: 'polyfora-app',

      /**
       * Navigates to the root URL, in response to a tap on the home "link".
       */
      _onTapHome: function(event) {
        // If you wish to navigate imperatively, `MoreRouting.navigateTo` is the
        // way to go:
        MoreRouting.navigateTo('root');
        event.preventDefault();
      },

    });

  </script>

</dom-module>