-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathusage.html
124 lines (118 loc) · 4.27 KB
/
usage.html
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
117
118
119
120
121
122
123
124
<!doctype html>
<html>
<!-- TODO :: MAKE STYLE OF COMPONENTES ALSO PASSABLE AS ATTRIBTES ? -->
<head>
<meta charset="utf-8">
<title>PIM Demo</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<script>
window.Polymer = window.Polymer || {};
window.Polymer.dom = "shadow";
</script>
<link rel="import" href="../polymer/polymer.html" />
<link rel="import" href="pim-x-element.html" />
<link rel="import" href="pim-x-element-vertical.html" />
</head>
<body>
<!-- initial state screen -->
<dom-bind>
<template id="pixEl" is="dom-bind">
<pim-x-element id="pimEl" db="{{db}}" search-handler="{{searchHandler}}"
sibling-click-handler="{{siblingClickHandler}}" on-after-type-add="{{afterAddHandler}}">
</pim-x-element>
<br><br>
<pim-x-element-vertical id="pimEl" db="{{db}}" search-handler="{{searchHandler}}"
sibling-click-handler="{{siblingClickHandler}}" on-after-type-add="{{afterAddHandler}}">
</pim-x-element-vertical>
</template>
</dom-bind>
<script>
var startingDb = {
Name: "Products",
Children: [{
Name: "Food",
Children: [{
Name: "Dairy",
Children: [{
Name: "Milk",
Children: [{
Name: "Coffee milk 5 ML",
Children: []
}, {
Name: "Milk 1 L",
Children: []
}]
}]
}, {
Name: "Meat",
Children: []
}]
}, {
Name: "Metal",
Children: [{
Name: "Screws",
Children: [{
Name: "Phillips flat head",
Children: []
}]
}]
}, {
Name: "Laundry",
Children: [{
Name: "Detergent",
Children: [{
Name: "Tide",
Children: []
}, {
Name: "Surf",
Children: []
}, {
Name: "Areal",
Children: [{
Name: "Super",
Children: []
}, {
Name: "Ultra",
Children: []
}]
}]
}]
}]
};
var onSearch = function (siblings, query) {
console.log(' on search logic called ');
var out = [];
var re = new RegExp("^" + query, "i");
for (var i = siblings.length - 1; i >= 0; i--) {
if (re.test(siblings[i].Name) == true) {
out.push(siblings[i]);
}
}
console.log("search result for", query, out);
return out;
}
var onSiblingClick = function ($this, event) {
var sibling = event.target.sibling;
var product = $this.findProductByName(sibling.Parent, sibling.Name);
$this.rebuildBreadcrumb(product);
}
var afterAddHandler = function ($this, parentToAdd, newTypeAdded) {
console.log(' onAfterTypeAdd called');
// TODO :: HANDLE UPDATING ADDED TYPE TO BACKEND FROM HERE
}
document.addEventListener('DOMContentLoaded', function (e) {
// associate data for the breadcrumbs
var template = document.querySelector('dom-bind');
if (!Polymer.Element) {
// Polymer v 1.0
template = document.querySelector('#pixEl');
}
template.db = startingDb;
// associate searchCritirea behaviour
template.searchHandler = "onSearch";
template.siblingClickHandler = "onSiblingClick";
template.afterAddHandler = "afterAddHandler";
});
</script>
</body>
</html>