From cb1355120af647d16ce993d9f871ebd356b8f04c 2018-01-10 15:04:16
From: James Polley <jp@jamezpolley.com>
Date: 2018-01-10 15:04:16
Subject: [PATCH] Make the per-day tabs work

---

diff --git a/pinaxcon/templates/symposion/schedule/schedule_conference.html b/pinaxcon/templates/symposion/schedule/schedule_conference.html
index 7b8d92bf0ae87af5c2ce74097ef06ed5c54d2fbd..70dfa0a7843bfe8d67aaf579421f768f78929d61 100644
--- a/pinaxcon/templates/symposion/schedule/schedule_conference.html
+++ b/pinaxcon/templates/symposion/schedule/schedule_conference.html
@@ -18,35 +18,38 @@
     {% block breadcrumbs %}{% endblock %}
   </div>
 
-  <div class="panel panel__compact">
-    <div class="panel--content">
-
-      <div class="panel--tab-controls">
-        <div class="panel--tabs">
+  <div class="card">
+    <div class="card-header">
+      <nav>
+        <ul class="nav nav-tabs card-header-tabs" id="nav-tabs" role="tablist">
           {% 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">
+              <li class="nav-item">
+                <a class="nav-item nav-link active"
+                   id="schedule_day_{{ timetable.day.date|date:"l"|lower}}-tab"
+                   href="#{{ timetable.day.date|date:"l"|lower}}"
+                   role="tab" aria-controls="schedule_day_{{ timetable.day.date|date:"l"|lower}" >
                   {{ timetable.day.date|date:"l"}}
-              </a>
+                </a>
+              </li>
             {% endfor %}
           {% endfor %}
-        </div>
-      </div>
+        </ul>
+      </nav>
+    </div>
 
+    <div class="tab-content card-body">
       {% 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">
+              <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>
                 {% include "symposion/schedule/_grid.html" %}
               </div>
             {% endfor %}
          {% endcache %}
       {% endfor %}
-
     </div>
   </div>
 {% endblock %}
@@ -80,46 +83,31 @@
       }
     }
 
-    document.addEventListener("DOMContentLoaded", function(event) {
+    document.addEventListener("hashchange", function(event) {
+      fragment = window.location.hash.toLowerCase().substring(1);
 
       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");
-        }
-      }
+      fragmentid = "#schedule_day_" + fragment + "-tab";
+      $(fragmentid).tab('show');
 
     });
 
-    window.addEventListener("load", function(event) {
-
-      $(".panel--tab-switch").click(function(event) {
+      $(".nav-item").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);
+        day_tab = event.target.id.substring(13);
+        day = day_tab.substr(0, day_tab.length-4);
 
         if(history.pushState) {
             history.pushState(null, null, "#" + day);
         }
       });
-    });
-
   </script>
   {{ block.super }}
 {% endblock %}