From 27115e44b6b2c12b6062d1f594d1773c807b0e9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Thu, 25 Jun 2020 20:42:12 +0200 Subject: [PATCH] MAPG-180 extract all inline JS into separate JS file --- public/static/js/login/google_signup.js | 21 ++++ public/static/js/maps.js | 76 +++++++++++++++ public/static/js/maps_admin.js | 34 +++++++ views/login/google_signup.php | 28 +----- views/maps.php | 124 ++---------------------- views/templates/main_footer.php | 1 + 6 files changed, 143 insertions(+), 141 deletions(-) create mode 100644 public/static/js/login/google_signup.js create mode 100644 public/static/js/maps.js create mode 100644 public/static/js/maps_admin.js diff --git a/public/static/js/login/google_signup.js b/public/static/js/login/google_signup.js new file mode 100644 index 0000000..063f57c --- /dev/null +++ b/public/static/js/login/google_signup.js @@ -0,0 +1,21 @@ +(function () { + var form = document.getElementById('googleSignupForm'); + + form.onsubmit = function (e) { + document.getElementById('loading').style.visibility = 'visible'; + + e.preventDefault(); + + MapGuesser.httpRequest('POST', form.action, function () { + window.location.replace('/'); + }); + }; + + document.getElementById('cancelGoogleSignupButton').onclick = function () { + document.getElementById('loading').style.visibility = 'visible'; + + MapGuesser.httpRequest('POST', '/signup/google/reset', function () { + window.location.replace('/signup'); + }); + }; +})(); diff --git a/public/static/js/maps.js b/public/static/js/maps.js new file mode 100644 index 0000000..394c6c8 --- /dev/null +++ b/public/static/js/maps.js @@ -0,0 +1,76 @@ +(function () { + var Maps = { + descriptionDivs: null, + + addStaticMaps: function () { + var imgContainers = document.getElementById('mapContainer').getElementsByClassName('imgContainer'); + for (var i = 0; i < imgContainers.length; i++) { + var imgContainer = imgContainers[i]; + + 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 + '")'; + } + }, + + initializeDescriptionDivs: function () { + Maps.descriptionDivs = document.getElementById('mapContainer').getElementsByClassName('description'); + + for (var i = 0; i < Maps.descriptionDivs.length; i++) { + var description = Maps.descriptionDivs[i]; + var boundingClientRect = description.getBoundingClientRect(); + + description.defaultHeight = boundingClientRect.height; + } + }, + + calculateDescriptionDivHeights: function () { + var currentY; + var rows = []; + for (var i = 0; i < Maps.descriptionDivs.length; i++) { + var description = Maps.descriptionDivs[i]; + var boundingClientRect = description.getBoundingClientRect(); + + if (currentY !== boundingClientRect.y) { + rows.push([]); + } + + rows[rows.length - 1].push(description); + + 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 description = row[j]; + + if (description.defaultHeight > maxHeight) { + maxHeight = description.defaultHeight; + } + } + + for (var j = 0; j < row.length; j++) { + var description = row[j]; + + description.style.height = maxHeight + 'px'; + } + } + } + }; + + Maps.addStaticMaps(); + + Maps.initializeDescriptionDivs(); + Maps.calculateDescriptionDivHeights(); + + window.onresize = function () { + Maps.calculateDescriptionDivHeights(); + }; +})(); diff --git a/public/static/js/maps_admin.js b/public/static/js/maps_admin.js new file mode 100644 index 0000000..0c64bc2 --- /dev/null +++ b/public/static/js/maps_admin.js @@ -0,0 +1,34 @@ +(function () { + Maps = { + deleteMap: function (mapId, mapName) { + MapGuesser.showModalWithContent('Delete map', 'Are you sure you want to delete map \'' + mapName + '\'?', [{ + type: 'button', + classNames: ['red'], + text: 'Delete', + onclick: function () { + document.getElementById('loading').style.visibility = 'visible'; + + MapGuesser.httpRequest('POST', '/admin/deleteMap/' + mapId, function () { + if (this.response.error) { + document.getElementById('loading').style.visibility = 'hidden'; + + //TODO: handle this error + return; + } + + window.location.reload(); + }); + } + }]); + } + }; + + var buttons = document.getElementById('mapContainer').getElementsByClassName('deleteButton'); + for (var i = 0; i < buttons.length; i++) { + var button = buttons[i]; + + button.onclick = function () { + Maps.deleteMap(this.dataset.mapId, this.dataset.mapName); + }; + } +})(); diff --git a/views/login/google_signup.php b/views/login/google_signup.php index b818e3f..2e87d1c 100644 --- a/views/login/google_signup.php +++ b/views/login/google_signup.php @@ -1,3 +1,8 @@ +

Sign up

@@ -22,27 +27,4 @@ - \ No newline at end of file diff --git a/views/maps.php b/views/maps.php index e2086cb..64ec1db 100644 --- a/views/maps.php +++ b/views/maps.php @@ -2,6 +2,12 @@ $cssFiles = [ 'css/maps.css' ]; +$jsFiles = [ + 'js/maps.js', +]; +if ($isAdmin) { + $jsFiles[] = 'js/maps_admin.js'; +} ?> @@ -61,122 +67,4 @@ $cssFiles = [ - - - - \ No newline at end of file diff --git a/views/templates/main_footer.php b/views/templates/main_footer.php index 6c17b6d..378e2ff 100644 --- a/views/templates/main_footer.php +++ b/views/templates/main_footer.php @@ -2,6 +2,7 @@ const STATIC_ROOT = ''; const REVISION = ''; var ANTI_CSRF_TOKEN = 'session()->get('anti_csrf_token') ?>'; + const GOOGLE_MAPS_JS_API_KEY = ''; const GOOGLE_ANALITICS_ID = '';