From 12beb14d07d02aea6d1c48255abf14f810fcf2b3 Mon Sep 17 00:00:00 2001
From: Tom MacWright <tom@macwright.org>
Date: Mon, 7 Jan 2013 11:51:04 -0500
Subject: [PATCH] Work on #250

Implement inspector without a collapsed mode and with semi-intelligent
detection of whether features will conflict with the position of the
inspector. Also adds a `centerEase` fn to the map object.
---
 js/id/modes/select.js | 10 ++++++++++
 js/id/renderer/map.js |  8 ++++++++
 js/id/ui/inspector.js | 27 ++++++---------------------
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/js/id/modes/select.js b/js/id/modes/select.js
index 8defb17ba..47f2faf57 100644
--- a/js/id/modes/select.js
+++ b/js/id/modes/select.js
@@ -44,6 +44,16 @@ iD.modes.Select = function (entity) {
             .datum(entity)
             .call(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];
+
+        var left = mode.map.projection(entity_extent[1])[0];
+        var right = mode.map.projection(entity_extent[0])[0];
+
+        if (left > left_edge) mode.map.centerEase(entity_extent[0]);
+
         inspector.on('changeTags', function(d, tags) {
             mode.history.perform(
                 iD.actions.ChangeEntityTags(d.id, tags),
diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js
index 4cc7de184..1c5a26689 100644
--- a/js/id/renderer/map.js
+++ b/js/id/renderer/map.js
@@ -423,6 +423,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)];
     };
diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js
index db9377d94..f00319d89 100644
--- a/js/id/ui/inspector.js
+++ b/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};
                     }));