CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-19 23:14:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add hover indicator in sidebar

Browse Source
This commit is contained in:
John Firebaugh
2013-05-10 20:32:47 -07:00
parent 46f41fa4f4
commit 884d2d0732
12 changed files with 87 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/app.css
+22
View File
@@ -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;
index.html
+1
View File
@@ -98,6 +98,7 @@
<script src='js/id/ui/preset_list.js'></script>
<script src='js/id/ui/entity_editor.js'></script>
<script src='js/id/ui/disclosure.js'></script>
<script src='js/id/ui/sidebar.js'></script>
<script src='js/id/ui/preset/access.js'></script>
<script src='js/id/ui/preset/address.js'></script>
js/id/behavior/draw.js
+1 -1
View File
@@ -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;
js/id/behavior/hover.js
+15 -7
View File
@@ -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')
js/id/id.js
+3 -1
View File
@@ -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);
js/id/modes/browse.js
+1 -1
View File
@@ -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];
js/id/modes/drag_node.js
+1 -1
View File
@@ -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];
js/id/modes/select.js
+1 -9
View File
@@ -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);
js/id/ui.js
+3 -6
View File
@@ -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')
js/id/ui/preset.js
+1 -1
View File
@@ -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')
js/id/ui/sidebar.js
+30
View File
@@ -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);
}
})
}
};
test/spec/behavior/hover.js
+8 -5
View File
@@ -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);