From f8c5bb7855e64c464899db83d13d402251c3da38 Mon Sep 17 00:00:00 2001
From: Tom Raithel <t.raithel@googlemail.com>
Date: Mon, 13 Feb 2017 09:23:56 +0100
Subject: [PATCH] Add pjax for faster page loads

---
 README.md            |  2 +-
 js/filter.js         |  8 ++++++++
 js/pjax.js           | 10 ++++++++++
 js/radar.js          | 10 +++++++++-
 package.json         |  1 +
 templates/layout.pug |  2 +-
 6 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 js/pjax.js

diff --git a/README.md b/README.md
index a8c2098..042c1b9 100644
--- a/README.md
+++ b/README.md
@@ -48,4 +48,4 @@ If an item is overwritten in a new release, the attributes from the new item are
 -  [ ] Implement search?
 -  [ ] Radar View?
 -  [ ] Make mobile friendly
--  [ ] Add pjax
+-  [x] Add pjax
diff --git a/js/filter.js b/js/filter.js
index d1d7d22..65217b2 100644
--- a/js/filter.js
+++ b/js/filter.js
@@ -1,4 +1,6 @@
 import Vue from 'vue';
+import applyPjax from './pjax';
+
 
 const initFilter = element => {
   const index = JSON.parse(element.getAttribute('data-index'));
@@ -24,6 +26,12 @@ const initFilter = element => {
         return visibleItems.length > 0;
       },
     },
+    created() {
+      applyPjax();
+    },
+    updated() {
+      applyPjax();
+    },
   });
 };
 
diff --git a/js/pjax.js b/js/pjax.js
new file mode 100644
index 0000000..5e12a3a
--- /dev/null
+++ b/js/pjax.js
@@ -0,0 +1,10 @@
+import Pjax from 'pjax';
+
+const applyPjax = () => {
+  new Pjax({
+    elements: '.js--body a',
+    selectors: ['title', '.js--body'],
+  });
+};
+
+export default applyPjax;
diff --git a/js/radar.js b/js/radar.js
index 88c6cf9..f29f89e 100644
--- a/js/radar.js
+++ b/js/radar.js
@@ -1,8 +1,16 @@
 import filter from './filter';
+import applyPjax from './pjax';
 
 const enhanceComponent = (selector, enhancer) => {
   const $filter = [].slice.call(document.querySelectorAll(selector));
   $filter.map(enhancer);
 }
 
-enhanceComponent('.js--filter', filter);
+const enhanceComponents = () => {
+  enhanceComponent('.js--filter', filter);
+}
+
+applyPjax();
+
+enhanceComponents();
+document.addEventListener("pjax:success", enhanceComponents);
diff --git a/package.json b/package.json
index 5f3baf7..fb3e66e 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "fs-extra": "2.0.0",
     "live-server": "1.2.0",
     "marked": "0.3.6",
+    "pjax": "0.2.4",
     "postcss-cli": "2.6.0",
     "postcss-css-variables": "0.6.0",
     "postcss-easy-import": "2.0.0",
diff --git a/templates/layout.pug b/templates/layout.pug
index c9529f0..44298f0 100644
--- a/templates/layout.pug
+++ b/templates/layout.pug
@@ -3,7 +3,7 @@ html
   head
     title #{title} - AOE Tech Radar
     link(rel='stylesheet', href='/styles.css')
-  body
+  body.js--body
     block body
     block scripts
       script(src='/bundle.js')