1<!doctype html>
2<!--
3@license
4Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10-->
11<html>
12  <head>
13    <title>neon-animated-pages demo: declarative</title>
14
15    <meta charset="utf-8">
16    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
17    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
18
19    <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
20
21    <link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
22    <link rel="import" href="../../../paper-styles/typography.html">
23    <link rel="import" href="../../../paper-styles/color.html">
24    <link rel="import" href="../../neon-animated-pages.html">
25    <link rel="import" href="../../neon-animatable.html">
26    <link rel="import" href="../../neon-animations.html">
27
28    <style is="custom-style">
29      body {
30        overflow: hidden;
31        @apply(--layout-fullbleed);
32        @apply(--layout-vertical);
33      }
34
35      .toolbar {
36        position: relative;
37
38        padding: 8px;
39
40        background-color: white;
41
42        z-index: 12;
43      }
44
45      neon-animated-pages {
46        @apply(--layout-flex);
47      }
48
49      neon-animatable {
50        color: white;
51        @apply(--layout-horizontal);
52        @apply(--layout-center-center);
53        @apply(--paper-font-display4);
54      }
55
56      neon-animatable:nth-child(1) {
57        background: var(--paper-red-500);
58      }
59
60      neon-animatable:nth-child(2) {
61        background: var(--paper-blue-500);
62      }
63
64      neon-animatable:nth-child(3) {
65        background: var(--paper-orange-500);
66      }
67
68      neon-animatable:nth-child(4) {
69        background: var(--paper-green-500);
70      }
71
72      neon-animatable:nth-child(5) {
73        background: var(--paper-purple-500);
74      }
75
76    </style>
77
78  </head>
79  <body>
80
81    <template is="dom-bind">
82
83      <div class="toolbar">
84        <button on-click="_onPrevClick">&#8678;</button>
85        <button on-click="_onNextClick">&#8680;</button>
86        <button on-click="_onUpClick">&#8679;</button>
87        <button on-click="_onDownClick">&#8681;</button>
88      </div>
89
90      <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
91        <neon-animatable>1</neon-animatable>
92        <neon-animatable>2</neon-animatable>
93        <neon-animatable>3</neon-animatable>
94        <neon-animatable>4</neon-animatable>
95        <neon-animatable>5</neon-animatable>
96      </neon-animated-pages>
97
98    </template>
99
100    <script>
101
102      var scope = document.querySelector('template[is="dom-bind"]');
103      scope.selected = 0;
104
105      scope._onPrevClick = function() {
106        this.entryAnimation = 'slide-from-left-animation';
107        this.exitAnimation = 'slide-right-animation';
108        this.selected = this.selected === 0 ? 4 : (this.selected - 1);
109      }
110
111      scope._onNextClick = function() {
112        this.entryAnimation = 'slide-from-right-animation';
113        this.exitAnimation = 'slide-left-animation';
114        this.selected = this.selected === 4 ? 0 : (this.selected + 1);
115      }
116
117      scope._onUpClick = function() {
118        this.entryAnimation = 'slide-from-top-animation';
119        this.exitAnimation = 'slide-down-animation';
120        this.selected = this.selected === 4 ? 0 : (this.selected + 1);
121      }
122
123      scope._onDownClick = function() {
124        this.entryAnimation = 'slide-from-bottom-animation';
125        this.exitAnimation = 'slide-up-animation';
126        this.selected = this.selected === 0 ? 4 : (this.selected - 1);
127      }
128
129    </script>
130
131  </body>
132</html>
133