element-table-cards.html
2.86 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<link rel="import" href="../element-card/element-card.html">
<link rel="import" href="../catalog-data/catalog-data.html">
<dom-module id="element-table-cards">
<style>
:host {
display: block;
max-width: 920px;
}
#cards {
@apply(--layout-horizontal);
@apply(--layout-wrap);
margin-right: -10px;
}
</style>
<template>
<catalog-data package-map="{{packages}}"></catalog-data>
<div id="cards" on-tap="_tap">
<!--
Waiting for Kevin :)
<template name="element-cards-repeat" is="dom-repeat" items="[[elements]]" initial-count="10" chunk-count="10">
<element-card item="[[item]]" color="[[_getColor(item)]]" package-symbol="[[_getPackageSymbol(item)]]"></element-card>
</template>
-->
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'element-table-cards',
properties: {
packages: {
type: Array
},
elements: {
type: Array
}
},
observers: [
'_render(elements, packages, isAttached)'
],
_findAncestor: function(node, fn) {
while (node && fn.call(this, node)) {
node = node.parentNode;
}
return node;
},
_tap: function(e) {
var sourceEvent = e.detail.sourceEvent;
var A = this._findAncestor(e.target, function(node) {
return node != this && node.tagName !== 'A';
});
if (A && A.tagName === 'A' && A.href.indexOf(location.host) > 0) {
if (sourceEvent.ctrlKey || sourceEvent.metaKey) {
window.open(A.href);
} else {
this.fire('nav', {url: A.href});
}
e.preventDefault();
}
},
_getColor: function(item) {
return this.packages[item.package].color;
},
_getPackageSymbol: function(item) {
return this.packages[item.package].symbol;
},
_render: function(elements, packages) {
if (elements) {
this.$.cards.innerHTML = '';
var head = 0;
var batchSize = 3;
var flush = function() {
if (head + batchSize >= elements.length) {
batchSize = elements.length - head;
}
if (batchSize <= 0) {
return false;
}
var el;
var firstHead = head;
var lastHead = firstHead + batchSize;
for (; head < lastHead; head++) {
el = document.createElement('element-card');
el.item = elements[head];
el.color = packages[el.item.package].color;
el.packageSymbol = packages[el.item.package].symbol;
Polymer.dom(this.$.cards).appendChild(el);
}
return true;
};
var batch = function() {
if (flush.call(this)) {
batchSize = 10;
requestAnimationFrame(batch.bind(this));
}
};
batch.call(this);
}
}
});
</script>