MAPG-147 [WIP]

MAPG-145 add CSS ::selection attribute

public/static/css/mapguesser.css

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

views/maps.php

@@ -63,6 +63,63 @@ $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() {