five-bells-visualization
Version:
Tool to visualize Five Bells payments
143 lines (120 loc) • 4.24 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;
}
</style>
</head>
<body unresolved fullbleed vertical layout>
<polymer-element name="grid-toc" attributes="items selected">
<template>
<style>
#container {
overflow: auto;
}
.card {
position: relative;
height: 150px;
width: 150px;
font-size: 50px;
margin: 8px;
background-color: tomato;
border-radius: 4px;
cursor: default;
}
</style>
<div id="container" on-tap="{{selectView}}" flex horizontal wrap around-justified layout hero-p>
<template repeat="{{item in items}}">
<div class="card" vertical center center-justified layout hero-id="item-{{item}}" hero?="{{selected === item + 1 || lastSelected === item + 1}}"><span cross-fade>{{item}}</span></div>
</template>
</div>
</template>
<script>
Polymer('grid-toc', {
selectedChanged: function(old) {
this.lastSelected = old;
},
selectView: function(e) {
var item = e.target.templateInstance.model.item;
if (item !== undefined) {
this.fire('grid-toc-select', {item: item});
}
}
});
</script>
</polymer-element>
<polymer-element name="grid-item" attributes="item isHero">
<template>
<style>
.view {
font-size: 250px;
background-color: tomato;
}
</style>
<div class="view" flex vertical center center-justified layout hero-id="item-{{item}}" hero?="{{isHero}}">
<span cross-fade>{{item}}</span>
</div>
</template>
<script>
Polymer('grid-item', {
isSelected: false
})
</script>
</polymer-element>
<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">
<grid-toc vertical id="toc" layout selected="{{$.pages.selected}}" items="{{items}}" hero-p on-grid-toc-select="{{selectView}}"></grid-toc>
<template repeat="{{item in items}}">
<grid-item vertical layout item="{{item}}" hero-p isHero="{{$.pages.selected === item + 1 || $.pages.selected === 0}}"></grid-item>
</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, detail) {
var i = detail.item;
this.$.pages.selected = i+1;
}
scope.back = function() {
this.lastSelected = this.$.pages.selected;
this.$.pages.selected = 0;
}
scope.transitionend = function() {
if (this.lastSelected) {
this.lastSelected = null;
}
}
})
</script>
</body>
</html>