diff --git a/css/app.css b/css/app.css
index b68c2c850..2a7cb2400 100644
--- a/css/app.css
+++ b/css/app.css
@@ -673,6 +673,24 @@ a:hover .icon.out-link { background-position: -500px -14px;}
position: relative;
}
+.inspector-hover .header button.preset-reset,
+.inspector-hover .header button.preset-close,
+.inspector-hover .more-buttons,
+.inspector-hover .inspector-external-links {
+ display: none;
+}
+
+.inspector-hidden {
+ display: none;
+}
+
+.inspector-hover .header button.preset-reset,
+.inspector-hover .header button.preset-close,
+.inspector-hover .more-buttons,
+.inspector-hover .inspector-external-links {
+ display: none;
+}
+
.inspector-wrap .header button.preset-reset > div {
height: 100%;
padding: 20px 0;
@@ -897,6 +915,10 @@ a:hover .icon.out-link { background-position: -500px -14px;}
position: relative;
}
+.inspector-hover .inspector-preset {
+ background-color: #F6F6F6;
+}
+
.inspector-preset .form-field {
padding-left: 20px;
padding-right: 20px;
diff --git a/index.html b/index.html
index 01bdcfcbe..69d24896b 100644
--- a/index.html
+++ b/index.html
@@ -98,6 +98,7 @@
+
diff --git a/js/id/behavior/draw.js b/js/id/behavior/draw.js
index b42e9cb6a..0ba59f277 100644
--- a/js/id/behavior/draw.js
+++ b/js/id/behavior/draw.js
@@ -2,7 +2,7 @@ iD.behavior.Draw = function(context) {
var event = d3.dispatch('move', 'click', 'clickWay',
'clickNode', 'undo', 'cancel', 'finish'),
keybinding = d3.keybinding('draw'),
- hover = iD.behavior.Hover().altDisables(true),
+ hover = iD.behavior.Hover(context).altDisables(true),
tail = iD.behavior.Tail(),
closeTolerance = 4,
tolerance = 12;
diff --git a/js/id/behavior/hover.js b/js/id/behavior/hover.js
index a2fba0a3d..9ec5f1e85 100644
--- a/js/id/behavior/hover.js
+++ b/js/id/behavior/hover.js
@@ -7,12 +7,14 @@
Only one of these elements can have the :hover pseudo-class, but all of them will
have the .hover class.
*/
-iD.behavior.Hover = function() {
+iD.behavior.Hover = function(context) {
var selection,
- altDisables;
+ altDisables,
+ target;
function keydown() {
if (altDisables && d3.event.keyCode === d3.keybinding.modifierCodes.alt) {
+ context.hover(null);
selection.selectAll('.hover')
.classed('hover-suppressed', true)
.classed('hover', false);
@@ -21,6 +23,7 @@ iD.behavior.Hover = function() {
function keyup() {
if (altDisables && d3.event.keyCode === d3.keybinding.modifierCodes.alt) {
+ context.hover(target);
selection.selectAll('.hover-suppressed')
.classed('hover-suppressed', false)
.classed('hover', true);
@@ -31,13 +34,13 @@ iD.behavior.Hover = function() {
selection = __;
function mouseover() {
- var datum = d3.event.target.__data__;
+ target = d3.event.target.__data__;
- if (datum && datum.type) {
- var selector = '.' + datum.id;
+ if (target && target.type) {
+ var selector = '.' + target.id;
- if (datum.type === 'relation') {
- datum.members.forEach(function(member) {
+ if (target.type === 'relation') {
+ target.members.forEach(function(member) {
selector += ', .' + member.id;
});
}
@@ -46,10 +49,15 @@ iD.behavior.Hover = function() {
selection.selectAll(selector)
.classed(suppressed ? 'hover-suppressed' : 'hover', true);
+
+ context.hover(target);
}
}
function mouseout() {
+ context.hover(null);
+ target = null;
+
selection.selectAll('.hover')
.classed('hover', false);
selection.selectAll('.hover-suppressed')
diff --git a/js/id/id.js b/js/id/id.js
index f68a81b7f..909ead40b 100644
--- a/js/id/id.js
+++ b/js/id/id.js
@@ -17,7 +17,7 @@ window.iD = function () {
};
var history = iD.History(context),
- dispatch = d3.dispatch('enter', 'exit', 'select', 'toggleFullscreen'),
+ dispatch = d3.dispatch('enter', 'exit', 'hover', 'select', 'toggleFullscreen'),
mode,
container,
ui = iD.ui(context),
@@ -132,6 +132,8 @@ window.iD = function () {
}
};
+ context.hover = dispatch.hover;
+
/* Behaviors */
context.install = function(behavior) {
context.surface().call(behavior);
diff --git a/js/id/modes/browse.js b/js/id/modes/browse.js
index 6dc0060f9..2215a43df 100644
--- a/js/id/modes/browse.js
+++ b/js/id/modes/browse.js
@@ -8,7 +8,7 @@ iD.modes.Browse = function(context) {
};
var behaviors = [
- iD.behavior.Hover(),
+ iD.behavior.Hover(context),
iD.behavior.Select(context),
iD.behavior.Lasso(context),
iD.modes.DragNode(context).behavior];
diff --git a/js/id/modes/drag_node.js b/js/id/modes/drag_node.js
index 9ac7be856..6bc42ed37 100644
--- a/js/id/modes/drag_node.js
+++ b/js/id/modes/drag_node.js
@@ -8,7 +8,7 @@ iD.modes.DragNode = function(context) {
activeIDs,
wasMidpoint,
cancelled,
- hover = iD.behavior.Hover().altDisables(true);
+ hover = iD.behavior.Hover(context).altDisables(true);
function edge(point, size) {
var pad = [30, 100, 30, 100];
diff --git a/js/id/modes/select.js b/js/id/modes/select.js
index e1a24f18c..3b7c47191 100644
--- a/js/id/modes/select.js
+++ b/js/id/modes/select.js
@@ -7,7 +7,7 @@ iD.modes.Select = function(context, selection) {
var keybinding = d3.keybinding('select'),
timeout = null,
behaviors = [
- iD.behavior.Hover(),
+ iD.behavior.Hover(context),
iD.behavior.Select(context),
iD.behavior.Lasso(context),
iD.modes.DragNode(context).behavior],
@@ -102,14 +102,6 @@ iD.modes.Select = function(context, selection) {
}), true));
}
- if (singular()) {
- inspector = iD.ui.Inspector(context)
- .entityID(singular().id)
- .newFeature(newFeature);
-
- wrap.call(inspector);
- }
-
context.history()
.on('undone.select', update)
.on('redone.select', update);
diff --git a/js/id/ui.js b/js/id/ui.js
index e2c9b038b..3d100a170 100644
--- a/js/id/ui.js
+++ b/js/id/ui.js
@@ -13,13 +13,10 @@ iD.ui = function(context) {
map.centerZoom([-77.02271, 38.90085], 20);
}
- var sidebar = container.append('div')
+ container.append('div')
.attr('id', 'sidebar')
- .attr('class', 'col4 fillL2');
-
- sidebar.append('div')
- .style('display', 'none')
- .attr('class', 'inspector-wrap fr content');
+ .attr('class', 'col4 fillL2')
+ .call(iD.ui.Sidebar(context));
var m = container.append('div')
.attr('id', 'map')
diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js
index 422de834e..71799bdfe 100644
--- a/js/id/ui/preset.js
+++ b/js/id/ui/preset.js
@@ -81,7 +81,7 @@ iD.ui.preset = function(context) {
var $enter = $fields.enter()
.insert('div', '.more-buttons')
.attr('class', function(field) {
- return 'form-field form-field-' + field.id + ' fillL col12';
+ return 'form-field form-field-' + field.id + ' col12';
});
var $label = $enter.append('label')
diff --git a/js/id/ui/sidebar.js b/js/id/ui/sidebar.js
new file mode 100644
index 000000000..7002e4308
--- /dev/null
+++ b/js/id/ui/sidebar.js
@@ -0,0 +1,30 @@
+iD.ui.Sidebar = function(context) {
+ return function(selection) {
+ var wrap = selection.append('div')
+ .attr('class', 'inspector-hidden inspector-wrap fr');
+
+ context.on('hover.sidebar', function(entity) {
+ if (context.selection().length === 1) return;
+
+ if (entity) {
+ wrap.classed('inspector-hidden', false)
+ .classed('inspector-hover', true)
+ .call(iD.ui.Inspector(context)
+ .entityID(entity.id));
+ } else {
+ wrap.classed('inspector-hidden', true);
+ }
+ });
+
+ context.on('select.sidebar', function(selection) {
+ if (selection.length === 1) {
+ wrap.classed('inspector-hidden', false)
+ .classed('inspector-hover', false)
+ .call(iD.ui.Inspector(context)
+ .entityID(selection[0]));
+ } else {
+ wrap.classed('inspector-hidden', true);
+ }
+ })
+ }
+};
diff --git a/test/spec/behavior/hover.js b/test/spec/behavior/hover.js
index b20205a7c..88d4feda9 100644
--- a/test/spec/behavior/hover.js
+++ b/test/spec/behavior/hover.js
@@ -1,8 +1,11 @@
describe("iD.behavior.Hover", function() {
- var container;
+ var container, context;
beforeEach(function() {
container = d3.select('body').append('div');
+ context = {
+ hover: function() {}
+ };
});
afterEach(function() {
@@ -12,7 +15,7 @@ describe("iD.behavior.Hover", function() {
describe("#off", function () {
it("removes the .hover class from all elements", function () {
container.append('span').attr('class', 'hover');
- container.call(iD.behavior.Hover().off);
+ container.call(iD.behavior.Hover(context).off);
expect(container.select('span')).not.to.be.classed('hover')
});
});
@@ -26,7 +29,7 @@ describe("iD.behavior.Hover", function() {
.data([a, b, a, b])
.enter().append('span').attr('class', function(d) { return d.id; });
- container.call(iD.behavior.Hover());
+ container.call(iD.behavior.Hover(context));
container.selectAll('.a').trigger('mouseover');
expect(container.selectAll('.a.hover')[0]).to.have.length(2);
@@ -38,7 +41,7 @@ describe("iD.behavior.Hover", function() {
.data([{id: 'a', type: 'relation', members: [{id: 'b'}]}, {id: 'b'}])
.enter().append('span').attr('class', function(d) { return d.id; });
- container.call(iD.behavior.Hover());
+ container.call(iD.behavior.Hover(context));
container.selectAll('.a').trigger('mouseover');
expect(container.selectAll('.a.hover')[0]).to.have.length(1);
@@ -50,7 +53,7 @@ describe("iD.behavior.Hover", function() {
it("removes the .hover class from all elements", function () {
container.append('span').attr('class', 'hover');
- container.call(iD.behavior.Hover());
+ container.call(iD.behavior.Hover(context));
container.selectAll('.hover').trigger('mouseout');
expect(container.selectAll('.hover')[0]).to.have.length(0);