From e95bacc58944b99e898434abc442d686d2e8e255 Mon Sep 17 00:00:00 2001
From: Yann Kaiser <kaiser.yann@gmail.com>
Date: Sun, 9 Jul 2017 22:07:41 -0700
Subject: [PATCH] Update schedule filters (#160)

* allow for multiple-category filter and update filters

* transition opacity of cards on filter change
---
 pybay/templates/frontend/schedule.html | 16 ++++++++--------
 pybay/views.py                         | 23 ++++++++++++++---------
 static/new/css/style.css               |  1 +
 static/new/js/schedule-filters.js      |  9 +++++++--
 4 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/pybay/templates/frontend/schedule.html b/pybay/templates/frontend/schedule.html
index 71742131..60a10dc0 100644
--- a/pybay/templates/frontend/schedule.html
+++ b/pybay/templates/frontend/schedule.html
@@ -20,8 +20,8 @@ <h1><strong>Schedule</strong></h1>
         <div class="sch-filters substicky">
             <ul class="sch-filter-list">
                 <li data-filter="">All Talks</li>
-              {% for filter, name in filters %}
-                <li data-filter="{{ filter }}">{{ name }}</li>
+              {% for name, filter in filters %}
+                <li data-filter="{{ filter|join:" " }}">{{ name }}</li>
               {% endfor %}
             </ul>
         </div>
@@ -74,20 +74,20 @@ <h4><a href="{% url 'pybay_speakers_detail' talk.speaker.name_slug %}">{{ talk.t
     <script src="{% static 'new/js/schedule-filters.js' %}" async></script>
 
     <style type="text/css">
-      {% for slug, _ in filters %}
-      .sch-schedule-filter-{{ slug }} .sch-filter-list > li[data-filter="{{ slug }}"]{% if not forloop.last %},{% endif %}{% endfor %} {
+      {% for _, slugs in filters %}{% for slug in slugs %}
+      .sch-schedule-filter-{{ slug }} .sch-filter-list > li[data-filter~="{{ slug }}"]{% if not forloop.last %},{% endif %}{% endfor %}{% if not forloop.last %},{% endif %}{% endfor %}{
         background: #428bca;
         color: white;
       }
 
-      {% for slug, _ in filters %}
-      .sch-schedule-filter-{{ slug }} .sch-timeslot-kind-talk:not(.sch-talk-{{ slug }}){% if not forloop.last %},{% endif %} {% endfor %}{
+      {% for _, slugs in filters %}{% for slug in slugs %}
+      .sch-schedule-filter-{{ slug }} .sch-timeslot-kind-talk:not(.sch-talk-{{ slug }}){% if not forloop.last %},{% endif %}{% endfor %}{% if not forloop.last %},{% endif %}{% endfor %}{
         opacity: .3;
       }
 
       @media(max-width: 450px) {
-        {% for slug, _ in filters %}
-        .sch-schedule-filter-{{ slug }} .sch-timeslot-kind-talk:not(.sch-talk-{{ slug }}){% if not forloop.last %},{% endif %} {% endfor %} {
+        {% for _, slugs in filters %}{% for slug in slugs %}
+        .sch-schedule-filter-{{ slug }} .sch-timeslot-kind-talk:not(.sch-talk-{{ slug }}){% if not forloop.last %},{% endif %}{% endfor %}{% if not forloop.last %},{% endif %}{% endfor %}{
           display: none;
         }
       }
diff --git a/pybay/views.py b/pybay/views.py
index df3b535d..840895a1 100644
--- a/pybay/views.py
+++ b/pybay/views.py
@@ -177,10 +177,20 @@ def _day_slots(day):
 
 
 FILTER_CATEGORIES = [
-    "All things Web",
-    "DevOps",
+    ("Fundamentals", ['fundamentals']),
+    ("Data", ['dealingwithdata']),
+    ("Python at Scale", ['performantpython', 'scalablepython', 'devops']),
 ]
 
+ALLOWED_CATEGORIES = [
+    slug
+    for _, slugs in FILTER_CATEGORIES
+    for slug in slugs
+]
+
+FILTER_CATEGORIES.append(('Misc', ['other']))
+FILTER_CATEGORIES.append(('Beginner-friendly', ['level-1']))
+
 
 def pybay_schedule(request):
     if request.user.is_staff:
@@ -197,15 +207,10 @@ def pybay_schedule(request):
         for schedule in schedules
     ]
 
-    filters = [
-        (name.lower().replace(' ', ''), name)
-        for name in FILTER_CATEGORIES
-    ]
-
     ctx = {
         'schedules': schedules,
-        'filters' :  filters + [('other', 'Other'), ('level-1', 'Beginner-friendly')],
-        'allowed_categories': [slug for slug, _ in filters]
+        'filters' :  FILTER_CATEGORIES,
+        'allowed_categories': ALLOWED_CATEGORIES,
     }
 
     return render(request, "frontend/schedule.html", ctx)
diff --git a/static/new/css/style.css b/static/new/css/style.css
index ca9ca0cf..88fd82a9 100644
--- a/static/new/css/style.css
+++ b/static/new/css/style.css
@@ -281,6 +281,7 @@ p.question {
   padding-top: 4px;
   padding-bottom: 4px;
   text-align: left;
+  transition: opacity 0.2s ease-out;
 }
 
 .sch-timeslot-kind-talk > * {
diff --git a/static/new/js/schedule-filters.js b/static/new/js/schedule-filters.js
index c73fa210..a6d4d231 100644
--- a/static/new/js/schedule-filters.js
+++ b/static/new/js/schedule-filters.js
@@ -7,11 +7,16 @@
       var filter = target.closest('li').data('filter');
       if (filter === undefined) return;
       var schedule = target.closest('.' + parentClass);
-      var alreadySelected = filter === '' || schedule.hasClass(prefix + filter);
+      schedule.data('filter');
+      var alreadySelected = filter === '' || schedule.data('filter') === filter;
+      schedule.data('filter', filter);
       schedule.removeClass(function(i, cls) { return cls; });
       schedule.addClass(parentClass);
       if (!alreadySelected) {
-        schedule.addClass(filterEnabledClass + ' ' + prefix + filter);
+        var filters = $.map(filter.split(' '), function (f) {
+          return prefix + f;
+        }).join(' ');
+        schedule.addClass(filterEnabledClass + ' ' + filters);
       }
   });
 }(jQuery);