MAPG-146 [WIP]

public/static/css/mapguesser.css

@@ -17,11 +17,6 @@ button::-moz-focus-inner, input::-moz-focus-inner {
     border: 0;
 }
 
-::selection {
-    background-color: #28a745;
-    color: #ffffff;
-}
-
 p, h1, h2, input, textarea, select, button, a {
     font-family: 'Roboto', sans-serif;
 }

public/static/js/map_editor.js

@@ -13,6 +13,7 @@
         added: {},
         edited: {},
         deleted: {},
+        saved: true,
 
         editMetadata: function () {
             var form = document.getElementById('metadataForm');
@@ -24,6 +25,7 @@
 
             MapGuesser.hideModal();
 
+            MapEditor.saved = false;
             document.getElementById('saveButton').disabled = false;
         },
 
@@ -210,6 +212,7 @@
 
             MapEditor.selectedMarker.setLatLng({ lat: places[placeId].lat, lng: places[placeId].lng });
 
+            MapEditor.saved = false;
             document.getElementById('saveButton').disabled = false;
         },
 
@@ -243,6 +246,7 @@
             document.getElementById('added').innerHTML = String(Object.keys(MapEditor.added).length);
             document.getElementById('edited').innerHTML = String(Object.keys(MapEditor.edited).length);
 
+            MapEditor.saved = false;
             document.getElementById('saveButton').disabled = false;
         },
 
@@ -300,6 +304,7 @@
                 document.getElementById('edited').innerHTML = '0';
                 document.getElementById('deleted').innerHTML = '0';
 
+                MapEditor.saved = true;
                 document.getElementById('saveButton').disabled = true;
             }, data);
         },
@@ -440,4 +445,13 @@
     document.getElementById('deleteButton').onclick = function () {
         MapEditor.deletePlace();
     };
+
+    window.addEventListener('beforeunload', function (e) {
+        if (MapEditor.saved) {
+            return;
+        }
+
+        e.preventDefault();
+        e.returnValue = '';
+    });
 })();

views/maps.php

@@ -63,63 +63,6 @@ $cssFiles = [
         <?php endif; ?>
     </div>
 </div>
-
-<style>
-div.popup {
-    position: absolute;
-    top: 50px;
-    left: 50px;
-    width: 250px;
-}
-div.popup>div.content, div.popup>div.tipContainer>div.tip {
-    background: white;
-    color: #333;
-    border: solid #555 1px;
-}
-
-div.popup>div.content {
-    margin-top: 20px;
-    padding: 20px 10px 8px 10px;
-    border-radius: 3px;
-}
-
-div.popup>div.tipContainer {
-    width: 40px;
-    height: 20px;
-    position: absolute;
-    top: 1px;
-    left: 50%;
-    margin-left: -20px;
-    overflow: hidden;
-}
-
-div.popup>div.tipContainer>div.tip {
-    width: 20px;
-    height: 20px;
-    padding: 1px;
-    margin: 10px auto 0;
-    transform: rotate(45deg);
-}
-
-div.popup>a.closeButton {
-    position: absolute;
-    top: 20px;
-    right: 0;
-    padding: 2px 6px;
-    color: #555;
-}
-</style>
-
-<div class="popup">
-    <div class="tipContainer">
-        <div class="tip"></div>
-    </div>
-    <div class="content">
-        <p>A pretty CSS3 popup.<br>Easily customizable.</p>
-    </div>
-    <a class="closeButton" href="#close">×</a>
-</div>
-
 <?php if ($isAdmin): ?>
 <script>
     (function() {