symposion_app/pinaxcon/templates/symposion/schedule/schedule_conference.html

{% extends "symposion/schedule/public_base.html" %}

{% load i18n %}
{% load pinax_boxes_tags %}
{% load cache %}
{% load pyconau2017_tags %}

{% block head_title %}Conference Schedule{% endblock %}
{% block header_title %}Conference Schedule{% endblock %}
{% block header_paragraph %}{% header_paragraph "conference_schedule" %}{% endblock %}
{% block header_inset_image %}{% illustration "cradle.svg" %}{% endblock %}

{% block body_class %}full{% endblock %}

{% block right %}
{% endblock %}

{% block content_base %}

  <div class="page-head">
    {% block breadcrumbs %}{% endblock %}
  </div>

  <div class="panel panel__compact">
    <div class="panel--content">

      <div class="panel--tab-controls">
        <div class="panel--tabs">
          {% for section in sections %}
            {% for timetable in section.days %}
              <a
                data-tab-control="{{ timetable.day.date|date:"l"}}"
                id="schedule_day_{{ timetable.day.date|date:"l"|lower}}"
                class="panel--tab-switch is-active">
                  {{ timetable.day.date|date:"l"}}
              </a>
            {% endfor %}
          {% endfor %}
        </div>
      </div>

      {% for section in sections %}
         {% cache 600 "schedule-table" section.schedule.section %}
            {% for timetable in section.days %}
              <div data-tab-content="{{ timetable.day.date|date:"l"}}" class="panel--tab-content is-active">
                <h3>{{ section.schedule.section.name }} — {{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}</h3>
                {% include "symposion/schedule/_grid.html" %}
              </div>
            {% endfor %}
         {% endcache %}
      {% endfor %}

    </div>
  </div>
{% endblock %}

{% block scripts_extra %}
  <script type="text/javascript">

    fragment = window.location.hash.toLowerCase().substring(1);

    if (!fragment) {
      OFFSET = -11 * (60 * 60 * 1000); // Hobart is 11 hours ahead of UTC in Jan.
      JAN = 0; // because January is 0, not 1

      fragments = [
        {"day": "monday", "time": Date.UTC(2017, JAN, 16)},
        {"day": "tuesday", "time": Date.UTC(2017, JAN, 17)},
        {"day": "wednesday", "time": Date.UTC(2017, JAN, 18)},
        {"day": "thursday", "time": Date.UTC(2017, JAN, 19)},
        {"day": "friday", "time": Date.UTC(2017, JAN, 20)},
        {"day": "saturday", "time": Date.UTC(2017, JAN, 21)},
      ];

      now = new Date().getTime();

      for (i = 0; i < 5; i++) {
        f = fragments[i];
        g = fragments[i+1];
        if ((f.time + OFFSET) <= now && now < (g.time + OFFSET)) {
          fragment = f.day;
        }
      }
    }

    document.addEventListener("DOMContentLoaded", function(event) {

      if (!fragment) {
        return;
      }

      fragmentSwitch = "schedule_day_" + fragment;

      switches = document.getElementsByClassName("panel--tab-switch");
      tabs = document.getElementsByClassName("panel--tab-content");

      for (i = 0; i < switches.length; i++) {

        if (switches[i].id == fragmentSwitch) {
          switches[i].classList.add("is-active");
          tabs[i].classList.add("is-active");
        } else {
          switches[i].classList.remove("is-active");
          tabs[i].classList.remove("is-active");
        }
      }

    });

    window.addEventListener("load", function(event) {

      $(".panel--tab-switch").click(function(event) {
        // This updates the window location fragment so that
        // the URL bar is updated, and so that when you go
        // back, it loads the right page.

        // len("schedule_day_") == 13
        day = event.target.id.substring(13);

        if(history.pushState) {
            history.pushState(null, null, "#" + day);
        }
      });
    });

  </script>
  {{ block.super }}
{% endblock %}