five-bells-visualization
Version:
Tool to visualize Five Bells payments
156 lines (143 loc) • 5.1 kB
HTML
<!--
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-list</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../core-list.html">
<link rel="import" href="../../core-ajax/core-ajax.html">
<link rel="import" href="../../core-image/core-image.html">
<style>
html, body {
margin: 0;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
}
list-test {
display: block;
height: 100%;
margin: 0 auto;
}
</style>
</head>
<body fit>
<list-test></list-test>
<polymer-element name="list-test" relative>
<template>
<style>
.item {
box-sizing: border-box;
padding: 10px;
width: 100px;
}
.body {
font-size: 12px;
}
core-list {
height: 30%;
width: 50%;
border: 1px solid rgba(0,0,0,0.3);
}
.item > core-image {
height: 80px;
width: 80px;
}
.marker {
position:absolute;
box-sizing: border-box;
border: 1px dotted gray;
color: gray;
z-index:-1;
text-align: right;
}
.marker.viewport {
border: 1px dashed red;
}
.marker.page {
border: 1px dashed blue;
}
.marker.upper {
border: 4px solid green;
}
.marker.lower {
border: 4px solid red;
}
.divider {
background: black;
color: white;
padding: 5px;
font-size: 3em;
}
</style>
<core-ajax url="demo-data-grouped-short.json" response="{{data}}" auto></core-ajax>
<div fit layout vertical center-center style="transform: scale({{scale}})">
<div style="position: absolute; top:{{$.list.offsetTop}}px; left:{{$.list.offsetLeft}}px; width:{{$.list.offsetWidth}}px; height:{{$.list.offsetHeight}}px">
<div class="marker viewport" style="top:{{-$.list.scrollTop}}px; height:{{$.list.$.viewport.offsetHeight}}px; width:{{$.list.$.viewport.offsetWidth}}px;"></div>
<div class="marker upper" style="top:{{$.list._upperBound-$.list.scrollTop}}px; height: 0; width:{{$.list.$.viewport.offsetWidth}}px;"></div>
<div class="marker lower" style="top:{{$.list._lowerBound-$.list.scrollTop}}px; height: 0; width:{{$.list.$.viewport.offsetWidth}}px;"></div>
<template repeat="{{$.list._physicalItems}}">
<div class="marker" style="top:{{_translateY-parentNode.scrollTop}}px; left:{{_translateX}}px; width:{{offsetWidth}}px; height:{{offsetHeight}}px" hidden?="{{hidden}}">
Group: {{templateInstance.model.groupIndex}}<br>
Index: {{templateInstance.model.index}}<br>
Phys: {{templateInstance.model.physicalIndex}}
</div>
</template>
</div>
<core-list id="list" data="{{data.data || data}}" groups="{{data.groups}}" grid width="100">
<template>
<div class="divider" divider hidden>
{{groupModel.letter}}
</div>
<div class="item" style="xbackground-color: {{model.color}};">
<core-image src="{{model.image}}" preload sizing="cover"></core-image>
<span>Index: {{index}}</span>
</div>
</template>
</core-list>
</div>
<div style="position: absolute; top: 10px; right: 10px; width: 200px;">
<div style="width: 1000px;">
_virtualCount: {{$.list._virtualCount}} <br>
_physicalCount: {{$.list._physicalCount}} <br>
_nestedGroups: {{$.list._nestedGroups}} <br>
<br>
_virtualStart: {{$.list._virtualStart}} <br>
_groupStart: {{$.list._groupStart}} <br>
_groupStartIndex: {{$.list._groupStartIndex}} <br>
<br>
_physicalSize: {{$.list._physicalSize}} <br>
_physicalAverage: {{$.list._physicalAverage}} <br>
_viewportHeight: {{$.list._viewportHeight}} <br>
<br>
_upperBound: {{$.list._upperBound}} <br>
_lowerBound: {{$.list._lowerBound}} <br>
<br>
_scrollTop: {{$.list._scrollTop}} <br>
_physicalOffset: {{$.list._physicalOffset}} <br>
</div>
<br>
Scale: <input type="number" value="{{scale}}" max="1" min="0.1" step="0.1">
</div>
</template>
<script>
(function() {
var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
Polymer('list-test', {
scale: 0.7,
ready: function() {
window.list = this.$.list;
}
});
})();
</script>
</polymer-element>
</body>
</html>