MAPG-125 use modal instead of custom box in map editor

public/static/css/map_editor.css

@@ -1,17 +1,3 @@
-#metadata {
-    position: absolute;
-    top: 50px;
-    left: 10px;
-    padding: 10px;
-    background-color: #eeeeee;
-    border: solid 1px #555555;
-    border-radius: 3px;
-    box-sizing: border-box;
-    opacity: 0.95;
-    z-index: 2;
-    visibility: hidden;
-}
-
 #map {
     width: 100%;
     height: calc(100% - 40px);
@@ -61,9 +47,6 @@
 }
 
 @media screen and (max-width: 999px) and (min-height: 600px) {
-    #metadata {
-        width: calc(100% - 155px);
-    }
     #map.selected {
         height: calc(50% - 20px);
     }
@@ -79,12 +62,6 @@
 }
 
 @media screen and (min-width: 1000px), (max-height: 599px) {
-    #metadata {
-        width: calc(50% - 20px);
-    }
-    #metadata.selected {
-        top: 95px;
-    }
     #map.selected {
         width: 50%;
     }

public/static/js/map_editor.js

@@ -22,7 +22,7 @@
 
             document.getElementById('mapName').innerHTML = form.elements.name.value ? form.elements.name.value : '[unnamed map]';
 
-            document.getElementById('metadata').style.visibility = 'hidden';
+            MapGuesser.hideModal();
 
             document.getElementById('saveButton').disabled = false;
         },
@@ -109,7 +109,6 @@
                 return;
             }
 
-            document.getElementById('metadata').classList.add('selected');
             document.getElementById('map').classList.add('selected');
             document.getElementById('control').classList.add('selected');
             document.getElementById('noPano').style.visibility = 'hidden';
@@ -215,7 +214,6 @@
         },
 
         closePlace: function (del) {
-            document.getElementById('metadata').classList.remove('selected')
             document.getElementById('map').classList.remove('selected');
             document.getElementById('control').classList.remove('selected');
             document.getElementById('noPano').style.visibility = 'hidden';
@@ -413,14 +411,7 @@
     document.getElementById('mapName').onclick = function (e) {
         e.preventDefault();
 
-        var metadata = document.getElementById('metadata');
-
-        if (metadata.style.visibility === 'visible') {
-            metadata.style.visibility = 'hidden';
-        } else {
-            metadata.style.visibility = 'visible';
-            document.getElementById('metadataForm').elements.name.select();
-        }
+        MapGuesser.showModal('metadata');
     };
 
     document.getElementById('metadataForm').onsubmit = function (e) {
@@ -430,7 +421,7 @@
     };
 
     document.getElementById('closeMetadataButton').onclick = function () {
-        document.getElementById('metadata').style.visibility = 'hidden';
+        MapGuesser.hideModal();
     };
 
     document.getElementById('saveButton').onclick = function () {