mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-24 09:04:02 +02:00
Update the first two chapters of the walkthrough for non-mouse interaction
This commit is contained in:
Quincy Morgan
+1
-223
@@ -1,8 +1,4 @@
|
||||
import { dispatch as d3_dispatch } from 'd3-dispatch';
|
||||
import {
|
||||
event as d3_event,
|
||||
select as d3_select
|
||||
} from 'd3-selection';
|
||||
|
||||
import { t } from '../../core/localizer';
|
||||
import { utilRebind } from '../../util/rebind';
|
||||
@@ -10,7 +6,6 @@ import { utilRebind } from '../../util/rebind';
|
||||
|
||||
export function uiIntroWelcome(context, reveal) {
|
||||
var dispatch = d3_dispatch('done');
|
||||
var listener = clickListener();
|
||||
|
||||
var chapter = {
|
||||
title: 'intro.welcome.title'
|
||||
@@ -35,101 +30,11 @@ export function uiIntroWelcome(context, reveal) {
|
||||
function words() {
|
||||
reveal('.intro-nav-wrap .chapter-welcome',
|
||||
t('intro.welcome.words'),
|
||||
{ buttonText: t('intro.ok'), buttonCallback: mouse }
|
||||
{ buttonText: t('intro.ok'), buttonCallback: chapters }
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function mouse() {
|
||||
reveal('.intro-nav-wrap .chapter-welcome',
|
||||
t('intro.welcome.mouse'),
|
||||
{ buttonText: t('intro.ok'), buttonCallback: leftClick }
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function leftClick() {
|
||||
var counter = 0;
|
||||
var times = 5;
|
||||
|
||||
var tooltip = reveal('.intro-nav-wrap .chapter-welcome',
|
||||
t('intro.welcome.leftclick', { num: times }),
|
||||
{ tooltipClass: 'intro-mouse' }
|
||||
);
|
||||
|
||||
tooltip.selectAll('.popover-inner')
|
||||
.insert('svg', 'span')
|
||||
.attr('class', 'tooltip-illustration')
|
||||
.append('use')
|
||||
.attr('xlink:href', '#iD-walkthrough-mouse');
|
||||
|
||||
tooltip
|
||||
.append('div')
|
||||
.attr('class', 'counter');
|
||||
|
||||
tooltip.call(listener);
|
||||
|
||||
listener.on('click', function(which) {
|
||||
if (which === 'left') {
|
||||
context.container().select('.curtain-tooltip.intro-mouse .counter')
|
||||
.text(String(++counter));
|
||||
|
||||
if (counter === times) {
|
||||
window.setTimeout(function() { continueTo(rightClick); }, 1000);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function continueTo(nextStep) {
|
||||
listener.on('click', null);
|
||||
tooltip.call(listener.off);
|
||||
tooltip.select('.counter').remove();
|
||||
nextStep();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function rightClick() {
|
||||
var counter = 0;
|
||||
var times = 5;
|
||||
|
||||
var tooltip = reveal('.intro-nav-wrap .chapter-welcome',
|
||||
t('intro.welcome.rightclick', { num: times }),
|
||||
{ tooltipClass: 'intro-mouse' }
|
||||
);
|
||||
|
||||
tooltip.selectAll('.popover-inner')
|
||||
.insert('svg', 'span')
|
||||
.attr('class', 'tooltip-illustration')
|
||||
.append('use')
|
||||
.attr('xlink:href', '#iD-walkthrough-mouse');
|
||||
|
||||
tooltip
|
||||
.append('div')
|
||||
.attr('class', 'counter');
|
||||
|
||||
tooltip.call(listener);
|
||||
|
||||
listener.on('click', function(which) {
|
||||
if (which === 'right') {
|
||||
context.container().select('.curtain-tooltip.intro-mouse .counter')
|
||||
.text(String(++counter));
|
||||
|
||||
if (counter === times) {
|
||||
window.setTimeout(function() { continueTo(chapters); }, 1000);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function continueTo(nextStep) {
|
||||
listener.on('click', null);
|
||||
tooltip.call(listener.off);
|
||||
tooltip.select('.counter').remove();
|
||||
nextStep();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function chapters() {
|
||||
dispatch.call('done');
|
||||
reveal('.intro-nav-wrap .chapter-navigation',
|
||||
@@ -144,7 +49,6 @@ export function uiIntroWelcome(context, reveal) {
|
||||
|
||||
|
||||
chapter.exit = function() {
|
||||
listener.off();
|
||||
context.container().select('.curtain-tooltip.intro-mouse')
|
||||
.selectAll('.counter')
|
||||
.remove();
|
||||
@@ -159,129 +63,3 @@ export function uiIntroWelcome(context, reveal) {
|
||||
|
||||
return utilRebind(chapter, dispatch, 'on');
|
||||
}
|
||||
|
||||
|
||||
|
||||
function clickListener() {
|
||||
var dispatch = d3_dispatch('click');
|
||||
var minTime = 120;
|
||||
var tooltip = d3_select(null);
|
||||
var down = {};
|
||||
|
||||
var _pointerPrefix = 'PointerEvent' in window ? 'pointer' : 'mouse';
|
||||
|
||||
// `down` keeps track of which buttons/keys are down.
|
||||
// Setting a property in `down` happens immediately.
|
||||
// Unsetting a property in `down` is delayed because
|
||||
// on Windows a contextmenu event happens after keyup/mouseup
|
||||
|
||||
function keydown() {
|
||||
if (d3_event.keyCode === 93) { // context menu
|
||||
d3_event.preventDefault();
|
||||
d3_event.stopPropagation();
|
||||
down.menu = d3_event.timeStamp;
|
||||
tooltip.classed('rightclick', true);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function keyup() {
|
||||
if (d3_event.keyCode === 93) { // context menu
|
||||
d3_event.preventDefault();
|
||||
d3_event.stopPropagation();
|
||||
var endTime = d3_event.timeStamp;
|
||||
var startTime = down.menu || endTime;
|
||||
var delay = (endTime - startTime < minTime) ? minTime : 0;
|
||||
|
||||
window.setTimeout(function() {
|
||||
tooltip.classed('rightclick', false);
|
||||
down.menu = undefined; // delayed, for Windows
|
||||
}, delay);
|
||||
|
||||
dispatch.call('click', this, 'right');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function pointerdown() {
|
||||
var button = d3_event.button;
|
||||
if (button === 0 && !d3_event.ctrlKey) {
|
||||
tooltip.classed('leftclick', true);
|
||||
} else if (button === 2) {
|
||||
tooltip.classed('rightclick', true);
|
||||
}
|
||||
down[button] = d3_event.timeStamp;
|
||||
}
|
||||
|
||||
|
||||
function pointerup() {
|
||||
var button = d3_event.button;
|
||||
var endTime = d3_event.timeStamp;
|
||||
var startTime = down[button] || endTime;
|
||||
var delay = (endTime - startTime < minTime) ? minTime : 0;
|
||||
|
||||
if (button === 0 && !d3_event.ctrlKey) {
|
||||
window.setTimeout(function() {
|
||||
tooltip.classed('leftclick', false);
|
||||
down[button] = undefined; // delayed, for Windows
|
||||
}, delay);
|
||||
|
||||
dispatch.call('click', this, 'left');
|
||||
|
||||
} else if (button === 2) {
|
||||
window.setTimeout(function() {
|
||||
tooltip.classed('rightclick', false);
|
||||
down[button] = undefined; // delayed, for Windows
|
||||
}, delay);
|
||||
|
||||
dispatch.call('click', this, 'right');
|
||||
|
||||
} else {
|
||||
window.setTimeout(function() {
|
||||
down[button] = undefined; // delayed, for Windows
|
||||
}, delay);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function contextmenu() {
|
||||
d3_event.preventDefault();
|
||||
d3_event.stopPropagation();
|
||||
if (!down[2] && !down.menu) {
|
||||
tooltip.classed('rightclick', true);
|
||||
window.setTimeout(function() {
|
||||
tooltip.classed('rightclick', false);
|
||||
}, minTime);
|
||||
dispatch.call('click', this, 'right');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var behavior = function(selection) {
|
||||
tooltip = selection;
|
||||
down = {};
|
||||
|
||||
d3_select(window)
|
||||
.on('keydown.intro', keydown)
|
||||
.on('keyup.intro', keyup)
|
||||
.on(_pointerPrefix + 'down.intro', pointerdown)
|
||||
.on(_pointerPrefix + 'up.intro', pointerup)
|
||||
.on('contextmenu.intro', contextmenu);
|
||||
};
|
||||
|
||||
|
||||
behavior.off = function() {
|
||||
d3_select(window)
|
||||
.on('keydown.intro', null)
|
||||
.on('keyup.intro', null)
|
||||
.on(_pointerPrefix + 'down.intro', null)
|
||||
.on(_pointerPrefix + 'up.intro', null)
|
||||
.on('contextmenu.intro', null);
|
||||
|
||||
tooltip
|
||||
.classed('leftclick', false)
|
||||
.classed('rightclick', false);
|
||||
};
|
||||
|
||||
return utilRebind(behavior, dispatch, 'on');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user