five-bells-visualization
Version:
Tool to visualize Five Bells payments
113 lines (89 loc) • 2.64 kB
HTML
<!--
@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
-->
<html>
<head>
<title>core-animated-pages</title>
<script src="../../webcomponentsjs/webcomponents.js"></script>
<link href="nested-animated-pages.html" rel="import">
<style>
body {
font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 0;
background: #f1f1f1;
}
nested-demo {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<polymer-element name="nested-demo">
<template>
<style>
core-animated-pages {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
section {
text-align: center;
padding-top: 250px;
}
.square {
display: inline-block;
margin: 8px;
padding: 8px;
width: 200px;
height: 200px;
background-color: orange;
color: #fff;
}
</style>
<core-animated-pages selected="{{page}}" transitions="hero-transition cross-fade">
<section on-tap="{{transition}}" layout horizontal center-justified>
<div class="square" id="thing1" hero-id="thing" hero?="{{subpage === 0}}" cross-fade?="{{subpage !== 0}}">thing 1</div>
<div class="square" id="thing2" hero-id="thing" hero?="{{subpage === 1}}" cross-fade?="{{subpage !== 1}}">thing 2</div>
</section>
<nested-animated-pages page="{{subpage}}" on-nested-back="{{back}}"></nested-animated-pages>
</core-animated-pages>
</template>
<script>
Polymer('nested-demo', {
page: 0,
subpage: 0,
transition: function(e) {
var el = e.target;
if (el.id === "thing1") {
this.subpage = 0;
} else {
this.subpage = 1;
}
setTimeout(function() {
this.page = 1;
}.bind(this), 200);
},
back: function() {
this.page = 0;
}
});
</script>
</polymer-element>
<nested-demo></nested-demo>
</body>
</html>