symposion_app Changeset - cb1355120af6

Changeset - cb1355120af6

Parent rev.

Child rev.

[Not reviewed]

0 1 0

James Polley - 6 years ago 2018-01-10 15:04:16
jp@jamezpolley.com

Make the per-day tabs work

1 file changed with 25 insertions and 37 deletions:

pinaxcon/templates/symposion/schedule/schedule_conference.html

0 comments (0 inline, 0 general)

pinaxcon/templates/symposion/schedule/schedule_conference.html

➞

Show inline comments

@@ ... / @@ -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 %}

0 comments (0 inline, 0 general)