test-app.html

<!--
@license
Copyright (c) 2016 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/iron-iconset-svg/iron-iconset-svg.html">

<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.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-scroll-effects/app-scroll-effects.html">
<link rel="import" href="bower_components/app-layout/app-toolbar/app-toolbar.html">

<link rel="import" href="bower_components/app-layout/demo/sample-content.html">

<iron-iconset-svg name="app" size="24">
<svg><defs>
<g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></g>
</defs></svg>
</iron-iconset-svg>

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

  <template>

    <style>

    app-drawer section {
      height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    app-drawer h2 {
      margin: 8px 0 0;
      padding: 18px;
      font-size: 18px;
    }

    app-drawer paper-checkbox {
      display: block;
      padding: 18px;
    }

    app-header {
      color: #fff;
      background-color: #C62828;
      --app-header-background-front-layer: {
        background-image: url(//app-layout-assets.appspot.com/assets/test-drive.jpg);
        background-position: 50% 10%;
      };
    }

    [main-title] {
      font-size: 2em;
    }

    </style>

    <app-drawer-layout>

      <app-drawer swipe-open>
        <section>
          <h2>app-header Properties</h2>
          <paper-checkbox checked="{{condenses}}">
            condenses
          </paper-checkbox>
          <paper-checkbox checked="{{fixed}}">
            fixed
          </paper-checkbox>
          <paper-checkbox checked="{{reveals}}">
            reveals
          </paper-checkbox>
          <paper-checkbox checked="{{shadow}}">
            shadow
          </paper-checkbox>

          <h2>app-header Effects</h2>
          <paper-checkbox checked="{{blendBackground}}">
            blend-background
          </paper-checkbox>
          <paper-checkbox checked="{{fadeBackground}}">
            fade-background
          </paper-checkbox>
          <paper-checkbox checked="{{parallaxBackground}}">
            parallax-background
          </paper-checkbox>
          <paper-checkbox checked="{{resizeSnappedTitle}}">
            resize-snapped-title
          </paper-checkbox>
          <paper-checkbox checked="{{resizeTitle}}">
            resize-title
          </paper-checkbox>
          <paper-checkbox checked="{{waterfall}}">
            waterfall
          </paper-checkbox>
        </section>
      </app-drawer>

      <app-header-layout>

        <app-header
            condenses="[[condenses]]"
            fixed="[[fixed]]"
            reveals="[[reveals]]"
            shadow="[[shadow]]"
            effects="[[_computeEffects(blendBackground, fadeBackground, parallaxBackground, resizeSnappedTitle, resizeTitle, waterfall)]]">

          <app-toolbar>
            <paper-icon-button icon="app:menu" drawer-toggle></paper-icon-button>
            <div condensed-title>Test Drive app-header</div>
          </app-toolbar>

          <app-toolbar></app-toolbar>

          <app-toolbar>
            <div main-title spacer>Test Drive</div>
          </app-toolbar>

        </app-header>

        <sample-content size="100"></sample-content>

      </app-header-layout>

    </app-drawer-layout>

  </template>

  <script>

  Polymer({

    is: 'test-app',

    properties: {

      condenses: {
        type: Boolean,
        value: true
      },

      fixed: {
        type: Boolean,
        value: true
      },

      reveals: {
        type: Boolean,
        value: false
      },

      shadow: {
        type: Boolean,
        value: false
      },

      blendBackground: {
        type: Boolean,
        value: true
      },

      fadeBackground: {
        type: Boolean,
        value: false
      },

      parallaxBackground: {
        type: Boolean,
        value: true
      },

      resizeSnappedTitle: {
        type: Boolean,
        value: false
      },

      resizeTitle: {
        type: Boolean,
        value: true
      },

      waterfall: {
        type: Boolean,
        value: true
      }

    },

    observers: [
      '_removeIf("fixed", reveals)',
      '_removeIf("reveals", fixed)',
      '_removeIf("shadow", waterfall)',
      '_removeIf("blendBackground", fadeBackground)',
      '_removeIf("fadeBackground", blendBackground)',
      '_removeIf("resizeSnappedTitle", resizeTitle)',
      '_removeIf("resizeTitle", resizeSnappedTitle)',
      '_removeIf("waterfall", shadow)'
    ],

    _computeEffects: function() {
      return [
        this.blendBackground ? 'blend-background ' : '',
        this.fadeBackground ? 'fade-background ' : '',
        this.parallaxBackground ? 'parallax-background ' : '',
        this.resizeSnappedTitle ? 'resize-snapped-title ' : '',
        this.resizeTitle ? 'resize-title ' : '',
        this.waterfall ? 'waterfall ' : ''
      ].join('');
    },

    _removeIf: function(propName, value) {
      if (this[propName] && value) {
        this[propName] = false;
      }
    }

  });

  </script>

</dom-module>