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

Rename tooltip to tail, use tail in modes.

Browse Source
This commit is contained in:
Tom MacWright
2013-01-17 12:07:26 -05:00
parent 061e81d14a
commit fd2ef2a78b
11 changed files with 90 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
css/app.css
View File

@@ -1047,12 +1047,11 @@ div.typeahead a:first-child {
left: 30px;
}
.mouse-tooltip {
opacity:0.5;
background :#fff;
margin-left: 20px;
.tail {
position: absolute;
background: rgba(255, 255, 255, 0.7);
margin-top: -15px;
padding:5px;
padding: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

2
index.html
View File

@@ -22,7 +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.tooltip.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.tooltip('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);

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

@@ -21,7 +21,7 @@ iD.Map = function() {
lines = iD.svg.Lines(),
areas = iD.svg.Areas(),
midpoints = iD.svg.Midpoints(),
tooltip = d3.tooltip(),
tail = d3.tail(),
surface, tilegroup;
function map(selection) {
@@ -33,8 +33,7 @@ iD.Map = function() {
.on('mousedown.drag', function() {
translateStart = projection.translate();
})
.call(zoom)
.call(tooltip);
.call(zoom);
surface = supersurface.append('svg')
.on('mouseup.reset-transform', resetTransform)
@@ -46,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);
}
@@ -286,9 +289,8 @@ iD.Map = function() {
return map;
};
map.tooltip = function (_) {
if (_ === false) tooltip.off();
else tooltip.text(_);
map.tail = function (_) {
tail.text(_);
return map;
};

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

@@ -0,0 +1,65 @@
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);
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 (text !== false) container.style('display', 'none');
}
function mouseover() {
if (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;
};

46
js/lib/d3.tooltip.js
View File

@@ -1,46 +0,0 @@
d3.tooltip = function() {
var text, on = false, container, tooltip_size, container_size,
transformProp = iD.util.prefixCSSProperty('Transform');
var tooltip = function(selection) {
function setup() {
var rect = selection.node().getBoundingClientRect();
container = d3.select(document.body)
.append('div').attr('class', 'mouse-tooltip')
.style({
position: 'absolute'
});
selection
.on('mousemove.tooltip', mousemove);
container_size = container.size();
}
function mousemove() {
if (!on) return;
container.style(transformProp, 'translate(' +
~~d3.event.x + 'px,' +
~~d3.event.y + 'px)');
}
if (!container) setup();
};
tooltip.text = function(_) {
if (_ === false) {
on = false;
container.style('display', 'none');
return tooltip;
} else if (container.style('display') == 'none') {
container.style('display', 'block');
}
on = true;
text = _;
container.text(text);
size = container.size();
return tooltip;
};
return tooltip;
};