five-bells-visualization
Version:
Tool to visualize Five Bells payments
117 lines (93 loc) • 2.69 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-layout-grid example</title>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="core-layout-grid.html">
<style>
body {
font-family: sans-serif;
overflow: hidden;
}
</style>
</head>
<body unresolved>
<grid-test></grid-test>
<polymer-element name="grid-test" on-tap="{{rotate}}">
<template>
<style>
* {
-webkit-transition: top, right, bottom, left;
-webkit-transition-duration: 0.3s;
}
panel {
display: inline-block;
border: 4px dotted lightblue;
padding: 16px;
background-color: whitesmoke;
}
#outputToolbar {
width: 400px;
}
#output {
width: 400px;
}
#workspace {
border-color: orange;
}
</style>
<core-layout-grid nodes="{{nodes}}" layout="{{layout}}"></core-layout-grid>
<panel id="toolbar">toolbar (click to rotate)</panel>
<panel id="sidebar">sidebar</panel>
<panel id="workspace">workspace</panel>
<panel id="outputToolbar">otherbar</panel>
<panel id="output">
output
<h2>Documentation</h2>
<h1>Verbiage</h1>
<p>In backbone record integer LED amplified internet protocol a extension reflective.
Array kilohertz LED. Wavelength extension patch supporting wave an by prompt.</p>
</panel>
</template>
<script>
Polymer('grid-test', {
arrangements: [[
[1, 1, 1, 1],
[2, 3, 3, 4],
[2, 3, 3, 5]
], [
[4, 3, 2],
[5, 3, 2],
[5, 1, 1]
], [
[1, 1],
[2, 3],
[4, 3]
]],
outputLayout: 0,
ready: function() {
this.outputLayoutChanged();
},
outputLayoutChanged: function() {
this.layout = this.arrangements[this.outputLayout];
},
toggleLayout: function() {
this.outputLayout = (this.outputLayout + 1) % this.arrangements.length;
},
rotate: function() {
this.toggleLayout();
}
});
</script>
</polymer-element>
</body>
</html>