~sirn/fanboi2

ref: 5b436e758084b9777685d5f69a4402a84f1de4c0 fanboi2/assets/app/javascripts/views/post_collection_view.ts -rw-r--r-- 3.3 KiB
5b436e75Kridsada Thanabulpong templates: display ident_v6 as ID6 8 months ago
                                                                                        
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
import { VNode, h } from "virtual-dom";
import { formatDate } from "../utils/formatters";
import { Post } from "../models/post";

export class PostCollectionView {
    postsNode: VNode;

    constructor(posts: Post[]) {
        this.postsNode = PostCollectionView.renderPosts(posts);
    }

    render(): VNode {
        return this.postsNode;
    }

    private static renderPosts(posts: Post[]): VNode {
        return h(
            "div",
            { className: "js-post-collection" },
            posts.map(
                (post: Post): VNode => {
                    return h("div", { className: "post" }, [
                        h("div", { className: "container" }, [
                            PostCollectionView.renderHeader(post),
                            PostCollectionView.renderBody(post)
                        ])
                    ]);
                }
            )
        );
    }

    private static renderHeader(post: Post): VNode {
        return h("div", { className: "post-header" }, [
            PostCollectionView.renderHeaderNumber(post),
            PostCollectionView.renderHeaderName(post),
            PostCollectionView.renderHeaderDate(post),
            PostCollectionView.renderHeaderIdent(post)
        ]);
    }

    private static renderHeaderNumber(post: Post): VNode {
        let classList = ["post-header-item", "number"];

        if (post.bumped) {
            classList.push("bumped");
        }

        return h(
            "span",
            {
                className: classList.join(" "),
                dataset: {
                    topicQuickReply: post.number
                }
            },
            [post.number.toString()]
        );
    }

    private static renderHeaderName(post: Post): VNode {
        return h(
            "span",
            {
                className: "post-header-item name"
            },
            [post.name]
        );
    }

    private static renderHeaderDate(post: Post): VNode {
        let createdAt = new Date(post.createdAt);
        let formatter = formatDate(createdAt);

        return h(
            "span",
            {
                className: "post-header-item date"
            },
            [`Posted ${formatter}`]
        );
    }

    private static renderHeaderIdent(post: Post): VNode | string {
        if (post.ident) {
            let identCls = ["post-header-item", "ident"];
            let identName = "ID";

            switch (post.identType) {
                case "ident_v6": {
                    identName = "ID6";
                    identCls.push("ident-v6");
                    break;
                }

                default: {
                    identName = "ID";
                    if (post.identType != "ident") {
                        identCls.push(post.identType.replace("_", "-"));
                    }
                    break;
                }
            }

            return h(
                "span",
                {
                    className: identCls.join(" ")
                },
                [`${identName}:${post.ident}`]
            );
        } else {
            return "";
        }
    }

    private static renderBody(post: Post): VNode {
        return h(
            "div",
            {
                className: "post-body",
                innerHTML: post.bodyFormatted
            },
            []
        );
    }
}