Merge pull request #322 from systemed/inspector-intersect

Inspector intersect

js/id/modes/select.js

@@ -45,6 +45,21 @@ iD.modes.Select = function (entity) {
             .datum(entity)
             .call(inspector);
 
+        // Pan the map if the clicked feature intersects with the position
+        // of the inspector
+        var inspector_size = d3.select('.inspector-wrap').size(),
+            map_size = mode.map.size(),
+            entity_extent = entity.extent(mode.history.graph()),
+            left_edge = map_size[0] - inspector_size[0],
+            left = mode.map.projection(entity_extent[1])[0],
+            right = mode.map.projection(entity_extent[0])[0];
+
+        if (left > left_edge &&
+            right > left_edge) mode.map.centerEase(
+                iD.util.geo.interp(
+                    entity_extent[0],
+                    entity_extent[1], 0.5));
+
         inspector.on('changeTags', function(d, tags) {
             mode.history.perform(
                 iD.actions.ChangeEntityTags(d.id, tags),

js/id/renderer/map.js

@@ -388,6 +388,14 @@ iD.Map = function() {
         }
     };
 
+    map.centerEase = function(loc) {
+        var from = map.center().slice(), t = 0;
+        d3.timer(function() {
+            map.center(iD.util.geo.interp(from, loc, (t += 1) / 10));
+            return t == 10;
+        }, 20);
+    };
+
     map.extent = function() {
         return [projection.invert([0, 0]), projection.invert(dimensions)];
     };

js/id/ui/inspector.js

@@ -43,26 +43,7 @@ iD.Inspector = function() {
             .attr('class', 'inspector-buttons')
             .call(drawButtons);
 
-        var inHeight = inspectorbody.node().offsetHeight;
-
-        inspectorbody.style('display', 'none')
-            .style('margin-top', (-inHeight) + 'px');
-
-        var inspectortoggle = selection.append('button')
-            .attr('class', 'inspector-toggle action')
-            .on('click', function() {
-                inspectortoggle.style('display', 'none');
-                inspectorbody
-                    .style('display', 'block')
-                    .transition()
-                    .style('margin-top', '0px');
-            });
-
         formsel.selectAll('input').node().focus();
-
-        inspectortoggle.append('span')
-            .text('Details')
-            .attr('class','label');
     }
 
     function drawHead(selection) {
@@ -184,7 +165,8 @@ iD.Inspector = function() {
     }
 
     function pushMore() {
-        if (d3.event.keyCode === 9 && tagList.selectAll('li:last-child input.value').node() === this) {
+        if (d3.event.keyCode === 9 &&
+            tagList.selectAll('li:last-child input.value').node() === this) {
             addTag();
         }
     }
@@ -205,7 +187,10 @@ iD.Inspector = function() {
 
         value.call(d3.typeahead()
             .data(function(_, callback) {
-                taginfo.values({key: key.property('value'), query: value.property('value')}, function(err, data) {
+                taginfo.values({
+                    key: key.property('value'),
+                    query: value.property('value')
+                }, function(err, data) {
                     callback(data.data.map(function (d) {
                         return {value: d.value, title: d.description};
                     }));