refactor: client structure + editor preview logic

client/modules/boot.js

@@ -0,0 +1,68 @@
+export default {
+  readyStates: [],
+  callbacks: [],
+  /**
+   * Check if event has been sent
+   *
+   * @param {String} evt Event name
+   * @returns {Boolean} True if fired
+   */
+  isReady (evt) {
+    return this.readyStates.indexOf(evt) >= 0
+  },
+  /**
+   * Register a callback to be executed when event is sent
+   *
+   * @param {String} evt Event name to register to
+   * @param {Function} clb Callback function
+   * @param {Boolean} once If the callback should be called only once
+   */
+  register (evt, clb, once) {
+    if (this.isReady(evt)) {
+      clb()
+    } else {
+      this.callbacks.push({
+        event: evt,
+        callback: clb,
+        once: false,
+        called: false
+      })
+    }
+  },
+  /**
+   * Register a callback to be executed only once when event is sent
+   *
+   * @param {String} evt Event name to register to
+   * @param {Function} clb Callback function
+   */
+  registerOnce (evt, clb) {
+    this.register(evt, clb, true)
+  },
+  /**
+   * Set ready state and execute callbacks
+   */
+  notify (evt) {
+    this.readyStates.push(evt)
+    this.callbacks.forEach(clb => {
+      if (clb.event === evt) {
+        if (clb.once && clb.called) {
+          return
+        }
+        clb.called = true
+        clb.callback()
+      }
+    })
+  },
+  /**
+   * Execute callback on DOM ready
+   *
+   * @param {Function} clb Callback function
+   */
+  onDOMReady (clb) {
+    if (document.readyState === 'interactive' || document.readyState === 'complete' || document.readyState === 'loaded') {
+      clb()
+    } else {
+      document.addEventListener('DOMContentLoaded', clb)
+    }
+  }
+}

client/modules/localization.js

@@ -0,0 +1,52 @@
+import i18next from 'i18next'
+import i18nextXHR from 'i18next-xhr-backend'
+import i18nextCache from 'i18next-localstorage-cache'
+import VueI18Next from '@panter/vue-i18next'
+import loSet from 'lodash/set'
+
+/* global siteConfig, graphQL, CONSTANTS */
+
+module.exports = {
+  VueI18Next,
+  init() {
+    i18next
+      .use(i18nextXHR)
+      .use(i18nextCache)
+      .init({
+        backend: {
+          loadPath: '{{lng}}/{{ns}}',
+          parse: (data) => data,
+          ajax: (url, opts, cb, data) => {
+            let langParams = url.split('/')
+            graphQL.query({
+              query: CONSTANTS.GRAPHQL.GQL_QUERY_TRANSLATIONS,
+              variables: {
+                locale: langParams[0],
+                namespace: langParams[1]
+              }
+            }).then(resp => {
+              let ns = {}
+              if (resp.data.translations.length > 0) {
+                resp.data.translations.forEach(entry => {
+                  loSet(ns, entry.key, entry.value)
+                })
+              }
+              return cb(ns, {status: '200'})
+            }).catch(err => {
+              console.error(err)
+              return cb(null, {status: '404'})
+            })
+          }
+        },
+        cache: {
+          enabled: true,
+          expiration: 60 * 60 * 1000
+        },
+        defaultNS: 'common',
+        lng: siteConfig.lang,
+        fallbackLng: siteConfig.lang,
+        ns: ['common', 'auth']
+      })
+    return new VueI18Next(i18next)
+  }
+}