-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
88 lines (82 loc) · 3.33 KB
/
index.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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>Cats Daily</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.media {
max-width: 100%;
max-height: 90%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h1>Cats Daily</h1>
</div>
</div>
</div>
</div>
<div id="contents" class="container"></div>
<div class="container">
<div class="row">This is the end of feed</div>
</div>
<script>
function renderMedia(media) {
if (media.media_type == "photo" || media.media_type == "animated_gif") {
return `<img src="${media.image_url}:large" loading="lazy" class="media" width="${media.width}" height="${media.height}" alt="cat image">`
} else if (media.media_type == "video") {
return `<video controls poster="${media.image_url}" loading="lazy" class="media" width="${media.width}" height="${media.height}">
<source src="${media.video_url}" type="video/mp4">
</video>`
} else {
throw "unknown media type: " + media.media_type
}
}
function renderCat(cat,cat_id) {
return `<div class="row" data-id="${cat.id}">
<h3 class="display-4">
#${cat_id}. ${cat.text}
<span class="text-end">${new Date(cat.created_at).toLocaleDateString()}</span>
</h1>
<div class="col-md-12 text-center">
${cat.media.map(renderMedia).join("")}
</div>
</div>`
}
(async () => {
let resp = await fetch('cats.json');
let cats = await resp.json();
window.cats = cats;
window.cats_idx = 0;
function showMoreCats(count = 5) {
while (cats_idx < cats.length && count > 0) {
let cat_id = cats.length - cats_idx;
$('#contents').append(renderCat(cats[cats_idx],cat_id));
cats_idx++;
count--;
}
}
$(window).on('scroll', () => {
if ($(window).scrollTop() >= $('#contents').offset().top + $('#contents').outerHeight() - window.innerHeight) {
showMoreCats()
}
});
showMoreCats(5);
})();
</script>
<a class="github-fork-ribbon" href="https://github.com/bearice/cat-daily" data-ribbon="View on GitHub"
title="View on GitHub">View on GitHub</a>
</body>
</html>