Implement synchronization and saving

Author: Christopher Mühl

README.md

@@ -1,36 +1,48 @@
-# `vuepress-plugin-code-switcher`
+# vuepress-plugin-code-switcher
+Component that allows having synchronized language switchable code blocks (e.g. to switch between Java and Kotlin examples). Selected languages are persisted to local storage to have language selection be permanent across page requests.
 
-### Installation
-Install `vuepress-plugin-code-switcher` as a dependency and add it to your config's plugin list:
+## Installation
+```
+$ npm install vuepress-plugin-code-switcher --save
+```
+
+After installing, add it to your Vuepress configuration's plugin list:
 
 ```js
 module.exports = {
     plugins: [ 'code-switcher' ]
 }
 ```
 
-### Example
-```markdown
+### Usage
+````markdown
 <CodeSwitcher :languages="{js:'JavaScript',ts:'TypeScript'}">
 <template v-slot:js>
 
-    ```js
-    module.exports = function (str) {
-        return typeof str === 'string' && str.trim() === str
-    }
-    ```
+```js
+module.exports = function (str) {
+    return typeof str === 'string' && str.trim() === str
+}
+```
 
 </template>
 <template v-slot:ts>
 
-    ```ts
-    export default function isString (str: string) : str is string {
-        return typeof str === 'string' && str.trim() === str
-    }
-    ```
+```ts
+export default function isString (str: string) : str is string {
+    return typeof str === 'string' && str.trim() === str
+}
+```
 
 </template>
 </CodeSwitcher>
-```
+````
+
+> The extra newline between the `<template>` tags and their content is necessary if you want to have Markdown interpreted within the component.
 
-The extra newline between the `<template>` tags and their content is necessary if you want to have Markdown interpreted within the component.
+#### Props
+| Prop | Description | Type | Default |
+| ----- | ----- | ---- | ---- |
+| languages | The languages that can be switched between. The object expects shorthands as keys and the tab title as values. The shorthands will also be used as slot names | Object | --- |
+| name | All code switchers on one page with the same name will be synchronized | String | `'default'` |
+| isolated | if true, this block will not synchronize with any others or load/save its state to/from localstorage | Boolean | `false` |

components/CodeSwitcher.vue

@@ -3,14 +3,16 @@
         <div class="tab-header">
             <ul>
                 <li v-for="(name, shorthand) in languages"
-                    @click="selectedLanguage = shorthand"
+                    :key="shorthand"
+                    @click="switchLanguage(shorthand)"
                     :class="{ active: selectedLanguage === shorthand }"
                 > {{ name }}
                 </li>
             </ul>
         </div>
 
         <div class="tab-content"
+            :key="shorthand"
             v-for="(name, shorthand) in languages"
             v-show="shorthand === selectedLanguage"
         > 
@@ -22,13 +24,59 @@
 <script>
 export default {
     props: {
-        languages: Object
+        name: {
+            type: String,
+            default: 'default'
+        },
+        isolated: {
+            type: Boolean,
+            default: false
+        },
+        languages: Object,
     },
 
     data () {
         return {
-            selectedLanguage: 'js'
+            selectedLanguage: Object.keys(this.languages)[0]
         }
+    },
+
+    computed: {
+        root () {
+            let parent = this, p
+            while (p = parent.$parent) {
+                parent = p
+            }
+
+            return parent
+        },
+
+        localStorageKey () {
+            return `vuepress-plugin-code-switcher@${this.name}`
+        }
+    },
+
+    methods: {
+        switchLanguage (value) {
+            if (this.isolated) {
+                return this.selectedLanguage = value
+            }
+
+            localStorage.setItem(this.localStorageKey, value)
+            this.root.$emit('change', { name: this.name, value })
+        }
+    },
+
+    created () {
+        if (this.isolated) return
+
+        let selected = localStorage.getItem(this.localStorageKey)
+        if (selected) this.selectedLanguage = selected
+
+        this.root.$on('change', ({ name, value }) => {
+            if (name === this.name)
+                this.selectedLanguage = value
+        })
     }
 }
 </script>