five-bells-visualization
Version:
Tool to visualize Five Bells payments
121 lines (97 loc) • 3.51 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>
<script src="../../webcomponentsjs/webcomponents.js"></script>
<link href="../../core-icons/core-icons.html" rel="import">
<link href="../../core-icon-button/core-icon-button.html" rel="import">
<link href="../../core-toolbar/core-toolbar.html" rel="import">
<link href="../core-animated-pages.html" rel="import">
<style>
body {
font-family: sans-serif;
}
.toolbar {
background-color: steelblue;
}
#container {
overflow: hidden;
}
#noscroll {
overflow-x: hidden;
overflow-y: auto;
}
.card {
position: relative;
height: 150px;
width: 150px;
font-size: 50px;
margin: 8px;
background-color: tomato;
border-radius: 4px;
cursor: default;
}
.view {
font-size: 250px;
background-color: tomato;
}
</style>
</head>
<body unresolved fullbleed vertical layout>
<template is="auto-binding">
<core-toolbar class="toolbar">
<core-icon-button icon="{{$.pages.selected != 0 ? 'arrow-back' : 'menu'}}" on-tap="{{back}}"></core-icon-button>
<div flex>Stuff</div>
<core-icon-button icon="more-vert"></core-icon-button>
</core-toolbar>
<core-animated-pages id="pages" flex selected="0" on-core-animated-pages-transition-end="{{transitionend}}" transitions="cross-fade-all hero-transition">
<section vertical layout>
<div id="noscroll" fit hero-p>
<div id="container" flex horizontal wrap around-justified layout cross-fade>
<template repeat="{{item in items}}">
<div class="card" vertical center center-justified layout hero-id="item-{{item}}" hero?="{{$.pages.selected === item + 1 || lastSelected === item + 1}}" on-tap="{{selectView}}"><span cross-fade>{{item}}</span></div>
</template>
</div>
</div>
</section>
<template repeat="{{item in items}}">
<section vertical layout>
<div class="view" flex vertical center center-justified layout hero-id="item-{{item}}" hero?="{{$.pages.selected === item + 1 || $.pages.selected === 0}}"><span cross-fade>{{item}}</span></div>
</section>
</template>
</core-animated-pages>
</template>
<script>
addEventListener('template-bound', function(e) {
var scope = e.target;
var items = [], count=50;
for (var i=0; i < count; i++) {
items.push(i);
}
scope.items = items;
scope.selectView = function(e) {
var i = e.target.templateInstance.model.item;
this.$.pages.selected = i+1;
}
scope.back = function() {
this.lastSelected = this.$.pages.selected;
console.log(this.lastSelected);
this.$.pages.selected = 0;
}
scope.transitionend = function() {
if (this.lastSelected) {
this.lastSelected = null;
}
}
})
</script>
</body>
</html>