TimelineJS3/src/template/index.html at 0f7a7710a1e98d8099bc8f1e0ebc8c845c2dab7b · NUKnightLab/TimelineJS3 · 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
<html>

<head>
    <title>Bundled TimelineJS test page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <!-- this is normally done by embed page -->
    <script>
        var options = {
            lang: 'es',
            debug: true,
            height: 650,
            soundcite: true,
            hash_bookmark: true,
            start_at_end: false,
            autolink: false,
            hide_swipe_to_navigate: true,
            sheets_proxy: 'https://sheets-proxy.knightlab.com/proxy/'
        }


        function ready(fn) {
            if (document.readyState != 'loading') {
                fn();
            } else {
                document.addEventListener('DOMContentLoaded', fn);
            }
        }

        function timelineFromInput() {
            document.getElementById('timeline-embed').innerHTML = ''
            var dataUrl = document.getElementById('timeline-src').value
            window.timeline = new TL.Timeline('timeline-embed', dataUrl, options)
        }

        ready(function() {

            // sanitize test
            // var dataUrl = 'https://docs.google.com/spreadsheets/d/1Q4-R3mlK7w1liCEl5_SGPaeLpfHDVdMtc83rjSTHBZo/edit#gid=0'

            // Zander Work's exploit
            // var dataUrl = 'https://docs.google.com/spreadsheets/d/1Jt5Csoku0W73100mnG_byVdvCFLXT8G5gG9lu1yggA0/edit#gid=0'

            // women in computing:
            var dataUrl = 'https://docs.google.com/spreadsheets/u/1/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/pubhtml';

            window.timeline = new TL.Timeline('timeline-embed', dataUrl, options)

            window.timeline.on("ready", () => {
                console.log("Timeline ready event fired")
            })


            document.getElementById('timeline-src').value = dataUrl
            document.getElementById('timeline-src').addEventListener('keyup', (e) => {
                e.preventDefault();
                if (e.keyCode === 13) {
                    timelineFromInput()
                }
            })

            document.querySelectorAll('nav a').forEach(el => {
                el.addEventListener('click', e => {
                    window.location.hash = ''
                    e.preventDefault()
                    let url = e.target.attributes['href'].value
                    document.getElementById('timeline-src').value = url
                    timelineFromInput()
                })
            })
        })
    </script>
    <style>
        body {
            font-family: sans-serif;
            background-color: #ddd;
        }

        #timeline-embed {
            margin: 1em 0;
            height: 650px;
        }

        input[type="text"] {
            font-size: 12pt
        }

        nav {
            margin: 10px 0;
        }

        nav a {
            margin: 5px;
        }
    </style>
</head>

<body>
    <h1>Timeline Development</h1>
    <div>
        <label for="timeline-src">data source URL:</label><input type="text" size="120" name="timeline-src" id="timeline-src" />
    </div>
    <nav>
        <a href='https://docs.google.com/spreadsheets/u/1/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/pubhtml'>Women in Computing</a>
        <a href="all-media-types.json">All Media Types</a>
        <a href="eras.json">Eras</a>
    </nav>
    <div id='timeline-embed'></div>
</body>

</html>