refactor: client structure + editor preview logic

client/store/index.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import navigator from './modules/navigator'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    loading: false
+  },
+  mutations: {
+    loadingChange: (state, loadingState) => { state.loading = loadingState }
+  },
+  actions: {
+    alert({ dispatch }, opts) { dispatch('navigator/alert', opts) },
+    startLoading({ commit }) { commit('loadingChange', true) },
+    stopLoading({ commit }) { commit('loadingChange', false) }
+  },
+  getters: {},
+  modules: {
+    navigator
+  }
+})

client/store/modules/navigator.js

@@ -0,0 +1,40 @@
+import debounce from 'lodash/debounce'
+
+export default {
+  namespaced: true,
+  state: {
+    subtitleShown: false,
+    subtitleStyle: '',
+    subtitleIcon: false,
+    subtitleText: '',
+    subtitleStatic: 'Welcome'
+  },
+  getters: {},
+  mutations: {
+    subtitleChange (state, opts) {
+      state.subtitleShown = (opts.shown === true)
+      state.subtitleStyle = opts.style || ''
+      state.subtitleIcon = opts.icon || false
+      state.subtitleText = opts.msg || ''
+    },
+    subtitleStatic (state, text) {
+      state.subtitleText = text
+      state.subtitleStatic = text
+    }
+  },
+  actions: {
+    alert ({ commit, dispatch }, opts) {
+      opts.shown = true
+      commit('subtitleChange', opts)
+      dispatch('alertDismiss')
+    },
+    alertDismiss: debounce(({ commit, state }) => {
+      let opts = {
+        shown: false,
+        style: state.subtitleStyle,
+        msg: state.subtitleStatic
+      }
+      commit('subtitleChange', opts)
+    }, 5000)
+  }
+}