Merge pull request #16 from chrismayer/mapable

Introduce 'Mapable' mixin

src/components/layerlist/LayerList.vue

@@ -24,14 +24,14 @@
 </template>
 
 <script>
-  // Import the EventBus
-  import { WguEventBus } from '../../WguEventBus.js'
   import { DraggableWin } from '../../directives/DraggableWin.js';
+  import { Mapable } from '../../mixins/Mapable';
 
   export default {
     directives: {
       DraggableWin
     },
+    mixins: [Mapable],
     props: ['icon'],
     data () {
       return {
@@ -44,18 +44,13 @@
         top: '70px'
       }
     },
-    created () {
-      var me = this
-      // Listen to the ol-map-mounted event and receive the OL map instance
-      WguEventBus.$on('ol-map-mounted', function (olMap) {
-        // make the OL map accesible in this component
-        me.map = olMap;
-        // create the layer items from the OL map
-        me.createLayerItems();
-      });
-    },
     methods: {
-
+      /**
+       * This function is executed, after the map is bound (see mixins/Mapable)
+       */
+      onMapBound () {
+        this.createLayerItems();
+      },
       /**
        * Creates the layer items from the OpenLayers map.
        */

src/components/measuretool/MeasureWin.vue

@@ -37,9 +37,8 @@
 </template>
 
 <script>
-  // Import the EventBus
-  import { WguEventBus } from '../../WguEventBus.js'
-  import { DraggableWin } from '../../directives/DraggableWin.js';
+  import { DraggableWin } from '../../directives/DraggableWin';
+  import { Mapable } from '../../mixins/Mapable';
   import DrawInteraction from 'ol/interaction/draw'
   import LineStringGeom from 'ol/geom/linestring'
   import PolygonGeom from 'ol/geom/polygon'
@@ -56,6 +55,7 @@
     directives: {
       DraggableWin
     },
+    mixins: [Mapable],
     props: ['icon'],
     data () {
       return {
@@ -67,16 +67,6 @@
         top: '200px'
       }
     },
-    created () {
-      var me = this;
-      // Listen to the ol-map-mounted event and receive the OL map instance
-      WguEventBus.$on('ol-map-mounted', (olMap) => {
-        // make the OL map accesible in this component
-        me.map = olMap;
-
-        me.createMeasureLayer();
-      });
-    },
     watch: {
       show () {
         var me = this;
@@ -92,6 +82,12 @@
       }
     },
     methods: {
+      /**
+       * This function is executed, after the map is bound (see mixins/Mapable)
+       */
+      onMapBound () {
+        this.createMeasureLayer();
+      },
       /**
        * Creates a vector layer for the measurement results and adds it to the
        * map.

src/mixins/Mapable.js

@@ -0,0 +1,20 @@
+// import Vue from 'vue';
+
+import { WguEventBus } from '../WguEventBus.js'
+
+/**
+ * Mixin, which binds the OL map to the target component.
+ * Executes the onMapBound function of the target component, if available.
+ */
+export const Mapable = {
+  created: function () {
+    WguEventBus.$on('ol-map-mounted', (olMap) => {
+      // make the OL map accesible in this component
+      this.map = olMap;
+
+      if (this.onMapBound) {
+        this.onMapBound();
+      }
+    });
+  }
+};

test/unit/specs/layerlist/LayerList.spec.js

@@ -2,11 +2,6 @@ import Vue from 'vue'
 import LayerList from '@/components/layerlist/LayerList'
 
 describe('layerlist/LayerList.vue', () => {
-  // Inspect the raw component options
-  it('has a created hook', () => {
-    expect(typeof LayerList.created).to.equal('function');
-  });
-
   // Evaluate the results of functions in
   // the raw component options
   it('sets the correct default data', () => {

test/unit/specs/measuretool/MeasureWin.spec.js

@@ -2,11 +2,6 @@ import Vue from 'vue'
 import MeasureWin from '@/components/measuretool/MeasureWin'
 
 describe('measuretool/MeasureWin.vue', () => {
-  // Inspect the raw component options
-  it('has a created hook', () => {
-    expect(typeof MeasureWin.created).to.equal('function');
-  });
-
   // Evaluate the results of functions in
   // the raw component options
   it('sets the correct default data', () => {

test/unit/specs/mixins/Mapable.spec.js

@@ -0,0 +1,7 @@
+import Mapable from '@/mixins/Mapable'
+
+describe('Mapable.js', () => {
+  it('is defined', () => {
+    expect(typeof Mapable).to.not.equal(undefined);
+  });
+});