five-bells-visualization
Version:
Tool to visualize Five Bells payments
285 lines (261 loc) • 11.2 kB
HTML
<html>
<head>
<title>x-repeat</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../../perf-lib/perf.js"></script>
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../polymer.html">
<link rel="import" href="../../../layout/layout.html">
</head>
<body>
<style>
body {
font-family: sans-serif;
font-size: 14px;
}
</style>
<dom-module id="x-labeled-input">
<style>
:host {
width: 400px
}
#label {
width: 200px;
overflow: hidden;
border-bottom: 1px solid gray;
border-bottom-style: dashed;
}
input {
margin-right: 5px;
}
</style>
<template>
<div class="layout horizontal">
<span id="label" class="flex">{{label}}</span>
<input value="{{value::input}}" disabled$="{{disabled}}">
</div>
</template>
</dom-module>
<dom-module id="x-test">
<style>
.outer {
padding: 10px;
}
.column {
width: 400px;
overflow: auto;
}
.item {
margin: 5px;
margin-left: 10px;
margin-right: 0;
padding: 5px;
padding-right: 0;
background-color: rgba(0,0,0,0.1);
}
.index {
display: inline-block;
background-color: gray;
color: white;
padding: 4px;
margin-bottom: 4px;
border-radius: 4px;
}
</style>
<template>
<div class="fit layout vertical">
<div class="outer">
<div class="index">Outer scope:</div>
<x-labeled-input label="outerA" value="{{outerA}}"></x-labeled-input>
<x-labeled-input label="outerB" value="{{outerB}}"></x-labeled-input>
<x-labeled-input label="outerC" value="{{outerC}}"></x-labeled-input>
<x-labeled-input label="outerObjA.value" value="{{outerObjA.value}}"></x-labeled-input>
<x-labeled-input label="outerObjB.value" value="{{outerObjB.value}}"></x-labeled-input>
<x-labeled-input label="outerObjC.value" value="{{outerObjC.value}}"></x-labeled-input>
</div>
<div class="layout horizontal flex">
<div class="column flex">
<template is="x-repeat" id="xr1-1" items="{{items}}">
<div class="item" id="xr1-1" idx$="{{index}}">
<div class="index">idx: <span>{{index}}</span></div>
<button on-click="handleClickA">Change outerA</button>
<x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
<x-labeled-input label="parent.outerA" value="{{parent.outerA}}"></x-labeled-input>
<x-labeled-input label="parent.outerObjA.value" value="{{parent.outerObjA.value}}"></x-labeled-input>
<x-labeled-input label="innerA" value="{{innerA}}"></x-labeled-input>
<x-labeled-input label="innerB" value="{{innerB}}"></x-labeled-input>
<x-labeled-input label="computeInner(innerA, innerB)" value="{{computeInner(innerA, innerB)}}" disabled></x-labeled-input>
<template is="x-repeat" id="xr1-2" idx$="{{index}}" items="{{item.items}}">
<div class="item" id="xr1-2" idx$="{{index}}">
<div class="index">idx: <span>{{index}}</span></div>
<button on-click="handleClickB">Change outerB</button>
<x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
<x-labeled-input label="parent.item.name" value="{{parent.item.name}}"></x-labeled-input>
<x-labeled-input label="parent.parent.outerB" value="{{parent.parent.outerB}}"></x-labeled-input>
<x-labeled-input label="parent.parent.outerObjB.value" value="{{parent.parent.outerObjB.value}}"></x-labeled-input>
<template is="x-repeat" id="xr1-3" idx$="{{index}}" items="{{item.items}}">
<div class="item" id="xr1-3" idx$="{{index}}">
<div class="index">idx: <span>{{index}}</span></div>
<button on-click="handleClickC">Change outerC</button>
<x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
<x-labeled-input label="parent.item.name" value="{{parent.item.name}}"></x-labeled-input>
<x-labeled-input label="parent.parent.item.name" value="{{parent.parent.item.name}}"></x-labeled-input>
<x-labeled-input label="parent.parent.parent.outerC" value="{{parent.parent.parent.outerC}}"></x-labeled-input>
<x-labeled-input label="parent.parent.parent.outerObjC.value" value="{{parent.parent.parent.outerObjC.value}}"></x-labeled-input>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
<div class="column flex">
<template is="x-repeat" id="xr2-1" idx$="{{index}}" items="{{items}}">
<div class="item" id="xr2-1" idx$="{{index}}">
<div class="index">idx: <span>{{index}}</span></div>
<button on-click="handleClickA">Change outerA</button>
<x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
<x-labeled-input label="parent.outerA" value="{{parent.outerA}}"></x-labeled-input>
<x-labeled-input label="parent.outerObjA.value" value="{{parent.outerObjA.value}}"></x-labeled-input>
<x-labeled-input label="innerA" value="{{innerA}}"></x-labeled-input>
<x-labeled-input label="innerB" value="{{innerB}}"></x-labeled-input>
<x-labeled-input label="computeInner(innerA, innerB)" value="{{computeInner(innerA, innerB)}}" disabled></x-labeled-input>
<template is="x-repeat" id="xr2-2" idx$="{{index}}" items="{{item.items}}">
<div class="item" id="xr2-2" idx$="{{index}}">
<div class="index">idx: <span>{{index}}</span></div>
<button on-click="handleClickB">Change outerB</button>
<x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
<x-labeled-input label="parent.item.name" value="{{parent.item.name}}"></x-labeled-input>
<x-labeled-input label="parent.parent.outerB" value="{{parent.parent.outerB}}"></x-labeled-input>
<x-labeled-input label="parent.parent.outerObjB.value" value="{{parent.parent.outerObjB.value}}"></x-labeled-input>
<template is="x-repeat" id="xr2-3" idx$="{{index}}" items="{{item.items}}">
<div class="item" id="xr2-3" idx$="{{index}}">
<div class="index">idx: <span>{{index}}</span></div>
<button on-click="handleClickC">Change outerC</button>
<x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
<x-labeled-input label="parent.item.name" value="{{parent.item.name}}"></x-labeled-input>
<x-labeled-input label="parent.parent.item.name" value="{{parent.parent.item.name}}"></x-labeled-input>
<x-labeled-input label="parent.parent.parent.outerC" value="{{parent.parent.parent.outerC}}"></x-labeled-input>
<x-labeled-input label="parent.parent.parent.outerObjC.value" value="{{parent.parent.parent.outerObjC.value}}"></x-labeled-input>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
</div>
</div>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {
Polymer ({
is: 'x-labeled-input',
properties: {
value: {
notify: true
},
label: String,
disabled: Boolean
}
});
Polymer ({
is: 'x-test',
properties: {
items: {
value: function() {
return [
{name: 'item 1', items: [
{name: 'item 1-1', items: [
{name: 'item 1-1-1'},
{name: 'item 1-1-2'},
{name: 'item 1-1-3'}
]},
{name: 'item 1-2', items: [
{name: 'item 1-2-1'},
{name: 'item 1-2-2'},
{name: 'item 1-2-3'}
]},
{name: 'item 1-3', items: [
{name: 'item 1-3-1'},
{name: 'item 1-3-2'},
{name: 'item 1-3-3'}
]}
]},
{name: 'item 2', items: [
{name: 'item 2-1', items: [
{name: 'item 2-1-1'},
{name: 'item 2-1-2'},
{name: 'item 2-1-3'}
]},
{name: 'item 2-2', items: [
{name: 'item 2-2-1'},
{name: 'item 2-2-2'},
{name: 'item 2-2-3'}
]},
{name: 'item 2-3', items: [
{name: 'item 2-3-1'},
{name: 'item 2-3-2'},
{name: 'item 2-3-3'}
]}
]},
{name: 'item 3', items: [
{name: 'item 3-1', items: [
{name: 'item 3-1-1'},
{name: 'item 3-1-2'},
{name: 'item 3-1-3'}
]},
{name: 'item 3-2', items: [
{name: 'item 3-2-1'},
{name: 'item 3-2-2'},
{name: 'item 3-2-3'}
]},
{name: 'item 3-3', items: [
{name: 'item 3-3-1'},
{name: 'item 3-3-2'},
{name: 'item 3-3-3'}
]},
]}
];
}
},
outerA: {
value: 'outerA'
},
outerB: {
value: 'outerB'
},
outerC: {
value: 'outerC'
},
outerObjA: {
value: function() { return { value: 'outerObjA.value' }; }
},
outerObjB: {
value: function() { return { value: 'outerObjB.value' }; }
},
outerObjC: {
value: function() { return { value: 'outerObjC.value' }; }
}
},
handleClickA: function() {
this.outerA = this.outerA + 'A';
},
handleClickB: function() {
this.outerB = this.outerB + 'B';
},
handleClickC: function() {
this.outerC = this.outerC + 'C';
},
computeInner: function(a, b) {
return a + '-' + b;
}
});
});
</script>
<script>console.perf && console.perf();</script>
<x-test class="fit"></x-test>
<script>setTimeout(function() { console.perf && console.perfEnd(); });</script>