five-bells-visualization/public/bower_components/core-animated-pages/demos/nested-animated-pages.html

Tool to visualize Five Bells payments

<!--
    @license
    Copyright (c) 2014 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 href="../../core-icons/core-icons.html" rel="import">
<link href="../../core-icon-button/core-icon-button.html" rel="import">
<link href="../core-animated-pages.html" rel="import">

<polymer-element name="nested-animated-pages">
<template>
  <style>
    :host {
      display: block;
      position: relative;
    }

    core-animated-pages {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .tall-toolbar {
      box-sizing: border-box;
      height: 240px;
    }

    .tall-toolbar.colored {
      fill: #fff;
      color: #fff;
    }

    .tall-toolbar [flex] {
      font-size: 1.5em;
    }

    core-icon-button {
      margin: 16px;
    }

    .body {
      background-color: #f1f1f1;
    }

    .square {
      position: absolute;
      width: 150px;
      height: 150px;
      left: 16px;
      top: 175px;
    }

  </style>
  <core-animated-pages id="pages" selected="{{page}}" selectedItem="{{selectedItem}}" transitions="hero-transition" no-transition?="{{noTransition}}">

    <section id="page1" cross-fade>
      <div class="tall-toolbar colored" style="background-color:orange;" layout vertical hero-id="thing" hero?="{{page === 0 || !noTransition}}">
        <div layout horizontal center>
          <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>
          <div flex>One</div>
          <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button>
        </div>
        <div flex></div>
      </div>
      <div flex class="body"></div>
    </section>

    <section layout vertical id="page2" cross-fade>
      <div class="tall-toolbar" layout vertical>
        <div layout horizontal center>
          <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>
          <div flex>Two</div>
          <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button>
        </div>
        <div flex></div>
      </div>
      <div flex class="body"></div>
      <div class="square" style="background-color:orange;" hero-id="thing" hero?="{{page === 1 || !noTransition}}"></div>
    </section>

  </core-animated-pages>
</template>
<script>

  Polymer({

    publish: {
      page: {value: 0}
    },

    selectedItem: null,
    noTransition: true,

    back: function() {
      this.noTransition = true;
      this.fire('nested-back');
    },

    transition: function() {
      this.noTransition = false;
      this.page = this.page === 0 ? 1 : 0;
    }

  });
</script>
</polymer-element>