This commit is contained in:
John Firebaugh
2013-08-27 16:02:59 -07:00
parent 56a12349a2
commit 7c2698f0e2
+106 -106
View File
@@ -1,115 +1,38 @@
iD.ui.Help = function(context) {
var key = 'h';
var docKeys = [
'help.help',
'help.editing_saving',
'help.roads',
'help.gps',
'help.imagery',
'help.addresses',
'help.inspector',
'help.buildings',
'help.relations'];
var docs = docKeys.map(function(key) {
var text = t(key);
return {
title: text.split('\n')[0].replace('#', '').trim(),
html: marked(text.split('\n').slice(1).join('\n'))
};
});
function help(selection) {
var shown = false;
var shown = false, pane;
function setup() {
pane = context.container()
.select('.help-wrap')
.html('');
var toc = pane.append('ul')
.attr('class', 'toc');
function clickHelp(d, i) {
pane.property('scrollTop', 0);
doctitle.text(d.title);
body.html(d.html);
body.selectAll('a')
.attr('target', '_blank');
menuItems.classed('selected', function(m) {
return m.title === d.title;
});
nav.html('');
if (i > 0) {
var prevLink = nav.append('a')
.attr('class', 'previous')
.on('click', function() {
clickHelp(docs[i - 1], i - 1);
});
prevLink.append('span').attr('class', 'icon back blue');
prevLink.append('span').text(docs[i - 1].title);
}
if (i < docs.length - 1) {
var nextLink = nav.append('a')
.attr('class', 'next')
.on('click', function() {
clickHelp(docs[i + 1], i + 1);
});
nextLink.append('span').text(docs[i + 1].title);
nextLink.append('span').attr('class', 'icon forward blue');
}
}
var docKeys = [
'help.help',
'help.editing_saving',
'help.roads',
'help.gps',
'help.imagery',
'help.addresses',
'help.inspector',
'help.buildings',
'help.relations'];
function one(f) { return function(x) { return f(x); }; }
var docs = docKeys.map(one(t)).map(function(text) {
return {
title: text.split('\n')[0].replace('#', '').trim(),
html: marked(text.split('\n').slice(1).join('\n'))
};
});
var menuItems = toc.selectAll('li')
.data(docs)
.enter()
.append('li')
.append('a')
.text(function(d) { return d.title; })
.on('click', clickHelp);
toc.append('li')
.attr('class','walkthrough')
.append('a')
.text(t('splash.walkthrough'))
.on('click', function() {
d3.select(document.body).call(iD.ui.intro(context));
setVisible(false);
});
var content = pane.append('div')
.attr('class', 'left-content'),
doctitle = content.append('h2')
.text(t('help.title')),
body = content.append('div')
.attr('class', 'body'),
nav = content.append('div')
.attr('class', 'nav');
clickHelp(docs[0], 0);
function hide() {
setVisible(false);
}
function hide() { setVisible(false); }
function toggle() {
if (d3.event) d3.event.preventDefault();
tooltip.hide(button);
setVisible(!button.classed('active'));
}
function blockClick() {
pane.on('mousedown.help-inside', function() {
return d3.event.stopPropagation();
});
selection.on('mousedown.help-inside', function() {
return d3.event.stopPropagation();
});
}
function setVisible(show) {
if (show !== shown) {
button.classed('active', show);
@@ -119,8 +42,7 @@ iD.ui.Help = function(context) {
.style('right', '-500px')
.transition()
.duration(200)
.style('right', '0px')
.each('end', blockClick);
.style('right', '0px');
} else {
pane.style('right', '0px')
.transition()
@@ -129,11 +51,47 @@ iD.ui.Help = function(context) {
.each('end', function() {
d3.select(this).style('display', 'none');
});
pane.on('mousedown.help-inside', null);
}
}
}
function clickHelp(d, i) {
pane.property('scrollTop', 0);
doctitle.text(d.title);
body.html(d.html);
body.selectAll('a')
.attr('target', '_blank');
menuItems.classed('selected', function(m) {
return m.title === d.title;
});
nav.html('');
if (i > 0) {
var prevLink = nav.append('a')
.attr('class', 'previous')
.on('click', function() {
clickHelp(docs[i - 1], i - 1);
});
prevLink.append('span').attr('class', 'icon back blue');
prevLink.append('span').text(docs[i - 1].title);
}
if (i < docs.length - 1) {
var nextLink = nav.append('a')
.attr('class', 'next')
.on('click', function() {
clickHelp(docs[i + 1], i + 1);
});
nextLink.append('span').text(docs[i + 1].title);
nextLink.append('span').attr('class', 'icon forward blue');
}
}
function clickWalkthrough() {
d3.select(document.body).call(iD.ui.intro(context));
setVisible(false);
}
var tooltip = bootstrap.tooltip()
.placement('left')
.html(true)
@@ -147,14 +105,56 @@ iD.ui.Help = function(context) {
button.append('span')
.attr('class', 'icon help light');
var pane = context.container()
.select('.help-wrap');
var toc = pane.append('ul')
.attr('class', 'toc');
var menuItems = toc.selectAll('li')
.data(docs)
.enter()
.append('li')
.append('a')
.text(function(d) { return d.title; })
.on('click', clickHelp);
toc.append('li')
.attr('class','walkthrough')
.append('a')
.text(t('splash.walkthrough'))
.on('click', clickWalkthrough);
var content = pane.append('div')
.attr('class', 'left-content');
var doctitle = content.append('h2')
.text(t('help.title'));
var body = content.append('div')
.attr('class', 'body');
var nav = content.append('div')
.attr('class', 'nav');
clickHelp(docs[0], 0);
var keybinding = d3.keybinding('help')
.on(key, toggle);
d3.select(document)
.call(keybinding);
context.surface().on('mousedown.help-outside', hide);
context.container().on('mousedown.b.help-outside', hide);
setup();
pane.on('mousedown.help-inside', function() {
return d3.event.stopPropagation();
});
var keybinding = d3.keybinding('help');
keybinding.on(key, toggle);
d3.select(document).call(keybinding);
selection.on('mousedown.help-inside', function() {
return d3.event.stopPropagation();
});
}
return help;