-
Notifications
You must be signed in to change notification settings - Fork 2
/
example.html
59 lines (51 loc) · 3.88 KB
/
example.html
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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Curling I/O - Widget Example</title>
<link rel="icon" href="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAAC">
</head>
<body>
<!-- IGNORE EVERYTHING ABOVE THIS LINE -->
<!-- REQUIRED. This script tag is required to load the widget. -->
<!-- Ideally this goes in the head of your html document, but you can play around to see what works (depending on your CMS) -->
<script src="https://pairshaped.github.io/curlingio-results/prod.min.js"></script>
<!-- REQUIRED. This is the div the widget replaces. The ID of this div must match the getElemenetById below that's passed to the node. If you change the ID here, make sure you also change it down there. -->
<div id="cio_results"></div>
<!-- REQUIRED. This is how we initialize the widget. You have several options you can configure. Read them over for more information. -->
<script>
var cio_results = Elm.Results.init(
{
node: document.getElementById("cio_results"), // REQUIRED. Must match the ID of the div we're replacing, which is "results" in this example.
flags: {
subdomain: "demo", // REQUIRED. This is your club's Curling I/O subdomain. For example, if your Curling I/O URL begins with "demo.curling.io" then the "demo" part would be your subdomain.
section: "leagues", // OPTIONAL. Can be "leagues", "competitions", or "products". Will default to "leagues" if omitted or an invalid value is passed.
fullScreenToggle: true, // OPTIONAL. Determines if the full screen toggle (two diagonal arrows in the top right) will be shown. Will default to false if omitted or an invalid value is passed.
registration: true, // OPTIONAL. Set to false if you don't want prices and the add to cart / register / waitlist buttons to show up.
showWaiversForTeams: true, // OPTIONAL. Set to true if you want the team pages to show which waivers a curler has agreed to or None if they haven't.
// eventId: 3742, // OPTIONAL. If you only want to show one specific event, enter it's ID here.
// excludeEventSections: ["details", "registrations", "spares"], // OPTIONAL. Event sections you don't want to show up. Possible values: "details", "registrations", "spares", "draws", "stages", "teams", "reports"
// defaultEventSection: "draws", // OPTIONAL. If you want a default event section other than the details view. Possible values: "registrations", "spares", "draws", "stages", "teams", "reports"
// theme: { // OPTIONAL. You can customize the colors used.
// primary: "#ed1940", // OPTIONAL. The primary color in hexadecimal (important buttons / links / backgrounds). Default is red: #ed1940
// secondary: "#5c5c5c" // OPTIONAL. The secondary color in hexadecimal (minor buttons / links / backgrounds). Default is a dark grey: #5c5c5c
// },
// lang: "en", // OPTIONAL. Options are "en" or "fr". Defaults to "en" if nothing is passed. If your using wordpress, it should expose a 2 letter language code that can be passed here.
host: document.location.host, // REQUIRED - DO NOT MODIFY. Let's us make slight behavioural changes when hosted offsite versus within your curling.io site.
hash: document.location.hash, // REQUIRED - DO NOT MODIFY. This will allow users to bookmark and share specific event links.
}
}
)
// REQUIRED - DO NOT MODIFY. Used for navigation to hopfully prevent third party script interference.
cio_results.ports.navigateTo.subscribe(function(newHash) {
document.location.hash = newHash
})
// REQUIRED - DO NOT MODIFY. Used for navigation.
addEventListener("hashchange", (event) => {
cio_results.ports.hashChangeReceiver.send(location.hash)
})
</script>
<!-- IGNORE EVERYTHING BELOW THIS LINE -->
</body>
</html>