plugin-interface/examples/inline-ad-example.html at master · EDMdesigner/plugin-interface · 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
<html>
    <head>
        <title>Inline ad example</title>
    </head>
    <body>
        <h1>Inline ad plugin example</h1>
        <div id="ad-container"></div>
        <button id="bgChangeButton">Force Red Bg</button>
        <script>
            (async function() {
                const initExampleSdk = (await import("./initExampleSdk.js")).default;

                const container = document.getElementById("ad-container");

                const ads = [
                    {
                        id: 1,
                        title: "Ad1",
                        shortDescription: "This is an awesome product.",
                        longDescription: "This is an awesome product. Really.",
                        background: "#abcdef"
                    },
                    {
                        id: 2,
                        title: "Ad2",
                        shortDescription: "This is an awesome product. 2",
                        longDescription: "This is an awesome product. Really. 2",
                        background: "#cdefab"
                    },
                    {
                        id: 3,
                        title: "Ad3",
                        shortDescription: "This is an awesome product. 3",
                        longDescription: "This is an awesome product. Really. 3",
                        background: "#efabcd"
                    }
                ];

                let adIdx = 0;
                function getNextAd(long) {
                    const ad = ads[adIdx % ads.length];
                    adIdx += 1;

                    return {
                        id: ad.id,
                        title: ad.title,
                        description: ad.shortDescription,
                        background: ad.background
                    };
                }


                const sdk = await initExampleSdk({
                    settings: {
                    }
                });

                const data = getNextAd();
                const settings = { background: data.background };
                const adPlugin = await sdk.initInlineAdPlugin({
                    data,
                    settings,
                    hooks: {
                        onNextButtonClicked: async () => {
                            //await new Promise(resolve => setTimeout(resolve, 500)); // simulate latency

                            const randAd = getNextAd();
                            adPlugin.methods.updateSettings({ background: randAd.background });
                            return randAd;
                        },
                        onReadMoreButtonClicked: async ({ id }) => {
                            const ad = ads.find(ad => ad.id === id);
                            return {
                                id: ad.id,
                                title: ad.title,
                                description: ad.longDescription
                            };
                        },
                        onClose: async () => {
                            adPlugin.destroy();
                        }
                    }
                }, {
                    container,
                    beforeInit: ({ iframe }) => {
                        iframe.style.width = "200px";
                        iframe.style.height = "200px";
                    }
                });

                document.getElementById("bgChangeButton").onclick = () => {
                    adPlugin.methods.updateSettings({ background: "red" });
                };
            }())
        </script>
    </body>
</html>