← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/neon-animation/demo/declarative/index.html

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/neon-animation/demo/declarative/index.html
 
1
<!doctype html>
 
2
<!--
 
3
@license
 
4
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 
5
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 
6
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 
7
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 
8
Code distributed by Google as part of the polymer project is also
 
9
subject 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>