This repository has been archived by the owner on Oct 22, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 506
/
amp-live-list.html
116 lines (104 loc) · 6.12 KB
/
amp-live-list.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
<!--
## Introduction
The [amp-live-list](https://www.ampproject.org/docs/reference/components/amp-live-list) component provides content updates at a configurable frequency (min is 15s) from the client. Depending on implementation, it can update the DOM without user interaction, such as refreshing or navigating to a different page. This works great for implementing live blogs. Find an example of a live blog [here](/samples_templates/live_blog).
In other words, the AMP runtime will poll the server for updates to the origin document, fetching itself. The server can return the entire AMP page [or parts of it](https://github.com/ampproject/amphtml/blob/master/extensions/amp-live-list/amp-live-list-server-side-filtering.md), and the runtime updates the page in-place seamlessly.
-->
<!-- -->
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>amp-live-list</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- ## Setup -->
<!--
Import the `amp-live-list` component in the header.
-->
<script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>
<link rel="canonical" href="<%host%>/components/amp-live-list/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
:root {
--space-1: .5rem; /* 8px */
}
amp-live-list [items] {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.blog-item {
width: 300px;
margin-bottom: var(--space-1);
}
.blog-item > div {
padding: var(--space-1);
}
.score {
display: flex;
align-items: center;
justify-content: center;
}
.score > div {
font-size: 2rem;
padding: var(--space-1);
}
.score > amp-img {
padding: var(--space-1) 0;
}
</style>
</head>
<body>
<!-- ## Update after user interaction: live blog -->
<!--
Use the `data-poll-interval` attribute to specify how frequently the `amp-live-list` component will poll new data. The minimum interval is 15 seconds.
Use `data-max-items-per-page` to specify the maximum number displayed on the page.
For an extensive explanation of all the attributes, refer to [amp-live-list](https://www.ampproject.org/docs/reference/components/amp-live-list).
Use `on="tap:my-live-list.update"` to load the latest changes from the server.
A button will appear when the AMP runtime discovers new document changes. Note that the button has to be defined as a direct child of `amp-live-list` .
An `amp-live-list` must contain a list of items below `<div items>`. Each item has a specific id and the `amp-live-list` will look for items with new id.
This sample shows an implementation with a server rendering a series of 5 elements. `amp-live-list` will poll the page every 15 seconds until 5 elements are added to the page. Every time `amp-live-list` polls the page, the server adds a new item to the page. Refer to [server.go](https://github.com/ampproject/amp-by-example/blob/master/server.go) and [amp-live-list.go](https://github.com/ampproject/amp-by-example/blob/master/backend/amp-live-list.go) for implementation details.
This sample stops after ten updates. If you want to start over, delete cookies from ampbyexample.com or open this page again in an incognito/private tab.
[tip type="important"]
Important: By clicking on the button "You have updates", new content is displayed on the demo column (the one on the right if the demo is accessed by desktop). The code column (the one in the center if the demo is accessed by desktop) does not update itself, but if you want to see all the items on the page, reload the page.
[/tip]
-->
<amp-live-list
layout="container"
data-poll-interval="15000"
data-max-items-per-page="5"
id="amp-live-list-insert-blog">
<button update on="tap:amp-live-list-insert-blog.update">You have updates</button>
<div items>
[[range .BlogItems]]
<div id="[[.ID]]" data-sort-time="[[.Timestamp]]" class="blog-item">
<amp-img src="[[.Image]]"
layout="responsive" width="1280" height="853">
</amp-img>
<div>[[.Text]]</div>
</div>
[[end]]
</div>
</amp-live-list>
<!-- ## Automatic update: live score -->
<!--
If you want to update existing list items without user interaction, you need to specify via the `data-update-time` attribute when the update has been performed.
The following example will display a soccer match score whose content is changed every time the `amp-live-list` polls the page on the server.
-->
<amp-live-list
layout="container"
data-poll-interval="15000"
data-max-items-per-page="5"
id="amp-live-list-update">
<button update on="tap:amp-live-list-insert-blog.update">You have updates</button>
<div items>
<div id="it-eng-score" data-sort-time="1234567" data-update-time="[[.FootballScore.Timestamp]]" class="score">
<amp-img src="/img/italy-flag.png" layout="fixed" height="50" width="100" noloading></amp-img>
<div>[[.FootballScore.ScoreTeam1]] - [[.FootballScore.ScoreTeam2]]</div>
<amp-img src="/img/england-flag.png" layout="fixed" height="50" width="100" noloading></amp-img>
</div>
</div>
</amp-live-list>
</body>
</html>