MAPG-180 extract all inline JS into separate JS file
This commit is contained in:
parent
45904a98c2
commit
27115e44b6
21
public/static/js/login/google_signup.js
Normal file
21
public/static/js/login/google_signup.js
Normal file
@ -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');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
})();
|
||||||
76
public/static/js/maps.js
Normal file
76
public/static/js/maps.js
Normal file
@ -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();
|
||||||
|
};
|
||||||
|
})();
|
||||||
34
public/static/js/maps_admin.js
Normal file
34
public/static/js/maps_admin.js
Normal file
@ -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);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})();
|
||||||
@ -1,3 +1,8 @@
|
|||||||
|
<?php
|
||||||
|
$jsFiles = [
|
||||||
|
'js/login/google_signup.js',
|
||||||
|
];
|
||||||
|
?>
|
||||||
<?php require ROOT . '/views/templates/main_header.php'; ?>
|
<?php require ROOT . '/views/templates/main_header.php'; ?>
|
||||||
<?php require ROOT . '/views/templates/header.php'; ?>
|
<?php require ROOT . '/views/templates/header.php'; ?>
|
||||||
<h2>Sign up</h2>
|
<h2>Sign up</h2>
|
||||||
@ -22,27 +27,4 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<?php require ROOT . '/views/templates/footer.php'; ?>
|
<?php require ROOT . '/views/templates/footer.php'; ?>
|
||||||
<script>
|
|
||||||
(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');
|
|
||||||
});
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
<?php require ROOT . '/views/templates/main_footer.php'; ?>
|
<?php require ROOT . '/views/templates/main_footer.php'; ?>
|
||||||
124
views/maps.php
124
views/maps.php
@ -2,6 +2,12 @@
|
|||||||
$cssFiles = [
|
$cssFiles = [
|
||||||
'css/maps.css'
|
'css/maps.css'
|
||||||
];
|
];
|
||||||
|
$jsFiles = [
|
||||||
|
'js/maps.js',
|
||||||
|
];
|
||||||
|
if ($isAdmin) {
|
||||||
|
$jsFiles[] = 'js/maps_admin.js';
|
||||||
|
}
|
||||||
?>
|
?>
|
||||||
<?php require ROOT . '/views/templates/main_header.php'; ?>
|
<?php require ROOT . '/views/templates/main_header.php'; ?>
|
||||||
<?php require ROOT . '/views/templates/header.php'; ?>
|
<?php require ROOT . '/views/templates/header.php'; ?>
|
||||||
@ -61,122 +67,4 @@ $cssFiles = [
|
|||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
<?php require ROOT . '/views/templates/footer.php'; ?>
|
<?php require ROOT . '/views/templates/footer.php'; ?>
|
||||||
<script>
|
|
||||||
(function () {
|
|
||||||
const GOOGLE_MAPS_JS_API_KEY = '<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>';
|
|
||||||
|
|
||||||
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();
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
<?php if ($isAdmin): ?>
|
|
||||||
<script>
|
|
||||||
(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);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
<?php endif; ?>
|
|
||||||
<?php require ROOT . '/views/templates/main_footer.php'; ?>
|
<?php require ROOT . '/views/templates/main_footer.php'; ?>
|
||||||
@ -2,6 +2,7 @@
|
|||||||
const STATIC_ROOT = '<?= $_ENV['STATIC_ROOT'] ?>';
|
const STATIC_ROOT = '<?= $_ENV['STATIC_ROOT'] ?>';
|
||||||
const REVISION = '<?= REVISION ?>';
|
const REVISION = '<?= REVISION ?>';
|
||||||
var ANTI_CSRF_TOKEN = '<?= \Container::$request->session()->get('anti_csrf_token') ?>';
|
var ANTI_CSRF_TOKEN = '<?= \Container::$request->session()->get('anti_csrf_token') ?>';
|
||||||
|
const GOOGLE_MAPS_JS_API_KEY = '<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>';
|
||||||
<?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
|
<?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
|
||||||
const GOOGLE_ANALITICS_ID = '<?= $_ENV['GOOGLE_ANALITICS_ID'] ?>';
|
const GOOGLE_ANALITICS_ID = '<?= $_ENV['GOOGLE_ANALITICS_ID'] ?>';
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user