CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-03-03 09:53:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #417 from systemed/tooltips

Browse Source 
Tooltips
This commit is contained in:
Tom MacWright
2013-01-17 09:35:22 -08:00
parent ae37003852 e111ea2aa5
commit 36a6c2ffea
10 changed files with 106 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
css/app.css
View File

@@ -1044,7 +1044,17 @@ div.typeahead a:first-child {
}
.Browse .tooltip .tooltip-arrow {
left: 30px;
}
left: 30px;
}
.tail {
pointer-events:none;
position: absolute;
background: rgba(255, 255, 255, 0.7);
max-width: 250px;
margin-top: -15px;
padding: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

1
index.html
View File

@@ -22,6 +22,7 @@
<script src='js/lib/d3.size.js'></script>
<script src='js/lib/d3.trigger.js'></script>
<script src='js/lib/d3.keybinding.js'></script>
<script src='js/lib/d3.tail.js'></script>
<script src='js/lib/d3-compat.js'></script>
<script src='js/lib/queue.js'></script>
<script src='js/lib/bootstrap-tooltip.js'></script>

4
js/id/id.js
View File

@@ -180,9 +180,9 @@ window.iD = function(container) {
.call(redo ? refreshTooltip : undo_tooltip.hide);
});
window.onresize = function() {
d3.select(window).on('resize.map-size', function() {
map.size(m.size());
};
});
map.keybinding()
.on('a', function(evt, mods) {

4
js/id/modes/add_area.js
View File

@@ -12,7 +12,7 @@ iD.modes.AddArea = function() {
controller = mode.controller;
map.dblclickEnable(false)
.hint('Click on the map to start drawing an area, like a park, lake, or building.');
.tail('Click on the map to start drawing an area, like a park, lake, or building.');
map.surface.on('click.addarea', function() {
var datum = d3.select(d3.event.target).datum() || {},
@@ -47,7 +47,7 @@ iD.modes.AddArea = function() {
window.setTimeout(function() {
mode.map.dblclickEnable(true);
}, 1000);
mode.map.hint(false);
mode.map.tail(false);
mode.map.surface.on('click.addarea', null);
mode.map.keybinding().on('⎋.addarea', null);
};

4
js/id/modes/add_line.js
View File

@@ -13,7 +13,7 @@ iD.modes.AddLine = function() {
controller = mode.controller;
map.dblclickEnable(false)
.hint('Click on the map to start drawing an road, path, or route.');
.tail('Click on the map to start drawing an road, path, or route.');
map.surface.on('click.addline', function() {
var datum = d3.select(d3.event.target).datum() || {},
@@ -67,7 +67,7 @@ iD.modes.AddLine = function() {
mode.exit = function() {
mode.map.dblclickEnable(true);
mode.map.hint(false);
mode.map.tail(false);
mode.map.surface.on('click.addline', null);
mode.map.keybinding().on('⎋.addline', null);
};

4
js/id/modes/add_point.js
View File

@@ -10,7 +10,7 @@ iD.modes.AddPoint = function() {
history = mode.history,
controller = mode.controller;
map.hint('Click on the map to add a point.');
map.tail('Click on the map to add a point.');
map.surface.on('click.addpoint', function() {
var node = iD.Node({loc: map.mouseCoordinates(), _poi: true});
@@ -28,7 +28,7 @@ iD.modes.AddPoint = function() {
};
mode.exit = function() {
mode.map.hint(false);
mode.map.tail(false);
mode.map.surface.on('click.addpoint', null);
mode.map.keybinding().on('⎋.addpoint', null);
};

5
js/id/modes/draw_area.js
View File

@@ -18,8 +18,7 @@ iD.modes.DrawArea = function(wayId) {
map.dblclickEnable(false)
.fastEnable(false);
map.hint('Click on the map to add points to your area. Finish the ' +
'area by clicking on your first point');
map.tail('Click to add points to your area. Click the first point to finish the area.');
history.perform(
iD.actions.AddNode(node),
@@ -116,7 +115,7 @@ iD.modes.DrawArea = function(wayId) {
surface.selectAll('.way, .node')
.classed('active', false);
mode.map.hint(false);
mode.map.tail(false);
mode.map.fastEnable(true);
surface

4
js/id/modes/draw_line.js
View File

@@ -19,7 +19,7 @@ iD.modes.DrawLine = function(wayId, direction) {
map.dblclickEnable(false)
.fastEnable(false)
.hint('Click to add more points to the line. ' +
.tail('Click to add more points to the line. ' +
'Click on other lines to connect to them, and double-click to ' +
'end the line.');
@@ -152,7 +152,7 @@ iD.modes.DrawLine = function(wayId, direction) {
surface.selectAll('.way, .node')
.classed('active', false);
mode.map.hint(false);
mode.map.tail(false);
mode.map.fastEnable(true);
mode.map.minzoom(0);

10
js/id/renderer/map.js
View File

@@ -21,6 +21,7 @@ iD.Map = function() {
lines = iD.svg.Lines(),
areas = iD.svg.Areas(),
midpoints = iD.svg.Midpoints(),
tail = d3.tail(),
surface, tilegroup;
function map(selection) {
@@ -44,9 +45,13 @@ iD.Map = function() {
})
.call(iD.svg.Surface());
map.size(selection.size());
map.surface = surface;
supersurface
.call(tail);
d3.select(document).call(keybinding);
}
@@ -284,6 +289,11 @@ iD.Map = function() {
return map;
};
map.tail = function (_) {
tail.text(_);
return map;
};
map.hint = function (_) {
if (_ === false) {
d3.select('div.inspector-wrap')

70
js/lib/d3.tail.js Normal file
View File

@@ -0,0 +1,70 @@
d3.tail = function() {
var text = false,
container,
xmargin = 20,
tooltip_size = [0, 0],
selection_size = [0, 0],
transformProp = iD.util.prefixCSSProperty('Transform');
var tail = function(selection) {
d3.select(window).on('resize.tail-size', function() {
selection_size = selection.size();
});
function setup() {
container = d3.select(document.body)
.append('div').attr('class', 'tail');
selection
.on('mousemove.tail', mousemove)
.on('mouseover.tail', mouseover)
.on('mouseout.tail', mouseout);
container
.on('mousemove.tail', mousemove);
selection_size = selection.size();
}
function mousemove() {
if (text === false) return;
var xoffset = ((d3.event.x + tooltip_size[0] + xmargin) > selection_size[0]) ?
-tooltip_size[0] - xmargin : xoffset = xmargin;
container.style(transformProp, 'translate(' +
(~~d3.event.x + xoffset) + 'px,' +
~~d3.event.y + 'px)');
}
function mouseout() {
if (d3.event.relatedTarget !== container.node() &&
text !== false) container.style('display', 'none');
}
function mouseover() {
if (d3.event.relatedTarget !== container.node() &&
text !== false) container.style('display', 'block');
}
if (!container) setup();
};
tail.text = function(_) {
if (_ === false) {
text = _;
container.style('display', 'none');
return tail;
} else if (container.style('display') == 'none') {
container.style('display', 'block');
}
text = _;
container.text(text);
tooltip_size = container.size();
return tail;
};
return tail;
};