CS50-Web-Programming-with-Python-and-JavaScript/lecture6/posts4/templates/index.html at master · python-test-code/CS50-Web-Programming-with-Python-and-JavaScript · 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
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
<!DOCTYPE html>
<html>
    <head>
        <title>My Webpage</title>
        <style>
            @keyframes hide {
                0% {
                    opacity: 1;
                    height: 100%;
                    line-height: 100%;
                    padding: 20px;
                    margin-bottom: 10px;
                }
                75% {
                    opacity: 0;
                    height: 100%;
                    line-height: 100%;
                    padding: 20px;
                    margin-bottom: 10px;
                }
                100% {
                    opacity: 0;
                    height: 0px;
                    line-height: 0px;
                    padding: 0px;
                    margin-bottom: 0px;
                }
            }

            .hide  {
                float: right;
            }

            .post {
                background-color: #77dd11;
                padding: 20px;
                margin-bottom: 10px;
                animation-name: hide;
                animation-duration: 2s;
                animation-fill-mode: forwards;
                animation-play-state: paused;
            }

            body {
                padding-bottom: 50px;
            }
        </style>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>

        <script id="post" type="text/x-handlebars-template">
            <div class="post">
                {% raw -%}
                    {{ contents }}
                {%- endraw %}
                <button class="hide">Hide</button>
            </div>
        </script>

        <script>

            // Start with first post.
            let counter = 1;

            // Load posts 20 at a time.
            const quantity = 20;

            // When DOM loads, render the first 20 posts.
            document.addEventListener('DOMContentLoaded', load);

            // If scrolled to bottom, load the next 20 posts.
            window.onscroll = () => {
                if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
                    load();
                }
            };

            // If hide button is clicked, delete the post.
            document.addEventListener('click', event => {
                const element = event.target;
                if (element.className === 'hide') {
                    element.parentElement.style.animationPlayState = 'running';
                    element.parentElement.addEventListener('animationend', () =>  {
                        element.parentElement.remove();
                    });
                }
            });

            // Load next set of posts.
            function load() {

                // Set start and end post numbers, and update counter.
                const start = counter;
                const end = start + quantity - 1;
                counter = end + 1;

                // Open new request to get new posts.
                const request = new XMLHttpRequest();
                request.open('POST', '/posts');
                request.onload = () => {
                    const data = JSON.parse(request.responseText);
                    data.forEach(add_post);
                };

                // Add start and end points to request data.
                const data = new FormData();
                data.append('start', start);
                data.append('end', end);

                // Send request.
                request.send(data);
            };

            // Add a new post with given contents to DOM.
            const post_template = Handlebars.compile(document.querySelector('#post').innerHTML);
            function add_post(contents) {

                // Create new post.
                const post = post_template({'contents': contents});

                // Add post to DOM.
                document.querySelector('#posts').innerHTML += post;
            }
        </script>
    </head>
    <body>
        <div id="posts">
        </div>
    </body>
</html>