Highcharts & jQuery: add a mark by clicking with Shift key pressed, then process on release

Question

I am working with Meteor (means jQuery ok) and Highcharts.

For data analysis purposes, users need to be able to set markers between two initial markers by clicking on the chart. I want them to be able do that as long as shift key is hold down. Here the algo:

When user click on the chart,
__ if it is the first marker, then add a opening flag;
__ if shift key is hold, then
__ __ **while** Shift key is hold, add a cutting flag;
>>>>    when Shift key is up, *process data*, **<<<< BUT WITHOUT CLICKING!**
__ add a closing flag and *process data*.

The WHITOUT CLICKING is killing me as it means that a keyup event handler should wrap the click event. I don't know how, in the Highcharts events context, bind those two events.

Here a jsFiddle to illustrate: https://jsfiddle.net/hsolatges/65ydL2o4/4/

Answer 1

You could try this:

• you create an event to catch keydown. If it is shift key code, you set a reactive variable to true. Don't use a session variable, get reactive dict if you can. (you add var pageSession = new ReactiveDict(); at the beginning of your js file)
• you create an event to catch keyup. If it is shift key code, you set the reactive var to false
• you create a click event handler on your chart and you check the state of you reactive variable to do your stuff.

here is an example of the keydown event:

Template.YourTemplate.events({
"keydown .yourGraph": function(e, t) {
    if (e.which===16) {
        pageSession.set("ShiftPressed", true);  
    }
 }   
});