Conservancy/symposion_app
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make the per-day tabs work

Browse source
This commit is contained in:
James Polley 2018-01-11 01:59:26 +11:00
parent 98e0abf30c
commit cb1355120a
1 changed files with 25 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
pinaxcon/templates/symposion/schedule/schedule_conference.html
View file

@ -18,35 +18,38 @@
{% block breadcrumbs %}{% endblock %} {% block breadcrumbs %}{% endblock %}
</div> </div>
<div class="panel panel__compact"> <div class="card">
<div class="panel--content"> <div class="card-header">
<nav>
<div class="panel--tab-controls"> <ul class="nav nav-tabs card-header-tabs" id="nav-tabs" role="tablist">
<div class="panel--tabs">
{% for section in sections %} {% for section in sections %}
{% for timetable in section.days %} {% for timetable in section.days %}
<a <li class="nav-item">
data-tab-control="{{ timetable.day.date|date:"l"}}" <a class="nav-item nav-link active"
id="schedule_day_{{ timetable.day.date|date:"l"|lower}}" id="schedule_day_{{ timetable.day.date|date:"l"|lower}}-tab"
class="panel--tab-switch is-active"> href="#{{ timetable.day.date|date:"l"|lower}}"
role="tab" aria-controls="schedule_day_{{ timetable.day.date|date:"l"|lower}" >
{{ timetable.day.date|date:"l"}} {{ timetable.day.date|date:"l"}}
</a> </a>
</li>
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}
</div> </ul>
</div> </nav>
</div>
<div class="tab-content card-body">
{% for section in sections %} {% for section in sections %}
{% cache 600 "schedule-table" section.schedule.section %} {% cache 600 "schedule-table" section.schedule.section %}
{% for timetable in section.days %} {% for timetable in section.days %}
<div data-tab-content="{{ timetable.day.date|date:"l"}}" class="panel--tab-content is-active"> <div class="tab-pane active" id="{{ timetable.day.date|date:"l"|lower}}"
role="tabpanel" aria-labelledby="schedule_day_{{ timetable.day.date|date:"l"|lower}}-tab">
<h3>{{ section.schedule.section.name }} — {{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}</h3> <h3>{{ section.schedule.section.name }} — {{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}</h3>
{% include "symposion/schedule/_grid.html" %} {% include "symposion/schedule/_grid.html" %}
</div> </div>
{% endfor %} {% endfor %}
{% endcache %} {% endcache %}
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
@ -80,46 +83,31 @@
} }
} }
document.addEventListener("DOMContentLoaded", function(event) { document.addEventListener("hashchange", function(event) {
fragment = window.location.hash.toLowerCase().substring(1);
if (!fragment) { if (!fragment) {
return; return;
} };
fragmentSwitch = "schedule_day_" + fragment; fragmentid = "#schedule_day_" + fragment + "-tab";
$(fragmentid).tab('show');
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) { $(".nav-item").click(function(event) {
$(".panel--tab-switch").click(function(event) {
// This updates the window location fragment so that // This updates the window location fragment so that
// the URL bar is updated, and so that when you go // the URL bar is updated, and so that when you go
// back, it loads the right page. // back, it loads the right page.
// len("schedule_day_") == 13 // len("schedule_day_") == 13
day = event.target.id.substring(13); day_tab = event.target.id.substring(13);
day = day_tab.substr(0, day_tab.length-4);
if(history.pushState) { if(history.pushState) {
history.pushState(null, null, "#" + day); history.pushState(null, null, "#" + day);
} }
}); });
});
</script> </script>
{{ block.super }} {{ block.super }}
{% endblock %} {% endblock %}