diff --git a/css/app.css b/css/app.css index ae4a953af..aa14a3bf2 100644 --- a/css/app.css +++ b/css/app.css @@ -1595,6 +1595,19 @@ img.wiki-image { border-radius: 0 0 4px 4px } +.help-wrap .nav a { + width: 50%; + display: inline-block; +} + +.help-wrap .nav a span { + padding: 10px; +} + +.help-wrap .nav a.next { + text-align: right; +} + /* Map ------------------------------------------------------- */ diff --git a/js/id/ui/help.js b/js/id/ui/help.js index b706f513f..8c39ba533 100644 --- a/js/id/ui/help.js +++ b/js/id/ui/help.js @@ -14,7 +14,7 @@ iD.ui.Help = function(context) { var toc = pane.append('ul') .attr('class', 'toc'); - function clickHelp(d) { + function clickHelp(d, i) { doctitle.text(d.title); body.html(d.html); body.selectAll('a') @@ -22,6 +22,28 @@ iD.ui.Help = function(context) { menuItems.classed('selected', function(m) { return m.title === d.title; }); + + nav.html(''); + + var prevLink = nav.append('a') + .attr('class', 'previous') + .on('click', function() { + clickHelp(docs[i - 1], i - 1); + }), + nextLink = nav.append('a') + .attr('class', 'next') + .on('click', function() { + clickHelp(docs[i + 1], i + 1); + }); + + if (i > 0) { + prevLink.append('span').attr('class', 'icon back'); + prevLink.append('span').text(docs[i - 1].title); + } + if (i < docs.length - 1) { + nextLink.append('span').text(docs[i + 1].title); + nextLink.append('span').attr('class', 'icon forward'); + } } var docKeys = [ @@ -63,9 +85,11 @@ iD.ui.Help = function(context) { doctitle = content.append('h2') .text(t('help.title')), body = content.append('div') - .attr('class', 'body'); + .attr('class', 'body'), + nav = content.append('div') + .attr('class', 'nav'); - clickHelp(docs[0]); + clickHelp(docs[0], 0); } function hide() { setVisible(false); }