Pushing towards an inspector concept

css/app.css

@@ -162,28 +162,15 @@ table th {
     width:135px;
 }
 
-.edit-pane {
+.inspector {
     position:absolute;
-    display:none;
-    right:10px;
-    top:80px;
-    height:500px;
-    width:300px;
     background:#fff;
     overflow:auto;
+    top:50px;
+    right:10px;
     box-shadow:#222 0px 0px 3px;
 }
 
-.edit-pane.active {
-    display:block;
-}
-
-.edit-pane h2 {
-    margin:0;
-    padding:5px 5px 10px 5px;
-    background:#e4e4e4;
-}
-
 .edit-pane a.close {
     position:absolute;
     top:5px;

index.html

@@ -25,6 +25,7 @@
 
         <script type="text/javascript" src="js/iD/renderer/renderer.js"></script>
         <script type="text/javascript" src="js/iD/renderer/Map.js"></script>
+        <script type="text/javascript" src="js/iD/ui/Inspector.js"></script>
 
         <script type="text/javascript" src="js/iD/Node.js"></script>
         <script type="text/javascript" src="js/iD/Relation.js"></script>
@@ -39,7 +40,7 @@
                 + Road</button><button id="add-area">
                 + Area</button>--><button class='mini' id="undo">
                 &larr;</button><button class='mini' id="redo">
-                &rarr;</button><form id='geocode-form'><input type='text' id='geocode-location' placeholder='find a place' />
+                &rarr;</button><form action='GET' id='geocode-form'><input type='text' id='geocode-location' placeholder='find a place' />
             </form>
         </div>
 
@@ -47,26 +48,6 @@
             <button id="zoomIn">+</button><button id="zoomOut">&ndash;</button>
         </div>
 
-        <!-- Floating edit pane -->
-        <div class='edit-pane'>
-            <h2>&nbsp;</h2>
-            <a class='close' href='#close'>&times;</a>
-            <div class='hud tags'>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Value</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    </tbody>
-                </table>
-            </div>
-            <div class='hud presets'></div>
-        </div>
-    </div>
-
     <div id="map"></div>
     <div id='about'>
         <p>Work in progress: <a href='http://www.geowiki.com/'>introduction</a>,
@@ -74,7 +55,6 @@
         <a href='http://www.geowiki.com/docs'>docs</a>.
         Imagery <a href="http://opengeodata.org/microsoft-imagery-details">&copy; 2012</a> Bing, GeoEye, Getmapping, Intermap, Microsoft.</p>
     </div>
-</div>
 <script>
     var connection = new iD.Connection("http://www.overpass-api.de/api/xapi?");
 

js/iD/renderer/Map.js

@@ -36,6 +36,8 @@ iD.renderer.Map = function(obj) {
 
     var defs = surface.append('defs');
 
+    var inspector_elem = d3.select(document.body).append('div');
+
     var clipPath = defs.append('clipPath')
         .attr('id', 'clip')
         .append('rect')
@@ -132,6 +134,7 @@ iD.renderer.Map = function(obj) {
     function selectClick(d) {
         select(d);
         drawVector();
+        inspector_elem.datum(d).call(iD.Inspector);
     }
 
     function nodeline(d) {

js/iD/ui/Inspector.js

@@ -0,0 +1,25 @@
+iD.Inspector = function(selection) {
+    var inspector = {};
+    var width = 300,
+        height = 600;
+
+    selection.each(function(d, i) {
+        var rows = d3.select(this)
+            .attr('class', 'inspector')
+            .attr('width', width)
+            .attr('height', height)
+            .selectAll('div.row')
+            .data(d3.entries(d.tags));
+
+        rows.exit().remove();
+
+        var row = rows.enter().append('div.row').data(function(d) { return d; });
+        row.enter().append('input')
+            .attr('type', 'text')
+            .attr('value', function(d) { return d[0]; });
+
+        row.enter().append('input')
+            .attr('type', 'text')
+            .attr('value', function(d) { return d[1]; });
+    });
+};