fix: Automatically load routePoints

examples/bundle.js

@@ -394,6 +394,7 @@
       this.callback = '__MapCountdownLoadMap';
       this.libraries = ['drawing'];
       this.routePoints = [];
+      this.maxDistance = 0;
       this.secondsPolyline = {};
       this.minutesPolyline = {};
       this.hoursPolyline = {};
@@ -479,6 +480,9 @@
       key: "setRoutePoints",
       value: function setRoutePoints(points) {
         this.routePoints = points;
+        this.maxDistance = Math.max.apply(Math, _toConsumableArray(points.map(function (point) {
+          return point.DistanceMeters;
+        })));
       }
     }, {
       key: "getRoutePoints",
@@ -494,11 +498,11 @@
         var minutesPath = [];
         var secondsPath = [];
         this.routePoints.forEach(function (point) {
-          var distance = point.DistanceMeters;
           var position = new google.maps.LatLng({
             lat: parseFloat(point.Position.LatitudeDegrees),
             lng: parseFloat(point.Position.LongitudeDegrees)
           });
+          var distance = point.DistanceMeters;
           var secondsMeters = parseFloat((1 - seconds) * maxDistance);
           var minutesMeters = parseFloat((1 - minutes) * maxDistance);
           var hoursMeters = parseFloat((1 - hours) * maxDistance);
@@ -530,6 +534,8 @@
     return Map;
   }();
 
+  var WINDOW_ROUTE_POINTS_KEY = '__MapCountdownRoutePoints';
+
   function styleInject(css, ref) {
     if ( ref === void 0 ) ref = {};
     var insertAt = ref.insertAt;
@@ -557,21 +563,25 @@
     }
   }
 
-  var css = ".map-countdown {\n\tposition: relative;\n    pointer-events: none;\n}\n\n.map-countdown__countdown {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: space-around;\n    z-index: 100;\n    width: 100%;\n    height: 100%;\n}\n\n.map-countdown__item {\n\twidth: 12%;\n}\n.map-countdown__number {\n\tcolor: #FFF;\n\tfont-size: 50pt;\n\tfont-family: 'Raleway', sans-serif;\n\tborder-bottom: 2px solid;\n\tfont-weight: 500;\n}\n.map-countdown__number--days {\n\tborder-color: #202808;\n}\n.map-countdown__number--hours {\n\tborder-color: #643627;\n}\n.map-countdown__number--minutes {\n\tborder-color: #822d76;\n}\n.map-countdown__number--seconds {\n\tborder-color: #afd02a;\n}\n.map-countdown__label {\n\tcolor: #FFF;\n    text-transform: uppercase;\n    font-weight: 100;\n    margin-top: 10%;\n    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;\n}\n\n.map-countdown__title {\n\tcolor: #FFF;\n    text-transform: uppercase;\n    font-weight: 100;\n    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;\n}\n\n.map-countdown__map {\n    width: 100%;\n    height: 100%;\n    /* min-height: 35vh; */\n}";
+  var css = ".map-countdown {\n\tposition: relative;\n    pointer-events: none;\n}\n\n.map-countdown__countdown {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: space-around;\n    z-index: 100;\n    width: 100%;\n    height: 100%;\n}\n\n.map-countdown__item {\n\twidth: 12%;\n}\n.map-countdown__number {\n\tcolor: #FFF;\n\tfont-size: 50pt;\n\tfont-family: 'Raleway', sans-serif;\n\tborder-bottom: 2px solid;\n\tfont-weight: 500;\n}\n.map-countdown__number--days {\n\tborder-color: #202808;\n}\n.map-countdown__number--hours {\n\tborder-color: #643627;\n}\n.map-countdown__number--minutes {\n\tborder-color: #822d76;\n}\n.map-countdown__number--seconds {\n\tborder-color: #afd02a;\n}\n.map-countdown__label {\n\tcolor: #FFF;\n    text-transform: uppercase;\n    font-weight: 100;\n    margin-top: 10%;\n    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;\n}\n\n.map-countdown__title {\n\tcolor: #FFF;\n    text-transform: uppercase;\n    font-weight: 100;\n    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;\n}\n\n.map-countdown__map {\n    width: 100%;\n    height: 100%;\n    min-height: 35vh;\n}";
   styleInject(css);
 
   var MapCountdown =
   /*#__PURE__*/
   function () {
     function MapCountdown(_ref) {
       var selector = _ref.selector,
-          routePoints = _ref.routePoints,
           key = _ref.key,
           meta = _ref.meta,
           translations = _ref.translations;
 
       _classCallCheck(this, MapCountdown);
 
+      if (!window[WINDOW_ROUTE_POINTS_KEY]) {
+        console.error("MapCountdown: route points are missing.\n      Did you include routePoints.js in head section?\n      Check for more information: https://github.com/dawidjaniga/map-countdown#add-mapcountdown");
+        return;
+      }
+
       this.containerElement = document.querySelector(selector);
       this.containerElement.classList.add('map-countdown');
       this.countdown = new Countdown({
@@ -583,7 +593,7 @@
         key: key,
         containerElement: this.containerElement
       });
-      this.map.setRoutePoints(routePoints);
+      this.map.setRoutePoints();
       this.attachEvents();
     }
 

examples/index.html

@@ -12,7 +12,6 @@
             var countdown = new MapCountdown({
                 selector: '#countdown',
                 key: GOOGLE_API_KEY,
-                routePoints: routePoints,
                 meta: '2019-07-13 11:00:00',
             })
         })

src/constants.js

@@ -0,0 +1 @@
+export const WINDOW_ROUTE_POINTS_KEY = '__MapCountdownRoutePoints'

src/map-countdown.js

@@ -1,9 +1,15 @@
 import Countdown from './countdown'
 import Map from './map/map'
+import { WINDOW_ROUTE_POINTS_KEY } from './constants'
+import { ROUTE_OPTIONS_MISSING_ERROR } from './texts'
 import './style.css'
 
 export default class MapCountdown {
-  constructor ({ selector, routePoints, key, meta, translations }) {
+  constructor ({ selector, key, meta, translations }) {
+    if (!window[WINDOW_ROUTE_POINTS_KEY]) {
+      console.error(ROUTE_OPTIONS_MISSING_ERROR)
+      return
+    }
     this.containerElement = document.querySelector(selector)
     this.containerElement.classList.add('map-countdown')
     this.countdown = new Countdown({
@@ -15,8 +21,11 @@ export default class MapCountdown {
       key,
       containerElement: this.containerElement
     })
-    this.map.setRoutePoints(routePoints)
+
+    this.map.setRoutePoints(window[WINDOW_ROUTE_POINTS_KEY])
     this.attachEvents()
+
+    delete window[WINDOW_ROUTE_POINTS_KEY]
   }
   attachEvents () {
     this.countdown.addEventListener(

src/route-parser.js

@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 import parser from 'xml2json'
-
+import { WINDOW_ROUTE_POINTS_KEY } from './constants'
 export default class RouteParser {
   constructor (file, outputFilePath) {
     this.file = file
@@ -10,14 +10,21 @@ export default class RouteParser {
 
   parse () {
     const parsedFile = this.parseFileToJson(this.file)
-    this.saveFile(this.outputFilePath, this.parsePoints(parsedFile))
+    this.saveFile(
+      this.outputFilePath,
+      this.makeWindowAttachable(this.parsePoints(parsedFile))
+    )
   }
 
   parseFileToJson (file) {
     const xml = fs.readFileSync(file, 'utf8')
     return JSON.parse(parser.toJson(xml))
   }
 
+  makeWindowAttachable (data) {
+    return `window.${WINDOW_ROUTE_POINTS_KEY} = ${JSON.stringify(data)}`
+  }
+
   saveFile (file, data) {
     const a = path.resolve(file)
     return fs.writeFileSync(a, data, 'utf8')

src/texts.js

@@ -0,0 +1,3 @@
+export const ROUTE_OPTIONS_MISSING = `MapCountdown: route points are missing.
+Did you include routePoints.js in head section?
+Check for more information: https://github.com/dawidjaniga/map-countdown#add-mapcountdown`

test/__snapshots__/map-countdown.spec.js.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MapCountdown should construct MapCountdown in provided container 1`] = `
+<body>
+  <div
+    class="map-countdown"
+    id="countdown"
+  />
+</body>
+`;

test/map-countdown.spec.js

@@ -0,0 +1,67 @@
+/* global document, jest, describe, it, expect, beforeEach, afterAll */
+import cloneDeep from 'lodash/cloneDeep'
+import MapCountdown from '../src/map-countdown'
+import routePoints from '../test/__fixtures__/routePoints'
+import { WINDOW_ROUTE_POINTS_KEY } from '../src/constants'
+import { ROUTE_OPTIONS_MISSING_ERROR } from '../src/texts'
+jest.mock('../src/map/map')
+jest.mock('../src/countdown')
+const originalDocument = cloneDeep(document)
+
+/* eslint-disable no-global-assign */
+describe('MapCountdown', () => {
+  const spiedConsole = jest.spyOn(console, 'error').mockImplementation()
+  const key = 'google-generated-api-key'
+  const options = {
+    selector: '#countdown',
+    key: key,
+    meta: '2019-07-13 11:00:00'
+  }
+
+  beforeEach(() => {
+    document = cloneDeep(originalDocument)
+    window[WINDOW_ROUTE_POINTS_KEY] = routePoints
+  })
+
+  afterAll(() => {
+    document = cloneDeep(originalDocument)
+    spiedConsole.mockRestore()
+    delete window[WINDOW_ROUTE_POINTS_KEY]
+  })
+
+  it('should construct MapCountdown in provided container', () => {
+    document.body.innerHTML = `<div id="countdown"></div>`
+    new MapCountdown(options) // eslint-disable-line no-new
+
+    expect(document.body).toMatchSnapshot()
+  })
+
+  it('should delete routePoints from window', () => {
+    document.body.innerHTML = `<div id="countdown"></div>`
+    new MapCountdown(options) // eslint-disable-line no-new
+    expect(window[WINDOW_ROUTE_POINTS_KEY]).not.toBeDefined()
+  })
+
+  it('updateMap() should run updatePolygons on Map', () => {
+    document.body.innerHTML = `<div id="countdown"></div>`
+    const mapCountdown = new MapCountdown(options)
+    const args = {
+      days: 1,
+      hours: 2
+    }
+    mapCountdown.updateMap(args)
+    expect(mapCountdown.map.updatePolygons).toBeCalledWith(
+      ...Object.values(args)
+    )
+  })
+
+  it('should print error in console when routePoints is missing', () => {
+    delete window[WINDOW_ROUTE_POINTS_KEY]
+    document.body.innerHTML = `<div id="countdown"></div>`
+    new MapCountdown(options) // eslint-disable-line no-new
+
+    expect(spiedConsole).toBeCalledWith(ROUTE_OPTIONS_MISSING_ERROR)
+  })
+})
+
+/* eslint-enable no-global-assign */