Add JS logic for filter

2017-02-12 22:35:40 +01:00
parent d96380a57f
commit b2a37fd698
5 changed files with 103 additions and 36 deletions
--- a/static-pages/overview.pug
+++ b/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