q42-cms-components/cms.js

require('object-fit-cover');

require('./resources/icomoon/style.css');
require('./tools/vuedraggable.scss');
require('./tools/vue-delete.scss');
require('./style.scss');
import { doc } from './docs/doc.js';

var moment = require('moment');
moment.locale('nl');

export var Vue = window.Vue = require('vue');
import VueRouter from 'vue-router'

Vue.options.replace = true;
Vue.use(VueRouter);
Vue.use(require('./tools/vue-scroll-stop.js'));
Vue.component('drop-down', require('./shared/dropdown-menu.vue'));

Vue.component('schema-component-part', require('./schema/schema-component-part.vue'));
Vue.component('redirect-test-button', require('./schema/fields/redirect-test-button.vue'));
Vue.component('redirect-to', require('./schema/fields/redirect-to.vue'));

const routes = [
  { path: '/', redirect: '/pages' }
]

import { statusStore } from './tools/status-store.js';
import { crudFactory } from './crud/crud-factory.js';

export const routeComponent = doc((path, component) => {
  routes.push({
    path,
    component,
    children: component.children
  });
}, `Koppel het component aan het pad <code>path</code> incl. de <code>children</code> (subroutes) van het component. Gebruik eigen componenten of
    gebruik één van de functies uit crud-factory.js.`);

export const runCms = doc(() => {
  routeComponent('/assets', require('./assets/assets.vue'));
  routeComponent('/pages', require('./pages/pages.vue'));
  routeComponent('/cms-docs', require('./docs/docs.vue'));
  routeComponent('/redirects', crudFactory({ itemName: 'redirect', fields: ['description', 'from'], customFields: {'Redirect naar': 'redirect-to', 'Testen': 'redirect-test-button'} }));

  const router = new VueRouter({
    mode: 'history',
    linkActiveClass: 'active',
    routes
  });

  // Inject alerter
  const routerViewEl = document.querySelector('router-view');
  const alerter = document.createElement('alerter');
  alerter.setAttribute('ref', 'alerter');
  routerViewEl.parentNode.insertBefore(alerter, routerViewEl);

  window.app = new Vue({
    el: '#cms-app',
    router,
    ...require('./root-component.vue')
  });

  // Keep the login session alive.
  window.setInterval(() => {
    statusStore.ping();
  }, 5 * 60 * 1000);

}, `Start het CMS.`);

export const runCmsOnLoad = doc(() => {
  document.addEventListener("DOMContentLoaded", runCms);
}, `Start <code>runCms</code> op het <code>DOMContentLoaded</code> event. Hiermee kan je <code>q42-cms-components</code>
    requiren in een script die in de <code>&lt;head></code> staat.`)