-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdemo.html
72 lines (64 loc) · 2.11 KB
/
demo.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
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>pvc-globals Demo</title>
<script src="../platform/platform.js"></script>
<link rel="import" href="pvc-globals.html">
<style>
body { font-family: RobotoDraft, sans-serif; }
</style>
</head>
<body unresolved>
<polymer-element name="show-global" attributes="namespace key">
<template>
<pvc-globals namespace="{{namespace}}" values="{{globals}}" on-pvc-globals-update="{{handleUpdate}}"></pvc-globals>
<div>The {{key}} key in the {{namespace}} namespace is {{globals[key]}}</div>
</template>
<script>
Polymer('show-global', {
handleUpdate: function(e, detail) {
document.querySelector('event-log').events.push(detail)
}
});
</script>
</polymer-element>
<polymer-element name="event-log" attributes="events">
<template>
<ul>
<template repeat="{{event in events}}">
<li><b>{{event.namespace || 'default'}}:</b> <i>{{event.event}}</i> event — {{event.property}} changed from "{{event.oldValue}}" to "{{event.value}}"</li>
</template>
</ul>
</template>
<script>Polymer('event-log', {events: []})</script>
</polymer-element>
<pvc-globals id="default"></pvc-globals>
<pvc-globals namespace="foo" id="foo"></pvc-globals>
<show-global namespace="foo" key="bar"></show-global>
<show-global key="foo"></show-global>
<event-log></event-log>
<script>
var tick = function(val) {
var def = document.getElementById('default')
requestAnimationFrame(function() {
if (val) {
def.values.foo = val;
} else {
delete def.values.foo;
}
});
}
document.addEventListener('polymer-ready', function() {
document.getElementById('foo').values.bar = 'der';
tick('bar');
tick('baz');
tick(undefined);
tick('woah');
});
//document.addEventListener('pvc-globals-update', function(e) {
// console.log(e.detail);
//});
</script>
</body>
</html>