recipe-app.html

<!--
@license
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="../bower_components/polymer/polymer.html">

<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">

<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">

<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">

<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-layout/app-scrollpos-control/app-scrollpos-control.html">

<link rel="import" href="recipe-detail.html">
<link rel="import" href="recipe-list.html">
<link rel="import" href="app-icons.html">

<dom-module id="recipe-app">

  <template>

    <style>
    .avatar-container {
      position: relative;
      border: 2px solid #00AA8D;
      border-radius: 50%;
      height: 90px;
      padding: 2px;
      width: 90px;
      margin: 20px auto;
    }

    .avatar-container .image {
      background-image: url('//app-layout-assets.appspot.com/assets/pesto/avatar.jpg');
      background-size: contain;
      border-radius: 50%;
      height: 100%;
      width: 100%;
    }

    .contact-info {
      margin: 0 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #CCC;
      text-align: center;
    }

    .contact-info .name {
      font-weight: bold;
    }

    .contact-info .email {
      color: #999;
    }

    paper-item {
      @apply(--layout-center-center);
      height: 54px;
    }

    paper-icon-button {
      --paper-icon-button-ink-color: white;
    }
    </style>

    <app-location route="{{_route}}" use-hash-as-path></app-location>
    <app-route
        route="{{_route}}"
        pattern="/:page"
        data="{{_pageData}}"
        tail="{{_subRoute}}"></app-route>
    <app-route
        route="{{_subRoute}}"
        pattern="/:id"
        data="{{_idData}}"></app-route>

    <app-drawer-layout responsive-width="1280px">

      <!-- nav panel -->
      <app-drawer id="drawer" swipe-open>
        <app-header-layout has-scrolling-region>

          <app-header fixed>
            <div class="avatar-container">
              <div class="image"></div>
            </div>
            <div class="contact-info">
              <div class="name">Jonathan</div>
              <div class="email">heyfromjonathan@gmail.com</div>
            </div>
          </app-header>

          <!-- nav menu -->
          <paper-listbox
              selected="{{_pageData.page}}"
              attr-for-selected="name"
              on-iron-activate="_drawerSelected">
            <paper-item name="home">Home</paper-item>
            <paper-item name="favorites">Favorites</paper-item>
            <paper-item name="saved">Saved</paper-item>
            <paper-item name="trending">Trending</paper-item>
          </paper-listbox>

        </app-header-layout>
      </app-drawer>

      <app-scrollpos-control
          selected="[[_pageData.page]]"
          reset="[[_isDetailPage(_pageData.page)]]"></app-scrollpos-control>

      <!-- list/detail pages -->
      <iron-pages selected="[[_pageData.page]]" attr-for-selected="name">

        <recipe-list name="home" recipes="[[recipes]]">
          <paper-icon-button icon="app:menu" drawer-toggle></paper-icon-button>
        </recipe-list>

        <recipe-list name="favorites">
          <paper-icon-button icon="app:menu" drawer-toggle></paper-icon-button>
        </recipe-list>

        <recipe-list name="saved">
          <paper-icon-button icon="app:menu" drawer-toggle></paper-icon-button>
        </recipe-list>

        <recipe-list name="trending">
          <paper-icon-button icon="app:menu" drawer-toggle></paper-icon-button>
        </recipe-list>

        <recipe-detail
            id="detailView"
            name="detail"
            recipe="[[_getRecipe(recipes, _idData.id)]]"></recipe-detail>

      </iron-pages>

    </app-drawer-layout>

  </template>

  <script>

  Polymer({

    is: 'recipe-app',

    properties: {

      recipes: Object,

      _route: Object,

      _subRoute: Object,

      _pageData: Object,

      _idData: Object

    },

    attached: function() {
      this.async(function() {
        if (!this._route.path) {
          this.set('_route.path', '/home');
        }
      });
    },

    _isDetailPage: function(page) {
      return page === 'detail';
    },

    _getRecipe: function() {
      if (this.recipes && this._idData.id) {
        for (var i = 0; i < this.recipes.length; ++i) {
          var r = this.recipes[i];
          if (r.id === this._idData.id) {
            return r;
          }
        }
      }
      return null;
    },

    _drawerSelected: function() {
      if (!this.$.drawer.persistent) this.$.drawer.close();
    }

  });

  </script>

</dom-module>