Add JS logic for filter

js/filter.js

@@ -0,0 +1,30 @@
+import Vue from 'vue';
+
+const initFilter = element => {
+  const index = JSON.parse(element.getAttribute('data-index'));
+
+  const filter = new Vue({
+    el: element,
+    template: element.outerHTML,
+    data: {
+      ring: 'all',
+      index,
+    },
+    methods: {
+      setRing(ring, event) {
+        if (event) event.preventDefault()
+        this.ring = ring;
+      },
+      isRingVisible(ring) {
+        return this.ring === 'all' || ring === this.ring;
+      },
+      isGroupVisible(letter) {
+        const itemsInLetter = this.index[letter] || [];
+        const visibleItems = itemsInLetter.filter((item) => this.isRingVisible(item.attributes.ring));
+        return visibleItems.length > 0;
+      },
+    },
+  });
+};
+
+export default initFilter;

js/radar.js

@@ -1,3 +1,8 @@
-const add = (x, y) => x + y;
+import filter from './filter';
 
-add(1, 4);
+const enhanceComponent = (selector, enhancer) => {
+  const $filter = [].slice.call(document.querySelectorAll(selector));
+  $filter.map(enhancer);
+}
+
+enhanceComponent('.js--filter', filter);

static-pages/overview.pug

@@ -5,39 +5,55 @@ block vars
   - var title='Technologies Overview'
 
 block content
-  .headline-group
-    .hero-headline
-      | Technologies Overview
-  .filter
-    .nav
-      .nav__item
-        a.badge.badge--big.badge--neutral(href='#') all
-      each items, ringName in groupByRing(radar)
+  .js--filter(
+    data-index=JSON.stringify(groupByFirstLetter(radar))
+  )
+    .headline-group
+      .hero-headline
+        | Technologies Overview
+    .filter
+      .nav
         .nav__item
-          a.badge.badge--big.badge--empty(href='#')= ringName
+          a.badge.badge--big(
+            href='#'
+            v-on:click="setRing('all')"
+            v-bind:class=`ring === 'all' ? 'badge--neutral' : ''`
+          ) all
+        each items, ringName in groupByRing(radar)
+          .nav__item
+            a.badge.badge--big.badge--empty(
+              href='#'
+              v-on:click=`setRing('${ringName}')`
+              v-bind:class=`ring === '${ringName}' ? 'badge--${ringName}' : ''`
+            )= ringName
 
-  div.letter-index
-    each items, letter in groupByFirstLetter(radar)
-      .letter-index__group
-        .letter-index__letter= letter
-        .letter-index__items
-          .item-list
-            .item-list__list
-              each item in items
-                a.item.item--no-leading-border.item--no-trailing-border(href=`/${item.quadrant}/${item.name}.html`)
-                  .split.split--align-top
-                    .split__left
-                      .item__title
-                        = item.attributes.title
-                        if item.isNew
-                          = ' '
-                          span.is-new new
-                      if item.attributes.info
-                        .item__info= item.attributes.info
-                    .split__right
-                      .nav
-                        .nav__item
-                          = translate(item.quadrant)
-                        .nav__item
-                          span(class=`badge badge--${item.attributes.ring}`)
-                            = item.attributes.ring
+    div.letter-index
+      each items, letter in groupByFirstLetter(radar)
+        .letter-index__group(
+          v-if=`isGroupVisible('${letter}')`
+        )
+          .letter-index__letter= letter
+          .letter-index__items
+            .item-list
+              .item-list__list
+                each item in items
+                  a.item.item--big.item--no-leading-border.item--no-trailing-border(
+                    href=`/${item.quadrant}/${item.name}.html`
+                    v-if=`isRingVisible('${item.attributes.ring}')`
+                  )
+                    .split.split--align-top
+                      .split__left
+                        .item__title
+                          = item.attributes.title
+                          if item.isNew
+                            = ' '
+                            span.is-new new
+                        if item.attributes.info
+                          .item__info= item.attributes.info
+                      .split__right
+                        .nav
+                          .nav__item
+                            = translate(item.quadrant)
+                          .nav__item
+                            span(class=`badge badge--${item.attributes.ring}`)
+                              = item.attributes.ring

styles/components/item.css

@@ -18,6 +18,17 @@
     border-top: 1px solid var(--color-gray-normal);
   }
 
+  &--big {
+    padding: 20px 10px;
+    /*&:hover {
+      background: transparent;
+
+      & .item__title {
+        text-decoration: underline;
+      }
+    }*/
+  }
+
   &--no-leading-border {
     &:first-child {
       border-top: none;

webpack.config.js

@@ -8,6 +8,11 @@ module.exports = {
     path: path.join(__dirname, 'dist'),
     filename: '[name].js',
   },
+  resolve: {
+    alias: {
+      'vue$': 'vue/dist/vue.common.js'
+    }
+  },
   module: {
     rules: [
       {