Add conf/meetup filtering (#11)

* Yarn

* Remove conferences

* Add filter HTML

* Initial styles

* Filter functionality

* Pull string constants out

* Update filter styles

* Change hero img + reduce size

* Refactor

* Add SVGO link

* Update conference boxes

* Add bullets

Author: toddmotto

README.md

@@ -37,6 +37,8 @@ Use the guide below to add your own event to the correct month inside the above
     // Date of Event
     "date": "06-07",
     // Your event logo (for best results use SVG)
+    // Please compress SVG before your PR:
+    // https://jakearchibald.github.io/svgomg/
     "logo": "ngbe.svg",
     // The type of event, "conference" or "meetup"
     "type": "conference",

_data/conferences.json

@@ -38,15 +38,5 @@
     "name": "ngPoland",
     "href": "http://ng-poland.pl/",
     "img": "ngpoland.svg"
-  },
-  {
-    "name": "ngHighCountry",
-    "href": "http://www.highcountryangular.com/",
-    "img": "nghighcountry.svg"
-  },
-  {
-    "name": "ngHouston",
-    "href": "https://www.meetup.com/ngHouston/",
-    "img": "nghouston.svg"
   }
 ]

_includes/calendar.html

@@ -4,11 +4,17 @@
   <h3 class="ac-year-title">{{ include.year }}</h3>
 </div>
 <div class="ac-conf">
+  <div class="ac-conf-filters">
+    <p>Show:</p>
+    <a href="#all" class="active">All</a> <span>&bull;</span>
+    <a href="#conference">Conferences</a> <span>&bull;</span>
+    <a href="#meetup">Meetups</a>
+  </div>
   {% for conf in assets %}
     {% if conf[1].size > 0 %}
     <div class="ac-conf-box">
       <h2 class="ac-conf-title">{{ conf[0] }}</h2>
-      <div class="grid-2">
+      <div class="grid-2-special">
         {% for item in conf[1] %}
         {% assign month = conf[0] %}
         {% assign year = include.year %}

_includes/generic/conference.html

@@ -483,7 +483,7 @@
     {% assign country = "Zimbabwe" %}
 {% endcase %}
 
-<div class="ac-box toggle-modal"{% if item.metadata.type == 'conference' or item.metadata.type == 'meetup' %}data-event-type="{{ item.metadata.type }}"{% endif %}>
+<div class="ac-box toggle-modal active"{% if item.metadata.type == 'conference' or item.metadata.type == 'meetup' %}data-event-type="{{ item.metadata.type }}"{% endif %}>
   <h3 class="ac-box-title">
     {{ item.metadata.title }}
     <span>{% if item.metadata.type == 'conference' or item.metadata.type == 'meetup' %}{{ item.metadata.type }}{% endif %}</span>

_scripts/app.js

@@ -88,9 +88,53 @@
 
   const members = $$('.ac-conf');
 
-  function initMembers(thing) {
-    const items = $$('.toggle-modal', thing);
-    const modals = $$('.modal', thing);
+  function bindFilters(item) {
+    const filter = item.querySelector('.ac-conf-filters');
+    const VISIBILITY = 'data-visibility';
+    const EVENT_TYPE = 'data-event-type';
+
+    filter.addEventListener(
+      'click',
+      function(event) {
+        event.preventDefault();
+        const { target } = event;
+
+        if (target.nodeName.toLowerCase() !== 'a') {
+          return;
+        }
+
+        const value = target.getAttribute('href').substring(1);
+        const buttons = $$('a', target.parentNode);
+        const confs = $$(`[${EVENT_TYPE}]`, item);
+
+        buttons.map(button => apollo.removeClass(button, 'active'));
+        apollo.addClass(target, 'active');
+
+        switch (value) {
+          case 'all': {
+            confs.map(conf => apollo.addClass(conf, 'active'));
+            break;
+          }
+          case 'conference':
+          case 'meetup': {
+            confs.map(conf => {
+              if (conf.getAttribute(`${EVENT_TYPE}`) === value) {
+                apollo.addClass(conf, 'active');
+              } else {
+                apollo.removeClass(conf, 'active');
+              }
+            });
+            break;
+          }
+        }
+      },
+      false
+    );
+  }
+
+  function initMembers(item) {
+    const items = $$('.toggle-modal', item);
+    const modals = $$('.modal', item);
     const overlay = document.querySelector('.overlay');
     const main = document.querySelector('.main');
 
@@ -150,5 +194,6 @@
 
   if (members) {
     members.map(initMembers);
+    members.map(bindFilters);
   }
 })(window, document);

assets/css/app.css

@@ -46,6 +46,21 @@
   }
 }
 
+// Two columns
+.grid-2-special,
+%grid-2-special {
+  @extend %grid-base;
+  justify-content: space-between;
+
+  & > * {
+    flex: 0 1 48.5%;
+
+    @media only screen and (max-width: 760px) {
+      flex: 0 0 100%;
+    }
+  }
+}
+
 // Three columns
 .grid-3,
 %grid-3 {

assets/css/source/base/_grid.scss

@@ -20,6 +20,12 @@
     text-align: center;
     line-height: 70px;
 
+    &:nth-child(n + 8) {
+      display: none;
+      height: 0;
+      line-height: 0;
+    }
+
     @media only screen and (max-width: 560px) {
       line-height: 90px;
     }

assets/css/source/components/_brands.scss

@@ -16,6 +16,30 @@
 }
 
 .ac-conf {
+  &-filters {
+    margin: 20px 0;
+    font-size: 14px;
+    span {
+      margin: 0 4px;
+      color: $night-50;
+    }
+    p {
+      display: inline-block;
+      margin-right: 4px;
+    }
+    a {
+      color: $night-50;
+      padding: 0 4px;
+
+      &:hover {
+        color: $night-80;
+      }
+
+      &.active {
+        color: $green;
+      }
+    }
+  }
   &-box {
     border-top: 1px solid $night-10;
     padding: 30px 0 0;
@@ -33,10 +57,12 @@
     font-size: 14px;
     color: $green;
     line-height: 26px;
+    margin-bottom: 10px;
   }
 }
 
 .ac-box {
+  display: none;
   position: relative;
   border: 1px solid $night-10;
   border-radius: $border-radius;
@@ -53,37 +79,8 @@
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.04);
   }
 
-  &:nth-child(-n + 2) {
-    margin-top: 10px;
-
-    @media only screen and (max-width: 560px) {
-      margin-top: 6px;
-    }
-  }
-
-  &--conference,
-  &--meetup {
-    &:before {
-      content: '';
-      position: absolute;
-      right: 17px;
-      top: 17px;
-      width: 8px;
-      height: 8px;
-      border-radius: 8px;
-    }
-  }
-
-  &--conference {
-    &:before {
-      background: $angular;
-    }
-  }
-
-  &--meetup {
-    &:before {
-      background: $typescript;
-    }
+  &.active {
+    display: block;
   }
 
   &-title {

assets/css/source/components/_dates.scss

@@ -1,5 +1,5 @@
 .ac-hero {
-  background: url('/assets/img/homepage/hero.png') center center no-repeat;
+  background: url('/assets/img/homepage/hero.jpg') center center no-repeat;
   background-size: cover;
 
   text-align: center;