Graph: Display course page on double click about epfl-interactive-coursebook

[valentinoli]

After some consideration, it is not the best user experience to use the keyboard to switch between the two functions, like the CTRL key #8

So we should consider implementing this differently for instance by adding a link to the course on hover which the user can click

[valentinoli]

We decided to implement it via double click

[valentinoli]

The double click doesn't work on mobile. So we'll have to find a work around for that. I think I might try adding a link to the tooltip so that the user can hover over it and click the link to view the course.

[valentinoli]

I discovered that the click event is not fired if the user drags the node. So we can actually use the click event to listen for course selection on the graph!

I had to implement a custom "View course" button for touch interfaces. The following code detects a touch interface:

// Check for touch interface
// We want to offer a friendly experience to touch device users
const onTouchStart = () => {
  if (this.touchInterface) {
	document.removeEventListener("touchstart", onTouchStart);
  }
  this.touchInterface = true;
};

document.addEventListener("touchstart", onTouchStart);