flexmessage/index.html at main · looper-dev/flexmessage · 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Share Target Picker</title>
    <script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
    <style>
        body {
            font-family: Verdana, sans-serif;
            display: flex;
            align-items: center;
            height: 100vh;
            margin: 0;
            justify-content: center;
        }

        #shareBtn {
            display: none;
            /* display: inline-block; */
            padding: 15px 40px;
            border-radius: 10px;
            font-size: 20px;
            background: #00b900;
            color: #ffffff;
            box-shadow: 0 0 5px #00000054;
        }

        #loading {
            display: block;
        }
    </style>
</head>

<body>
    <div id="shareBtn" onclick="sendShare()">Share</div>
    <div id="loading" onclick="sendShare()">loading...</div>
    <script>
        const queryString = decodeURIComponent(window.location.search).replace("?liff.state=", "");
        const params = new URLSearchParams(queryString);
        let liffId
        let profile = {
            displayName: "",
            pictureUrl: "",
            statusMessage: "",
            userId: ""
        }
        let messages
        const shareBtn = document.getElementById("shareBtn")
        const loading = document.getElementById("loading")

        async function sendShare() {
            const result = await liff.shareTargetPicker(messages)
            liff.closeWindow()
            // if (result) {
            //     alert(`[${result.status}] Message sent!`)
            // } else {
            //     const [majorVer, minorVer, patchVer] = (liff.getLineVersion() || "").split('.');

            //     if (minorVer === undefined) {
            //         alert('ShareTargetPicker was canceled in external browser')
            //         return
            //     }

            //     if (parseInt(majorVer) >= 10 && parseInt(minorVer) >= 10 && parseInt(patchVer) > 0) {
            //         alert('ShareTargetPicker was canceled in LINE app')
            //     }
            // }
        }

        async function liffLogin() {
            return new Promise(async (resolve, reject) => {
                await liff.init({
                    liffId
                })
                if (!liff.isLoggedIn()) {
                    if (!liff.isInClient()) {
                        // set `redirectUri` to redirect the user to a URL other than the front page of your LIFF app.
                        await liff.login({
                            redirectUri: window.location.href
                        });
                    }
                } else {
                    resolve()
                }
            });
        }

        async function fetchMessages() {
            const messagesUrl = params.get('messages');
            if (!messagesUrl) {
                throw {
                    emsg: 'no messages url'
                }
            }

            const res = await fetch(messagesUrl)
            messages = await res.json()
        }

        async function prepareMessages() {
            // replace handlebars key

            let stringMessages = JSON.stringify(messages)

            // replace profile
            Object.keys(profile).forEach(e => {
                stringMessages = stringMessages.replace(`{{profile.${e}}}`, profile[e])
            })

            // replace this liff url
            stringMessages = stringMessages.replace(`{{shareThis}}`, `https://liff.line.me/${liffId}${queryString}`)

            messages = JSON.parse(stringMessages)
        }

        async function getLiffId() {
            liffId = params.get("liffId")
            if (!liffId) {
                throw {
                    emsg: 'no liffId'
                }
            }
        }

        async function main() {
            try {
                await getLiffId()
                await liffLogin(liffId)
                profile = {
                    ...profile,
                    ...await liff.getProfile()
                }
                await fetchMessages()
                await prepareMessages()
                loading.style.display = "none"
                if (liff.isInClient()) {
                    await sendShare()
                } else {
                    document.getElementById("shareBtn").style.display = "inline-block"
                }
            } catch (err) {
                console.log('error:', err)
                alert("ขออภัย เกิดข้อผิดพลาด " + err.emsg)
                loading.style.display = "none"
            }
        }

        console.log('run')

        main()
    </script>
</body>

</html>