CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-27 02:12:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Adjust language, remove curtain for play steps

Browse Source
This commit is contained in:
Bryan Housel
2017-04-17 17:51:22 -04:00
parent 28802daae4
commit cf9eb22e5f
8 changed files with 119 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/ui/curtain.js
+50 -26
View File
@@ -55,28 +55,47 @@ export function uiCurtain() {
* Reveal cuts the curtain to highlight the given box,
* and shows a tooltip with instructions next to the box.
*
* @param {String|ClientRect} [box] box to focus on
* @param {String} [text] text for a tooltip
* @param {String|ClientRect} [box] box used to cut the curtain
* @param {String} [text] text for a tooltip
* @param {Object} [options]
* @param {integer} [options.duration] transition time in milliseconds
* @param {string} [options.buttonText] if set, create a button with this text label
* @param {string} [options.tooltipClass] optional class to add to the tooltip
* @param {integer} [options.duration] transition time in milliseconds
* @param {string} [options.buttonText] if set, create a button with this text label
* @param {function} [options.buttonCallback] if set, the callback for the button
* @param {String|ClientRect} [options.tooltipBox] box for tooltip position, if different from box for the curtain
*/
curtain.reveal = function(box, text, options) {
if (typeof box === 'string') box = d3.select(box).node();
if (box && box.getBoundingClientRect) box = copyBox(box.getBoundingClientRect());
if (typeof box === 'string') {
box = d3.select(box).node();
}
if (box && box.getBoundingClientRect) {
box = copyBox(box.getBoundingClientRect());
}
options = options || {};
if (box && text) {
// pseudo markdown hacks
var tooltipBox;
if (options.tooltipBox) {
tooltipBox = options.tooltipBox;
if (typeof tooltipBox === 'string') {
tooltipBox = d3.select(tooltipBox).node();
}
if (tooltipBox && tooltipBox.getBoundingClientRect) {
tooltipBox = copyBox(tooltipBox.getBoundingClientRect());
}
} else {
tooltipBox = box;
}
if (tooltipBox && text) {
// pseudo markdown bold text for the instruction section..
var parts = text.split('**');
var html = parts[0] ? '<span>' + parts[0] + '</span>' : '';
if (parts[1]) {
html += '<span class="instruction">' + parts[1] + '</span>';
}
// pseudo markdown bold text hack
// pseudo markdown emphasis text..
html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
@@ -100,7 +119,6 @@ export function uiCurtain() {
});
}
// var dimensions = utilGetDimensions(selection, true),
var tip = copyBox(tooltip.node().getBoundingClientRect()),
w = window.innerWidth,
h = window.innerHeight,
@@ -109,47 +127,53 @@ export function uiCurtain() {
side, pos;
// trim box dimensions to just the portion that fits in the window..
if (box.top + box.height > h) {
box.height -= (box.top + box.height - h);
if (tooltipBox.top + tooltipBox.height > h) {
tooltipBox.height -= (tooltipBox.top + tooltipBox.height - h);
}
if (box.left + box.width > w) {
box.width -= (box.left + box.width - w);
if (tooltipBox.left + tooltipBox.width > w) {
tooltipBox.width -= (tooltipBox.left + tooltipBox.width - w);
}
// determine tooltip placement..
if (box.top + box.height < 100) {
if (tooltipBox.top + tooltipBox.height < 100) {
// tooltip below box..
side = 'bottom';
pos = [box.left + box.width / 2 - tip.width / 2, box.top + box.height];
pos = [
tooltipBox.left + tooltipBox.width / 2 - tip.width / 2,
tooltipBox.top + tooltipBox.height
];
} else if (box.top > h - 140) {
} else if (tooltipBox.top > h - 140) {
// tooltip above box..
side = 'top';
pos = [box.left + box.width / 2 - tip.width / 2, box.top - tip.height];
pos = [
tooltipBox.left + tooltipBox.width / 2 - tip.width / 2,
tooltipBox.top - tip.height
];
} else {
// tooltip to the side of the box..
var tipY = box.top + box.height / 2 - tip.height / 2;
// tooltip to the side of the tooltipBox..
var tipY = tooltipBox.top + tooltipBox.height / 2 - tip.height / 2;
if (textDirection === 'rtl') {
if (box.left - tooltipWidth - tooltipArrow < 70) {
if (tooltipBox.left - tooltipWidth - tooltipArrow < 70) {
side = 'right';
pos = [box.left + box.width + tooltipArrow, tipY];
pos = [tooltipBox.left + tooltipBox.width + tooltipArrow, tipY];
} else {
side = 'left';
pos = [box.left - tooltipWidth - tooltipArrow, tipY];
pos = [tooltipBox.left - tooltipWidth - tooltipArrow, tipY];
}
} else {
if (box.left + box.width + tooltipArrow + tooltipWidth > w - 70) {
if (tooltipBox.left + tooltipBox.width + tooltipArrow + tooltipWidth > w - 70) {
side = 'left';
pos = [box.left - tooltipWidth - tooltipArrow, tipY];
pos = [tooltipBox.left - tooltipWidth - tooltipArrow, tipY];
}
else {
side = 'right';
pos = [box.left + box.width + tooltipArrow, tipY];
pos = [tooltipBox.left + tooltipBox.width + tooltipArrow, tipY];
}
}
}
modules/ui/intro/area.js
+4 -5
View File
@@ -355,13 +355,12 @@ export function uiIntroArea(context, reveal) {
function play() {
reveal('.intro-nav-wrap .chapter-line',
dispatch.call('done');
reveal('#id-container',
t('intro.areas.play', { next: t('intro.lines.title') }), {
tooltipBox: '.intro-nav-wrap .chapter-line',
buttonText: t('intro.ok'),
buttonCallback: function() {
dispatch.call('done');
reveal('#id-container');
}
buttonCallback: function() { reveal('#id-container'); }
}
);
}
modules/ui/intro/building.js
+4 -5
View File
@@ -736,13 +736,12 @@ export function uiIntroBuilding(context, reveal) {
function play() {
reveal('.intro-nav-wrap .chapter-startEditing',
dispatch.call('done');
reveal('#id-container',
t('intro.buildings.play', { next: t('intro.startediting.title') }), {
tooltipBox: '.intro-nav-wrap .chapter-startEditing',
buttonText: t('intro.ok'),
buttonCallback: function() {
dispatch.call('done');
reveal('#id-container');
}
buttonCallback: function() { reveal('#id-container'); }
}
);
}
modules/ui/intro/line.js
+5 -6
View File
@@ -1035,16 +1035,15 @@ export function uiIntroLine(context, reveal) {
function play() {
reveal('.intro-nav-wrap .chapter-building',
dispatch.call('done');
reveal('#id-container',
t('intro.lines.play', { next: t('intro.buildings.title') }), {
tooltipBox: '.intro-nav-wrap .chapter-building',
buttonText: t('intro.ok'),
buttonCallback: function() {
dispatch.call('done');
reveal('#id-container');
}
buttonCallback: function() { reveal('#id-container'); }
}
);
}
}
chapter.enter = function() {
modules/ui/intro/navigation.js
+39 -7
View File
@@ -12,7 +12,9 @@ export function uiIntroNavigation(context, reveal) {
townHall = [-85.63591, 41.94285],
springStreetId = 'w397',
springStreetEndId = 'n1834',
springStreet = [-85.63582, 41.94255];
springStreet = [-85.63582, 41.94255],
onewayField = context.presets().field('oneway'),
maxspeedField = context.presets().field('maxspeed');
var chapter = {
@@ -352,8 +354,20 @@ export function uiIntroNavigation(context, reveal) {
continueTo(searchStreet);
});
context.history().on('change.intro', function() {
// update the close icon in the tooltip if the user edits something.
var selector = '.entity-editor-pane button.preset-close svg use';
var href = d3.select(selector).attr('href') || '#icon-close';
reveal('.entity-editor-pane',
t('intro.navigation.close_townhall', { button: icon(href, 'pre-text') }),
{ duration: 0 }
);
});
function continueTo(nextStep) {
context.on('exit.intro', null);
context.history().on('change.intro', null);
nextStep();
}
}
@@ -469,28 +483,46 @@ export function uiIntroNavigation(context, reveal) {
var href = d3.select(selector).attr('href') || '#icon-close';
reveal('.entity-editor-pane',
t('intro.navigation.editor_street', { button: icon(href, 'pre-text') })
t('intro.navigation.editor_street', {
button: icon(href, 'pre-text'),
field1: onewayField.label().toLowerCase(),
field2: maxspeedField.label().toLowerCase()
})
);
context.on('exit.intro', function() {
continueTo(play);
});
context.history().on('change.intro', function() {
// update the close icon in the tooltip if the user edits something.
var selector = '.entity-editor-pane button.preset-close svg use';
var href = d3.select(selector).attr('href') || '#icon-close';
reveal('.entity-editor-pane',
t('intro.navigation.editor_street', {
button: icon(href, 'pre-text'),
field1: onewayField.label().toLowerCase(),
field2: maxspeedField.label().toLowerCase()
}), { duration: 0 }
);
});
function continueTo(nextStep) {
context.on('exit.intro', null);
context.history().on('change.intro', null);
nextStep();
}
}
function play() {
reveal('.intro-nav-wrap .chapter-point',
dispatch.call('done');
reveal('#id-container',
t('intro.navigation.play', { next: t('intro.points.title') }), {
tooltipBox: '.intro-nav-wrap .chapter-point',
buttonText: t('intro.ok'),
buttonCallback: function() {
dispatch.call('done');
reveal('#id-container');
}
buttonCallback: function() { reveal('#id-container'); }
}
);
}
modules/ui/intro/point.js
+4 -5
View File
@@ -455,13 +455,12 @@ export function uiIntroPoint(context, reveal) {
function play() {
reveal('.intro-nav-wrap .chapter-area',
dispatch.call('done');
reveal('#id-container',
t('intro.points.play', { next: t('intro.areas.title') }), {
tooltipBox: '.intro-nav-wrap .chapter-area',
buttonText: t('intro.ok'),
buttonCallback: function() {
dispatch.call('done');
reveal('#id-container');
}
buttonCallback: function() { reveal('#id-container'); }
}
);
}