Make sure user can left and right click

modules/ui/curtain.js

@@ -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);

modules/ui/intro/welcome.js

@@ -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');
+}
+