Results Widget for Curling I/O

Overview

Embeddable javscript widget to display a curling club's leagues, competitions, and products pulled from the Curling I/O API.

For leagues and competitions it will display brakcets, standings, schedule, scores, end scores, and shot by shot results as relevant.

See the example.html file in this directory for an example of how you can include this widgets on your own club website.

Using the widget on your club's website

You can review the example.html file for an example of how to embed this widget on your curling club's website. You can save this file locally and open it in a browser to mess around with the settings and see the results.

1. Include the Widget's Javascript

You'll need to include the widget's javascript. <script src="https://pairshaped.github.io/curlingio-results/prod.min.js"></script>

2. Add the placeholder div to your page where you want the widget to be inserted.

<div id="cio_results"></div>

It's important that the ID here is the same used in the next step.

3. Configure and Load the Widget

The widget is embedded using Javascript, which is how web browsers can enhance a site's functionality.

The lines that start with // are commented out. This means these lines / flags are disabled until they are uncommented by removing the // in front of them and providing an appropriate value. Review each of the commented lines to see if it's something you want to enable or leave with their default value. For example, if you want to change which section is loaded, you would uncomment the // in front of the section flag below and change the "leagues" value to "competitions" or "products". A full list and explanation of all the flags is listed below the code snippet.

<script>
  // REQUIRED. This is how we initialize the widget. You have several options you can configure. Read them over for more information.
  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", "competition", 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"], // OPTIONAL. Event sections you don't want to show up. Possible values: "details", "registrations", "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>

Please review the comments in the embedded code to make configuration tweaks. Here are some examples of configuration changes and their effects:

1. You can choose which section to show; leagues, competitions, or products.
2. You can choose whether or not the full screen toggle button is active.
3. You can enable / disable the registration buttons for your leagues, competitions, and products. Like if you just want to display the results for your competitions.
4. You can choose whether or not to show which waivers team members have agreed to if any (so that they're coach / captain can follow up).
5. You can include just the screens for a specific league or competition, instead of the listing views. Like if you're promoting a specific bonspiel on it's own page.
6. You can exclude / disable specific sections. Like if you don't want the details section (tab) to show up.
7. You can specify which section should be the default for your leagues and competitions.
8. You can pass a hex color to reflect your primary brand color (used by buttons and links).
9. You can pass a language parameter (en or fr).

For Contributors

Installing Dependencies

We use elm and elm-live for development. You can install these via npm.

npm install

Running It

Edit dev.html and configure the application's parameters for your environment. Then run it:

npm start

Production Deployment

Make sure you have uglify-js installed to compress the production js.

npm install -g uglify-js

Compile and optimize for production using:

./prod.sh

Copyright and License

See LICENSE.md