feat: Init based on prototype

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ]
+  ]
+}

examples/bundle.js

@@ -0,0 +1,197 @@
+
+(function(l, i, v, e) { v = l.createElement(i); v.async = 1; v.src = '//' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; e = l.getElementsByTagName(i)[0]; e.parentNode.insertBefore(v, e)})(document, 'script');
+var MapCountdown = (function () {
+  'use strict';
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+  }
+
+  var Countdown =
+  /*#__PURE__*/
+  function () {
+    function Countdown(containerSelector) {
+      var _this = this;
+
+      _classCallCheck(this, Countdown);
+
+      this.meta = new Date(2019, 6, 13, 11);
+      this.oneDayMilliseconds = 86400000;
+      this.beginOfYear = new Date(this.meta.getFullYear(), 0, 0);
+      this.metaDaysNumberDiff = this.meta - this.beginOfYear;
+      this.metaDayNumberInYear = Math.floor(this.metaDaysNumberDiff / this.oneDayMilliseconds);
+      this.elements = {
+        days: {
+          testId: 'map-countdown-days'
+        },
+        hours: {
+          testId: 'map-countdown-hours'
+        },
+        minutes: {
+          testId: 'map-countdown-minutes'
+        },
+        seconds: {
+          testId: 'map-countdown-seconds'
+        }
+      };
+      this.containerEl = document.querySelector(containerSelector);
+      var fragment = document.createDocumentFragment();
+      Object.values(this.elements).forEach(function (item) {
+        var element = _this.createElement('div', item.testId);
+
+        item.element = element;
+        fragment.appendChild(element);
+      });
+      this.containerEl.appendChild(fragment);
+      this.events = {};
+      this.recountTime();
+      this.counterHandler = setInterval(function () {
+        return _this.recountTime();
+      }, 1000);
+    }
+
+    _createClass(Countdown, [{
+      key: "addEventListener",
+      value: function addEventListener(name, callback) {
+        if (!this.events[name]) {
+          this.events[name] = [];
+        }
+
+        this.events[name].push(callback);
+        console.log('events:', this.events);
+      }
+    }, {
+      key: "dispatchEvent",
+      value: function dispatchEvent(name, args) {
+        var eventListeners = this.events[name];
+
+        if (eventListeners) {
+          eventListeners.forEach(function (listener) {
+            return listener(args);
+          });
+        }
+      }
+    }, {
+      key: "createElement",
+      value: function createElement(tag, testId) {
+        var element = document.createElement(tag);
+        element.setAttribute('data-testid', testId);
+        return element;
+      }
+    }, {
+      key: "setElementValue",
+      value: function setElementValue(name, value) {
+        this.elements[name].element.innerHTML = value;
+      }
+    }, {
+      key: "recountTime",
+      value: function recountTime() {
+        var now = new Date();
+        var diff = new Date(this.meta - now);
+        var daysNumberDiff = new Date(now - this.beginOfYear);
+        var currentDayNumberInYear = Math.floor(daysNumberDiff / this.oneDayMilliseconds);
+        var days = this.metaDayNumberInYear - currentDayNumberInYear;
+        var hours = diff.getHours();
+        var minutes = diff.getMinutes();
+        var seconds = diff.getSeconds();
+        var daysRatio = currentDayNumberInYear / this.metaDayNumberInYear;
+        var hoursRatio = diff.getHours() / 24;
+        var minutesRatio = diff.getMinutes() / 60;
+        var secondsRatio = diff.getSeconds() / 60;
+        this.dispatchEvent('countdown:recount', {
+          days: daysRatio,
+          hours: hoursRatio,
+          minutes: minutesRatio,
+          seconds: secondsRatio
+        });
+        this.setElementValue('days', days);
+        this.setElementValue('hours', hours);
+        this.setElementValue('minutes', minutes);
+        this.setElementValue('seconds', seconds);
+      }
+    }]);
+
+    return Countdown;
+  }(); // google.maps.event.addDomListener(window, 'load', function () {
+
+  var Map =
+  /*#__PURE__*/
+  function () {
+    function Map() {// this.loadMaps()
+
+      _classCallCheck(this, Map);
+    }
+
+    _createClass(Map, [{
+      key: "updatePolygon",
+      value: function updatePolygon(name, value) {} // console.log('name:', name)
+      //   async loadMaps () {
+      //     console.log('loadMaps:')
+      //     try {
+      //       const googleMaps = await loadGoogleMapsApi({
+      //         key: 'AIzaSyCYkWHZM0ZdO1JeJGBqo44wLlQz31lh-zM',
+      //         libraries: ['drawing']
+      //       })
+      //       this.map = new googleMaps.Map(document.querySelector('#map'), {
+      //         center: {
+      //           lat: 40.7484405,
+      //           lng: -73.9944191
+      //         },
+      //         zoom: 12
+      //       })
+      //     } catch (e) {
+      //       console.error('Maps errors', e)
+      //     }
+      //   }
+
+    }]);
+
+    return Map;
+  }();
+
+  var MapCountdown =
+  /*#__PURE__*/
+  function () {
+    function MapCountdown(containerSelector) {
+      _classCallCheck(this, MapCountdown);
+
+      this.countdown = new Countdown(containerSelector);
+      this.map = new Map();
+      this.countdown.addEventListener('countdown:recount', this.updateMap.bind(this));
+    }
+
+    _createClass(MapCountdown, [{
+      key: "updateMap",
+      value: function updateMap(ratios) {
+        var _this = this;
+
+        Object.keys(ratios).forEach(function (name) {
+          _this.map.updatePolygon(name, ratios[name]);
+        });
+      }
+    }]);
+
+    return MapCountdown;
+  }();
+
+  return MapCountdown;
+
+}());

examples/index.html

@@ -0,0 +1,29 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="bundle.js"></script>
+    <script>
+        window.addEventListener('DOMContentLoaded', function () {
+            var countdown = new MapCountdown('#countdown')
+        })
+    </script>
+    <style>
+        #map {
+            width: 500px;
+            height: 500px;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div id="countdown"></div>
+    <div id="map"></div>
+
+</body>
+
+</html>

jest.setup.js

@@ -0,0 +1 @@
+import 'jest-dom/extend-expect'

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "countdown-on-map",
+  "version": "0.0.1",
+  "description": "Display the countdown on a map via polygons",
+  "main": "index.js",
+  "repository": "git@github.com:dawidjaniga/countdown-on-map.git",
+  "author": "Dawid Janiga <dawidjaniga@gmail.com>",
+  "license": "MIT",
+  "scripts": {
+    "test": "standard && jest test",
+    "test:watch": "jest test --watch",
+    "prebuild": "rm -rf dist",
+    "build": "rollup -c",
+    "dev": "rollup -c -w"
+  },
+  "devDependencies": {
+    "@babel/core": "7.4.5",
+    "@babel/preset-env": "7.4.5",
+    "@testing-library/dom": "5.2.0",
+    "babel-jest": "24.8.0",
+    "jest": "24.8.0",
+    "jest-dom": "3.5.0",
+    "mockdate": "2.0.3",
+    "nodemon": "1.19.1",
+    "parcel": "1.12.3",
+    "rollup": "1.15.6",
+    "rollup-plugin-babel": "4.3.2",
+    "rollup-plugin-livereload": "1.0.1",
+    "rollup-plugin-node-resolve": "5.0.3",
+    "rollup-plugin-serve": "1.0.1",
+    "standard": "12.0.1"
+  },
+  "standard": {
+    "ignore": [
+      "dist"
+    ]
+  },
+  "jest": {
+    "verbose": true,
+    "setupFilesAfterEnv": [
+      "./jest.setup.js"
+    ],
+    "collectCoverage": true
+  },
+  "dependencies": {
+    "lodash": "4.17.11"
+  }
+}

rollup.config.js

@@ -0,0 +1,32 @@
+import resolve from 'rollup-plugin-node-resolve'
+import babel from 'rollup-plugin-babel'
+import serve from 'rollup-plugin-serve'
+import livereload from 'rollup-plugin-livereload'
+
+import pkg from './package.json'
+
+export default {
+  input: 'src/map-countdown.js',
+  output: [
+    {
+      file: 'examples/bundle.js',
+      format: 'iife',
+      name: 'MapCountdown'
+    }
+  ],
+  sourcemap: true,
+  external: [...Object.keys(pkg.dependencies || {})],
+  plugins: [
+    resolve(),
+    babel({
+      babelrc: false,
+      presets: [['@babel/env', { modules: false }]],
+      exclude: 'node_modules/**'
+    }),
+    livereload('examples'),
+    serve({
+      open: true,
+      contentBase: './examples/'
+    })
+  ]
+}