esoko/mapguesser
esoko/mapguesser
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

Merged in feature/MAPG-169-make-map-boxes-height-identical (pull request #138)

Browse Source 
Feature/MAPG-169 make map boxes height identical
This commit is contained in:
Bence Pőcze 2020-06-23 21:44:58 +00:00
commit d5d3563ddc
2 changed files with 76 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/static/css/maps.css
View File

@ -29,17 +29,16 @@ div.mapItem>div.title>p.title {
div.mapItem>div.imgContainer { div.mapItem>div.imgContainer {
width: 100%; width: 100%;
padding-top: 50%; padding-top: 50%;
background: #cccccc; background-color: #cccccc;
} background-position: center;
background-repeat: no-repeat;
div.mapItem>div.imgContainer>img { background-size: cover;
width: 100%;
margin-top: -50%
} }
div.mapItem>div.inner { div.mapItem>div.inner {
background-color: #eeeeee; background-color: #eeeeee;
padding: 10px 8px; padding: 10px 8px;
box-sizing: border-box;
} }
div.mapItem>div.inner>div.info { div.mapItem>div.inner>div.info {

83
views/maps.php
View File

@ -63,21 +63,80 @@ $cssFiles = [
(function () { (function () {
const GOOGLE_MAPS_JS_API_KEY = '<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>'; const GOOGLE_MAPS_JS_API_KEY = '<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>';
var imgContainers = document.getElementById('mapContainer').getElementsByClassName('imgContainer'); var Maps = {
for (var i = 0; i < imgContainers.length; i++) { innerDivs: null,
var imgContainer = imgContainers[i];
var img = document.createElement('img'); addStaticMaps: function () {
var imgContainers = document.getElementById('mapContainer').getElementsByClassName('imgContainer');
for (var i = 0; i < imgContainers.length; i++) {
var imgContainer = imgContainers[i];
img.src = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' + var imgSrc = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' +
'scale=' + (window.devicePixelRatio >= 2 ? 2 : 1) + '&' + 'scale=' + (window.devicePixelRatio >= 2 ? 2 : 1) + '&' +
'visible=' + imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundWestLng + '|' + 'visible=' + imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundWestLng + '|' +
imgContainer.dataset.boundNorthLat + ',' + imgContainer.dataset.boundEastLng + imgContainer.dataset.boundNorthLat + ',' + imgContainer.dataset.boundEastLng +
'&key=' + GOOGLE_MAPS_JS_API_KEY; '&key=' + GOOGLE_MAPS_JS_API_KEY;
img.alt = 'Map area';
imgContainer.appendChild(img); imgContainer.style.backgroundImage = 'url("' + imgSrc + '")';
} }
},
initializeInnerDivs: function () {
Maps.innerDivs = document.getElementById('mapContainer').getElementsByClassName('inner');
for (var i = 0; i < Maps.innerDivs.length; i++) {
var inner = Maps.innerDivs[i];
var boundingClientRect = inner.getBoundingClientRect();
inner.defaultHeight = boundingClientRect.height;
}
},
calculateInnerDivHeights: function () {
var currentY;
var rows = [];
for (var i = 0; i < Maps.innerDivs.length; i++) {
var inner = Maps.innerDivs[i];
var boundingClientRect = inner.getBoundingClientRect();
if (currentY !== boundingClientRect.y) {
rows.push([]);
}
rows[rows.length - 1].push(inner);
currentY = boundingClientRect.y;
}
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var maxHeight = 0;
for (var j = 0; j < row.length; j++) {
var inner = row[j];
if (inner.defaultHeight > maxHeight) {
maxHeight = inner.defaultHeight;
}
}
for (var j = 0; j < row.length; j++) {
var inner = row[j];
inner.style.height = maxHeight + 'px';
}
}
}
};
Maps.addStaticMaps();
Maps.initializeInnerDivs();
Maps.calculateInnerDivHeights();
window.onresize = function () {
Maps.calculateInnerDivHeights();
};
})(); })();
</script> </script>
<?php if ($isAdmin): ?> <?php if ($isAdmin): ?>