-
Notifications
You must be signed in to change notification settings - Fork 3.9k
/
Copy pathexample.amp.html
136 lines (125 loc) · 5.83 KB
/
example.amp.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
125
126
127
128
129
130
131
132
133
134
135
136
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="self.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1">
<!-- Token for "amp-script" experiment on "http://localhost:8000" that expires on 1/1/2030. -->
<meta name="amp-experiment-token" content="AAAAAFd7Im9yaWdpbiI6Imh0dHA6Ly9sb2NhbGhvc3Q6ODAwMCIsImV4cGVyaW1lbnQiOiJhbXAtc2NyaXB0IiwiZXhwaXJhdGlvbiI6MTg5NjEzNDQwMDAwMH08Wb1WA4ZcsTLNK1pxwXdmfYUlv4ybtfIMw3yS66dZhsJl11JYrTanag4ZlAr4sfBRTVmQfKLsiJq/JJHdrpRzT9M6EQD/JYos1SlohtQiK2YfhvXgN7zot3WBuFkqoxSiyvX/l23UYKSo2ebNTnMDFhI+yrX8uc9BblbYniRtQGXBPktjJUIgavEBS5t45bgbPNutNvAreYGlz7na4lImrpnNa8K28Ow4hqOxcqqdFoHD9hlwtKlpydJQpEmtM+S+jdDLKWq6JtC+HoUSovuitrqkioJ4cfuVkFqtoaKWPLXSOwoc5UJl3zNjlTjvQ/Gnk33NdWs6/FtZbxCq+lWe">
<!-- CSP-like hashes for amp-script [src] or inline scripts. -->
<meta name="amp-script-src" content="
sha384-Eb9GcUanX2ZUs7CEQjXlLwVr5bnYgT0ftOqc5GJhqTnA1ch8-riSJ8UG4XB8W-av
sha384-VccwjjkxpJ4EOyfwOGgmtq4Wm1Q-91s7U04Zmt_ibev7CqYY2VSDVjRqhAcQr7ek
sha384-Lt7boYsc_IZzUnjictHgfcDUVJz5AxZ5FT8NFVPpb4nuEapiTS8oyWA6gCHcFaqY
sha384-AF-M5D_r38BY1b-WB7IoNMV2x5o4nwEFiXzLiM0OUYiz3aRwXv7-UfTx2GkwYn_s
">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
h1 {
font-size: 1.2em;
}
button, input {
border: solid 1px black;
}
amp-script {
border: dotted 1px orangered;
margin: 5px;
padding: 5px;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body>
<h1>Example: Demo</h1>
<amp-script layout=container src="/examples/amp-script/amp-script-demo.js">
<button id="hello">Insert Hello World!</button>
<button id="long">Long task</button>
<button id="amp-img">Insert amp-img</button>
<button id="script">Insert <script></button>
<button id="img">Insert <img></button>
</amp-script>
<h1>Example: empty.js</h1>
<amp-script layout=container src="/examples/amp-script/empty.js">
Should be empty.
</amp-script>
<h1>Example: #local-script</h1>
<amp-script width=300 height=20 script="local-script">
Should say "Hi there!".
</amp-script>
<script type="text/plain" target="amp-script" id="local-script">
document.body.textContent = 'Hi there!';
</script>
<h1>Example: sandbox=""</h1>
<amp-script width=300 height=20 script="no-sandbox">
Should be empty.
</amp-script>
<script type="text/plain" target="amp-script" id="no-sandbox">
document.body.appendChild(document.createElement('input'));
</script>
<h1>Example: sandbox="allow-forms"</h1>
<amp-script width=300 height=20 script="sandbox-allow-forms" sandbox="allow-forms">
Should add an input field.
</amp-script>
<script type="text/plain" target="amp-script" id="sandbox-allow-forms">
document.body.appendChild(document.createElement('input'));
</script>
<h1>Example: localStorage</h1>
<amp-script width=300 height=40 script="local-storage" sandbox="allow-forms">
<input id=input type=text>
<input id=output type=text disabled style="border-color: lightgray">
<div>
<button id=get>get</button>
<button id=set>set</button>
<button id=remove>remove</button>
<button id=clear>clear</button>
</div>
</amp-script>
<script type="text/plain" target="amp-script" id="local-storage">
const input = document.querySelector('#input');
const output = document.querySelector('#output');
const get = document.querySelector('#get');
const set = document.querySelector('#set');
const remove = document.querySelector('#remove');
const clear = document.querySelector('#clear');
// Necessary so worker-dom will listen to value changes.
input.addEventListener('change', () => {});
get.addEventListener('click', () => {
output.value = input.value ? localStorage.getItem(input.value) : JSON.stringify(localStorage);
});
set.addEventListener('click', () => {
const tuple = input.value.split('=');
localStorage.setItem(tuple[0], tuple[1]);
});
remove.addEventListener('click', () => {
localStorage.removeItem(input.value);
});
clear.addEventListener('click', () => {
localStorage.clear();
});
</script>
<h1>Example: Canvas</h1>
<amp-script width=300 height=120 src="/examples/amp-script/canvas.js">
<canvas id="canvas"></canvas>
</amp-script>
<h1>Example: amp-state</h1>
<p [text]="bar">Should read "123" after tapping button below.</p>
<button on="tap: AMP.setState({})">setState()</button>
<amp-script width=300 height=80 script="bind">
<pre>AMP.setState({bar: 123})</pre>
<pre>Prints AMP.getState('foo')</pre>
</amp-script>
<script type="text/plain" target="amp-script" id="bind">
AMP.setState({bar: 123});
AMP.getState('foo').then(state => console.log(state));
</script>
<amp-state id="foo">
<script type=application/json>
{
"bar": "foobar"
}
</script>
</amp-state>
</body>
</html>