Permalink
Browse files

Initial help ui

  • Loading branch information...
tmcw committed Mar 22, 2013
1 parent b921ce4 commit 64bec11fb93c21b1af052ef6136dde0137bc0149
Showing with 128 additions and 8 deletions.
  1. +1 −1 build.js
  2. +22 −0 css/app.css
  3. +4 −2 data/data_dev.js
  4. +2 −2 data/doc.json
  5. +0 −3 data/locales.js
  6. +1 −0 index.html
  7. +8 −0 js/id/ui.js
  8. +90 −0 js/id/ui/help.js
View
@@ -55,7 +55,7 @@ function generateDocumentation() {
title = text.split('\n')[0]
.replace('#', '').trim();
docs.push({
- text: marked(text),
+ html: marked(text),
title: title
});
});
View
@@ -1523,10 +1523,32 @@ div.combobox {
}
.geolocate-control button {
+}
+
+/* Help */
+
+.help-control {
+ top:270px;
+}
+
+.help-control button {
border-radius: 0 0 4px 0;
border-bottom: 0;
}
+.help-wrap {
+ background:#fff;
+ position: absolute;
+ height: 100%;
+ top:60px;
+ padding-left:50px;
+ padding-top:20px;
+ padding-right:20px;
+ padding-bottom:60px;
+ left: 0;
+ overflow-y: scroll;
+}
+
/* Map
------------------------------------------------------- */
View
@@ -12,7 +12,8 @@ iD.data = {
path + 'data/presets/presets.json',
path + 'data/presets/defaults.json',
path + 'data/presets/categories.json',
- path + 'data/presets/fields.json'], d3.json, function (err, data) {
+ path + 'data/presets/fields.json',
+ path + 'data/doc.json'], d3.json, function (err, data) {
iD.data = {
deprecated: data[0],
@@ -24,7 +25,8 @@ iD.data = {
defaults: data[5],
categories: data[6],
fields: data[7]
- }
+ },
+ doc: data[8]
};
callback();
View
@@ -1,10 +1,10 @@
[
{
- "text": "<h1>Mapping Buildings</h1>\n<p>OpenStreetMap is the world&#39;s largest database of buildings. You can create\nand improve this database.</p>\n<h2>Selecting</h2>\n<p>You can select a building by clicking on its border. This will highlight the\nbuilding and open a small tools menu and a sidebar showing more information\nabout the building.</p>\n<h2>Modifying</h2>\n<p>Sometimes buildings are incorrectly placed or have incorrect tags.</p>\n<p>To move an entire building, select it, then click the &#39;Move&#39; tool. Move your\nmouse to shift the building, and click when it&#39;s correctly placed.</p>\n<p>To fix the specific shape of a building, click and drag the points that form\nits border into better places.</p>\n<h2>Creating</h2>\n<p>One of the main questions around adding buildings to the map is that\nOpenStreetMap records buildings both as shapes and points. The rule of thumb\nis to <em>map a building as a shape whenever possible</em>, and map companies, homes,\namenities, and other things that operate out of buildings as points placed\nwithin the building shape.</p>\n<p>Start drawing a building as a shape by clicking the &#39;Area&#39; button in the top\nleft of the interface, and end it either by pressing &#39;Return&#39; on your keyboard\nor clicking on the first point drawn to close the shape.</p>\n<h2>Deleting</h2>\n<p>If a building is entirely incorrect - you can see that it doesn&#39;t exist in satellite\nimagery and ideally have confirmed locally that it&#39;s not present - you can delete\nit, which removes it from the map. Be cautious when deleting features -\nlike any other edit, the results are seen by everyone and satellite imagery\nis often out of date, so the road could simply be newly built.</p>\n<p>You can delete a building by clicking on it to select it, then clicking the\ntrash can icon or pressing the &#39;Delete&#39; key.</p>\n",
+ "html": "<h1>Mapping Buildings</h1>\n<p>OpenStreetMap is the world&#39;s largest database of buildings. You can create\nand improve this database.</p>\n<h2>Selecting</h2>\n<p>You can select a building by clicking on its border. This will highlight the\nbuilding and open a small tools menu and a sidebar showing more information\nabout the building.</p>\n<h2>Modifying</h2>\n<p>Sometimes buildings are incorrectly placed or have incorrect tags.</p>\n<p>To move an entire building, select it, then click the &#39;Move&#39; tool. Move your\nmouse to shift the building, and click when it&#39;s correctly placed.</p>\n<p>To fix the specific shape of a building, click and drag the points that form\nits border into better places.</p>\n<h2>Creating</h2>\n<p>One of the main questions around adding buildings to the map is that\nOpenStreetMap records buildings both as shapes and points. The rule of thumb\nis to <em>map a building as a shape whenever possible</em>, and map companies, homes,\namenities, and other things that operate out of buildings as points placed\nwithin the building shape.</p>\n<p>Start drawing a building as a shape by clicking the &#39;Area&#39; button in the top\nleft of the interface, and end it either by pressing &#39;Return&#39; on your keyboard\nor clicking on the first point drawn to close the shape.</p>\n<h2>Deleting</h2>\n<p>If a building is entirely incorrect - you can see that it doesn&#39;t exist in satellite\nimagery and ideally have confirmed locally that it&#39;s not present - you can delete\nit, which removes it from the map. Be cautious when deleting features -\nlike any other edit, the results are seen by everyone and satellite imagery\nis often out of date, so the road could simply be newly built.</p>\n<p>You can delete a building by clicking on it to select it, then clicking the\ntrash can icon or pressing the &#39;Delete&#39; key.</p>\n",
"title": "Mapping Buildings"
},
{
- "text": "<h1>Mapping Roads</h1>\n<p>You can create, fix, and delete roads with this editor. Roads can be all\nkinds: paths, highways, trails, cycleways, and more - any often-crossed\nsegment should be mappable.</p>\n<h2>Selecting</h2>\n<p>Click on a road to select it. An outline should become visible, along\nwith a small tools menu on the map and a sidebar showing more information\nabout the road.</p>\n<h3>Modifying</h3>\n<p>Often you&#39;ll see roads that aren&#39;t aligned to the imagery behind them\nor a GPS track.</p>\n<p>First click on the road you want to change. This will highlight it and show\n&#39;control points along it&#39; that you can drag to better locations. If\nyou want to add new control points for more detail, double-click a part\nof the road without a point, and one will be added.</p>\n<p>If the road connects to another road, but doesn&#39;t properly connect on\nthe map, you can drag one of its control points onto the other road in\norder to join them. Having roads connect is important for the map\nand essential for providing driving directions.</p>\n<p>You can also click the &#39;Move&#39; tool or type <code>M</code> to move the entire road at\none time, and then click again to save that movement.</p>\n<h2>Deleting</h2>\n<p>If a road is entirely incorrect - you can see that it doesn&#39;t exist in satellite\nimagery and ideally have confirmed locally that it&#39;s not present - you can delete\nit, which removes it from the map. Be cautious when deleting features -\nlike any other edit, the results are seen by everyone and satellite imagery\nis often out of date, so the road could simply be newly built.</p>\n<p>You can delete a road by clicking on it to select it, then clicking the\ntrash can icon or pressing the &#39;Delete&#39; key.</p>\n<h2>Creating</h2>\n<p>Found somewhere there should be a road but there isn&#39;t? Click the &#39;Line&#39;\nicon in the top-left of the editor or press the key &#39;2&#39; to start drawing\na line.</p>\n<p>Click on the start of the road on the map to start drawing. If the road\nconnects to another road, first, click on the place where they connect.</p>\n<p>Then click on points along the road so that it follows the right path, according\nto satellite imagery or GPS. When you&#39;re done drawing the road, double-click\nor press &#39;Return&#39; or &#39;Enter&#39; on your keyboard.</p>\n",
+ "html": "<h1>Mapping Roads</h1>\n<p>You can create, fix, and delete roads with this editor. Roads can be all\nkinds: paths, highways, trails, cycleways, and more - any often-crossed\nsegment should be mappable.</p>\n<h2>Selecting</h2>\n<p>Click on a road to select it. An outline should become visible, along\nwith a small tools menu on the map and a sidebar showing more information\nabout the road.</p>\n<h3>Modifying</h3>\n<p>Often you&#39;ll see roads that aren&#39;t aligned to the imagery behind them\nor a GPS track.</p>\n<p>First click on the road you want to change. This will highlight it and show\n&#39;control points along it&#39; that you can drag to better locations. If\nyou want to add new control points for more detail, double-click a part\nof the road without a point, and one will be added.</p>\n<p>If the road connects to another road, but doesn&#39;t properly connect on\nthe map, you can drag one of its control points onto the other road in\norder to join them. Having roads connect is important for the map\nand essential for providing driving directions.</p>\n<p>You can also click the &#39;Move&#39; tool or type <code>M</code> to move the entire road at\none time, and then click again to save that movement.</p>\n<h2>Deleting</h2>\n<p>If a road is entirely incorrect - you can see that it doesn&#39;t exist in satellite\nimagery and ideally have confirmed locally that it&#39;s not present - you can delete\nit, which removes it from the map. Be cautious when deleting features -\nlike any other edit, the results are seen by everyone and satellite imagery\nis often out of date, so the road could simply be newly built.</p>\n<p>You can delete a road by clicking on it to select it, then clicking the\ntrash can icon or pressing the &#39;Delete&#39; key.</p>\n<h2>Creating</h2>\n<p>Found somewhere there should be a road but there isn&#39;t? Click the &#39;Line&#39;\nicon in the top-left of the editor or press the key &#39;2&#39; to start drawing\na line.</p>\n<p>Click on the start of the road on the map to start drawing. If the road\nconnects to another road, first, click on the place where they connect.</p>\n<p>Then click on points along the road so that it follows the right path, according\nto satellite imagery or GPS. When you&#39;re done drawing the road, double-click\nor press &#39;Return&#39; or &#39;Enter&#39; on your keyboard.</p>\n",
"title": "Mapping Roads"
}
]
View
@@ -172,10 +172,7 @@ locale.en = {
"no_documentation_key": "There is no documentation available for this key",
"show_more": "Show More",
"new_tag": "New tag",
- "edit_tags": "Edit tags",
- "okay": "Okay",
"view_on_osm": "View on OSM",
- "name": "Name",
"editing_feature": "Editing {feature}",
"additional": "Additional tags",
"choose": "Select feature type",
View
@@ -71,6 +71,7 @@
<script src='js/id/ui/modes.js'></script>
<script src='js/id/ui/contributors.js'></script>
<script src='js/id/ui/geocoder.js'></script>
+ <script src='js/id/ui/help.js'></script>
<script src='js/id/ui/geolocate.js'></script>
<script src='js/id/ui/notice.js'></script>
<script src='js/id/ui/flash.js'></script>
View
@@ -52,6 +52,10 @@ iD.ui = function(context) {
.attr('class', 'spinner')
.call(iD.ui.Spinner(context));
+ container.append('div')
+ .style('display', 'none')
+ .attr('class', 'help-wrap col4');
+
container.append('div')
.attr('class', 'map-control zoombuttons')
.call(iD.ui.Zoom(context));
@@ -68,6 +72,10 @@ iD.ui = function(context) {
.attr('class', 'map-control geolocate-control')
.call(iD.ui.Geolocate(map));
+ container.append('div')
+ .attr('class', 'map-control help-control')
+ .call(iD.ui.Help(context));
+
container.append('div')
.style('display', 'none')
.attr('class', 'inspector-wrap fr content col4');
View
@@ -0,0 +1,90 @@
+iD.ui.Help = function(context) {
+
+ var key = 'h';
+
+ function help(selection) {
+
+ var shown = false;
+
+ function hide() { setVisible(false); }
+ function toggle() {
+ if (d3.event) d3.event.preventDefault();
+ tooltip.hide(button);
+ setVisible(!button.classed('active'));
+ }
+
+ function setVisible(show) {
+ if (show !== shown) {
+ button.classed('active', show);
+ if (!show) return;
+
+ var pane = context.container().select('.help-wrap');
+
+ pane
+ .html('');
+
+ pane.style('display', 'block')
+ .style('left', '-500px')
+ .style('opacity', 1)
+ .transition()
+ .duration(200)
+ .style('left', '0px');
+
+ if (show) {
+
+ pane.append('h4').text(t('help.title'));
+
+ var toc = pane.append('div')
+ .attr('class', 'toc')
+ .append('ul');
+
+ toc
+ .selectAll('li')
+ .data(iD.data.doc)
+ .enter()
+ .append('li')
+ .append('a')
+ .text(function(d) { return d.title; })
+ .on('click', function(d) {
+ doctitle.text(d.title);
+ console.log(d);
+ body.html(d.html);
+ });
+
+ var doctitle = pane.append('h3').text(t('help.title'));
+
+ var body = pane.append('div')
+ .attr('class', 'body');
+
+ selection.on('mousedown.help-inside', function() {
+ return d3.event.stopPropagation();
+ });
+ } else {
+ selection.on('mousedown.help-inside', null);
+ }
+ }
+ }
+
+ var tooltip = bootstrap.tooltip()
+ .placement('right')
+ .html(true)
+ .title(iD.ui.tooltipHtml(t('help.title'), key));
+
+ var button = selection.append('button')
+ .attr('tabindex', -1)
+ .on('click', toggle)
+ .call(tooltip);
+
+ button.append('span')
+ .attr('class', 'icon help light');
+
+ context.surface().on('mousedown.help-outside', hide);
+ context.container().on('mousedown.b.help-outside', hide);
+
+ var keybinding = d3.keybinding('help');
+ keybinding.on(key, toggle);
+ d3.select(document).call(keybinding);
+ }
+
+ return help;
+};

0 comments on commit 64bec11

Please sign in to comment.