Deal with events like services

global.js

import Vue from 'vue'

const actions = {
  SHOW: 'SHOW',
  MESSAGE: 'MESSAGE',
  HIDE: 'HIDE'
}

function newGlobalEvent (eventName = '') {
  const bus = new Vue()
  const name = `global-${eventName}:event`
  const ref = {}

  function generic (action) {
    bus.$emit(name, action)
  }

  function show (payload = true) {
    generic({ type: actions.SHOW, payload })
    return ref
  }

  function hide (payload = true) {
    generic({ type: actions.HIDE, payload })
    return ref
  }

  function message (payload = {}) {
    generic({ type: actions.MESSAGE, payload })
    return ref
  }

  function on (callback) {
    bus.$on(name, callback)
    return ref
  }

  function off (callback) {
    bus.$off(name, callback)
    return ref
  }

  ref.show = show
  ref.hide = hide
  ref.message = message
  ref.on = on
  ref.off = off

  return ref
}

const global = {
  loading: newGlobalEvent('loading'),
  drawer: {
    right: newGlobalEvent('drawer-right')
  },
  notification: {
    main: newGlobalEvent('notification-main')
  }
}

export default global