Persist selected view in URL on elections page

source/_patterns/03-templates/elections.mustache

@@ -2,7 +2,7 @@
 {{> organisms-elections-hero }}
 
 <div class="__js-root">
-  <ui-view-provider :initial="{candidates: true, program: false}" v-slot="{ isCurrentView, toggleView }">
+  <ui-view-provider :initial="{candidates: true, program: false}" :sync-location="true" v-slot="{ isCurrentView, toggleView }">
     <main>
       <div class="container container--default pt-8 lg:py-24">
         <div class="text-center">

source/js/components/ViewProvider.vue

@@ -4,6 +4,7 @@
       v-bind:views="views"
       v-bind:isCurrentView="isCurrentView"
       v-bind:toggleView="toggleView"
+      v-bind:showView="showView"
       v-bind:setView="setView"
     ></slot>
   </div>
@@ -14,11 +15,20 @@ export default {
   props: {
     initial: {
       default: () => {}
+    },
+    syncLocation: {
+      type: Boolean,
+      default: false,
+    },
+    locationParam: {
+      type: String,
+      default: "view",
     }
   },
   data() {
     return {
       views: this.$props.initial,
+      queryParams: null,
       keyListener: e => {
         // Esc
         if (e.keyCode === 27) {
@@ -27,21 +37,38 @@ export default {
       }
     };
   },
+  watch: {
+    routeView() {
+      const queryParams = new URLSearchParams(window.location.search);
+    }
+  },
   methods: {
-    setView(viewId, show) {
+    setView(viewId, show, hideOthers = false) {
+      if (hideOthers) {
+        Object.keys(this.$data.views).forEach(key => {
+          if (key !== viewId) {
+            this.setView(key, false);
+          }
+        });
+      }
+
       this.$data.views[viewId] = show;
+
+      if (show && this.$props.syncLocation) {
+        const queryParams = new URLSearchParams(window.location.search);
+
+        queryParams.set(this.$props.locationParam, viewId);
+        history.pushState(null, null, "?" + queryParams.toString());
+      }
     },
     setViews(updates) {
       this.$data.views = Object.assign({}, this.data.views, updates);
     },
     toggleView(viewId) {
-      Object.keys(this.$data.views).forEach(key => {
-        if (key !== viewId) {
-          this.setView(key, false);
-        }
-      });
-
-      this.setView(viewId, !this.isCurrentView(viewId));
+      this.setView(viewId, !this.isCurrentView(viewId), true);
+    },
+    showView(viewId) {
+      this.setView(viewId, true, true);
     },
     isCurrentView(viewId) {
       return this.$data.views[viewId];
@@ -53,7 +80,16 @@ export default {
     }
   },
   mounted() {
-    window.addEventListener('keydown', this.$data.keyListener);;
+    window.addEventListener('keydown', this.$data.keyListener);
+
+    if (this.$props.syncLocation) {
+      const queryParams = new URLSearchParams(window.location.search);
+      const locationView = queryParams.get(this.$props.locationParam);
+
+      if (Object.keys(this.$data.views).indexOf(locationView) !== -1) {
+        this.showView(locationView);
+      }
+    }
   },
   destroyed() {
     window.removeEventListener('keydown', this.$data.keyListener);