feat: Color Theme live preview

client/js/app.js

@@ -22,6 +22,7 @@ import 'jquery-sticky'
 // ====================================
 
 import helpers from './helpers'
+import _ from './helpers/lodash'
 
 // ====================================
 // Load Vue Components
@@ -62,7 +63,7 @@ import sourceViewComponent from './pages/source-view.component.js'
 Vue.use(VueResource)
 Vue.use(VueClipboards)
 Vue.use(VueI18Next)
-Vue.use(VueLodash, helpers._)
+Vue.use(VueLodash, _)
 Vue.use(helpers)
 
 // ====================================
@@ -142,6 +143,13 @@ $(() => {
     store,
     i18n,
     el: '#root',
+    methods: {
+      changeTheme(opts) {
+        this.$el.className = `has-stickynav is-primary-${opts.primary} is-alternate-${opts.alt}`
+        this.$refs.header.className = `nav is-${opts.primary}`
+        this.$refs.footer.className = `footer is-${opts.footer}`
+      }
+    },
     mounted() {
       $('a:not(.toc-anchor)').smoothScroll({ speed: 500, offset: -50 })
       $('#header').sticky({ topSpacing: 0 })

client/js/helpers/index.js

@@ -1,7 +1,6 @@
 'use strict'
 
 const helpers = {
-  _: require('./lodash'),
   common: require('./common'),
   form: require('./form'),
   pages: require('./pages')

client/js/helpers/lodash.js

@@ -27,6 +27,7 @@ import reject from 'lodash/reject'
 import slice from 'lodash/slice'
 import split from 'lodash/split'
 import startCase from 'lodash/startCase'
+import startsWith from 'lodash/startsWith'
 import toString from 'lodash/toString'
 import toUpper from 'lodash/toUpper'
 import trim from 'lodash/trim'
@@ -35,7 +36,7 @@ import trim from 'lodash/trim'
 // Build lodash object
 // ====================================
 
-export default {
+module.exports = {
   deburr,
   concat,
   cloneDeep,
@@ -59,6 +60,7 @@ export default {
   slice,
   split,
   startCase,
+  startsWith,
   toString,
   toUpper,
   trim

client/js/pages/admin-theme.component.js

@@ -12,6 +12,17 @@ export default {
       codecolorize: 'true'
     }
   },
+  watch: {
+    primary(val) {
+      this.$root.changeTheme(this.$data)
+    },
+    alt(val) {
+      this.$root.changeTheme(this.$data)
+    },
+    footer(val) {
+      this.$root.changeTheme(this.$data)
+    }
+  },
   methods: {
     saveTheme() {
       let self = this