Skip to content

Commit

Permalink
feat(map-countdown): Show countdown above the map
Browse files Browse the repository at this point in the history
  • Loading branch information
@dawidjaniga
dawidjaniga committed Jun 21, 2019
1 parent 5704a79 commit 1b4e1c4
Show file tree
Hide file tree
Showing 9 changed files with 311 additions and 139 deletions.
127 changes: 97 additions & 30 deletions examples/bundle.js
View file
Expand Up @@ -82,39 +82,58 @@ var MapCountdown = (function () {
var Countdown =
/*#__PURE__*/
function () {
function Countdown(containerSelector) {
function Countdown(containerElement) {
var _this = this;

_classCallCheck(this, Countdown);

this.containerElement = containerElement;
this.countdownContainer = document.createElement('div');
this.countdownContainer.classList.add('map-countdown__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'
testId: 'map-countdown-days',
text: 'Dni'
},
hours: {
testId: 'map-countdown-hours'
testId: 'map-countdown-hours',
text: 'Godzin'
},
minutes: {
testId: 'map-countdown-minutes'
testId: 'map-countdown-minutes',
text: 'Minut'
},
seconds: {
testId: 'map-countdown-seconds'
testId: 'map-countdown-seconds',
text: 'Sekund'
}
};
this.containerEl = document.querySelector(containerSelector);
var fragment = document.createDocumentFragment();
Object.values(this.elements).forEach(function (item) {
var element = _this.createElement('div', item.testId);

Object.keys(this.elements).forEach(function (itemName) {
var elementFragment = document.createDocumentFragment();
var item = _this.elements[itemName];
var element = document.createElement('div');

var number = _this.createElement('div', item.testId);

var text = document.createElement('h4');
element.classList.add('map-countdown__item');
text.classList.add('map-countdown__label');
text.textContent = item.text;
elementFragment.appendChild(element);
element.appendChild(number);
element.appendChild(text);
number.classList.add('map-countdown__number', "map-countdown__number--".concat(itemName));
fragment.appendChild(elementFragment);
item.element = element;
fragment.appendChild(element);
});
this.containerEl.appendChild(fragment);
this.countdownContainer.appendChild(fragment);
this.containerElement.appendChild(this.countdownContainer);
this.events = {};
this.recountTime();
this.counterHandler = setInterval(function () {
Expand All @@ -130,7 +149,6 @@ var MapCountdown = (function () {
}

this.events[name].push(callback);
console.log('events:', this.events);
}
}, {
key: "dispatchEvent",
Expand All @@ -153,7 +171,8 @@ var MapCountdown = (function () {
}, {
key: "setElementValue",
value: function setElementValue(name, value) {
this.elements[name].element.innerHTML = value;
var number = this.elements[name].element.querySelector('div');
number.textContent = value;
}
}, {
key: "recountTime",
Expand Down Expand Up @@ -184,7 +203,7 @@ var MapCountdown = (function () {
}]);

return Countdown;
}(); // google.maps.event.addDomListener(window, 'load', function () {
}();

var mapStyle = [{
featureType: 'all',
Expand Down Expand Up @@ -321,7 +340,7 @@ var MapCountdown = (function () {
var _this = this;

var key = _ref.key,
selector = _ref.selector,
containerElement = _ref.containerElement,
options = _ref.options;

_classCallCheck(this, Map);
Expand All @@ -334,11 +353,14 @@ var MapCountdown = (function () {
this.minutesPolyline = {};
this.hoursPolyline = {};
this.daysPolyline = {};
this.mapContainer = document.createElement('div');
this.mapContainer.classList.add('map-countdown__map');
containerElement.appendChild(this.mapContainer);

window[this.callback] = function () {
delete window[_this.callback];

_this.loadMap(selector, options);
_this.loadMap(_this.mapContainer, options);

_this.initPolygons();
};
Expand All @@ -360,22 +382,29 @@ var MapCountdown = (function () {
script.setAttribute('async', true);
return script;
}
}, {
key: "getMapContainer",
value: function getMapContainer() {
return this.mapContainer;
}
}, {
key: "loadMap",
value: function loadMap(mapContainerSelector) {
value: function loadMap(mapContainer) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var defaultOptions = {
zoom: 14,
center: {
lat: 53.79061631330304,
lng: 17.242156863212585
lat: 53.79564218580562,
lng: 17.285329699516296
},
backgroundColor: COLORS.MAP_BACKGROUND,
mapTypeId: 'terrain',
mapTypeId: 'roadmap',
scrollwheel: false,
styles: mapStyle
styles: mapStyle,
disableDefaultUI: true
};
this.map = new google.maps.Map(document.querySelector(mapContainerSelector), _objectSpread({}, defaultOptions, options));
this.map = new google.maps.Map(mapContainer, _objectSpread({}, defaultOptions, options));
window.map = this.map;
}
}, {
key: "initPolygons",
Expand Down Expand Up @@ -420,10 +449,10 @@ var MapCountdown = (function () {
var minutesPath = [];
var secondsPath = [];
this.routePoints.forEach(function (point) {
var distance = point.DistanceMeters[0];
var distance = point.DistanceMeters;
var position = new google.maps.LatLng({
lat: parseFloat(point.Position[0].LatitudeDegrees[0]),
lng: parseFloat(point.Position[0].LongitudeDegrees[0])
lat: parseFloat(point.Position.LatitudeDegrees),
lng: parseFloat(point.Position.LongitudeDegrees)
});
var secondsMeters = parseFloat((1 - seconds) * maxDistance);
var minutesMeters = parseFloat((1 - minutes) * maxDistance);
Expand Down Expand Up @@ -456,25 +485,63 @@ var MapCountdown = (function () {
return Map;
}();

function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;

if (!css || typeof document === 'undefined') { return; }

var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';

if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}

if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}

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__map {\n width: 100vw;\n height: 100vh;\n}";
styleInject(css);

var MapCountdown =
/*#__PURE__*/
function () {
function MapCountdown(_ref) {
var selector = _ref.selector,
routePoints = _ref.routePoints;
routePoints = _ref.routePoints,
key = _ref.key;

_classCallCheck(this, MapCountdown);

this.countdown = new Countdown(selector);
this.containerElement = document.querySelector(selector);
this.containerElement.classList.add('map-countdown');
this.countdown = new Countdown(this.containerElement);
this.map = new Map({
key: 'AIzaSyCYkWHZM0ZdO1JeJGBqo44wLlQz31lh-zM',
selector: '#map'
key: key,
containerElement: this.containerElement
});
this.map.setRoutePoints(routePoints);
this.countdown.addEventListener('countdown:recount', this.updateMap.bind(this));
this.attachEvents();
}

_createClass(MapCountdown, [{
key: "attachEvents",
value: function attachEvents() {
this.countdown.addEventListener('countdown:recount', this.updateMap.bind(this));
}
}, {
key: "updateMap",
value: function updateMap(ratios) {
var _this$map;
Expand Down
15 changes: 5 additions & 10 deletions examples/index.html
View file
Expand Up @@ -11,28 +11,23 @@
window.addEventListener('DOMContentLoaded', function () {
var countdown = new MapCountdown({
selector: '#countdown',
routePoints
key: 'google_api_key',
routePoints: routePoints
})
})
</script>
<style>
#countdown {
position: fixed;
z-index: 100;
color: white;
}
html,
body {
margin: 0;

#map {
width: 100vw;
height: 100vh;
}
</style>
</head>

<body>

<div id="countdown"></div>
<div id="map"></div>

</body>

Expand Down
61 changes: 35 additions & 26 deletions src/countdown.js
View file
@@ -1,5 +1,8 @@
export default class Countdown {
constructor (containerSelector) {
constructor (containerElement) {
this.containerElement = containerElement
this.countdownContainer = document.createElement('div')
this.countdownContainer.classList.add('map-countdown__countdown')
this.meta = new Date(2019, 6, 13, 11)
this.oneDayMilliseconds = 86400000
this.beginOfYear = new Date(this.meta.getFullYear(), 0, 0)
Expand All @@ -9,28 +12,48 @@ export default class Countdown {
)
this.elements = {
days: {
testId: 'map-countdown-days'
testId: 'map-countdown-days',
text: 'Dni'
},
hours: {
testId: 'map-countdown-hours'
testId: 'map-countdown-hours',
text: 'Godzin'
},
minutes: {
testId: 'map-countdown-minutes'
testId: 'map-countdown-minutes',
text: 'Minut'
},
seconds: {
testId: 'map-countdown-seconds'
testId: 'map-countdown-seconds',
text: 'Sekund'
}
}
this.containerEl = document.querySelector(containerSelector)

const fragment = document.createDocumentFragment()

Object.values(this.elements).forEach(item => {
const element = this.createElement('div', item.testId)
Object.keys(this.elements).forEach(itemName => {
const elementFragment = document.createDocumentFragment()
const item = this.elements[itemName]
const element = document.createElement('div')
const number = this.createElement('div', item.testId)
const text = document.createElement('h4')
element.classList.add('map-countdown__item')
text.classList.add('map-countdown__label')
text.textContent = item.text
elementFragment.appendChild(element)
element.appendChild(number)
element.appendChild(text)

number.classList.add(
'map-countdown__number',
`map-countdown__number--${itemName}`
)
fragment.appendChild(elementFragment)
item.element = element
fragment.appendChild(element)
})

this.containerEl.appendChild(fragment)
this.countdownContainer.appendChild(fragment)
this.containerElement.appendChild(this.countdownContainer)
this.events = {}
this.recountTime()
this.counterHandler = setInterval(() => this.recountTime(), 1000)
Expand All @@ -42,7 +65,6 @@ export default class Countdown {
}

this.events[name].push(callback)
console.log('events:', this.events)
}

dispatchEvent (name, args) {
Expand All @@ -60,7 +82,8 @@ export default class Countdown {
}

setElementValue (name, value) {
this.elements[name].element.innerHTML = value
const number = this.elements[name].element.querySelector('div')
number.textContent = value
}

recountTime () {
Expand Down Expand Up @@ -93,17 +116,3 @@ export default class Countdown {
this.setElementValue('seconds', seconds)
}
}

// google.maps.event.addDomListener(window, 'load', function () {
// var Map = createMap({
// elementId: 'countdown-map',
// disableDefaultUI: true
// })
// var Countdown = createCountdown()
// var meta = new Date(2018, 6, 14, 11)
// var oneDayMilliseconds = 86400000
// var beginOfYear = new Date(meta.getFullYear(), 0, 0)
// var metaDaysNumberDiff = meta - beginOfYear
// var metaDayNumberInYear = Math.floor(metaDaysNumberDiff / oneDayMilliseconds)
// Map.route.initCountdown()
// })

0 comments on commit 1b4e1c4

Please sign in to comment.