Make sure user can left and right click

2026-05-15 21:48:20 +02:00 · 2017-04-18 02:31:00 -04:00
parent dafb1dd49e
commit e3152fb8ec
8 changed files with 252 additions and 6 deletions
@@ -3703,6 +3703,35 @@ img.tile-removing {
    margin-right: -20px;
 }

+.curtain-tooltip.intro-mouse {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.curtain-tooltip.intro-mouse .counter {
+    position: absolute;
+    display: block;
+    top: 50px;
+    width: 100%;
+    text-align: center;
+    font-weight: bold;
+    font-size: 14px;
+    z-index: 1003;
+}
+
+.curtain-tooltip.intro-mouse .tooltip-illustration use {
+    fill: rgba(112, 146, 255, 0);
+    color: rgba(112, 146, 255, 0);
+}
+.curtain-tooltip.intro-mouse.leftclick .tooltip-illustration use {
+    fill: rgba(112, 146, 255, 1);
+}
+.curtain-tooltip.intro-mouse.rightclick .tooltip-illustration use {
+    color: rgba(112, 146, 255, 1);
+}
+
 .huge-modal-button {
    width: 100%;
    height: auto;
@@ -897,7 +897,10 @@ en:
      welcome: "Welcome! This walkthrough will teach you the basics of editing on OpenStreetMap."
      practice: "All of the data in this walkthrough is just for practicing, and any edits that you make in the walkthrough will not be saved."
      words: "This walkthrough will introduce some new words and concepts. When we introduce a new word, we'll use *italics*."
-      chapters: "You can use the buttons below to skip chapters at any time or to restart a chapter if you get stuck. Let's begin! **Click '{next}' to continue.**"
+      mouse: "You can use any input device to edit the map, but this walkthrough assumes you have a mouse with left and right buttons. **If you want to attach a mouse, do so now, then click OK.**"
+      leftclick: "When this tutorial asks you to click or double-click, we mean with the left button. On a trackpad it might be a single-click or single-finger tap. **Left-click {num} times.**"
+      rightclick: "Sometimes we'll also ask you to right-click. This might be the same as control-click, or two-finger tap on a trackpad. Your keyboard might even have a 'menu' key that works like right-click. **Right-click {num} times.**"
+      chapters: "So far, so good! You can use the buttons below to skip chapters at any time or to restart a chapter if you get stuck. Let's begin! **Click '{next}' to continue.**"
    navigation:
      title: "Navigation"
      drag: "The main map area shows OpenStreetMap data on top of a background. You can navigate by dragging and scrolling, just like any web map. **Drag the map!**"
@@ -756,7 +756,10 @@
                "welcome": "Welcome! This walkthrough will teach you the basics of editing on OpenStreetMap.",
                "practice": "All of the data in this walkthrough is just for practicing, and any edits that you make in the walkthrough will not be saved.",
                "words": "This walkthrough will introduce some new words and concepts. When we introduce a new word, we'll use *italics*.",
-                "chapters": "You can use the buttons below to skip chapters at any time or to restart a chapter if you get stuck. Let's begin! **Click '{next}' to continue.**"
+                "mouse": "You can use any input device to edit the map, but this walkthrough assumes you have a mouse with left and right buttons. **If you want to attach a mouse, do so now, then click OK.**",
+                "leftclick": "When this tutorial asks you to click or double-click, we mean with the left button. On a trackpad it might be a single-click or single-finger tap. **Left-click {num} times.**",
+                "rightclick": "Sometimes we'll also ask you to right-click. This might be the same as control-click, or two-finger tap on a trackpad. Your keyboard might even have a 'menu' key that works like right-click. **Right-click {num} times.**",
+                "chapters": "So far, so good! You can use the buttons below to skip chapters at any time or to restart a chapter if you get stuck. Let's begin! **Click '{next}' to continue.**"
            },
            "navigation": {
                "title": "Navigation",
@@ -126,6 +126,13 @@ export function uiCurtain() {
                tooltipArrow = 5,
                side, pos;

+
+            // hack: this will have bottom placement,
+            // so need to reserve extra space for the tooltip illustration.
+            if (options.tooltipClass === 'intro-mouse') {
+                tip.height += 80;
+            }
+
            // trim box dimensions to just the portion that fits in the window..
            if (tooltipBox.top + tooltipBox.height > h) {
                tooltipBox.height -= (tooltipBox.top + tooltipBox.height - h);
@@ -4,8 +4,8 @@ import { utilRebind } from '../../util/rebind';


 export function uiIntroWelcome(context, reveal) {
-    var dispatch = d3.dispatch('done');
-
+    var dispatch = d3.dispatch('done'),
+        listener = clickListener();

    var chapter = {
        title: 'intro.welcome.title'
@@ -30,10 +30,101 @@ export function uiIntroWelcome(context, reveal) {
    function words() {
        reveal('.intro-nav-wrap .chapter-welcome',
            t('intro.welcome.words'),
-            { buttonText: t('intro.ok'), buttonCallback: chapters }
+            { buttonText: t('intro.ok'), buttonCallback: mouse }
        );
    }

+
+    function mouse() {
+        reveal('.intro-nav-wrap .chapter-welcome',
+            t('intro.welcome.mouse'),
+            { buttonText: t('intro.ok'), buttonCallback: leftClick }
+        );
+    }
+
+
+    function leftClick() {
+        var counter = 0,
+            times = 5;
+
+        var tooltip = reveal('.intro-nav-wrap .chapter-welcome',
+            t('intro.welcome.leftclick', { num: times }),
+            { tooltipClass: 'intro-mouse' }
+        );
+
+        tooltip.selectAll('.tooltip-inner')
+            .insert('svg', 'span')
+            .attr('class', 'tooltip-illustration')
+            .append('use')
+            .attr('xlink:href', '#walkthrough-mouse');
+
+        tooltip
+            .append('div')
+            .attr('class', 'counter');
+
+        tooltip.call(listener);
+
+        listener.on('click', function(which) {
+            if (which === 'left') {
+                d3.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,
+            times = 5;
+
+        var tooltip = reveal('.intro-nav-wrap .chapter-welcome',
+            t('intro.welcome.rightclick', { num: times }),
+            { tooltipClass: 'intro-mouse' }
+        );
+
+        tooltip.selectAll('.tooltip-inner')
+            .insert('svg', 'span')
+            .attr('class', 'tooltip-illustration')
+            .append('use')
+            .attr('xlink:href', '#walkthrough-mouse');
+
+        tooltip
+            .append('div')
+            .attr('class', 'counter');
+
+        tooltip.call(listener);
+
+        listener.on('click', function(which) {
+            if (which === 'right') {
+                d3.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',
@@ -48,6 +139,7 @@ export function uiIntroWelcome(context, reveal) {


    chapter.exit = function() {
+        listener.off();
    };


@@ -59,3 +151,104 @@ export function uiIntroWelcome(context, reveal) {

    return utilRebind(chapter, dispatch, 'on');
 }
+
+
+
+function clickListener() {
+    var dispatch = d3.dispatch('click'),
+        minTime = 120,
+        tooltip = d3.select(null),
+        down = {};
+
+
+    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,
+                startTime = down.menu || endTime,
+                delay = (endTime - startTime < minTime) ? minTime : 0;
+
+            window.setTimeout(function() { tooltip.classed('rightclick', false); }, delay);
+            dispatch.call('click', this, 'right');
+            down.menu = undefined;
+        }
+    }
+
+
+    function mousedown() {
+        if (d3.event.button === 0 && !d3.event.ctrlKey) {
+            tooltip.classed('leftclick', true);
+        } else if (d3.event.button === 2) {
+            tooltip.classed('rightclick', true);
+        }
+        down[d3.event.button] = d3.event.timeStamp;
+    }
+
+
+    function mouseup() {
+        var endTime = d3.event.timeStamp,
+            startTime = down[d3.event.button] || endTime,
+            delay = (endTime - startTime < minTime) ? minTime : 0;
+
+        if (d3.event.button === 0 && !d3.event.ctrlKey) {
+            window.setTimeout(function() { tooltip.classed('leftclick', false); }, delay);
+            dispatch.call('click', this, 'left');
+        } else if (d3.event.button === 2) {
+            window.setTimeout(function() { tooltip.classed('rightclick', false); }, delay);
+            dispatch.call('click', this, 'right');
+        }
+        down[d3.event.button] = undefined;
+    }
+
+
+    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('mousedown.intro', mousedown)
+            .on('mouseup.intro', mouseup)
+            .on('contextmenu.intro', contextmenu);
+    };
+
+
+    behavior.off = function() {
+        d3.select(window)
+            .on('keydown.intro', null)
+            .on('keyup.intro', null)
+            .on('mousedown.intro', null)
+            .on('mouseup.intro', null)
+            .on('contextmenu.intro', null);
+
+        tooltip
+            .classed('leftclick', false)
+            .classed('rightclick', false);
+    };
+
+    return utilRebind(behavior, dispatch, 'on');
+}
+
@@ -402,5 +402,11 @@
    "poi-images":               { "viewBox": "0 320 200 80" },
    "landuse-images":           { "viewBox": "0 400 200 80" },
    "feature-images":           { "viewBox": "0 480 200 80" },
-    "building-images":          { "viewBox": "700 480 200 80" }
+    "building-images":          { "viewBox": "700 480 200 80" },
+
+    "walkthrough-mouse":        { "viewBox": "400 411 25 43" },
+
+    "walkthrough-mouse-shape":  { "fill": "#000000" },
+    "walkthrough-mouse-left":   { "fill": "inherit" },
+    "walkthrough-mouse-right":  { "fill": "currentColor" }
 }
@@ -194,6 +194,11 @@
    <g id="logo-osm">
      <path d="M204,465 L211.812,485.5 L204,506 L211.812,526.531 L204,547.031 L208.812,548.875 L234.844,522.812 L239.531,523.531 L245.219,517.844 C241.87,513.964 239.339,509.332 237.969,504.219 L240.656,502.062 C240.199,499.939 239.938,497.726 239.938,495.469 C239.938,484.191 245.95,474.277 254.938,468.781 L245.031,465 L224.5,472.812 L204,465 z M271.094,469.312 C256.734,469.312 245.094,480.953 245.094,495.312 C245.094,509.672 256.734,521.312 271.094,521.312 C285.453,521.312 297.094,509.672 297.094,495.312 C297.094,480.953 285.453,469.312 271.094,469.312 z M291.156,519.469 C285.735,523.987 278.776,526.719 271.188,526.719 C268.93,526.719 266.717,526.458 264.594,526 L262.438,528.656 C257.582,527.355 253.131,525.067 249.375,521.969 L243.5,527.844 L244.219,532.188 L222.406,554.031 L224.5,554.844 L245.031,547.031 L265.531,554.844 L286.031,547.031 L293.844,526.531 L291.156,519.469 z" fill="#7092FF" id="logo-osm-shape"/>
    </g>
+    <g id="walkthrough-mouse">
+      <path d="M412.5,412 L412.5,428 L425,428 L425,424.5 C424.886,417.43 419.385,412.348 412.5,412 z" fill="#7092FF" id="walkthrough-mouse-right"/>
+      <path d="M412.5,411 L412.5,427 L400,427 L400,423.5 C400.114,416.43 405.615,411.348 412.5,411 z" fill="#7092FF" id="walkthrough-mouse-left"/>
+      <path d="M412.5,411 C419.404,411 425,416.596 425,423.5 L425,441.5 C425,448.404 419.404,454 412.5,454 C405.596,454 400,448.404 400,441.5 L400,423.5 C400,416.596 405.596,411 412.5,411 z M402,428 L402,441.5 C402,447.299 406.701,452 412.5,452 C418.299,452 423,447.299 423,441.5 L423,428 L402,428 z M413.573,413.054 L413.5,413.051 L413.5,426 L423,426 L423,423.5 C422.823,417.619 419.076,414.176 413.573,413.054 z M402,426 L411.5,426 L411.5,413.051 C405.988,413.815 402.279,417.971 402,423.5 L402,426 z" fill="#000000" id="walkthrough-mouse-shape"/>
+    </g>
    <g id="logo-google">
      <path d="M333.5,411 C332.115,411 331,412.115 331,413.5 L331,451 C331,452.385 332.115,453.5 333.5,453.5 L368.5,453.5 C369.885,453.5 371,452.385 371,451 L371,413.5 C371,412.115 369.885,411 368.5,411 L333.5,411 z M345.922,419.953 L353.656,419.953 L351.922,421.219 L349.469,421.219 C351.095,421.844 351.953,423.727 351.953,425.672 C351.953,427.306 351.06,428.72 349.781,429.719 C348.534,430.693 348.297,431.093 348.297,431.922 C348.297,432.629 349.629,433.833 350.328,434.328 C352.371,435.773 353.031,437.12 353.031,439.359 C353.031,442.152 350.333,444.922 345.438,444.922 C341.144,444.922 337.516,443.183 337.516,440.391 C337.516,437.555 340.816,434.812 345.109,434.812 L346.453,434.812 C345.866,434.241 345.406,433.536 345.406,432.672 C345.406,432.159 345.568,431.657 345.797,431.219 C345.564,431.236 345.324,431.25 345.078,431.25 C341.551,431.25 339.188,428.734 339.188,425.625 C339.188,422.583 342.455,419.953 345.922,419.953 z M360.5,420.5 L362,420.5 L362,425 L366.5,425 L366.5,426.5 L362,426.5 L362,431 L360.5,431 L360.5,426.5 L356,426.5 L356,425 L360.5,425 L360.5,420.5 z M344.594,421.062 C342.807,421.243 341.647,423.156 341.969,425.609 C342.312,428.225 344.211,430.394 346.203,430.453 C346.231,430.454 346.253,430.453 346.281,430.453 C348.226,430.453 349.526,428.408 349.187,425.828 C348.843,423.212 346.945,421.122 344.953,421.062 C344.829,421.059 344.713,421.051 344.594,421.062 z M345.938,435.531 C342.97,435.499 340.312,437.351 340.312,439.562 C340.312,441.819 342.454,443.688 345.422,443.688 C349.594,443.688 351.047,441.929 351.047,439.672 C351.047,439.4 351.014,439.134 350.953,438.875 C350.627,437.598 349.471,436.964 347.859,435.844 C347.273,435.654 346.63,435.538 345.938,435.531 z" fill="#7092FF" id="logo-google-shape"/>
    </g>