Skip to content

Commit

Permalink
Improve walkthrough tooltip placement, fix for RTL too
Browse files Browse the repository at this point in the history
  • Loading branch information
bhousel committed Mar 25, 2017
1 parent 5259940 commit 05a428a
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 44 deletions.
19 changes: 9 additions & 10 deletions css/80_app.css
Original file line number Diff line number Diff line change
Expand Up @@ -3235,7 +3235,6 @@ img.tile-removing {
position: absolute;
display: none;
color:#333;
text-align: left;
font-size: 12px;
}

Expand All @@ -3253,6 +3252,7 @@ img.tile-removing {

.tooltip.right {
margin-left: 20px;
text-align: left;
}

.tooltip.bottom {
Expand Down Expand Up @@ -3429,22 +3429,19 @@ img.tile-removing {
.map-control .tooltip {
min-width: 160px;
}

/* Move over tooltips that are near the edge of screen */
.add-point .tooltip {
left: 33.3333% !important;
}

.curtain-tooltip.intro-points-add .tooltip-arrow,
.add-point .tooltip .tooltip-arrow {
left: 60px;
}
[dir='rtl'] .add-point .tooltip .tooltip-arrow {
left: auto;
right: 60px;
}
[dir='rtl'] .curtain-tooltip.intro-points-add .tooltip-arrow {
left: 50%;
}


/* radial menu (deprecated) */

Expand Down Expand Up @@ -3629,22 +3626,24 @@ img.tile-removing {
}

.intro-nav-wrap button.chapter .status {
margin-left: 3px;
display: none;
}

.intro-nav-wrap button.chapter.finished .status {
display: inline-block;
}


.curtain-tooltip .tooltip-inner {
.curtain-tooltip.tooltip {
text-align: left;
padding: 20px;
}
[dir='rtl'] .curtain-tooltip.tooltip {
text-align: right;
}

.curtain-tooltip .tooltip-inner {
font-size: 15px;
position: relative;
padding: 20px;
}

.curtain-tooltip .tooltip-inner .bold {
Expand Down
80 changes: 55 additions & 25 deletions modules/ui/curtain.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as d3 from 'd3';
import { textDirection } from '../util/locale';
import { utilGetDimensions } from '../util/dimensions';
import { uiToggle } from './toggle';

Expand Down Expand Up @@ -64,14 +65,18 @@ export function uiCurtain() {
var html = parts[0] ? '<span>' + parts[0] + '</span>' : '';
if (parts[1]) html += '<span class="bold">' + parts[1] + '</span>';

var selection = tooltip
.classed('in', true)
var classes = 'curtain-tooltip tooltip in ' + (options.tooltipClass || '');
tooltip
.classed(classes, true)
.selectAll('.tooltip-inner')
.html(html);

var dimensions = utilGetDimensions(selection, true),
// var dimensions = utilGetDimensions(selection, true),
var tip = tooltip.node().getBoundingClientRect(),
w = window.innerWidth,
h = window.innerHeight,
tooltipWidth = 200,
tooltipArrow = 5,
side, pos;

// trim box dimensions to just the portion that fits in the window..
Expand All @@ -83,41 +88,66 @@ export function uiCurtain() {
}

// determine tooltip placement..
if (box.top + box.height < Math.min(100, box.width + box.left)) {
side = 'bottom';
pos = [box.left + box.width / 2 - dimensions[0] / 2, box.top + box.height];

} else if (box.left + box.width + 300 < w) {
side = 'right';
pos = [box.left + box.width, box.top + box.height / 2 - dimensions[1] / 2];
if (box.top + box.height < 100) {
// tooltip below box..
side = 'bottom';
pos = [box.left + box.width / 2 - tip.width / 2, box.top + box.height];

} else if (box.left > 300) {
side = 'left';
pos = [box.left - 200, box.top + box.height / 2 - dimensions[1] / 2];
} else if (box.top > h - 140) {
// tooltip above box..
side = 'top';
pos = [box.left + box.width / 2 - tip.width / 2, box.top - tip.height];

} else {
// need real tooltip height to calculate "top" placement
tooltip
.attr('class', 'curtain-tooltip tooltip in')
.call(uiToggle(true));
var tip = tooltip.node().getBoundingClientRect();
side = 'top';
pos = [box.left + box.width / 2 - dimensions[0] / 2, box.top - tip.height];
// tooltip to the side of the box..
var tipY = box.top + box.height / 2 - tip.height / 2;

if (textDirection === 'rtl') {
if (box.left - tooltipWidth - tooltipArrow < 70) {
side = 'right';
pos = [box.left + box.width + tooltipArrow, tipY];

} else {
side = 'left';
pos = [box.left - tooltipWidth - tooltipArrow, tipY];
}

} else {
if (box.left + box.width + tooltipArrow + tooltipWidth > w - 70) {
side = 'left';
pos = [box.left - tooltipWidth - tooltipArrow, tipY];
}
else {
side = 'right';
pos = [box.left + box.width + tooltipArrow, tipY];
}
}
}

pos = [
Math.min(Math.max(10, pos[0]), w - dimensions[0] - 10),
Math.min(Math.max(10, pos[1]), h - dimensions[1] - 10)
];

if (options.duration !== 0 || !tooltip.classed(side)) {
tooltip.call(uiToggle(true));
}

tooltip
.style('top', pos[1] + 'px')
.style('left', pos[0] + 'px')
.attr('class', 'curtain-tooltip tooltip in ' + side + ' ' + (options.tooltipClass || ''));
.attr('class', classes + ' ' + side);


// shift tooltip-inner if it is very close to the top or bottom edge
// (doesn't affect the placement of the tooltip-arrow)
var shiftY = 0;
if (side === 'left' || side === 'right') {
if (pos[1] < 60) {
shiftY = 60 - pos[1];
}
else if (pos[1] + tip.height > h - 100) {
shiftY = h - pos[1] - tip.height - 100;
}
}
tooltip.selectAll('.tooltip-inner')
.style('top', shiftY + 'px');

} else {
tooltip.call(uiToggle(false));
Expand Down
4 changes: 0 additions & 4 deletions modules/ui/intro/line.js
Original file line number Diff line number Diff line change
Expand Up @@ -194,10 +194,6 @@ export function uiIntroLine(context, reveal) {
context.on('exit.intro', null);
context.map().on('move.intro drawn.intro', null);
context.history().on('change.intro', null);
if (drawId) {
context.replace(actionDeleteMultiple([drawId]));
drawId = null;
}
};


Expand Down
14 changes: 11 additions & 3 deletions modules/ui/intro/navigation.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as d3 from 'd3';
import { t } from '../../util/locale';
import { t, textDirection } from '../../util/locale';
import { utilRebind } from '../../util/rebind';
import { icon, pointBox } from './helper';

Expand All @@ -25,11 +25,19 @@ export function uiIntroNavigation(context, reveal) {
}


function welcome() {
reveal('.intro-nav-wrap', 'This walkthrough will teach you the basics of editing on OpenStreetMap.');
timeout(function() {
dragMap();
}, 5000);
}


function dragMap() {
var dragged = false,
rect = context.surfaceRect(),
map = {
left: rect.left + 10,
left: rect.left + (textDirection === 'rtl' ? 60 : 10),
top: rect.top + 70,
width: rect.width - 70,
height: rect.height - 170
Expand Down Expand Up @@ -129,7 +137,7 @@ export function uiIntroNavigation(context, reveal) {

chapter.enter = function() {
context.history().reset('initial');
dragMap();
welcome();
};


Expand Down
3 changes: 1 addition & 2 deletions modules/ui/intro/point.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,7 @@ export function uiIntroPoint(context, reveal) {

function addPoint() {
var tooltip = reveal('button.add-point',
t('intro.points.add', { button: icon('#icon-point', 'pre-text') }),
{ tooltipClass: 'intro-points-add' });
t('intro.points.add', { button: icon('#icon-point', 'pre-text') }));

tooltip.selectAll('.tooltip-inner')
.insert('svg', 'span')
Expand Down

0 comments on commit 05a428a

Please sign in to comment.