From 19aa4098e576bf89cf43ac052c2fc71f1e566a88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Tue, 23 Jun 2020 23:32:50 +0200
Subject: [PATCH] MAPG-169 set mapContainer's inners' height dynamically to be
 identical in a row

---
 public/static/css/maps.css |  1 +
 views/maps.php             | 82 +++++++++++++++++++++++++++++++++-----
 2 files changed, 73 insertions(+), 10 deletions(-)

diff --git a/public/static/css/maps.css b/public/static/css/maps.css
index c29284f..aeef091 100644
--- a/public/static/css/maps.css
+++ b/public/static/css/maps.css
@@ -38,6 +38,7 @@ div.mapItem>div.imgContainer {
 div.mapItem>div.inner {
     background-color: #eeeeee;
     padding: 10px 8px;
+    box-sizing: border-box;
 }
 
 div.mapItem>div.inner>div.info {
diff --git a/views/maps.php b/views/maps.php
index 5c143fb..3749e7d 100644
--- a/views/maps.php
+++ b/views/maps.php
@@ -63,18 +63,80 @@ $cssFiles = [
     (function () {
         const GOOGLE_MAPS_JS_API_KEY = '<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>';
 
-        var imgContainers = document.getElementById('mapContainer').getElementsByClassName('imgContainer');
-        for (var i = 0; i < imgContainers.length; i++) {
-            var imgContainer = imgContainers[i];
+        var Maps = {
+            innerDivs: null,
 
-            var imgSrc = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' +
-                'scale=' + (window.devicePixelRatio >= 2 ? 2 : 1) + '&' +
-                'visible=' + imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundWestLng + '|' +
-                imgContainer.dataset.boundNorthLat + ',' + imgContainer.dataset.boundEastLng +
-                '&key=' + GOOGLE_MAPS_JS_API_KEY;
+            addStaticMaps: function () {
+                var imgContainers = document.getElementById('mapContainer').getElementsByClassName('imgContainer');
+                for (var i = 0; i < imgContainers.length; i++) {
+                    var imgContainer = imgContainers[i];
 
-            imgContainer.style.backgroundImage = 'url("' + imgSrc + '")';
-        }
+                    var imgSrc = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' +
+                        'scale=' + (window.devicePixelRatio >= 2 ? 2 : 1) + '&' +
+                        'visible=' + imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundWestLng + '|' +
+                        imgContainer.dataset.boundNorthLat + ',' + imgContainer.dataset.boundEastLng +
+                        '&key=' + GOOGLE_MAPS_JS_API_KEY;
+
+                    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>
 <?php if ($isAdmin): ?>