work on lists filters + nav items

assets/public/app.js

@@ -13,6 +13,7 @@ export const defaultConfig = {
 export default class AppBuilder {
     constructor(config={}) {
         this._config = config;
+        this.title = null;
         this.app = null;
     }
 
@@ -46,7 +47,7 @@ export default class AppBuilder {
             })
     }
 
-    load({async=false,content=null, title=null, url=null}={}) {
+    load({async=false,content=null,title=null}={}) {
         var self = this;
         return new Promise((resolve, reject) => {
             let func = () => {
@@ -60,9 +61,6 @@ export default class AppBuilder {
                         el.innerHTML = content
                     if(title)
                         document.title = title;
-                    if(url && content)
-                        history.pushState({ content: content, title: title }, '', url)
-
                     this.app = new Vue(config);
                     resolve(self.app)
                 } catch(error) {
@@ -73,7 +71,22 @@ export default class AppBuilder {
         });
     }
 
-    loadFromState(state) {
+    /// Save application state into browser history
+    historySave(url,replace=false) {
+        const el = document.querySelector(this.config.el);
+        const state = {
+            content: el.innerHTML,
+            title: document.title,
+        };
+
+        if(replace)
+            history.replaceState(state, '', url)
+        else
+            history.pushState(state, '', url)
+    }
+
+    /// Load application from browser history's state
+    historyLoad(state) {
         return this.load({ content: state.content, title: state.title });
     }
 }

assets/public/index.js

@@ -40,6 +40,7 @@ window.aircox = {
     get playerApp() { return this.playerBuilder && this.playerBuilder.app },
     get player() { return this.playerApp && this.playerApp.$refs.player },
 
+    // Handle hot-reload (link click and form submits).
     onPageFetch(event) {
         let submit = event.type == 'submit';
         let target = submit || event.target.tagName == 'A'
@@ -62,7 +63,9 @@ window.aircox = {
                 options['body'] = formData;
             }
         }
-        this.appBuilder.fetch(url, options);
+        this.appBuilder.fetch(url, options).then(app => {
+            this.appBuilder.historySave(url);
+        });
         event.preventDefault();
         event.stopPropagation();
     },
@@ -76,12 +79,16 @@ aircox.playerBuilder = new AppBuilder({el: '#player'});
 aircox.playerBuilder.load({async:true});
 aircox.appBuilder = new AppBuilder(x => window.aircox.appConfig);
 aircox.appBuilder.load({async:true}).then(app => {
+    aircox.appBuilder.historySave(document.location, true);
+
     //-- load page hooks
     window.addEventListener('click', event => aircox.onPageFetch(event), true);
     window.addEventListener('submit', event => aircox.onPageFetch(event), true);
     window.addEventListener('popstate', event => {
-        if(event.state && event.state.content)
-            aircox.appBuilder.loadFromState(event.state);
+        if(event.state && event.state.content) {
+            document.title = aircox.appBuilder.title;
+            aircox.appBuilder.historyLoad(event.state);
+        }
     });
 })