MicroContentTestHost/index.html at master · bgoeschi/MicroContentTestHost · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MicroContentTestHost</title>
    <script type="application/javascript">
        function getData() {
            var data = {title: 'no data found'};
            var url = window.location.href;
            var regex = new RegExp('[?&]data(=([^&#]*)|&|#|$)');
            var results = regex.exec(url);
            if (results && results[2]) {
                data = JSON.parse(decodeURIComponent(results[2].replace(/\+/g, ' ')));
            }
            return data;
        }

        function getViewerUrl() {
            var viewerUrl = 'http://localhost:8080';
            var url = window.location.href;
            var regex = new RegExp('[?&]url(=([^&#]*)|&|#|$)');
            var results = regex.exec(url);
            if (results && results[2]) {
                viewerUrl = decodeURIComponent(results[2].replace(/\+/g, ' '));
            }
            return viewerUrl;
        }

        function propagateLayoutChanges() {
            // ignore
        }

        function sendXapiStatement() {
            // ignore
        }

        function registerOnSubmitListener(listener) {
            window.onSubmitListener = listener;
        }

        function setXapiObjectGetter(getter) {
            // ignore
        }

        function getBoundingClientRect() {
            return document.getElementById('container').getBoundingClientRect();
        }

        function injectIframeWithSrc(containerClassName, src) {
            const whitelist = ["https://www.youtube-nocookie.com/embed/", "https://player.vimeo.com/video/"];
            if (typeof src === "string" && whitelist.findIndex(function (e) {
                        return src.startsWith(e)
                    }) !== -1) {
                const container = document.getElementById('container').getElementsByClassName(containerClassName)[0];
                if (container !== undefined) {
                    const iframe = document.createElement("iframe");
                    iframe.src = src;
                    container.appendChild(iframe);
                }
            }
        }

    </script>
    <script type="text/javascript" src="http://caja.appspot.com/caja.js"></script>
</head>
<body>
<h1 id="title">As a convention we render the title attribute of your data here! (you dont seem to have one).</h1>
<div id="container"></div>
<button onclick="window.onSubmitListener()">Submit/Undo</button>
<script type="application/javascript">
    var url = getViewerUrl();
    var data = getData();
    if (typeof data.title !== 'undefined') {
        document.getElementById('title').innerHTML = data.title
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/\"/g, '&quot;')
                .replace(/\'/g, '&#39;')
                .replace(/\//g, '&#x2F;');
    }
    caja.initialize({
        cajaServer: 'https://caja.appspot.com/',
        debug: true
    });
    var uriPolicy = {
        imgRegex: (/\.(gif|jpg|jpeg|tiff|png|webp)$/i),
        rewrite: function (uri, p1, p2, context) {
            if (context.TYPE === "MARKUP" && context.XML_ATTR === "src" && context.XML_TAG === "img" && this.imgRegex.test(uri.toString())) {
                return uri;
            } else if (context.TYPE === "CSS" && context.CSS_PROP === "background-image" && this.imgRegex.test(uri.toString())) {
                return uri;
            }
        }
    };
    caja.load(document.getElementById('container'), uriPolicy, function (frame) {
        frame.code(url, 'text/html')
                .api(
                        {
                            getData: getData,
                            propagateLayoutChanges: propagateLayoutChanges,
                            sendXapiStatement: sendXapiStatement,
                            registerOnSubmitListener: registerOnSubmitListener,
                            setXapiObjectGetter: setXapiObjectGetter,
                            getBoundingClientRect: getBoundingClientRect,
                            injectIframeWithSrc: injectIframeWithSrc
                        })
                .run();
    });
</script>
</body>
</html>