e2jk/vallenato.fr

Easier way to switch to the next or previous part

Opened this issue · 1 comments

e2jk commented

The shortcuts n and p work fine when you have a keyboard, but are not usable on mobile devices.
Would it be possible to use swipe movements to pass to the next or previous tutorial parts?

e2jk commented

Struggling because of the YouTube iframe, maybe only support for local player?
Interesting bits found here: https://css-tricks.com/simple-swipe-with-vanilla-javascript/

let x0 = null;

function unify(e) {
  "use strict";
  return e.changedTouches ? e.changedTouches[0] : e;
};

function lock(e) {
  "use strict";
  x0 = unify(e).clientX;
};

function move(e) {
  "use strict";
  if(x0 || x0 === 0) {
    let dx = unify(e).clientX - x0, s = Math.sign(dx);

    console.log("s:" + s + " dx:" + dx + " absdx:" + dx*s);
    if (dx*s > 50) {
      // Lateral move must be at least 50px to qualify as right or left swipe
      if(s > 0){
        console.log("swipe right");
      } else {
        console.log("swipe left");
      }
    } else {
      console.log("movement doesn't qualify as right or left swipe");
    }
    x0 = null;
  }
};

$("#tutorial_page").on('mousedown', lock);
$("#tutorial_page").on('touchstart', lock);
// $("#tutorial_page").on('touchmove', e => { e.preventDefault() });
$("#tutorial_page").on('mouseup', move);
$("#tutorial_page").on('touchend', move);

I also played with the idea of using CSS pointer-events: none; to block the video of getting the click events, using an invisible div in front that would relay play/pause events, but that seems not necessarily as a good idea ;)