polymer-workbench/native-dialog.html at master · morethanreal/polymer-workbench · GitHub

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
<!doctype html>
<html>
	<head>
		<script src="../polymer/polymer.js"></script>
	</head>
	<body>
		<div id="host"></div>
		<dialog id="native">
			I'm a native dialog <button>a button</button>
		</dialog>
		<button onclick="openNative()">native</button>
		<button onclick="openNativeShadow()">native in shadow</button>
		<button onclick="openPolymer()">polymer</button>
		<polymer-element name="x-dialog">
			<template>
				<dialog id="dialog">
					Hello polymer
					<content></content>
				</dialog>
			</template>
			<script>
				Polymer('x-dialog', {
					toggle: function() {
						if (this.$.dialog.open) {
							this.$.dialog.close();
						} else {
							this.$.dialog.show();
						}
					}
				});
			</script>
		</polymer-element>
		<x-dialog id="polymer">
			<div style="color:limegreen">foo</div>
		</x-dialog>
		<script>
			var shadowDialog;
			document.addEventListener('DOMContentLoaded', function() {
				shadowDialog = document.createElement('dialog');
				shadowDialog.textContent = 'a dialog in shadow DOM';
				var root = document.querySelector('#host').webkitCreateShadowRoot();
				root.appendChild(shadowDialog);
			});
			function toggle(d) {
				if (d.open) {
					d.close();
				} else {
					d.show();
				}
			}
			function openNative() {
				toggle(document.querySelector('#native'));
			}
			function openNativeShadow() {
				toggle(shadowDialog);
			}
			function openPolymer() {
				document.querySelector('#polymer').toggle();
			}
		</script>
	</body>
</html>