refactor: move eventBus to standalone module

Fixes #324

src/app.js

@@ -6,6 +6,8 @@ import Confirm from '@/fragments/dialogs/confirm/Confirm'
 import Info from '@/fragments/dialogs/info/Info'
 import MainMenu from '@/common/main-menu'
 import utils from '@/support/utils'
+import {EventBus} from '@/common/event-bus'
+
 
 export default {
   data () {
@@ -25,17 +27,17 @@ export default {
   },
   created () {
     // Register the listener for the showLoading and titleChanged events
-    this.eventBus.$on('showLoading', (value) => {
+    EventBus.$on('showLoading', (value) => {
       this.showLoading = value
     })
-    this.eventBus.$on('titleChanged', (title) => {
+    EventBus.$on('titleChanged', (title) => {
       this.title = title
     })
     const favIcon = document.getElementById('favIcon')
     favIcon.href = utils.getImgSrc('favIcon')
   },
   mounted() {
-    this.eventBus.$on('appLoaded', () => {
+    EventBus.$on('appLoaded', () => {
       MainMenu.adjustMenu()
     })
   },

src/common/event-bus.js

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+
+// Create a global event bus, so all the components
+// can access it to emit and capture events using EventBus
+export const EventBus = new Vue()

src/common/global-mixins.js

@@ -1,7 +1,8 @@
 import * as showToaster from './show-toaster-mixin'
 import appConstants from '@/resources/constants'
 import AppHooks from '@/support/app-hooks'
-import AppLoader from '@/app-loader'
+import {EventBus} from '@/common/event-bus'
+
 
 const globalMixins = {
   data: () => ({
@@ -15,11 +16,10 @@ const globalMixins = {
       confirm.text = text
       confirm.title = title
       confirm.neverOption = options && options.neverOption
-      let VueInstance = AppLoader.getInstance()
-      VueInstance.eventBus.$emit('triggerConfirm', confirm)
+      EventBus.$emit('triggerConfirm', confirm)
 
       return new Promise((resolve, reject) => {
-        VueInstance.eventBus.$on('confirmAnswered', (result) => {
+        EventBus.$on('confirmAnswered', (result) => {
           if (result.response === 'yes') {
             resolve(result)
           } else {
@@ -32,11 +32,10 @@ const globalMixins = {
       const info = options || {}
       info.text = text
       info.title = title
-      let VueInstance = AppLoader.getInstance()
-      VueInstance.eventBus.$emit('triggerShowInfo', info)
+      EventBus.$emit('triggerShowInfo', info)
 
       return new Promise((resolve) => {
-        VueInstance.eventBus.$on('infoOk', () => {
+        EventBus.$on('infoOk', () => {
           resolve()
         })
       })

src/common/prepared-vue.js

@@ -114,11 +114,6 @@ Vue.use(VeeValidate)
 // Managing Date and Times
 Vue.use(VueMoment)
 
-// Create a global event bus, so all the components
-// can access it to emit and capture events using this.eventBus
-const eventBus = new Vue()
-Vue.prototype.eventBus = eventBus
-
 // turn off console message saying we are in dev mode
 Vue.config.productionTip = false
 

src/common/show-toaster-mixin.js

@@ -1,14 +1,13 @@
-import AppLoader from '@/app-loader'
+import {EventBus} from '@/common/event-bus'
+
 
 const showMessage = (msg, theme, options) => {
   options = options || {}
-  let VueInstance = AppLoader.getInstance()
-  VueInstance.eventBus.$emit('showSnack', { message: msg, theme: theme, options: options })
+  EventBus.$emit('showSnack', { message: msg, theme: theme, options: options })
 }
 
 const hideMessages = () => {
-  let VueInstance = AppLoader.getInstance()
-  VueInstance.eventBus.$emit('hideSnack')
+  EventBus.$emit('hideSnack')
 }
 
 const showError = (msg, options) => {

src/fragments/box/box.js

@@ -12,6 +12,8 @@
  */
 import theme from '@/config/theme'
 import utils from '@/support/utils'
+import {EventBus} from '@/common/event-bus'
+
 
 export default {
   props: {
@@ -84,14 +86,14 @@ export default {
     // that allow us to synchronize the maximized boxes
     // setting each to not maximized if they are not the
     // last one (over the others)
-    this.eventBus.$on('boxMaximizedStackChanged', function (value) {
+    EventBus.$on('boxMaximizedStackChanged', function (value) {
       context.syncBoxesMaximized(value)
     })
 
     // The box component listen to `closeBox` event so that
     // it is possible to close a box via eventBus, passing the
     // box guid
-    this.eventBus.$on('closeBox', function (boxGuid) {
+    EventBus.$on('closeBox', function (boxGuid) {
       if (context.guid === boxGuid) {
         context.close()
       }
@@ -100,7 +102,7 @@ export default {
     // it is possible to resize a box via eventBus, passing the
     // an object containing the boxGuid and maximized boolean property
     // like {boxGuid: <the-guid>, maximized: true}
-    this.eventBus.$on('resizeBox', function (data) {
+    EventBus.$on('resizeBox', function (data) {
       if (context.guid === data.boxGuid) {
         context.resize(data.maximized)
       }
@@ -236,7 +238,7 @@ export default {
 
       // Tell every body that the box was maximized/minimized
       const globalEvent = this.maximized ? 'boxMaximized' : 'boxMinimized'
-      this.eventBus.$emit(globalEvent, { maximized: maximized, guid: this.guid })
+      EventBus.$emit(globalEvent, { maximized: maximized, guid: this.guid })
 
       // Ff is not maximized, remove this box from the maximized stack
       if (!this.maximized) {

src/fragments/box/box.store.js

@@ -1,4 +1,4 @@
-import AppLoader from '@/app-loader'
+import {EventBus} from '@/common/event-bus'
 
 const state = {
   boxMaximizedStack: null
@@ -13,8 +13,7 @@ const getters = {
 const mutations = {
   boxMaximizedStack: (state, value) => {
     state.boxMaximizedStack = value
-    let VueInstance = AppLoader.getInstance()
-    VueInstance.eventBus.$emit('boxMaximizedStackChanged', value)
+    EventBus.$emit('boxMaximizedStackChanged', value)
   }
 }
 

src/fragments/charts/altitude/altitude.js

@@ -2,6 +2,7 @@ import LineChart from '@/fragments/charts/line-chart/line-chart'
 import ChartWrapper from '@/fragments/charts/chart-wrapper/ChartWrapper'
 import AltitudeDataParser from './altitude-parser'
 import MapViewData from '@/models/map-view-data'
+import {EventBus} from '@/common/event-bus'
 
 export default {
   props: {
@@ -36,7 +37,7 @@ export default {
     this.build()
 
     // Rebuild altitude data when the active route index change
-    this.eventBus.$on('activeRouteIndexChanged', this.build)
+    EventBus.$on('activeRouteIndexChanged', this.build)
   },
   computed: {
     altitudeData () {
@@ -78,11 +79,11 @@ export default {
     },
     chartHoverIndexChanged (index) {
       if (this.propagateActivePoint) {
-        this.eventBus.$emit('altitudeChartHoverIndexChanged', index)
+        EventBus.$emit('altitudeChartHoverIndexChanged', index)
       }
     },
     mouseLeftChart () {
-      this.eventBus.$emit('mouseLeftChartAltitudeChart')
+      EventBus.$emit('mouseLeftChartAltitudeChart')
     }
   }
 }

src/fragments/dialogs/confirm/confirm.js

@@ -1,4 +1,6 @@
 import utils from '@/support/utils'
+import {EventBus} from '@/common/event-bus'
+
 export default {
   data: () => ({
     confirmPromise: null,
@@ -37,21 +39,21 @@ export default {
     },
     onYes () {
       this.show = false
-      this.eventBus.$emit('confirmAnswered', { response: 'yes', guid: this.guid })
+      EventBus.$emit('confirmAnswered', { response: 'yes', guid: this.guid })
     },
     onNo () {
       this.show = false
-      this.eventBus.$emit('confirmAnswered', { response: 'no', guid: this.guid })
+      EventBus.$emit('confirmAnswered', { response: 'no', guid: this.guid })
     },
     onNever () {
       this.show = false
-      this.eventBus.$emit('confirmAnswered', { response: 'never', guid: this.guid })
+      EventBus.$emit('confirmAnswered', { response: 'never', guid: this.guid })
     }
   },
   created () {
     this.guid = utils.guid('confirm')
     this.$emit('confirmCreated', this.guid)
-    this.eventBus.$on('triggerConfirm', (confirm) => {
+    EventBus.$on('triggerConfirm', (confirm) => {
       this.showDialog(confirm)
     })
   }

src/fragments/dialogs/info/info.js

@@ -1,4 +1,6 @@
 import utils from '@/support/utils'
+import {EventBus} from '@/common/event-bus'
+
 export default {
   data: () => ({
     infoPromise: null,
@@ -35,13 +37,13 @@ export default {
       event.preventDefault()
       event.stopPropagation()
       this.show = false
-      this.eventBus.$emit('infoOk', { event: 'ok', guid: this.guid })
+      EventBus.$emit('infoOk', { event: 'ok', guid: this.guid })
     }
   },
   created () {
     this.guid = utils.guid('info')
     this.$emit('infoCreated', this.guid)
-    this.eventBus.$on('triggerShowInfo', (info) => {
+    EventBus.$on('triggerShowInfo', (info) => {
       this.showDialog(info)
     })
   }

src/fragments/forms/fields-container/components/form-fields/form-fields.js

@@ -1,7 +1,7 @@
-
 import dependencyService from '@/support/dependency-service.js'
 import defaultMapSettings from '@/config/default-map-settings'
 import SliderCombo from '../slider-combo/SliderCombo.vue'
+import {EventBus} from '@/common/event-bus'
 
 export default {
   props: {
@@ -28,7 +28,7 @@ export default {
 
     // Every time the active console tab changes
     // we refresh the single parameter model
-    this.eventBus.$on('filtersChangedExternally', () => {
+    EventBus.$on('filtersChangedExternally', () => {
       context.updateFieldsStatus()
       context.$forceUpdate()
     })

src/fragments/forms/map-form/components/isochrones/components/isochrones-details/isochrones-details.js

@@ -4,6 +4,8 @@ import Print from '@/fragments/forms/map-form/components/print/Print'
 import PolygonUtils from '@/support/polygon-utils'
 import MapViewData from '@/models/map-view-data'
 import Utils from '@/support/utils'
+import {EventBus} from '@/common/event-bus'
+
 
 export default {
   data: () => ({
@@ -39,12 +41,12 @@ export default {
       return PolygonUtils.hasPlaceAsCenter(place, polygon)
     },
     toggleVisibility (polygonIndex) {
-      this.eventBus.$emit('togglePolygonVisibility', polygonIndex)
+      EventBus.$emit('togglePolygonVisibility', polygonIndex)
     },
 
     polygonOpacityChanged (polygonIndex) {
       let fillOpacity = this.localMapViewData.polygons[polygonIndex].properties.fillOpacity
-      this.eventBus.$emit('setPolygonOpacity', {polygonIndex, fillOpacity })
+      EventBus.$emit('setPolygonOpacity', {polygonIndex, fillOpacity })
     }
   },
   watch: {

src/fragments/forms/map-form/components/isochrones/isochrones.js

@@ -10,6 +10,7 @@ import constants from '@/resources/constants'
 import appConfig from '@/config/app-config'
 import Draggable from 'vuedraggable'
 import Place from '@/models/place'
+import {EventBus} from '@/common/event-bus'
 
 // Local components
 import IschronesDetails from './components/isochrones-details/IsochronesDetails'
@@ -39,13 +40,13 @@ export default {
     this.loadData()
     const context = this
     // When the filters object has changed externally, reprocess the app route
-    this.eventBus.$on('filtersChangedExternally', () => {
+    EventBus.$on('filtersChangedExternally', () => {
       if (context.active) {
         context.updateAppRoute()
       }
     })
     // When the user click on a marker to remove it
-    this.eventBus.$on('removePlace', (data) => {
+    EventBus.$on('removePlace', (data) => {
       if (context.active) {
         context.removePlace(data)
       }
@@ -54,7 +55,7 @@ export default {
     /**
      * Update local object when a mapViewData is uploaded
      */
-    this.eventBus.$on('mapViewDataUploaded', (mapViewData) => {
+    EventBus.$on('mapViewDataUploaded', (mapViewData) => {
       if (context.active) {
         context.mapViewData = mapViewData
         context.places = mapViewData.places
@@ -65,15 +66,15 @@ export default {
      * If the map data view has changed and this component
      * is not active, then reset its data to the initial state
      */
-    this.eventBus.$on('mapViewDataChanged', () => {
+    EventBus.$on('mapViewDataChanged', () => {
       if (!context.active) {
         context.mapViewData = new MapViewData()
         context.places = [new Place()]
       }
     })
 
     // Avoid polygons changed, so recalculate the route
-    this.eventBus.$on('avoidPolygonsChanged', (polygons) => {
+    EventBus.$on('avoidPolygonsChanged', (polygons) => {
       if (context.active) {
         context.$root.appHooks.run('avoidPolygonsChangedInIsochrones', polygons)
         context.avoidPolygonsFilterAccessor.value = polygons
@@ -84,13 +85,13 @@ export default {
       }
     })
     // When the user click on the map and select to add this point as an additional destination in the route
-    this.eventBus.$on('addAsIsochroneCenter', (data) => {
+    EventBus.$on('addAsIsochroneCenter', (data) => {
       context.addAsIsochroneCenter(data)
     })
 
     // When a marker drag finishes, update
     // the place coordinates and re render the map
-    this.eventBus.$on('markerDragged', (marker) => {
+    EventBus.$on('markerDragged', (marker) => {
       if (context.active) {
         const place = new Place(marker.position.lng, marker.position.lat)
         context.places[marker.inputIndex] = place
@@ -100,7 +101,7 @@ export default {
       }
     })
 
-    this.eventBus.$on('setInputPlace', (data) => {
+    EventBus.$on('setInputPlace', (data) => {
       if (context.active) {
         context.places[data.pickPlaceIndex] = data.place
         let filledPlaces = context.getFilledPlaces()

src/fragments/forms/map-form/components/map-form-mixin.js

@@ -5,6 +5,7 @@ import AppRouteData from '@/models/app-route-data'
 import MapViewData from '@/models/map-view-data'
 import constants from '@/resources/constants'
 import Place from '@/models/place'
+import {EventBus} from '@/common/event-bus'
 
 export default {
   props: {
@@ -125,8 +126,8 @@ export default {
       this.addPlaceInput()
       this.$store.commit('appRouteData', new AppRouteData())
       this.$store.commit('mode', constants.modes.place)
-      this.eventBus.$emit('mapViewDataChanged', this.mapViewData)
-      this.eventBus.$emit('clearMap')
+      EventBus.$emit('mapViewDataChanged', this.mapViewData)
+      EventBus.$emit('clearMap')
       this.updateAppRoute()
     },
     /**